WebGL contents
WebGL に関するコンテンツの一覧です。
初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。
また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。
WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。
- ブラウザの準備
- WebGL を始める前に canvas を知る
- 3D 描画の基礎知識
- レンダリングのための下準備
- 行列(マトリックス)の基礎知識
- 頂点とポリゴン
- コンテキストの初期化
- シェーダの記述と基礎
- 頂点バッファの基礎
- 行列演算とライブラリ
- シェーダのコンパイルとリンク
- モデルデータと頂点属性
- minMatrix.js と座標変換行列
- ポリゴンのレンダリング
- ポリゴンに色を塗る(頂点色の指定)
- 複数モデルのレンダリング
- 再帰処理と移動・回転・拡大縮小
- インデックスバッファによる描画
- カリングと深度テスト
- 立体モデル(トーラス)の描画
- 平行光源によるライティング
- 環境光によるライティング
- 反射光によるライティング
- フォンシェーディング
- 点光源によるライティング
- テクスチャマッピング
- マルチテクスチャ
- テクスチャパラメータ
- アルファブレンディング
- ブレンドファクター
- クォータニオン(四元数)
- クォータニオンと minMatrixb.js
- マウス座標による回転
- クォータニオンと球面線形補間
- クォータニオンとビルボード
- 点や線のレンダリング
- ポイントスプライト
- ステンシルバッファ
- ステンシルバッファでアウトライン
- フレームバッファ
- ブラーフィルターによるぼかし処理
- バンプマッピング
- 視差マッピング
- キューブ環境マッピング
- キューブ環境バンプマッピング
- 屈折マッピング
- 動的キューブマッピング
- トゥーンレンダリング
- 射影テクスチャマッピング
- 光学迷彩
- シャドウマッピング
- 高解像度シャドウマップ
- グレイスケール変換
- セピア調変換
- sobel フィルタ
- laplacian フィルタ
- gaussian フィルタ
- グレアフィルタ
- 被写界深度
- 距離フォグ
- パーティクルフォグ
- ステンシル鏡面反射
- 半球ライティング
- リムライティング
- 後光 表面下散乱
- mosaic フィルタ
- ズームブラーフィルタ
- ゴッドレイフィルタ
- 深度値と座標系について理解する
- 浮動小数点数テクスチャ
- 頂点テクスチャフェッチ(VTF)
- 浮動小数点数VTF
- VAO(vertex array object)
- 異方性フィルタリング
- インスタンシング(instanced arrays)
- ハーフトーンシェーディング
- ラインシェード シェーダ
- 動画を用いた video テクスチャ
- ウェブカメラをテクスチャに適用する
- 動画テクスチャでクロマキー合成
- VBOを逐次更新しながら描画する
- VBO逐次更新でパーティクル描画
- GPGPU でパーティクルを大量に描く
- MRT(Multiple render targets)
- MRT を利用した多重エッジ検出
- 描画結果から色を取得する readPixels
- フラットシェーディング
- インターリーブ配列 VBO
- スフィア環境マッピング（Matcap Shader）
