こんにちは、エンジニアのオオバです。

three.js

などの便利なライブラリを使えば一瞬でできることですが、本記事はそういったライブラリを一切使わずにWebGLを書いて、どのくらい大変なのかを理解します。

DirectXでも同様の三角形描画しました!
C#でDirectX11 SlimDXで三角形を描画する - 渋谷ほととぎす通信

→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら

三角ポリゴン1個表示するまでの道のり

結構長いです(汗。

今回はhtmlファイルに直にシェーダーを記述しますので、htmlファイルと、JavaScriptファイルでそれぞれ処理を記述します。

html内に記述するシェーダー処理

  1. JavaScript側から送られた頂点データをそのままgl_Positionに渡す頂点シェーダーを記述
  2. 処理する座標を白色で塗りつぶすフラグメントシェーダーを記述

以上で1枚の三角形が表示されるシェーダーの完成です。残りの作業としては正しくシェーダーに頂点データを送るJavaScriptを書くだけです。

※ちなみに、シェーダーは実行時にコンパイルされ、WebGLProgramにリンク・有効化されます。頂点データはそのコンパイルされたシェーダーに送られるのであって、htmlに送られるわけではありません。htmlに記載しているシェーダーはあくまでテキストデータで、コンパイルしないと使用することは出来ません。

JavaScriptで記述する処理

  1. CanvasDOMの取得 & WebGLコンテキストの取得とセットアップ
  2. 頂点シェーダーコンパイル、フラグメントシェーダーコンパイル
  3. WebGLProgramの生成、シェーダーのアタッチとリンク、有効化
  4. 三角ポリゴンの頂点バッファ生成
  5. 背景描画
  6. ビューポートの設定
  7. 頂点属性を有効化してデータを注入
  8. 描画する

最初にソースを紹介。コチラです。
処理の解説はできる限りコメントアウトして記載しています。

gist

これ以上ソースを短くすることが出来ませんでしたが、これが最短のWebGLのHello Worldになるんじゃないかなと思っています。

合計100行くらい書かないと三角ポリゴン一個さえ表示できません。この時点で生WebGLのハードルは高めな気がします。

ソースに処理の内容のコメントをぎっしり記述しているので、各処理の内容とソースはこれで把握できるかなと思います。

WebGLContextのメソッドが分からない時、コチラのサイトがとても役に立ちました。日本語リファレンスになっています。
メソッド一覧 · sapphire-al2o3/webgl-reference-jp Wiki · GitHub

ちなみに実行するとコチラのような三角ポリゴンが1枚表示されます。

生のWebGLで三角形を描画するショートコード_0

パっと見しょぼいですが、大事な一歩だと思っています。

『何事も基礎が大事!』

というのがぼくのモットーです。

ぼくが通っていたWebGLスクールについての記事も書いてます。興味ある方はコチラもどうぞ。

何事も基礎大事!!ほぼ生で書くWebGL スクールに通ってます。 - 渋谷ほととぎす通信

オススメ記事