( am-club-logo.html )
Media unavailableInformation
- Date
- 2024-04
- Type
- HTML
- Tech
- Vite, TypeScript, Three.js, WebGL, GLSL
Links
Description
午前中クラブのロゴをブラウザ上でリアルタイムに変形・発光・揺らぎとして表示するグラフィックシステム。中央に配置したロゴ画像を 2048px のテクスチャに描画し、Three.js と GLSL シェーダでノイズをかけながら、静止したロゴを常に変化する像として再生成する。 表現面では、Perlin、Voronoi、マウス位置に応じた Circle ノイズを変位の入力として使い、ディスプレイスメント、ズーム、ブルーム、色収差、フリッカーを組み合わせている。ロゴの輪郭が崩れすぎず、発光やズレによって電子的な残像を持つように、元画像と処理後のフレームを mix する設計になっている。 実装面では、Three.js の WebGLRenderTarget を read/write で入れ替えるオフスクリーンレンダリング構成を採用している。画面右上にはパラメータ調整用のコントロールパネルを用意し、ノイズ種別、スケール、速度、変位量、ブルーム、色収差、フリッカー周期をライブに操作できる。最終表示はフルスクリーンの canvas に描画され、ロゴ生成のための小さなデザインシステム/チューニングツールとして機能する。