WebGLで始める コンピュータグラフィックス入門

webglのコードを見ながら、コンピュータグラフィックス入門するスライド

Transcript

1. WebGLで始める コンピュータグラフィックス入門 1
2. 本セッションの目的 ポリゴンのレンダリングについて知らない人に、「そういう感じなんだね」と理解 してもらえれば成功です。 2
3. WebGLとは WebGL (Web Graphics Library) HTMLのcanvasタグに3Dを描画 3
4. 目次 1. レンダリングの概要 2. コードで見てみる 「canvas 初期化」 3. コードで見てみる「三角形描画」 4. おまけ 4
5. レンダリングの概要 5
6. レンダリングとは 3Dモデル(およびシーン)を2Dイメージへ変換すること。 6
7. 描画の流れ 7 頂点データ (頂点の位置) 座標変換 (MVP変換) 色塗り https://learnopengl.com/Getting-started/Coordinate-S ystemsより
8. *MVP変換 1. モデル変換 :ローカル座標系からワールド座標系に変換 2. ビュー変換: カメラから見た座標系に変換 3. プロジェクション変換：3D空間を2Dの画面空間に射影 8 https://learnopengl.com/Getting-starte d/Coordinate-Systemsより
9. プログラムの流れ 3Dモデルの定義 （頂点の位置etc） シェーダの定義 （座標変換、 色塗りのプログラム） 描画命令 9
10. コードで見てみる 「canvas 初期化」 10
11. canvasの初期化 HTMLでcanvasタグを定義 単色で塗りつぶす 11 https://heller77.github.io/webglIntroduction/chapter1/chapter1.html
12. canvasの初期化 //canvasを取得 const canvas = document.getElementById("targetCanvas"); //canvasに付いてるwebglコンテキストを取得（初期化） //glオブジェクトの関数を呼ぶことで描画出来る const gl = canvas.getContext("webgl"); //塗りつぶす色を指定(alphaを0にすると透明になるので注意！) gl.clearColor(1.0, 0.0, 0.0, 1.0); //画面を塗りつぶす gl.clear(gl.COLOR_BUFFER_BIT); 12
13. コードで見てみる 「三角形描画」 13
14. 三角形描画 canvasに三角形を描画 14 https://heller77.github.io/webglIntroduction/chapter2/chapter2.html
15. 三角形の描画　手順 15 1. 三角形の定義 2. シェーダ定義、コンパイル 3. 三角形をシェーダで描画
16. 三角形の描画　手順 16 1. 三角形の定義 2. シェーダ定義、コンパイル 3. 三角形をシェーダで描画
17. 三角形の定義 1. 三角形の頂点配列を定義 2. GPU上に頂点配列をコピー 17 //三角形の頂点の座標を定義 (cpu側で) const vertexPosition = [ -1.0,-1.0,0.0, //右下の頂点 0.0,1.0,0.0, //真ん中上の頂点 1.0, -1.0,0.0, //右下の頂点 ]; //空のバッファをGPU上に確保 let positionBuffer = gl.createBuffer(); //ターゲットをgl.ARRAY_BUFFERと指定。 //「頂点の属性をについて操作するぞ！」と教えてる gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); //GPU上のバッファにCPU側で定義したデータ (vertexPosition)を設定 gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertexPosition),gl.STATIC_DRAW );
18. 三角形の描画　手順 18 1. 三角形の定義 2. シェーダ定義、コンパイル 3. 三角形をシェーダで描画
19. シェーダ定義、コンパイル 1. 頂点シェーダの定義、コンパイル 2. フラグメントシェーダの定義、コンパイル 19
20. 頂点シェーダの定義、コンパイル 頂点ごとに処理を行う 座標変換を行い、 カメラ上での位置を計算 20 シェーダ定義、コンパイル // シェーダー定義 const vertexShaderSource = ` attribute vec4 aVertexPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; } `; //シェーダーオブジェクト（シェーダを格納するオブジェクト）を生成 const vertexShader = gl.createShader(gl.VERTEX_SHADER); //シェーダーオブジェクトにシェーダのコードを設定 gl.shaderSource(vertexShader, vertexShaderSource); //シェーダーをコンパイル gl.compileShader(vertexShader); MVP変換 を行っている
21. フラグメントシェーダの定義、コンパイル 色を決定 一般には、陰影の計算や画像を 貼ったりする 21 シェーダ定義、コンパイル const fragmentShaderSource = ` void main() { gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); } `; const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); RGBA(0,0,1,1) =青 で描画
22. 三角形の描画　手順 22 1. 三角形の定義 2. シェーダ定義、コンパイル 3. 三角形をシェーダで描画
23. 三角形をシェーダで描画 シェーダへ渡す値を設定 描画命令(gl.drawArrays)を呼ぶ 23 /** * 描画する * @param {WebGLコンテキスト} gl * @param {シェーダ} shaderProgramInfo * @param {頂点バッファの参照} positionbuffer */ function draw(gl, shaderProgramInfo, positionbuffer) { //モデル変換用の行列(viewはカメラの位置の反映用の行列。今回は原点にある想定なので特に書かない) const modelviewMatix = mat4.create(); mat4.translate(modelviewMatix, modelviewMatix, [0, 0, -3.0]); //カメラのパラメータを定義 const fieldOfView = (45 * Math.PI) / 180; const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight; const zNear = 0.1; const zFar = 100.0; //プロジェクション行列 const projectionMatrix = mat4.create(); mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar); //vertexshaderに頂点を渡す { gl.bindBuffer(gl.ARRAY_BUFFER, positionbuffer); const numComponents = 3; const type = gl.FLOAT; const noramlize = false; const stride = 0; const offset = 0; gl.vertexAttribPointer(shaderProgramInfo.attributeLocations.vertexPosition,numComponents,type,noramlize,stride,offset); gl.enableVertexAttribArray(shaderProgramInfo.attributeLocations.vertexPosition); } //このプログラムを使用する gl.useProgram(shaderProgramInfo.program); //プロジェクション行列を設定 gl.uniformMatrix4fv(shaderProgramInfo.uniformLocations.ProjectionMatrix,false,projectionMatrix ); //モデル行列とビュー行列を掛けたものを設定 gl.uniformMatrix4fv(shaderProgramInfo.uniformLocations.ModelViewMatrix,false,modelviewMatix); //頂点バッファの見方（offsetは0で、頂点の数は3（三角形なので））と教えて、描画命令 const offset = 0; const vertexCount = 3; gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); }
24. 三角形をシェーダで描画 シェーダへ渡す値を設定 描画命令(gl.drawArrays)を呼ぶ 24 /** * 描画する * @param {WebGLコンテキスト} gl * @param {シェーダ} shaderProgramInfo * @param {頂点バッファの参照} positionbuffer */ function draw(gl, shaderProgramInfo, positionbuffer) { //省略（シェーダへ値を渡す） //頂点バッファの見方（offsetは0で、頂点の数は3（三角形なので）と教えて、描 画命令 const offset = 0; const vertexCount = 3; gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); }
25. 三角形描画 canvasに三角形を描画 25 https://heller77.github.io/webglIntroduction/chapter2/chapter2.html
26. おまけ 26
27. 四角形の描画 27 三角形を二つ描画することで可能 ただし、インデックスバッファの概念が出てくる 頂点を使いまわす為に必要 （使わない場合、頂点が6つ必要になる）
28. インデックスバッファ 三角形それぞれを頂点の番号を3つ指定する。 *描画命令はgl.drawElements関数を使う 28
29. 立方体などの描画 四角形と同様に描画可能。 頂点の位置とインデックスを定義するだけ。 29 const vertexPosition = [ // 立方体の8つの頂点 -1.0, -1.0, 1.0, // 0: 左下前 1.0, -1.0, 1.0, // 1: 右下前 -1.0, 1.0, 1.0, // 2: 左上前 1.0, 1.0, 1.0, // 3: 右上前 -1.0, -1.0, -1.0, // 4: 左下後 1.0, -1.0, -1.0, // 5: 右下後 -1.0, 1.0, -1.0, // 6: 左上後 1.0, 1.0, -1.0, // 7: 右上後 ]; const indexData = [ // 各面を構成する三角形のインデックス 0, 1, 2, 1, 3, 2, // 前面 1, 5, 3, 5, 7, 3, // 右側面 5, 4, 7, 4, 6, 7, // 背面 4, 0, 6, 0, 2, 6, // 左側面 2, 3, 6, 3, 7, 6, // 上面 4, 5, 0, 5, 1, 0, // 底面 ]; https://heller77.github.io/webglIntroduction/chapter4/chapter4.html
30. 立方体などの描画 四角形と同様に描画可能。 頂点の位置とインデックスを定義するだけ。 30 https://heller77.github.io/webglIntroduction/chapter4/chapter4.html const vertexPosition = [ // 立方体の8つの頂点 -1.0, -1.0, 1.0, // 0: 左下前 1.0, -1.0, 1.0, // 1: 右下前 -1.0, 1.0, 1.0, // 2: 左上前 1.0, 1.0, 1.0, // 3: 右上前 -1.0, -1.0, -1.0, // 4: 左下後 1.0, -1.0, -1.0, // 5: 右下後 -1.0, 1.0, -1.0, // 6: 左上後 1.0, 1.0, -1.0, // 7: 右上後 ]; const indexData = [ // 各面を構成する三角形のインデックス 0, 1, 2, 1, 3, 2, // 前面 1, 5, 3, 5, 7, 3, // 右側面 5, 4, 7, 4, 6, 7, // 背面 4, 0, 6, 0, 2, 6, // 左側面 2, 3, 6, 3, 7, 6, // 上面 4, 5, 0, 5, 1, 0, // 底面 ]; けど、大変！
31. 3Dファイル blender等のモデリングソフトでモデルを作成、3Dファイルをエクスポート可能 31 https://www.blender.org/
32. 3Dファイル読み込み 3Dファイルから頂点とインデックスを読み出せば既に紹介した方法で描画可能 ライブラリを使ってgltfをwebglで描画する記事 https://qiita.com/nekonya/items/e068fdd1fba8c761070c gltfについて https://qiita.com/nekonya/items/25a7189651a510cff19a 32
33. 陰影 シェーダを使って陰影も表現可能 33 https://heller77.github.io/shaderPreviewer/modelPreviewer.html?glslref=https%3A%2F% 2Fgist.githubusercontent.com%2Fheller77%2F1dbad3f334cd8404f2c6bec207967a49% 2Fraw%2Fe7d6112ec372245e1bf36b0bc47f8c811409ced7%2Fdiffuse.glsl