Webの表現を広げるWebGLのソースコード解析

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. Webの表現を広げるWebGLのソースコード解析

Webの表現を広げるWebGLのソースコード解析

Webの表現を広げるWebGLのソースコード解析

ここ数年のWebで、インタラクティブな表現として普及してきたWebGL。これまで制作に取り入れたことがなく、なんとなくでも理解したいと思い、今回色々と調べてみたので忘備録も兼ねてご紹介したいと思います。

WebGLとは

以下、Wikipediaの参照です。

WebGL(ウェブジーエル)は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。非営利団体のKhronos Groupで管理されている。WebGL 1.0は、ブラウザ上で利用できるOpenGL ES 2.0の派生規格であるが、細部に違いがある[1]。WebGL 2.0は、ブラウザ上で利用できるOpenGL ES 3.0の派生規格であるが、細部に違いがある[2]。WebGLはHTML5のcanvas要素に描画する。

Webサイト上に3Dグラフィックの描画を表示するための仕様です。HTMLのコードに「canvas」要素を追加し、Javascriptで描画内容をコーディングします。

マウスの動きに追従した動きをつけたり、クリックやキーボードの入力イベントをアニメーションのトリガーに出来たりと、Webならではのインタラクティブな表現が可能でクリエイティブなWebサイトなどで広く使われています。

WebGLのコンテンツはCodepenなどでも多数投稿されている

・画像が「Creative」の文字でトリミングしており、マウスカーソルの動きに合わせて画像が伸び縮みする

・リンクエリアで画像がマウスカーソルに追従。ホバー時の画像の切り替わりや見出し文字の変化もWebGLならではの独特なアニメーション。

上記のようなインタラクティブな動きはJavascriptやCSSだけでは表現が不可能なものですが、WebGLを使うことで実現可能となります。

WebGLのソースコードを実際に読み解いてみる

WebGLのソースコードを自分なりに分析してみました。
はじめに、記載内容については正確な知識ではなく認識の誤りがあるかもしれませんので、それについてご了承の上お読みいただけると幸いです。

今回参考にさせていただいたデモは「Codrops」の「Creative WebGL Image Transitions」のDemo5を題材にしています。
CodropsはWebGLを始め、Webのインタラクティブな表現のデモを多く公開している素敵サイトです。嬉しいことにソースコードも一緒に公開してくれています。

また今回のデモは主に「three.js」のライブラリを利用して描画のソースコードを書いています。
「three.js」とは、WebGLで3Dコンテンツを描画するためのスタンダードなライブラリです。WebGLをライブラリなしでソースコードを書くのは相応の知識がないと難しく、上級者でない限り「three.js」で作っていくのが無難だと思われます。

ファイルの構成

Root
┣ css … ヘッダーやリンクメニューのレイアウト
┣ img  … スライド画像
┣ js
┃ ┣ three.js … 3D描画のライブラリ
┃ ┣ dat-gui.js … Javascriptの変数をパラメーターとしてブラウザで操作できるGUIライブラリ
┃ ┣ gsap.js … トゥイーン(アンメーション)ライブラリ
┃ ┣ sketch.js … スライド画像のフェードクラス
┃ ┗ demo5.js … Demo5用のフェードクラスのインスタンス
┗ index5.html


今回メインとなるファイルは「sketch.js」と「demo5.js」です。

ちなみに「dat-gui.js」はデモページの右上に表示されている各種パラメータのコントローラUIを作成できるGUIライブラリです。sketchクラスのプロパティなどをパラメーターとして渡して値を変えることで、スライド画像のフェードに動きの変化をつけられます。

sketch.js

まず、「sketch.js」はスライド画像のフェードをWebGLでコンテンツ描画するためのプロパティやメソッドを用意しているクラスです。
このクラスでは以下のような機能が実装されています。

  • HTMLにcanvas要素を追加
  • Three.jsでシーンやカメラ、スライド画像などの描画や座標情報を設定
  • dat-guiで操作できるパラメータの設定
  • クリックイベント(クリックでフェードのイベントを発火)
  • ウィンドウのリサイズ時の処理
  • 3Dコンテンツの描画(レンダリング)
constructor(初期化関数)

コンストラクタでは、WebGLのシーンやカメラ、レンダラーのインスタンスが作成されます。
また、キャンバス要素を「#slider」の要素に挿入します。

頂点シェーダー(this.vertex)には、3D空間の中で描画するオブジェクトの頂点の座標位置を格納しています。座標は(x,y,z)の3次元で保持されます。
フラグメントシェーダー(this.fragment)は頂点シェーダに格納された頂点位置の情報にピクセルの色情報を決定します。

コンストラクタの最後に「this.initial」メソッドが実行され、コールバックでスライドアニメーションのループ処理が実行されます。
this.initialメソッドでは、「#slider」要素の「data-images」属性で指定された画像をthis.texturesにthree.jsのTextureLoaderメソッドでテクスチャ画像としてロードした上で格納します。ここでは、画像のロードが完了される前に以降の処理が実行されないように、Promiseで同期処理にしています。

settings

settingsメソッドはdat-guiのパラメータを設定しページに追加します。
パラメーターのデータはdemo5.jsのSketchクラスのインスタンス作成時に[uniforms]オブジェクトで渡されます。オブジェクトのキーがパラメータ名で値の[min]と[max]が下限と上限になります。

addObjects

addObjectsメソッドではスライドさせる画像のテクスチャをシェーダーマテリアル(THREE.ShaderMaterial)で描画し、シーンに追加します。
描画するためのパラメータはユニフォーム変数(uniforms)としてシェーダーに渡されます。

THREE.PlaneGeometryで平面の図形を描画し、そこにシェーダーマテリアルで作成されたテクスチャ画像を貼り付けるようなイメージです。

フェードの具体的な描画処理はフラグメントシェーダーで実装されています。「demo5.js」ファイルのSketchインスタンス作成時に渡される[fragment]の処理部分です。

next

nextメソッドはスライド時のアニメーションの制御を実装しています。クリックイベントで発火し、フェードで切り替えるスライド画像をaddObjectメソッドで作成されたthis.materialプロパティのtexture1とtexture2にセットします。

アニメーションのイージングは「gsap.js」のTimelineMaxクラスが利用されています。

render

レンダーメソッドはthree.jsで作成したシーンやカメラ、オブジェクトなど3D空間に描画された内容をTHREE.WebGLRenderer()でキャンバス上に描画します。

demo5.js

demo5.jsではsketchクラスをインスタンスを作成し、フラグメントシェーダーでフェードの描画処理を記述しています。他のデモなど全て、インスタンスに渡すパラメータの違いや、フラグメントシェーダーの内容で描画内容のバリエーションを作っています。

まとめ

今回はWebGLで作成されたコンテンツの処理の流れを分析してみました。

THREE.ShaderMaterial頂点・フラグメントシェーダーの実際の処理の部分はもっとWebGLの知識がないので、もう少し勉強が必要そうでした。

WebGLについても、今後もブログでご紹介していけたらと思います。

前後の記事

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら