webg的shader系列（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;
}