OGLを使って、マウスカーソルに連動したディストーションエフェクトを生成する方法
デモページ ソースダウンロード 今回はWebGLのフレームワークである「OGL」を使用して、マウスの位置と速度に連...
- IxD/インタラクションデザイン
- WebGL
- エフェクト
WebGLは、インターネット上のブラウザで3Dコンテンツを表示させるための標準仕様です。
2010年頃からインターネットでは3Dコンテンツの人気が高まり、その次代から活用されています。
そもそもWebGLとはOpenGLから派生した仕様であり、JavaScriptからGPU/CPU内蔵グラフィックスの演算・描画機能を呼び出して3Dを表現します。元々OpenGLはネイティブアプリからGPUへのアクセスを可能としていましたが、WebGLではブラウザからGPUへとアクセスします。
HTML5が主流となっている現在の環境下では、モバイルサイトからも3Dコンテンツを見る機会も多くなってきています。この技術の登場によりWeb上で動作する3Dゲームなどの開発が容易となり、ユーザーが目にする機会が自ずと増えていきました。
そんな開発にかかる労力ですが、WebGLの代表的なライブラリとして「Three.js」が挙げられます。これを利用するこれはJavaScriptによってWebGLを簡単に表現できるライブラリで、これまでの開発コストが大幅にダウンしました。
・Three.js
・ライブラリ
・JavaScript