のぞみWebGLThree30WebGLはウェブページに3D表現を組み込むための技術です。そのWebGLを扱いやすくしたJSライブラリの「Three.js」。Theee.jsとシェーダー言語GLSLを組み合わせてプリンが揺れるデモを作成しました。本記事では、Three.jsでシェーダー言語を利用する手順を解説します。Languageの略でその名の通り、OpenGL(WebGL)で使用できるシェーディング言語です。WebGLではライブラリを使用しない場合は、このシェーディング言語を使用してシェーダー(3D描画のための一連の計算セット)を自力で作成しなければなりません。WebGLのシェーダーは2種類あり、バーテックスシェーダーでは頂点の情報を画面上に反映し、フラグメントシェーダーではピクセル単位での描画を行います。今回はバーテックスシェーダーで頂点の位置をずらしてプリンの揺れを表現します。Three.jsはJavaScriptで扱える3DのJavaScriptライブラリです。documentation」にあり、説明自体は英語ですがソース部分をコピーペーストするだけで簡単に3D空間が作成できます。デモ※画面内をクリックすると、プリンが揺れます別ウインドウでデモを開くソースコードを確認するシェーダーのロードシェーダーはテキストで記述するためJSに直接記入することが可能です。ファイルが分かれているとソースが綺麗に保てるのでメインのJavaScriptファイルとは別にしています。Loader」というライブラリを使用してみました。LoaderはjQueryを必要とするのでjQueryも使用しています。);}バーテックスシェーダーバーテックスシェーダーでは3D空間上に配置された頂点が画面上のどの位置にあるかを計算します。このシェーダー上では、頂点の情報を参照・変更することが可能です。プリンを揺らす前の計算バーテックスシェーダーの必要最低限の計算は以下となります。頂点位置(position)をモデル行列(modelViewMatrix)でワールド座標に変換し、ビュー行列(projectionMatrix)でスクリーン座標に変換します。この計算を基準としてプリンを揺らす処理を記述します。頂点位置に当たるpositionを調整します。時間の経過によって揺れを表現しますが、シェーダー内ではコンテンツの経過時間のような外部の変数を保持することができないため、各フレーム毎にその値を送る必要があります。外部から取り込むシェーダー内の共通の値はuniformという識別子をつけてThree.js経由で値を送ります。今回はframe(時間の経過)、modelHeight(3Dモデルの高さ)、swingVec(揺れの方向)、swingStrength(揺れの大きさ)をThree.js経由で送っています。上記図を見ながら揺れの計算を説明します。modelHeight/2(3Dモデルの高さの半分)」分ずらします。頂点位置の情報を0〜1.0の値へ合わせると後ほど計算しやすいので「modelHeihgt」分で割ります。揺れの大きさを決めます。swingStrengthに1.で決めた高さの0〜1.0で合わせた値で掛けます。すると、底部分が0の為どんな値を掛けても0のまま固定され、上部になるほど揺れが大きくなるといった動きを表現できます。揺れの早さの指定を行っています。sin()関数を使用し、波の形で揺れの形を指定しています。frameの値が早く大きくなるほど揺れの振動が早くなります。具体的にはsin()の周期が-1π〜1πで1周期なので2π分時間が経つと揺れが一番上まで到達します。図の3では1π分上に移動しています。3Dモデル内の揺れの個数の計算をしています。揺れの個数とは3Dモデル内で何度振動があるかのことです。この値をsin()関数に入れているので波の形はsin(0〜2π)で表せられるカーブの形になっています。waveNumを1にし最後に掛け合わせるstrengthの値を10と大きめに設定すると下記図5のような形になります。waveNumは大きめの値を入れるとぐにゃぐにゃと揺れて楽しいです。最後に揺れの方向を決定します。swingVecというvec3形式の値を今までの計算で得た値に掛けあわせます。この方向を変えると揺れる形も変わっていきます。デモで一番最初に落ちてくるときのswingVecは縦方向に揺らすため{x:0,y:1,z:0}になっています。1.0);}3Dモデルにシェーダーを適用する3DモデルへはShaderMaterialというマテリアルを指定することで自作したシェーダーを適用することができます。Three.jsのShaderMaterial経由でシェーダーのテキスト、uniform等を指定します。});メッシュ作成時にシェーダーマテリアルを指定します。cylinder;}おわりに今回の記事ではバーテックスシェーダーで3Dモデルの各頂点の位置をずらすことで揺れを表現してみました。この方法を用いると3Dモデルをさまざまな形に変形させることができます。平成28年7月6日に内容をメンテナンスしています。のぞみインタラクティブデベロッパー。好きな生き物はハムスター、好きな食べ物は豚汁です。ツールは使うより作りたい派。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。