arusu0629のブログ

Swift初心者エンジニア

WebGL

WebGLについて⑬

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

WebGLについて⑫

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

WebGLについて⑪

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

WebGLについて⑩

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

WebGLについて⑨

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

WebGLについて⑧

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

WebGLについて⑦

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

WebGLについて⑥

【前回】 arusu0629.hatenablog.com ※この章は少し長い内容となっております...mm シェーダの記述と基礎 WebGLではプログラマブルシェーダの一種であるシェーダ言語が実装されている。それがGLSL(OpenGL Shading Language)である GLSLを使って2種類のシェー…

WebGLについて⑤

【前回】 arusu0629.hatenablog.com コンテキストの初期化 コンテキストの取得から初期化まで htmlソース要素をgetElementByIdを使って取得 取得したcanvas要素を使ってWebGLコンテキストを取得する。これをするにはgetContextメソッドを利用する 画面をクリ…

WebGLについて④

【前回】 arusu0629.hatenablog.com 頂点ポリゴン WebGLでは基本的に次のいずれかしか描画することが出来ない 点 線分 三角形 基本的にWebGLでは三角形を用いて画面上に何かを描画する そしてその三角形こそがポリゴン。ポリゴンは3つの頂点を結んで描かれる…

WebGLについて③

【前回】 arusu0629.hatenablog.com 行列(マトリックス)の基礎知識 行列の必要性 3Dレンダリングする際に非常に多くの計算が必要になる どんなモデルをどこに、どんな角度で、どんな大きさで存在するのか、それを描画したいモデルの数分計算する必要がある …

WebGLについて②

【前回】 arusu0629.hatenablog.com レンダリングのための下準備 固定機能パイプライン →3Dレンダリングを行う一連の処理の流れ(①で出てきた3つの座標変換をしてくれる) しかしWebGLには固定機能パイプラインが存在しない つまり座標変換を全て記述する必要…

WebGLについて①

少し前から3Dについての勉強をしたくて、最近は決まってやることが無かったので、ボチボチ勉強していこうと思います。 (デザインではなくプログラミングについてです) 勉強方法は会社の先輩に教えていただいた下記サイトを読んで、自分が大事だなとかよく分…