CG関連

【WebGL】入門 わかりやすく【図解】してみた

プログラミングでかっこいい映像を作りたいととりくみ始めた『GLSL(シェーダー)』。

インターネットで『シェーダー』を使うには、
『WebGL(ウェブジーエル)』なる仕組みを使えばいいのですが、

3Dやりたい
『生のWebGL(ウェブジーエル)』難しいっす・・

という意見も多いようで。

実際の現場でも、
『生のWebGL』は記述量が多いので、ライブラリを使うことが多いようです。

WebGLは正式には「WebGL API」のことですが、素のAPIのままだと記述量が膨大になりどうしてもスピード感が出にくいのでライブラリを使うことがほとんどです。
 
WebGLコンテンツの開発フローと抑えどころ

  • 『WebGL』を使うためのライブラリ・・Three.jsなど

『Three.js』参考記事

実際にはライブラリを併用しつつ作り込むことになるんだろうなと思いつつ、

難しいと言われる『生のWebGL』の仕組みも知っておいたほうがいいだろうということで、

ざっくりとまとめてみることにしました。

Sponsored link

【WebGL】入門 描画までの流れ

『WebGL』を調べたことがあれば150%くらいの人がみていると思われるこちらのサイトを参考にまとめています。

wgld.org

『生のWebGL』で画面に描画するための流れは以下。

  1. HTML に canvas エレメントを明記
  2. 初期化処理
  3. シェーダーのコンパイル
  4. シェーダーとプログラムオブジェクトの生成
  5. 頂点バッファ( VBO )の生成と通知
  6. 座標変換行列の生成と通知
  7. 描画命令の発行
  8. canvas を更新してレンダリング

順番に見ていきます。

アオキ
全体のソースは最後にまとめています。

【WebGL】入門その1 HTMLにcanvasエレメントを明記

『WebGL』はホームページなどで表示されるために使われるので、

『HTML』でページを作りつつ、

『canvasタグ』を使って、『canvas』の中に描画していくことになります。

アオキ
minMatrix.js は行列のライブラリです。説明は後ほど・・

Sponsored link

【WebGL】入門その2. 初期化処理

続いて初期化処理。

『JavaScript』ファイルに書いていきます。

getContext で『WebGL』を取得して、色や深度(奥行き)を初期化しています。

【WebGL】入門その3. シェーダーのコンパイル

3D画面を描写する役割の『シェーダー(Shader)』には大きく2つの種類があります。

  • 頂点シェーダー(Vertex Shader) ・・頂点情報
  • フラグメントシェーダー(Fragment Shader)・・色情報

書く順番は決まっていて、頂点シェーダー -> フラグメンントシェーダー になります。

『シェーダー(GLSL)』の内容は 『HTML』 側に書いていきます。

アオキ
行列の記述もありますが後ほど・・

【WebGL入門】 頂点シェーダー側

『頂点シェーダー』側に3種類の変数が設定されています。

  • attribute変数 ・・ 頂点毎に異なる情報を設定
  • uniform変数 ・・全ての頂点に対しまとめて処理
  • varying変数 ・・頂点シェーダからフラグメントシェーダへの受け渡し

『シェーダー』はとにかく『頂点(Vertex)』が大事で、

『頂点』にいろんな『属性(attribute)』をくっつけることができます。

  • 座標位置
  • 法線(光の反射で使う)
  • テクスチャ座標

などなど。

今回は 座標位置 と 色 をそれぞれ指定しています。

  • 座標位置は(x, y, z)と3つの値があるので vec3 (ベクトル3)
  • 色情報は( r, g, b, a)(赤緑青と透過度のアルファ)で4つなので vec4 (ベクトル4)です。

ベクトル関連記事

『unifrom』変数は頂点全体に関わる処理で、移動や回転をするための『行列(Matrix)』を指定しています。

『行列』は(x,y,z)の3つの値と思いがちですが、

