webg入门系列（2）——三角形、webgl2

1、画一个简单的三角形

接着上节，只需要修改下面这行代码即可。

webgl.drawArrays(webgl.TRIANGLES,0,3)

最终代码

<canvas id="container" width="800px" height="600px"></canvas> <script> const canvas=document.getElementById('container') var VSHADER=` attribute vec4 a_Position; varying vec4 v_color; void main(){ gl_Position=a_Position; } `; var FSHADER=` precision mediump float; void main(){ gl_FragColor=vec4(1.0,0.0,0.0,1.0); } `; let webgl=container.getContext('webgl') //获得webgl的上下文 if(!webgl) { console.assert("该网页不支持webgl2") } if(!initShaders(webgl, VSHADER, FSHADER)){ console.assert("初始化shader错误") } webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色 let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position') let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]) var colors = [] webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色 let vertexBuffer=webgl.createBuffer() //创建缓冲区对象 webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer) //将缓冲区对象绑定到目标 webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据 webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象 webgl.drawArrays(webgl.TRIANGLES,0,3) </script>

2、平移

<canvas id="container" width="800px" height="600px"></canvas> <script> const canvas=document.getElementById('container') var VSHADER=` attribute vec4 a_Position; uniform mat4 u_zformMatrix; void main(){ gl_Position=u_zformMatrix*a_Position; } `; var FSHADER=` precision mediump float; void main(){ gl_FragColor=vec4(1.0,0.0,0.0,1.0); } `; let webgl=container.getContext('webgl') //获得webgl的上下文 if(!webgl) { console.assert("该网页不支持webgl2") } if(!initShaders(webgl, VSHADER, FSHADER)){ console.assert("初始化shader错误") } webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色 let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position') let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]) var colors = [] webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色 let vertexBuffer=webgl.createBuffer() //创建缓冲区对象 webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer) //将缓冲区对象绑定到目标 webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据 webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象 let u_zformMatrix=webgl.getUniformLocation(webgl.program, 'u_zformMatrix') let zformMatrix=new Matrix4(); zformMatrix.translate(0.5,0,0) webgl.uniformMatrix4fv(u_zformMatrix, false, zformMatrix.elements) webgl.drawArrays(webgl.TRIANGLES,0,3) </script>

3、旋转180度

只需在上面的基础上，修改矩阵即可

let zformMatrix=new Matrix4(); zformMatrix.setRotate(180,0,0,1)

4、缩放0.5

只需在上面的基础上，修改矩阵即可

let zformMatrix=new Matrix4(); zformMatrix.setScale(0.5,0.5,0.5)

5、旋转加移动

let zformMatrix=new Matrix4(); zformMatrix.setTranslate(0.5,0,0) zformMatrix.rotate(180,0,0,1)

6、各个顶点不同的颜色

这个要为各个顶点赋予不同的颜色需要用到varying这个关键字

<canvas id="container" width="800px" height="600px"></canvas> <script> const canvas=document.getElementById('container') var VSHADER=` attribute vec4 a_Position; uniform mat4 u_zformMatrix; attribute vec4 a_color; varying vec4 v_color; void main(){ gl_Position=u_zformMatrix*a_Position; v_color=a_color; } `; var FSHADER=` precision mediump float; varying vec4 v_color; void main(){ gl_FragColor=v_color; } `; let webgl=container.getContext('webgl') //获得webgl的上下文 if(!webgl) { console.assert("该网页不支持webgl2") } if(!initShaders(webgl, VSHADER, FSHADER)){ console.assert("初始化shader错误") } webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色 //给顶点着色器的顶点赋值 let a_Position= webgl.getAttribLocation(webgl.program, 'a_Position') let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]) let vertexBuffer=webgl.createBuffer() //创建缓冲区对象 webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer) //将缓冲区对象绑定到目标 webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据 webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象 //给顶点的各个点赋予颜色 let a_color= webgl.getAttribLocation(webgl.program, 'a_color') let colors=new Float32Array([1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0]) let colorBuffer=webgl.createBuffer() //创建缓冲区对象 webgl.bindBuffer(webgl.ARRAY_BUFFER,colorBuffer) //将缓冲区对象绑定到目标 webgl.bufferData(webgl.ARRAY_BUFFER,colors,webgl.STATIC_DRAW) //向缓冲区对象写入数据 webgl.vertexAttribPointer(a_color,3,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion webgl.enableVertexAttribArray(a_color) //连接变量a_Position和缓冲区对象 //旋转矩阵 let u_zformMatrix=webgl.getUniformLocation(webgl.program, 'u_zformMatrix') let zformMatrix=new Matrix4() zformMatrix.setRotate(180,0,0,1) webgl.uniformMatrix4fv(u_zformMatrix, false, zformMatrix.elements) webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色 webgl.drawArrays(webgl.TRIANGLES,0,3) </script>

