【前回】 arusu0629.hatenablog.com 複数モデルのレンダリング 複数のモデルをレンダリングする際に新しくVBOを用意する必要はなく、元々使用していたVBOを再利用する 複数のモデルを違う位置にレンダリングするので、操作するのはモデル変換行列。ビュー変…

【前回】 arusu0629.hatenablog.com ポリゴンに色を塗る(頂点色の指定) 前回までにただのポリゴンの描画までしてきましたが、今回はその描画したポリゴンに色を付けていきます。 ポリゴンに色を付けるには、頂点情報に「色情報」を追加してあげればOKです！ …

【前回】 arusu0629.hatenablog.com ポリゴンのレンダリング ■初期化処理 // canvasを初期化する際の深度を設定する gl.clearDepth(1.0); // canvasを初期化 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); clearDepth →3次元空間を扱う場合に奥行き…

【前回】 arusu0629.hatenablog.com 座標変換行列 モデル変換において、移動・回転・拡大縮小を行う順序には十分に注意しないといけない 具体的には、拡大縮小 -> 回転 -> 移動 という順序で変換を行えば、回転・拡大縮小した状態のモデルを任意の位置に移動…

【前回】 arusu0629.hatenablog.com モデルデータと頂点属性 頂点属性 →頂点が持つ様々な要素のこと 例：位置情報、頂点色、法線、テクスチャ座標 ■VBOの生成 まずVBOの元になるバッファオブジェクトをcreateBufferメソッドを用いて生成する バッファを操作…

【前回】 arusu0629.hatenablog.com シェーダのコンパイルとリンク ■ポリゴンを描画するまで〜 HTMlからcanvas要素を取得 canvasからWebGLコンテキストの取得 シェーダのコンパイル モデルデータを用意 頂点バッファ(VBO)の生成と通知 座標変換行列の生成と…

【前回】 arusu0629.hatenablog.com 頂点バッファの基礎 ローカル座標 →頂点がどのように配置されているのかを表した座標 例：(1.0, 0.0, 0.0) ⇔ 原点からX方向に1.0の距離に存在する ※原点を(0.0, 0.0, 0.0)とした場合 頂点バッファ(VBO：vertex buffer obj…