視界よりも外にあるかどうかを判定するための『w』を含めて、
4×4の『行列』になるので、『mat4』とつけるようになっています。

  • w ・・ 同次座標系。視界よりも外にあるかどうか

同次座標系の関連記事
深度値と座標系について理解する | wgld.org

『varying』変数を使うことで、

色情報など、頂点シェーダー -> フラグメントシェーダーに移すことができます。

最後に 『gl_Position』 を指定して『頂点シェーダ』側は完了です。

アオキ
gl_Position の指定は必須です。

【WebGL入門】 フラグメントシェーダー側

precision mediump は、描画の精度を指定しています。

  • lowp ・・精度低
  • mediump ・・精度中
  • highp ・・精度高

フラグメントシェーダー側にも『varying』変数を使うことで、

頂点シェーダー -> フラグメンントシェーダー の色情報を受け渡ししています。

最後に 『gl_FragColor』 で色情報を指定して完了です。

アオキ
gl_FragColor は必須ではないそうです。(けどよく見るなぁ。)
Sponsored link

【WebGL】入門その4. シェーダーとプログラムオブジェクトの生成

『JavaScript』側でも『シェーダー』の記載が必要です。

アオキ
create_shader と create_program は自前でつくられた『ユーザー関数』になります。(後ほど記載します。)
  • プログラムオブジェクト・・『頂点シェーダ』と『フラグメントシェーダ』の紐付け

頂点に紐づける属性(情報)は、順番を指定しています。

  • attLocation ・・ 頂点に紐づける順番。何番目のデータかを指定
  • attStride ・・データがいくつの要素からなるか。(座標は3で色は4)

【WebGL】シェーダー作成

『シェーダー』を生成する自作関数がこちら。

  • gl.createShader でシェーダーをつくって、
  • g.shaderSource でソース? を割り当てて、
  • gl.compileShader でコンパイルして
  • gl.getShaderParameter でチェックして

OKなら『シェーダー』返して、NGならログを出すと。

  • gl.getShaderInfoLog ログを出す

関数名が英語そのままなので読んでいくとわかりやすいかもです。

【WebGL】プログラムオブジェクトの作成

  • プログラムオブジェクト・・『頂点シェーダ』と『フラグメントシェーダ』の橋渡し

コードは以下。

  • gl.createProgram でプログラムオブジェクトつくって
  • gl.attachShader でシェーダーをくっつけて
  • gl.linkProgram でシェーダーをリンクさせて
  • gl.getProgramParameter でリンクのチェックして
  • OKなら gl.useProgram で有効にして返す
  • NGなら gl.getProgramInfoLog でエラーだす

という流れで。

アオキ
よくみるとシェーダーの流れと似ていたりします。

【WebGL】入門その5. 頂点バッファ( VBO )の生成と通知

『WebGL』はとにかく『頂点』が大事で、

頂点にいろんな属性(情報)をくっつけて処理します。

  • 座標位置
  • 法線(光の反射で使う)
  • テクスチャ座標

などなど。

で、それぞれの属性毎に、
『VBO(頂点バッファオブジェクト)』なるものをつくって情報を渡すそうです。

『VBO』生成の流れがイメージしづらなかったので図をつくってみました。

  1. バッファ(入れ物)をつくって
  2. WebGLにバインドして(くっつけて)
  3. 属性データ(配列)をセットして
  4. VBO として生成されるようです。

これを頂点の属性毎に繰り返すそうです。

コードは以下。

  • gl.createBuffer でバッファをつくって
  • gl.bindBuffer でバッファをWebGLにバインドして
  • gl.bufferData で配列データをセットして・・ここでVBO生成
  • gl.bindBuffer でバインドを無効化して
  • VBOを返して終わり

になります。

アオキ
図を書いてようやくわかった感があります。。

『VBO』を生成するユーザー定義関数を使って、

頂点の属性情報(配列)をつくって、『VBO』を生成しています。

コードは以下。

  • gl.bindBuffer
  • gl.enableVertexAttribArray
  • gl.vertexAttribPointer

