webgl入门系列（3）——mvp矩阵

 mvp矩阵实际上就是：

<投影矩阵>x<视图矩阵>x<模型矩阵>x<顶点坐标>

<canvas id="webgl" width="800px" height="600px"></canvas> <script> //vertex shader var VSHADER_SOURCE = ` attribute vec4 a_Position; attribute vec4 a_Color; uniform mat4 u_ViewMatrix; uniform mat4 u_ModelMatrix; uniform mat4 u_ProjMatrix; varying vec4 v_Color; void main() { // gl_Position = a_Position; gl_Position =u_ProjMatrix * u_ViewMatrix * u_ModelMatrix*a_Position; v_Color = a_Color; } `; //fragment shader var FSHADER_SOURCE = ` precision mediump float; varying vec4 v_Color; void main() { gl_FragColor = v_Color; } `; //main ready(loadWEBGL); //主程序 function loadWEBGL() { var canvas = document.getElementById('webgl'); if (!canvas) { console.error('Failed to get canvas-element!'); return; } var webgl = canvas.getContext('webgl'); if (!webgl) { console.error('Failed to get canvas context: webgl!'); return; } if (!initShaders(webgl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.error('Failed to init shaders!'); return; } var n = initBuffer(webgl); if (n < 0) { console.error('Failed to init buffer!'); return; } setViewMatrix(webgl); setModelMatrix(webgl); setProjMatrix(webgl, canvas); webgl.clearColor(0.0, 0.0, 0.0, 1.0); webgl.clear(webgl.COLOR_BUFFER_BIT); webgl.drawArrays(webgl.TRIANGLES, 0, n); } function initBuffer(webgl) { var vertexData = new Float32Array([ //顶点坐标颜色 0.0, 0.5, -0.4, 0.4, 1.0, 0.4, -0.5, -0.5, -0.4, 0.4, 1.0, 0.4, 0.5, -0.5, -0.4, 1.0, 0.4, 0.4, 0.5, 0.4, -0.2, 1.0, 0.4, 0.4, -0.5, 0.4, -0.2, 1.0, 1.0, 0.4, 0, -0.6, -0.2, 1.0, 1.0, 0.4, 0.0, 0.5, 0.0, 0.4, 0.4, 1.0, -0.5, -0.5, 0.0, 0.4, 0.4, 1.0, 0.5, -0.5, 0.0, 1.0, 0.4, 0.4 ]); var n = vertexData.length / 6; var FSIZE = vertexData.BYTES_PER_ELEMENT; var a_Position = webgl.getAttribLocation(webgl.program, 'a_Position'); var a_Color = webgl.getAttribLocation(webgl.program, 'a_Color'); var buffer = webgl.createBuffer(); webgl.bindBuffer(webgl.ARRAY_BUFFER, buffer); webgl.bufferData(webgl.ARRAY_BUFFER, vertexData, webgl.STATIC_DRAW); webgl.vertexAttribPointer(a_Position, 3, webgl.FLOAT, false, FSIZE * 6, 0); webgl.vertexAttribPointer(a_Color, 3, webgl.FLOAT, false, FSIZE * 6, FSIZE * 3); webgl.enableVertexAttribArray(a_Position); webgl.enableVertexAttribArray(a_Color); return n; } function setViewMatrix(webgl) { var u_ViewMatrix = webgl.getUniformLocation(webgl.program, 'u_ViewMatrix'); //设置视点 视线 上方向 var viewMatrix = new Matrix4(); viewMatrix.setLookAt(-0.20, 0.05, 0.25, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); webgl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements); } function setModelMatrix(webgl) { var u_ModelMatrix = webgl.getUniformLocation(webgl.program, 'u_ModelMatrix'); //设置视点 视线 上方向 var modelMatrix = new Matrix4(); modelMatrix.setRotate(45, 0, 0, 1); webgl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements); } function setProjMatrix(webgl, canvas) { var u_ProjMatrix = webgl.getUniformLocation(webgl.program, 'u_ProjMatrix'); //设置视点 视线 上方向 var projMatrix = new Matrix4(); projMatrix.setPerspective(45, canvas.width / canvas.height, 1, 100); webgl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements); } </script>

