canvas2D contents
HTML5 で新たに策定された canvas タグ。WebGL はこの canvas タグを用いて実装しますが、これと同様に二次元での描画に特化した機能も canvas には存在します。
当サイトはあくまでも WebGL の入門サイトですが、2D コンテキストを用いることでさらに WebGL プログラミングの幅を広げることができます。導入における初歩的な解説は省きますが、有用だと思えるテクニックに関してはこちらで解説していきます。
wgld.org
new
entry
- home
- WebGL
- WebGL: ブラウザの準備
- WebGL: WebGL を始める前に canvas を知る
- WebGL: 3D 描画の基礎知識
- WebGL: レンダリングのための下準備
- WebGL: 行列(マトリックス)の基礎知識
- WebGL: 頂点とポリゴン
- WebGL: コンテキストの初期化
- WebGL: シェーダの記述と基礎
- WebGL: 頂点バッファの基礎
- WebGL: 行列演算とライブラリ
- WebGL: シェーダのコンパイルとリンク
- WebGL: モデルデータと頂点属性
- WebGL: minMatrix.js と座標変換行列
- WebGL: ポリゴンのレンダリング
- WebGL: ポリゴンに色を塗る(頂点色の指定)
- WebGL: 複数モデルのレンダリング
- WebGL: 再帰処理と移動・回転・拡大縮小
- WebGL: インデックスバッファによる描画
- WebGL: カリングと深度テスト
- WebGL: 立体モデル(トーラス)の描画
- WebGL: 平行光源によるライティング
- WebGL: 環境光によるライティング
- WebGL: 反射光によるライティング
- WebGL: フォンシェーディング
- WebGL: 点光源によるライティング
- WebGL: テクスチャマッピング
- WebGL: マルチテクスチャ
- WebGL: テクスチャパラメータ
- WebGL: アルファブレンディング
- WebGL: ブレンドファクター
- WebGL: クォータニオン(四元数)
- WebGL: クォータニオンと minMatrixb.js
- WebGL: マウス座標による回転
- WebGL: クォータニオンと球面線形補間
- WebGL: クォータニオンとビルボード
- WebGL: 点や線のレンダリング
- WebGL: ポイントスプライト
- WebGL: ステンシルバッファ
- WebGL: ステンシルバッファでアウトライン
- WebGL: フレームバッファ
- WebGL: ブラーフィルターによるぼかし処理
- WebGL: バンプマッピング
- WebGL: 視差マッピング
- WebGL: キューブ環境マッピング
- WebGL: キューブ環境バンプマッピング
- WebGL: 屈折マッピング
- WebGL: 動的キューブマッピング
- WebGL: トゥーンレンダリング
- WebGL: 射影テクスチャマッピング
- WebGL: 光学迷彩
- WebGL: シャドウマッピング
- WebGL: 高解像度シャドウマップ
- WebGL: グレイスケール変換
- WebGL: セピア調変換
- WebGL: sobel フィルタ
- WebGL: laplacian フィルタ
- WebGL: gaussian フィルタ
- WebGL: グレアフィルタ
- WebGL: 被写界深度
- WebGL: 距離フォグ
- WebGL: パーティクルフォグ
- WebGL: ステンシル鏡面反射
- WebGL: 半球ライティング
- WebGL: リムライティング
- WebGL: 後光 表面下散乱
- WebGL: mosaic フィルタ
- WebGL: ズームブラーフィルタ
- WebGL: ゴッドレイフィルタ
- WebGL: 深度値と座標系について理解する
- WebGL: 浮動小数点数テクスチャ
- WebGL: 頂点テクスチャフェッチ(VTF)
- WebGL: 浮動小数点数VTF
- WebGL: VAO(vertex array object)
- WebGL: 異方性フィルタリング
- WebGL: インスタンシング(instanced arrays)
- WebGL: ハーフトーンシェーディング
- WebGL: ラインシェード シェーダ
- WebGL: 動画を用いた video テクスチャ
- WebGL: ウェブカメラをテクスチャに適用する
- WebGL: 動画テクスチャでクロマキー合成
- WebGL: VBOを逐次更新しながら描画する
- WebGL: VBO逐次更新でパーティクル描画
- WebGL: GPGPU でパーティクルを大量に描く
- WebGL: MRT(Multiple render targets)
- WebGL: MRT を利用した多重エッジ検出
- WebGL: 描画結果から色を取得する readPixels
- WebGL: フラットシェーディング
- WebGL: インターリーブ配列 VBO
- WebGL: スフィア環境マッピング(Matcap Shader)
- WebGL2
- WebGL2: WebGL 2.0 と WebGL 1.0
- WebGL2: WebGL 2.0 の有効化
- WebGL2: WebGL 2.0 と GLSL ES 3.0
- WebGL2: layout 修飾子によるロケーション指定
- WebGL2: GLSL の flat 補間モード
- WebGL2: VertexArrayObject
- WebGL2: instanced arrays と VAO
- WebGL2: gl_VertexID と gl_InstanceID
- WebGL2: Uniform Buffer Object（UBO）
- WebGL2: Sampler Object
- WebGL2: MRT (Multiple Render Targets)
- WebGL2: derivative 関数（dFdx, dFdy）
- WebGL2: centroid 修飾子
- WebGL2: Transform Feedback の基礎
- WebGL2: Transform Feedback で GPGPU
- GLSL
- GLSL: GLSL だけでレンダリングする
- GLSL: 時間経過とマウスカーソル座標
- GLSL: オーブ(光の玉)のレンダリング
- GLSL: 様々な図形を描く
- GLSL: マンデルブロ集合
- GLSL: ジュリア集合
- GLSL: フラグメントシェーダ ノイズ
- GLSL: シェーダ内でレイを定義する
- GLSL: レイマーチングで球体を描く
- GLSL: 法線の算出と簡単なライティング
- GLSL: 視野角を考慮したレイの定義
- GLSL: オブジェクトの複製 repetition
- GLSL: 箱型のボックスモデルを描く
- GLSL: 異なる形状のオブジェクトを描く
- GLSL: オブジェクトの重なりを考慮した描画
- GLSL: オブジェクト同士を補間して結合する
- GLSL: オブジェクトを行列で回転させる
- GLSL: オブジェクトを行列で捻じるように変換
- GLSL: オブジェクトにテクスチャなどを投影する
- GLSL: レイマーチングソフトシャドウ
- canvas2D
- canvas2D: プロシージャルノイズ
- canvas2D: シームレスノイズ
- canvas2D: 法線マップの生成
- library
- library: minMatrix.js リファレンス
- library: minMatrixb.js リファレンス
- library: noiseX.js リファレンス
- library: objson.js リファレンス
- contribution
- contribution: JSON モデルデータの読み込み
- contribution: 頂点位置から面法線を算出
- contribution: バレンタインデー企画ページの解説
PR
press Z key
