こんにちは、エンジニアのオオバです。
などの便利なライブラリを使えば一瞬でできることですが、本記事はそういったライブラリを一切使わずにWebGLを書いて、どのくらい大変なのかを理解します。
DirectXでも同様の三角形描画しました！
C#でDirectX11 SlimDXで三角形を描画する - 渋谷ほととぎす通信
→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら
三角ポリゴン1個表示するまでの道のり
結構長いです(汗。
今回はhtmlファイルに直にシェーダーを記述しますので、htmlファイルと、JavaScriptファイルでそれぞれ処理を記述します。
html内に記述するシェーダー処理
- JavaScript側から送られた頂点データをそのままgl_Positionに渡す頂点シェーダーを記述
- 処理する座標を白色で塗りつぶすフラグメントシェーダーを記述
以上で1枚の三角形が表示されるシェーダーの完成です。残りの作業としては正しくシェーダーに頂点データを送るJavaScriptを書くだけです。
※ちなみに、シェーダーは実行時にコンパイルされ、WebGLProgramにリンク・有効化されます。頂点データはそのコンパイルされたシェーダーに送られるのであって、htmlに送られるわけではありません。htmlに記載しているシェーダーはあくまでテキストデータで、コンパイルしないと使用することは出来ません。
JavaScriptで記述する処理
- CanvasDOMの取得 & WebGLコンテキストの取得とセットアップ
- 頂点シェーダーコンパイル、フラグメントシェーダーコンパイル
- WebGLProgramの生成、シェーダーのアタッチとリンク、有効化
- 三角ポリゴンの頂点バッファ生成
- 背景描画
- ビューポートの設定
- 頂点属性を有効化してデータを注入
- 描画する
最初にソースを紹介。コチラです。
処理の解説はできる限りコメントアウトして記載しています。
これ以上ソースを短くすることが出来ませんでしたが、これが最短のWebGLのHello Worldになるんじゃないかなと思っています。
- JSが90行くらい
- シェーダーが8行くらい
合計100行くらい書かないと三角ポリゴン一個さえ表示できません。この時点で生WebGLのハードルは高めな気がします。
ソースに処理の内容のコメントをぎっしり記述しているので、各処理の内容とソースはこれで把握できるかなと思います。
WebGLContextのメソッドが分からない時、コチラのサイトがとても役に立ちました。日本語リファレンスになっています。
メソッド一覧 · sapphire-al2o3/webgl-reference-jp Wiki · GitHub
ちなみに実行するとコチラのような三角ポリゴンが1枚表示されます。
パっと見しょぼいですが、大事な一歩だと思っています。
『何事も基礎が大事！』
というのがぼくのモットーです。
ぼくが通っていたWebGLスクールについての記事も書いてます。興味ある方はコチラもどうぞ。
何事も基礎大事!!ほぼ生で書くWebGL スクールに通ってます。 - 渋谷ほととぎす通信
この記事が気に入ったらフォローしよう
