読者です 読者をやめる 読者になる 読者になる

渋谷ほととぎす通信

完全趣味でやってるUnityメモ。説明できないところを説明できるようにするための個人ブログ。昨日の自分より少しでも大きく慣れるように。。。 ※所属団体とは一切関係がありません

最小のソースコードで生WebGLのHelloWorldをやってみる


「ライブラリを一切使わずにWebGLを書いてみよう」

という記事です。

WebGLのHelloWorldとは?

WebGLは三角ポリゴンの描画しか対応していません。(多角形ポリゴンは非対応)
まずは三角ポリゴン一個を表示させることがWebGLのHelloWorldではないかと考えます。

三角ポリゴン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.github.com

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

  • JSが90行くらい
  • シェーダが8行くらい

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

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

WebGLContextのメソッドが分からない時、コチラのサイトがとても役に立ちました。日本語リファレンスになっています。
github.com

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

パっと見しょぼいですが、ここから頑張っていきたいと思います。

一通りの内容を生WebGLで書いてみて、それから世に出回っている便利なWebGLライブラリThree.jsやpixiJSなどを触っていこうと思います。

『何事も基礎が大事!』

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


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

esakun.hateblo.jp