7、使用webgl2.0来重写上面的程序

webgl2.0是基于opengl es3.0来写的，所以对应的shader最好按照新的格式来书写

<canvas id="container" width="800px" height="600px"></canvas> <script> const canvas=document.getElementById('container') var VSHADER=`#version 300 es layout (location=0) in vec4 a_Position; layout (location=1) in vec4 a_color; uniform mat4 u_zformMatrix; out vec4 v_color; void main(){ gl_Position=u_zformMatrix*a_Position; v_color=a_color; } `; var FSHADER=`#version 300 es precision mediump float; in vec4 v_color; out vec4 fragColor; void main(){ fragColor=v_color; } `; let webgl=container.getContext('webgl2') //获得webgl的上下文 if(!webgl) { console.assert("该网页不支持webgl2") } let shaderProgram=initWebgl2Shaders(webgl, VSHADER, FSHADER) if(!shaderProgram){ console.assert("初始化shader错误") } webgl.clearColor(0.0, 0.0, 0.0, 1.0) //设置背景颜色 //给顶点着色器的顶点赋值 let a_Position= webgl.getAttribLocation(shaderProgram, 'a_Position') let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5]) let vertexBuffer=webgl.createBuffer() //创建缓冲区对象 webgl.bindBuffer(webgl.ARRAY_BUFFER,vertexBuffer) //将缓冲区对象绑定到目标 webgl.bufferData(webgl.ARRAY_BUFFER,vertices,webgl.STATIC_DRAW) //向缓冲区对象写入数据 webgl.vertexAttribPointer(a_Position,2,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion webgl.enableVertexAttribArray(a_Position) //连接变量a_Position和缓冲区对象 //给顶点的各个点赋予颜色 let a_color= webgl.getAttribLocation(shaderProgram, 'a_color') let colors=new Float32Array([1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0]) let colorBuffer=webgl.createBuffer() //创建缓冲区对象 webgl.bindBuffer(webgl.ARRAY_BUFFER,colorBuffer) //将缓冲区对象绑定到目标 webgl.bufferData(webgl.ARRAY_BUFFER,colors,webgl.STATIC_DRAW) //向缓冲区对象写入数据 webgl.vertexAttribPointer(a_color,3,webgl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion webgl.enableVertexAttribArray(a_color) //连接变量a_Position和缓冲区对象 //旋转矩阵 let u_zformMatrix=webgl.getUniformLocation(shaderProgram, 'u_zformMatrix') let zformMatrix=new Matrix4() zformMatrix.setRotate(180,0,0,1) webgl.uniformMatrix4fv(u_zformMatrix, false, zformMatrix.elements) webgl.clear(webgl.COLOR_BUFFER_BIT) //清除canvas的颜色 webgl.drawArrays(webgl.TRIANGLES,0,3) </script>

其中initWebgl2Shaders方法

function checkShaderCompilation(gl, shader) { var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS); console.log('Shader compiled successfully: ' + compiled); var compilationLog = gl.getShaderInfoLog(shader); console.log('Shader compiler log: ' + compilationLog); }; function initWebgl2Shaders(gl,vertCode,fragCode){ // Create a vertex shader object var vertShader = gl.createShader(gl.VERTEX_SHADER); // Attach vertex shader source code gl.shaderSource(vertShader, vertCode); // Compile the vertex shader gl.compileShader(vertShader); checkShaderCompilation(gl, vertShader); // Create fragment shader object var fragShader = gl.createShader(gl.FRAGMENT_SHADER); // Attach fragment shader source code gl.shaderSource(fragShader, fragCode); // Compile the fragment shader gl.compileShader(fragShader); checkShaderCompilation(gl, fragShader); // Create a shader program object to store // the combined shader program var shaderProgram = gl.createProgram(); // Attach a vertex shader gl.attachShader(shaderProgram, vertShader); // Attach a fragment shader gl.attachShader(shaderProgram, fragShader); // Link both the programs gl.linkProgram(shaderProgram); // Use the combined shader program object gl.useProgram(shaderProgram); return shaderProgram; }