但是上面的算法中，每个顶点都要计算几次mvp，所以可以在代码中直接先计算好mvp矩阵，然后在顶点着色器中直接调用就好。

<canvas id="webgl" width="800px" height="600px"></canvas> <script> //vertex shader var VSHADER_SOURCE = ` attribute vec4 a_Position; attribute vec4 a_Color; uniform mat4 u_MVPMatrix; varying vec4 v_Color; void main() { // gl_Position = a_Position; gl_Position =u_MVPMatrix*a_Position; v_Color = a_Color; } `; //fragment shader var FSHADER_SOURCE = ` precision mediump float; varying vec4 v_Color; void main() { gl_FragColor = v_Color; } `; //main ready(loadWEBGL); //主程序 function loadWEBGL() { var canvas = document.getElementById('webgl'); if (!canvas) { console.error('Failed to get canvas-element!'); return; } var webgl = canvas.getContext('webgl'); if (!webgl) { console.error('Failed to get canvas context: webgl!'); return; } if (!initShaders(webgl, VSHADER_SOURCE, FSHADER_SOURCE)) { console.error('Failed to init shaders!'); return; } var n = initBuffer(webgl); if (n < 0) { console.error('Failed to init buffer!'); return; } setMVPMatrix(webgl, canvas); webgl.clearColor(0.0, 0.0, 0.0, 1.0); webgl.clear(webgl.COLOR_BUFFER_BIT); webgl.drawArrays(webgl.TRIANGLES, 0, n); } function initBuffer(webgl) { var vertexData = new Float32Array([ //顶点坐标颜色 0.0, 0.5, -0.4, 0.4, 1.0, 0.4, -0.5, -0.5, -0.4, 0.4, 1.0, 0.4, 0.5, -0.5, -0.4, 1.0, 0.4, 0.4, 0.5, 0.4, -0.2, 1.0, 0.4, 0.4, -0.5, 0.4, -0.2, 1.0, 1.0, 0.4, 0, -0.6, -0.2, 1.0, 1.0, 0.4, 0.0, 0.5, 0.0, 0.4, 0.4, 1.0, -0.5, -0.5, 0.0, 0.4, 0.4, 1.0, 0.5, -0.5, 0.0, 1.0, 0.4, 0.4 ]); var n = vertexData.length / 6; var FSIZE = vertexData.BYTES_PER_ELEMENT; var a_Position = webgl.getAttribLocation(webgl.program, 'a_Position'); var a_Color = webgl.getAttribLocation(webgl.program, 'a_Color'); var buffer = webgl.createBuffer(); webgl.bindBuffer(webgl.ARRAY_BUFFER, buffer); webgl.bufferData(webgl.ARRAY_BUFFER, vertexData, webgl.STATIC_DRAW); webgl.vertexAttribPointer(a_Position, 3, webgl.FLOAT, false, FSIZE * 6, 0); webgl.vertexAttribPointer(a_Color, 3, webgl.FLOAT, false, FSIZE * 6, FSIZE * 3); webgl.enableVertexAttribArray(a_Position); webgl.enableVertexAttribArray(a_Color); return n; } function setMVPMatrix(webgl, canvas) { var u_mvpMatrix = webgl.getUniformLocation(webgl.program, 'u_MVPMatrix'); var modelMatrix = new Matrix4(); var viewMatrix = new Matrix4(); var projMatrix = new Matrix4(); var mvpMatrix = new Matrix4(); modelMatrix.setRotate(45, 0, 0, 1); viewMatrix.setLookAt(-0.20, 0.05, 0.25, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); projMatrix.setPerspective(45, canvas.width / canvas.height, 1, 100); mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix) webgl.uniformMatrix4fv(u_mvpMatrix, false, mvpMatrix.elements); } </script>