WebGLのチュートリアル

初めての人を対象にした手軽にWebGL/OpenGLを学べるチュートリアルです。

できるだけ丁寧に解説したいと思っていますが、分かり難い箇所があれば参考文献などを参考にして頂ければと思います。

※こちらは元々ネットオウルの無料ホスティングサービスで運営していたページです。サービス終了に伴い移転しました。諸事情によりチュートリアルも未完となっております。

目次

第1章 – 基礎編

Lesson01 WebGLの紹介とブラウザの設定
Lesson02 WebGLの初期化
Lesson03 シェーダーの初期化
Lesson04 図形を描く
Lesson05 座標変換行列
Lesson06 座標変換
Lesson07 頂点シェーダー その1
Lesson08 頂点シェーダー その2
Lesson09 色の表現
Lesson10 ピクセルシェーダー
Lesson11 テクスチャー
Lesson12 キーボードによる操作
Lesson13 マウスによる操作
Lesson14 ライティング その1
Lesson15 ライティング その2
Lesson16 立体図形

第2章 – 実践編

Lesson17 WebGLの雛形
Lesson18 座標変換をもう一度
Lesson19 シェーダーをもう一度
Lesson20 マウスで視点移動
Lesson21 3DCGファイルフォーマットの読み込み

Appendix

Appendix A three.js
Appendix B Emscripten
Appendix C Qt Webkit

WebGL関係の関数一覧

attachShader Lesson03
プログラムオブジェクトにシェーダーオブイェクトを関連付ける
bindBuffer Lesson04
バッファオブジェクトをバインドする
bufferData Lesson04
バッファオブジェクトのデータストアの作成と初期化
clear Lesson02
バッファをクリア
clearColor Lesson02
バッファをクリアする際のカラー情報を指定
compileShader Lesson03
シェーダーオブジェクトをコンパイル
createShader Lesson03
シェーダーオブジェクトを作成
drawArrays Lesson04
配列データから図形を描く
enableVertexAttribArray Lesson03
頂点属性配列を有効にする
flush Lesson04
GLコマンドの強制実行
getAttribLocation Lesson03
アトリビュート変数のアドレスを取得
getShaderInfoLog Lesson03
シェーダーオブジェクトの情報を取得
linkProgram Lesson03
プログラムオブジェクトをリンク
shaderSource Lesson03
シェーダーオブジェクトのソースコードを指定
useProgram Lesson03
プログラムオブジェクトをインストール
vertexAttribPointer Lesson04
頂点属性データ配列の定義

WebGL関係のライブラリ

WebGL関係

three.js
WebGLをサポートした3D描画ライブラリです。WebGL非対応のブラウザでもCanvasとSVGを使った描画が可能です。
https://threejs.org/

行列演算関係

glMatrix
https://glmatrix.net/

Sylvester
http://sylvester.jcoglan.com/

その他

Emscripten
C/C++などで作られたプログラムをJavaScriptに変換するツールです。OpenGLもWebGLに変換できます。
https://emscripten.org/

参考文献

WebGL/OpenGL関係

OpenGLプログラミングガイド 原著第5版 [4894717239]

ピアソンエデュケーション
OpenGLのバイブル本の日本語訳。WebGL用に書かれた本ではありませんが、OpenGL系のプログラミングを進めていく上で参考になります。

OpenGL 4.0 シェーディング言語 [4862461891]

ボーンデジタル/David Wolff
GLSLの解説書。こちらもGLSLのバイブル的書籍といっていいと思います。WebGLに特化した内容にはなっていませんが、GLSL自体はWebGLで使われるものと基本的に同じですので、シェーダー関係で難しいところがあれば参考になると思います。

コンピュータグラフィックス数学関係

実例で学ぶゲーム3D数学 [4873113776]

オライリージャパン/Fletcher Dunn
行列、ベクトルを初めとするコンピュータグラフィックスに関する数学的な背景を学ぶことができる本です。既存のライブラリを使っていくとしても、基本的な数学知識があると理解がはかどると思います。

ゲームプログラミングのための3Dグラフィックス数学 [4939007375]

ボーンデジタル/Eric Lengyel
2002年出版の古い本ですが、時代に左右されない基礎的な事項がまとめられています。本格的に3Dプログラミングを行うのであれば参考になると思います。

JavaScript

JavaScript 第6版 [4873115736]

オライリージャパン/David Flanagan
JavaScript: The Definitive Guide, 6th Editionの日本語訳です。丁寧なJavaScriptの解説本ですが、分量も少し多めです。必要になった段階で手に取ってみてください。