Three.jsでシェーダー言語を学ぶ 〜バッファーオブジェクト前編〜

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. Three.jsでシェーダー言語を学ぶ 〜バッファーオブジェクト前編〜

Three.jsでシェーダー言語を学ぶ 〜バッファーオブジェクト前編〜

Three.jsでシェーダー言語を学ぶ 〜バッファーオブジェクト前編〜

前回ブログで、WebGLを使ったスライドアニメーションの表現をご紹介しました。

https://www.aura-office.co.jp/blog/webgl1/

この時に紹介したスライドアニメーションもですが、やはりWebGLを使うならシェーダー言語をもっと知らなければいけないと感じ、今回から自身の学びも兼ねて、シェーダー言語の書き方をブログにしていきたいと思います。

シェーダーを書くにあたってWebGLを何もない状態から実装していくのはハードルが高すぎるので、難しいところはThree.jsに任せてしまいます。

今回はシェーダー言語で利用するための頂点データを任意で定義することができるバッファーオブジェクトを使って三角形の描画をしてみたいと思います。今回は実際にシェーダーを書くところまではいきませんが、その前に知っておきたい重要な部分になります。

セットアップ 〜レンダラー、カメラ、シーンの用意〜

まずは三角形のオブジェクトを描画するための土台作りから。
ページの読み込み完了後にレンダラー、カメラ、シーンの初期設定をする関数を実行します。

レンダラー、シーンの初期化関数

レンダラーとシーンの初期化をする関数です。
renderer, scene, canvasFrameはグローバルで宣言しておきます。

なお、最終的にキャンバス要素に描画するためにはrendererオブジェクトのrender()メソッドを実行する必要がありますが、これは後述するループ処理関数の中に記述します。

カメラの初期化関数

続いてカメラの初期化関数です。
マウス操作でカメラの位置や角度、ズームを操作できるようにThree.jsのソースコードに収録されている「TrackballControls.js」を利用します。

ループ処理で描画をアニメーションさせる

カメラの初期化でマウス操作ができるようにTrackballControlsライブラリを使いました。
ですが、スクリプトにはまだループ処理が書かれていないので実際にマウス操作をしても実際の描画には反映されていません。ループ処理の関数を追加します。

start()関数にループ処理を追記します。ループ処理関数は最後に実行するようにしましょう。

三角形オブジェクトの描画

それでは今回のメインとなる三角形オブジェクトを追加してきます。まずは関数全体のコードです。

上記のソースコードを部分毎に見ていきたいと思います。

nは三角形の描画数を指定します。
バッファーオブジェクトを利用するためにTHREE.BufferGeometryクラスを使います。
バッファーオブジェクトは任意の頂点データを定義することができるため、Three.jsで用意されている直方体や球体などの標準の形状オブジェクトでは表現できない複雑なオブジェクトを描画することが可能になります。

positionscolorsはそれぞれ三角形の頂点の座標と頂点色を格納するための32ビット浮動小数点型の配列です。

三角形は3つの頂点で構成される図形です。また1つの頂点を定義するためにはX、Y、Zの3つの座標が必要となります。
そのため必要な配列の格納数は「三角形の数 × 3 × 3」となります。

Lは三角形の描画範囲を指定します。

forのループ処理の中ではそれぞれの頂点の座標と色を決めています。
for (var i=0; i<positions.length; i+=9) では1つの三角形の必要な9つの座標ごとにループを回します。
さらにその中で for (var j=0; j<9; j+=3)   で1つの頂点に必要な3つのX、Y、Z座標ごとにループを回します。

下の部分では三角形の最初の1頂点を基準とし、残り2点の座標を決めています。

頂点色はぞれぞれ頂点座標の位置によって色を決めています。

  • X座標の絶対値 = R(赤)
  • y座標の絶対値 = G(緑)
  • Z座標の絶対値 = B(青)

頂点間の色は線形補完されるため、三角形はグラデーションがかった色になります。

上記で用意できた三角形の頂点座標と頂点色をバッファーオブジェクトに渡します。
座標と色情報を渡すにはsetAttributeメソッドを使います。

THREE.MeshBasicMaterialで三角形オブジェクトの材質を決めます。
side: THREE.DoubleSideは三角形の表と裏の両面を描画する指定です。
vertexColors: trueは頂点色を有効化する指定です。

geometry(形状)とmaterial(材質)が決まったらTHREE.Meshに渡してオブジェクトを生成し、シーンに追加します。

最後にオブジェクトの描画用にinitObject()関数を用意し,start()関数内で実行するようにします。

出来上がり

バッファーオブジェクトを利用することで大量の三角形を描画することができました。
今回はシェーダー言語を扱うまでいきませんでしたが、次回以降紹介できたらと思います。

参考書籍

今回ご紹介した内容は「three.jsによるHTML5 3Dグラフィックス[改訂版] 下」を参考にさせていただきました。
Three.jsを用いて3Dグラフィックスの実装方法を学べる良書です。

前後の記事

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