最新のWebGLとモーションエンジンで作る、29のライブ実験。
すべてブラウザ上でリアルタイムに動作します。
AMIX によるデモンストレーション・アーカイブ。WebGL ライブラリ Three.js と、モーションエンジン Anime.js の最新機能を、実際にブラウザ上で動作するライブ作品として収録しています。
パーティクル、GLSL シェーダー、PBR ライティング、ポイントクラウドのモーフィング、スクロール連動、SVG モーフ、タイポグラフィ演出、タイムライン・スタッガー、インタラクティブ物理、ポストプロセス・グリッチ、大気散乱の空、立体トランスフォーム、歩く蜘蛛、群泳する魚、リアルタイムASCII、GPGPUの流れ場、追う捕食者と逃げる群れ、箸で集めるラーメンの油、GPU 流体の墨、反応拡散のパターン、SDF レイマーチング、布の物理、L システムの植物、ガラスの分光、ボロノイ破砕、生成ポスター、リアルタイム時計、宇宙のドッグファイト、地形と水の環境サンドボックス。計29本の各ページ下部のパネルで、解説を読みながらパラメーターを操作できます。
各ページは独立して動作する単体デモです。
クリックでフルスクリーン体験へ。
Three.js は、ブラウザの WebGL を扱いやすくする 3D ライブラリです。本ギャラリーでは、GLSL シェーダーだけで描く 流動ノイズ、PBR (物理ベースレンダリング) による 金属マテリアルのライティング、数千点の頂点を補間する パーティクル・モーフィング、そしてモデルデータを一切使わずコードだけで形を生成する プロシージャルな蜘蛛 や 群泳する魚の群れ まで、WebGL でできる表現の幅を、実際にブラウザ上で動く作品として確かめられます。
Anime.js は、時間とイージングを設計するための軽量モーションエンジンです。スクロール連動アニメーション、文字を一字ずつ分解して動かす タイポグラフィ演出、グリッドを時間差で動かす タイムライン・スタッガー、SVG の ライン描画・パスモーフ など、UI やブランディングにそのまま応用できるモーションの基礎を集めています。
これらはエンジニアリングのためのサンプルであると同時に、グラフィックデザインの視点から「技術をどう魅力的に見せるか」を主題にした作品集でもあります。各デモはページ下部のパネルで仕組みを解説し、パラメーターをその場で操作可能。コードに詳しくなくても、動かしながら WebGL とモーション表現の面白さに触れられる構成です。