2021年01月02日 - WebVR・Three.js
WebGLで三角形ポリゴンを表示
Three.jsでいろいろと制作するさい、WebGLとシェーダについても理解しておいた方が良いと思ったので、「ポリゴンのレンダリング-wgld.org」を参考に、WebGLで三角形ポリゴンを表示しました。
WebGLで三角形ポリゴンを表示
WebGLで三角形ポリゴンを表示するには、Three.jsがやってくれていた処理を自分で行う必要があります。また、座標変換などさまざまな処理に行列を使うため、行列演算用ライブラリを使用します。
● 三角形ポリゴンを表示する流れ
・canvasの設定
・WebGLコンテキストの取得
・画面の初期化
・シェーダのコンパイル
・頂点座標の設定
・頂点バッファオブジェクトの生成と通知
・座標変換行列の生成と通知
・描画
● 行列演算用ライブラリ
「行列演算とライブラリ-wgld.org」を参考に行列演算用ライブラリを読み込みます。
<script src="js/lib/minMatrix.js"></script> <script src="js/script.js" type="module"></script>
● script.js
//=============================================================== // GLSL //=============================================================== //バーテックスシェーダ const vertexShader =` attribute vec3 position; uniform mat4 mvpMatrix; void main(void){ gl_Position = mvpMatrix * vec4(position,1.0); } `; //フラグメントシェーダ const fragmentShader =` void main(void){ gl_FragColor = vec4(1.0,1.0,1.0,1.0); } `; //=============================================================== // Init //=============================================================== window.addEventListener('load',function(){ init(); }); let canvas,gl; function init(){ //canvasの設定 canvas = document.getElementById('webgl-canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; //WebGLコンテキストの取得 gl = canvas.getContext('webgl'); //画面の初期化 gl.clearColor(0.0,0.0,0.0,1.0); gl.clearDepth(1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); //シェーダの生成 const vShader = createShader(gl.VERTEX_SHADER,vertexShader); const fShader = createShader(gl.FRAGMENT_SHADER,fragmentShader); //プログラムオブジェクトの生成とリンク const prg = createProgram(vShader,fShader); const attLocation = gl.getAttribLocation(prg,'position'); const attStride = 3; //頂点座標の設定 const vertexPositions = [ 0.0,1.5,0.0, 0.8,0.0,0.0, -0.8,0.0,0.0 ]; //VBO(頂点バッファーオブジェクト)の生成 const vbo = createVbo(vertexPositions); gl.bindBuffer(gl.ARRAY_BUFFER,vbo); gl.enableVertexAttribArray(attLocation); gl.vertexAttribPointer(attLocation,attStride,gl.FLOAT,false,0,0); //行列の生成 const m = new matIV(); const mMatrix = m.identity(m.create()); const vMatrix = m.identity(m.create()); const pMatrix = m.identity(m.create()); const mvpMatrix = m.identity(m.create()); //ビュー座標変換 m.lookAt([0.0,0.0,3.0],[0,0,0],[0,1,0],vMatrix); //プロジェクション座標変換 m.perspective(90,canvas.width/canvas.height,0.1,100,pMatrix); //各行列を掛け合わせる m.multiply(pMatrix,vMatrix,mvpMatrix); m.multiply(mvpMatrix,mMatrix,mvpMatrix); const uniLocation = gl.getUniformLocation(prg,'mvpMatrix'); gl.uniformMatrix4fv(uniLocation,false,mvpMatrix); //モデルの描画 gl.drawArrays(gl.TRIANGLES,0,3); //コンテキストの再描画 gl.flush(); } //=============================================================== // Function //=============================================================== //シェーダを生成 function createShader(shaderType,shaderText){ const shader = gl.createShader(shaderType); gl.shaderSource(shader,shaderText); gl.compileShader(shader); return shader; } //プログラムオブジェクトを生成しシェーダをリンク function createProgram(vs,fs){ const program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); gl.useProgram(program); return program; } //VBOを生成 function createVbo(data){ const vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,vbo); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(data),gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER,null); return vbo; }
完成したデモになります。WebGLで三角形ポリゴンを表示しました。