はじめに
チルトするカードはそれだけでも動きが出ますが、少し物足りなく見えることがあります。そんなときは、傾きに合わせて光の位置も一緒に変えると、表面の反応が加わって見え方に少し奥行きが出ます。
このサンプルでは、本物の WebGL を使わずに、発光とノイズの見せ方でシェーダーっぽい空気感に寄せています。UI として無理が出にくい範囲に抑えつつ、少しだけリッチに見せたいときに取り入れやすい方法です。
組み合わせのポイント
- 回転だけで終わらせず、光の位置も一緒に動かして面の反応を見せる
- ノイズやグリッドは主役にせず、表面情報として薄く重ねる
- チルト量は控えめにして、カードとして読める範囲を保つ
- hover 中の変化は気持ちよく、hover 解除時はすっと元に戻して操作感を軽くする
- UI で使う場合は、文字やボタンの視認性を最後まで優先する
まとめ
WebGL 風の印象は、必ずしも本格的な描画処理がないと出せないわけではありません。面の傾き、光の追従、表面の情報量を丁寧に重ねるだけでも、それらしい質感には寄せていけます。少しリッチに見せたいけれど実装は重くしたくない場面で、検討しやすいアプローチです。