の3つはセットで使うと思ってればいいのかなと思います。

アオキ
ここまで長かった・・あと一息・・
Sponsored link

【WebGL】入門その6. 座標変換行列の生成と通知

3D空間で物体を回転させるには、『回転行列』を使う必要があります。

参考記事

『回転行列』は書く内容が決まっているので、

wgld.org サイトの方であらかじめ『行列』用のコードがあるので
まるっとお借りします。

minMatrix.jsと座標変換行列 | wgld.org

【WebGL】入門その7. 描画命令の発行

最後はサクッと、下記2つで描画されます。

描画命令を発行することを『ドローコール』と呼ぶそうで、

『ドローコール』が増えれば増えるほど処理も重くなるようで、

それを回避するために、『インスタンシング』や『GPGPUパーティクルシステム』などありますが、

それは別の記事で。

Sponsored link

【WebGL】入門その8. canvas を更新してレンダリング

ここは恒常ループ処理かな、
JavaScript の setTImeout を使ってずっと描画させる方法かなと思います。

再帰処理と移動・回転・拡大縮小 | wgld.org

【WebGL】入門 全体のコード

全体のコードは以下。

こちらの記事にまるっと掲載されています。

ポリゴンに色を塗る(頂点色の指定) | wgld.org

【WebGL】入門 まとめ

wgld.org のページは本当にすごい情報量で、
詳しい分なかなか難しかったりするので、
なんども読みつつ、ノートをとりつつ、
ようやく図にできた感があります。

生の『WebGL』はHTMLとJavaScriptを足してざっくり220行。
対して『Three.js』は約50行。

参考記事

アオキ
『Three.js』って本当は楽だったのね・・(難しいけど

便利ライブラリの助けを借りつつ、
ここぞという場面では『生WebGL』も使いこなせるようになるといいんでしょうね。

アオキ
引き続き鍛錬だなぁ、コツコツがんばります。
created by Rinker
¥4,400 (2019/12/14 22:03:37時点 Amazon調べ-詳細)

『Three.js』関係ではこんな記事も読まれています。

1. 3Dプログラムの基本を【Three.js】でまとめてみた【初心者向け】

2. 【Three.js】で『GLSL(シェーダー)』を使う環境構築の仕方 【初心者向け】

3. 【WebGL】入門 わかりやすく【図解】してみた

4. 【Three.js】用語や関数のまとめ【3Dプログラム】※随時更新

『GLSL(シェーディング)』関係ではこんな記事も読まれています。

1. 【GLSL】プログラムでかっこいい映像をつくりたい! 〜『TouchDesigner』を見据えて

2. 【WebGL】入門 わかりやすく【図解】してみた

3. 【OpenGL】と【DirectX】のバージョンをまとめてみた【シェーダーメイン】【初心者向け】

4. 【GLSL(シェーディング)】でよく使う関数とユーザー関数のまとめ※随時更新

5. 【GLSL】プログラムでかっこいい映像をつくるには『レイマーチング』なるものを覚えればいいらしい

6. 【GLSL】『レイマーチング』入門その1 距離関数とレイとカメラの設定

7. 【GLSL】『レイマーチング』入門(2) 立体的に見せる方法〜光の反射は『内積』で〜

8. 【GLSL】『レイマーチング』入門(3) 距離関数を使ってみる・回転・合成・量産

9. 【TouchDesigner】で『GLSL』を使う方法まとめ【画像あり】

10. 【TouchDesigner】『GLSL MAT』の使い方 3次元でぐりぐり動かしてみる

11. 【GLSL】波のつくり方簡易まとめ。波もプログラムでつくれます【コピペスタイル】

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. 学び・教育

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
  2. オンライン教材

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  3. CG関連

    【WebGL】入門 わかりやすく【図解】してみた
  4. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  5. バックエンド

    【検索システム】をつくってみた【実際にログインしてさわれます】
PAGE TOP