超滑らか！「Fluid Glass」デモがスマホで驚きのパフォーマンス
引用元：https://news.ycombinator.com/item?id=45422147
今年のWWDCに向けてのカウントダウンタイマーみたいに見えるね。すごく滑らかだよ。
ソースコードはこちらだよ: https://github.com/chiuhans111/fluidglass
リキッドグラスの話は置いといて、スマホでこんなに滑らかに動くなんて本当に感動したよ。
屈折処理はみんなが思ってるほど重くないよ。とはいえ、このデモはかなり低解像度で動いてるね。たぶんdevicePixelRatioを考慮してないからだろうね。俺のスマホだと3.5だから、鮮明なUIに必要なピクセル数の12分の1以下だよ。
ヒントだよ: ブラウザの表示倍率を50%にすると、デモの解像度が2倍になるよ。
スマホは画面サイズが小さいってのもあるね。ブラウザのウィンドウサイズを小さくするとFPSが上がるよ。全画面モードだと俺の環境では少しカクつくんだ。
言いたいことはわかるんだけど、「スマホで」ってのはもう性能ベンチマークの有効な基準じゃないね。今のスマホとGPUはとんでもなくパワフルだよ。20年前だってMFLOPSがはるかに低いGPUで3Dアプリを滑らかに動かしてたんだ。このガラスの目覚まし時計よりはるかに複雑なアプリやゲームが動いてたよ。10年前のノートPCでFluid Glassを動かしてカーソルを動かすと、10 FPS以下になるんだ。いつになったら「速い」ソフトウェアへの期待値を調整して、Wirthの法則に盲目的に従うのをやめるんだろうね？
これ、かなりの電力を使うね。4K画面で時計を動かしたら、俺のM2 MacBook AirのCPU温度が10秒で10°C、50秒で20°Cも上がったよ。
うん、俺もスマホがめちゃくちゃ熱くなると思ってたけど、ならなかったな。すごいね！
スマホでテキストと画像の多いページをスクロールすると、カクカクして困るんだよ。3Dグラフィックや4K動画はスムーズに動くのにね。テキストと画像をうまく扱う技術って、まだないのかな？
2Dは3Dよりレンダリングにコストがかかるんだよ。動画はハードウェアで高速処理されるからね。
「テキストと画像をスムーズに扱えない」ってのは違うよ。複雑なPDFや電子書籍はサクサク動くしね。Webが重いのは広告やJavaScript、WebAssembly、async calls（例えばアナリティクス）のせいだよ。これは技術の問題じゃなくて、広告とか経済との組み合わせで起きる状況なんだ。Wirth’s Lawとかもあるけど、それよりWikipediaを攻撃する右翼がいるから気をつけてね。
Liquid Glassってコンセプトはいいけど、実製品ではマジでやめてほしいな。視認性が悪いOSがもうあるってだけでも最悪なのにさ。
Liquid Glassが悪評なのは理解できないな。Appleがこれを選んだのは、各アプリがバラバラのUI言語で、ユーザーがいちいち覚えなきゃいけないって問題があったからだよ。統一UIには色の問題があったけど、Appleは透明要素を水やガラスみたいに「浮かせる」ことで、その視認性問題を美しく解決したんだ。
「UI言語がバラバラ」ってのはLiquid Glassが初めてじゃないよ。Material Designとか昔からあるしね。Appleもガイドライン持ってたし。光沢エフェクトなんてUIの一貫性には不要で、古いデバイスを遅くしてバッテリー食うだけ。あと、iOS 26はバグだらけだよ。「透明度を下げる」設定とダークモードを組み合わせると、ファイルアプリの文字が読めなくなるバグとか、マジでひどい。
俺はLiquid Glassを「悪いデザイン」なんて言ってないし、個人的な意見でもないよ。でも、iOSとmacOSの今の実装が、多くの人のアクセシビリティを大幅に悪化させているのは紛れもない事実なんだ。これはデザインの好き嫌いじゃなくて、本当に問題なんだよ。
macOSってアクセシビリティ設定がめちゃくちゃ充実してるじゃん。Liquid Glassエフェクトもオフにできるのに、文句言うのは変じゃない？
じゃあさ、アクセシビリティが後退しても、設定で切り替えられるならOKってこと？でも、その設定って機能が完全じゃないし、バグだらけで、アクセシビリティが必要な人のことなんて全然考えてないって、すでに他のとこで話してるじゃんか。
文字を読みにくくしたのは、次に「読みやすいデザイン」を大革命として売り出すためだよ。Appleはこうやって、人を引きつけたり、ニュースの話題になったりするような、何段階もの戦略を仕掛けてくるんだ。
世の中ってそんなに陰謀だらけじゃないよ。Liquid Glassのデザイナーたちは誇りを持ってて、v1.0でデザインシステムの一部が入らなかったのは残念がってるって話。デザインをわざと悪くして数年後に改善版を出すなんてデザイナーも会社もいないってば。
判読性って最初のバージョンから満たすべき条件だよね、最終目標じゃなくてさ。もし違うなら、『長年の努力の結晶！最高のデザイン！』って言う時に、彼らが何を指してるのかハッキリ言ってほしいよね。
『悪いデザインを意図的に作って後で改善版を出す会社はない』って？New Coke / Coke Classic、Windows Vista / Windows 7、Office 2007 / Office 2010とか、そういう例あるじゃん。
Windows VistaとWindows 7は同じくイマイチなデザインだったと思うよ。でも、バグ修正は後のバージョンで当たり前のことだよね。
あの製品に関わった人たちが、わざとダメな仕事をして、会社が意図的に大きなPRと売上を犠牲にして、数年後に挽回したって本気で思ってるの？
これって、Appleのコーディング面接の問題みたいだね？
これ、ビューポートを広くすると時計が横になるんだね。すげぇ良い！手を汚さずにオイルで遊んでるみたいで、ママに怒られることもないし、しかも時間まで教えてくれるんだから最高だよ。
あと、クリックしてドラッグもできるよ。
Linuxのデスクトップだと、マウスを乗せただけで動くよ。クリック＆ドラッグと動きは変わらないかな。
モバイルでスワイプバックのナビゲーションが上書きされるのがウザいね。
俺は意図的にスワイプナビしたことなんて一度もないのに、誤ってスワイプしちゃうことが多すぎるんだ。OSインストール時にその機能切ってない奴がいることに驚くわ。
もっとコメントを表示（1）
Androidだと両サイドで戻るジェスチャーになるのが唯一の異端だね。
これはデモだから上書きされても仕方ないけど、Operaの初期の頃からスワイプでナビゲートするのは俺にとって体で覚えた動きなんだ。デスクトップでもモバイルやタブレットでもボタンに手を伸ばすよりずっと楽だから、スワイプ操作の方が好きだな。
ガタカみたいなUXには全然魅力を感じなかったな。UIのプレ犯罪だろ。ボタンに手を伸ばすのが俺の筋肉の記憶なんだ。ボタンは”何が得られるか”がはっきりしてるから好きだし、ボタンなら色んなことができるしね。
自分で設定できるのはいいけど、ほとんどの人はこれで満足してるはずだよ。もしかして、怒りながらPDFを読んでる時間が多いとか？
それは多分、君が使わないからじゃないかな！俺は基本的にスワイプバックしか使わないよ。これはウェブページとiOSのナビゲーションスタックを揃える動きなんだ。
多くの変化と同じように、最初は嫌いでも慣れると、また変わった時に嫌になるもんだよね。
Androidでは問題なく動くよ。
Android/Chromeでは全然問題ないよ。もしかしてiPhone使ってるの？もしそうなら、そのイライラはAppleに向けるべきで、このデモの制作者じゃないと思うな。
AndroidのジェスチャーはFirefoxでも動くはずだし、「Chromeで動く」って言うのはやめようよ。Chromeオンリーの開発者が嫌いなんだ。GoogleがChromeやadblockerで独裁的になったり、Androidがアプリのサイドローディングを制限したりしてる現状を作った一因だからね。最低でもChromiumとFirefoxでテストすべきだよ。サイトを壊すようなReactコンポーネントには、バグレポートを送ってやろうぜ。
そもそもWebページがバックジェスチャーを止められるなんておかしいよ。あれはOSとブラウザの機能でしょ。もし動かないなら、OSかブラウザが悪いんだ。
不思議なんだけど、水滴が直線に集まる傾向があるね。シミュレーションのコードで、丸い水滴にならずに直線になるようにしてるのは何なんだろう？
僕の環境だと、しばらく放っておいたら点字パッドみたいに見えるよ。だから、僕の場合だとちゃんと水滴みたいに集まるね。
グリッドのエイリアシングだよ。
反応拡散系の創発パターンに似てるね。
作者のフルポートフォリオはこちらだよ。
https://chiuhans111.github.io/portfolio2020/dist/index.html
抽象的な背景が実はアナログ時計になってるんだね。良い工夫だ！
デモシーンって、意外なところで生きてるんだね！
スマホのスタイラスが画面に触れてなくても反応するの、超クール！まるで魔法みたい。
それって“マウスカーソルエミュレーション”って呼ばれる魔法じゃないの？
美しいデモだね。でも、これを良いUIだって思うIT企業が出てこないことを願うよ。
めっちゃ同感。Liquid Glass（Apple systems 26）の半透明感には、正直あんまりワクワクしないな。
まさにこれ書こうと思って来たんだ。にしても、デモはすごくいいね…
面白いね、これ読み込もうとしたらブラウザのタブがクラッシュしたよ！デスクトップ（9800X3D）で15秒くらい1fpsで動いた後、CPU使用率が100%に跳ね上がったんだ。デスクトップにはないAPIを使ってるのかな？
ずっと“Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels”って出てたよ。OpenGLに詳しい人なら分かるだろうけど、glReadPixels関数って、GPUからシステムメモリにフレームバッファのデータを移動させるから、パフォーマンスにめちゃくちゃ悪いんだよね。なんでこの関数を使ってるのか、それとも最適化が足りないだけなのか、よく分からないな。
これを窓に雨が降るスクリーンセーバーにできたら最高なのにな。
ビーズ効果がなんか変だね。表面張力が逆になってるみたい。
よくあるReactじゃなくてVueフレームワークで作られてるのが新鮮でいい感じだね。
実際はほとんどがプレーンなJSで、VueとSCSSはちょっとつけただけって感じ。これならVueもSCSSも使わない方が、もっと簡単で短く書けたんじゃないかな！
メインはWebGLだよ。Vueはほとんど何もしてないね。単なる静的なページでcanvasに描画してるだけだから、VueとかReactみたいなフレームワークは必要ないと思うよ。
もっとコメントを表示（2）
Vanilla JavaScript以外に、そもそも何かいるのかな？SPAフレームワークを使う必要性が全然見当たらないんだけど。
なんでVueなの？俺の経験だとReactの方がずっと良いよ。Vue 2は本当ひどくて、前の職場で選挙アプリを全部Reactに移植するのに苦労したんだから。
仕事でReact使ってたんだけど、Vueのマニュアルを見て、Reactなら想像できるものは何でも描けるけどVueじゃ無理だと感じたよ。Svelteの考え方は好きだけど、バンドルサイズのメリットは小さいアプリではそこまで重要じゃないし、大きいアプリならフレームワーク選択よりもっと大きな問題があるって思うね。
Vue 2からVue 3への移植を手伝ったけど、Vue 2とOptions APIは本当に大変だったな。Vue 3のComposition APIはすごく気に入ってるけど、正直SvelteやHTMXみたいな、もっとシンプルなフレームワークを学びたい気持ちが強いね。
Svelteが両方より良いって！(誰かこの続きをフレームワークXで頼む)
でも真面目な話、Vueのどんな不満がReactで解決されたのかすごく聞きたいんだ。だってReactってVueやSvelteより開発者体験もパフォーマンスもずっと悪い気がするからさ。
Vue 2は静的型付けのサポートがマジで悪かったんだよね。Vue 3で良くなったけどReactほどじゃない。TSXは特に良い。でも一番の問題は自動リアクティビティで、これが理解しにくくてスパゲッティコードになる。あと、オブジェクトがVueによって再帰的に汚染されて全部遅くなる問題もあったな。
Svelteは他のフレームワークよりずっと良いよ！Svelteも含まれてもいいんだろ？って感じだね。
これがVueとかReactフレームワークを使ってることにビックリだわ。ライブラリなしでWebGLとShaderだけで作られてると思ってたんだけどな。
ズームでリアルタイムに解像度が変わるから、アニメーションの速度も自由に変えられるのが超好き！意図してなくても面白いね！
すごく良いけど、読みにくくもあるね。それが目的じゃないのはわかるけどさ（AIに「これは絶対にスマホに搭載するな」って指示したみたいな感じだね）。
このウェブサイト、GPU使用率100%なのに10FPSも出てないんだけど。
HNが画像をサポートしてたらさ、「少年が自転車の車輪に棒を突っ込んでぶっ倒れる」ってミームでこのコメントに返信したかったんだけどな。それくらいぴったりだもん。
正直、それがHNの良いところだよ。ミームなしゾーン、このままでいてほしいな。それに、ミームを言葉で説明するのも同じくらい良いじゃん！
面白いことに、みんなスマホでこれ動かしてるみたいだね。HNのリンクってスマホでよく見られてるのかな？スマホはPCより新しいし、開発者は最新技術持ってるもんね。こういう技術デモだと、開発者は最新技術で開発して、古いデバイスのサポートは気にしない。本来なら古いマシンを使うユーザーも気遣うべきだけど、トップエンドのハードウェアを使う技術者向けのお披露目デモだと、こういうのは当然かも。（俺も古いLinuxとFirefoxのノートPCで統合グラフィックスだから、やっぱりカクカクしてるよ）
ブラウザのウィンドウサイズを小さくしたらFPSが上がるんだ。これがスマホだとFPSが高くなる理由かもね。
OS、ブラウザ、ハードウェアを言わないと、このコメントはあまり役に立たないよ。
これって画面解像度によると思うな。ブラウザのウィンドウサイズを小さくしたら、FPSが改善したよ。
どんなハードウェアで？僕のPixel 7aではちゃんと動くよ。たぶん、ただのイカしたピクセルシェーダーだろ。
2003年のCompaq PresarioでXPとInternet Explorerだと、なんで？冗談はさておき、僕のPixel 8 Proでも全然問題なく動くよ。
このサイトにはPixelユーザーが多いみたいだね（僕もだけど）。GrapheneOSの影響なのかな、それとも最近はみんなGoogleのハードウェアを好んでるだけ？
このデモを開いた時のFirefoxデスクトップ版でのCPUとGPUの使用率は、Chromeの2倍くらい高そうだよ。
僕のiPhone 16では良いパフォーマンスだけど、ノートパソコンのBraveだとひどいパフォーマンスなんだ？
これをロック画面にできたら最高なのになあ。
スマホのジャイロスコープに対応させて、デバイスを傾けたら水が流れていくようにできたらすごいだろうね！
それにしても、素晴らしい出来だよ。
