51 WebGL切换着色器

最新推荐文章于 2024-07-24 00:00:00 发布

暮志未晚NAN

最新推荐文章于 2024-07-24 00:00:00 发布

阅读量3k

点赞数

分类专栏： WebGL 文章标签： webgl 着色器着色器切换

本文链接：https://blog.csdn.net/qq_30100043/article/details/73521969

版权

WebGL 专栏收录该内容

58 篇文章 74 订阅

订阅专栏

到目前为止，以前的程序都是用了一个着色器（顶点着色器和片元着色器），如果一个着色器就能绘制出场景中所有的物体，那就没有问题。然而事实是，对不同物体经常需要使用不同的着色器来绘制，每个着色器中可能有非常复杂的逻辑以实现各种不同的效果。我们可以准备多个着色器，然后根据需要来切换使用它们。

实现切换着色器

为了切换着色器，需要先创建多个着色器程序对象，然后再进行绘制前选择使用的程序对象。以前在39 WebGL着色器和着色器程序对象：initShader()函数的作用中介绍了如何创建程序对象。我们使用gl.useProgram()函数来进行切换。由于现在需要显式地操作着色器和程序对象，所以不能再使用initShaders()函数。但是，可以使用定义在cuon-utils.js中的createProgram()函数，实际上initShaders()函数内部也是调用该函数来创建着色器对象的。

下面是示例程序的流程步骤，由于它创建了两个程序对象，做了两轮相同的操作，所以看上去有点长。关键的代码实际上很简单。

（1）准备用来绘制单色立方体的着色器。

（2）准备用来绘制纹理立方体的着色器。

（3）调用createProgram()函数，利用第一步创建出的着色器，创建着色器程序对象。

（4）调用createProgram()函数，利用第二步创建出的着色器，创建着色器程序对象。

（5）调用gl.useProgram()函数，指定使用第3步创建出的着色器程序对象。

（6）通过缓冲区对象向着色器中传入attribute变量并开启之。

（7）绘制单色立方体。

（8）调用gl.useProgram()函数，指定使用第4步创建出的着色器程序对象。

（9）通过缓冲区对象向着色器传入attribute变量并开启之。

（10）绘制纹理立方体。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        #canvas {
            margin: 0;
            display: block;
        }
    </style>
</head>
<body onload="main()">
<canvas id="canvas" height="800" width="800"></canvas>
</body>
<script src="lib/webgl-utils.js"></script>
<script src="lib/webgl-debug.js"></script>
<script src="lib/cuon-utils.js"></script>
<script src="lib/cuon-matrix.js"></script>
<script>
    //设置WebGL全屏显示
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    //单色立方体的着色器
    var solidVertexShaderSource = "" +
        "attribute vec4 a_Position;\n" +
        "attribute vec4 a_Normal;\n" +
        "uniform mat4 u_MvpMatrix;\n" +
        "uniform mat4 u_NormalMatrix;\n" +
        "varying vec4 v_Color;\n" +
        "void main(){\n" +
        "   vec3 lightDirection = vec3(0.0,0.0, 1.0);\n" +//设置灯光的坐标位置（世界坐标下）
        "   vec4 color = vec4(0.0, 1.0, 1.0, 1.0);\n" + //设置立方体的颜色
        "   gl_Position = u_MvpMatrix * a_Position;\n" +
        "   vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n" +
        "   float nDotL = max(dot(normal, lightDirection), 0.0);\n" +
        "   v_Color = vec4(color.rgb * nDotL, color.a);\n" +
        "}\n";

    var solidFragmentShaderSource = "" +
        "#ifdef GL_ES\n" +
        "precision mediump float;\n" +
        "#endif\n" +
        "varying vec4 v_Color;\n" +
        "void main(){\n" +
        "   gl_FragColor = v_Color;\n" +
        "}\n";

    //纹理立方体的着色器
    var textureVertexShaderSource = "" +
        "attribute vec4 a_Position;\n" +
        "attribute vec4 a_Normal;\n" +
        "attribute vec2 a_TexCoord;\n" +
        "uniform mat4 u_MvpMatrix;\n" +
        "uniform mat4 u_NormalMatrix;\n" +
        "varying float v_NdotL;\n" +
        "varying vec2 v_TexCoord;\n" +
        "void main(){\n" +
        "   vec3 lightDirection = vec3(0.0, 0.0, 1.0);\n" +
        "   gl_Position = u_MvpMatrix * a_Position;\n" +
        "   vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n" +
        "   v_NdotL = max(dot(normal, lightDirection), 0.0);\n" +
        "   v_TexCoord = a_TexCoord;\n" +
        "}\n";

    var textureFragmentShaderSource = "" +
        "#ifdef GL_ES\n" +
        "precision mediump float;\n" +
        "#endif\n" +
        "uniform sampler2D u_Sampler;\n" +
        "varying vec2 v_TexCoord;\n" +
        "varying float v_NdotL;\n" +
        "void main(){\n" +
        "   vec4 color = texture2D(u_Sampler, v_TexCoord);\n" +
        "   gl_FragColor = vec4(color.rgb * v_NdotL, color.a);\n" +
        "}\n";

    function main() {
        var canvas = document.getElementById("canvas");
        var gl = getWebGLContext(canvas);
        if (!gl) {
            console.log("你的浏览器不支持WebGL");
            return;
        }

        //初始化两个程序对象的着色器
        var solidProgram = createProgram(gl,solidVertexShaderSource,solidFragmentShaderSource);
        var textureProgram = createProgram(gl,textureVertexShaderSource,textureFragmentShaderSource);
        if(!solidProgram || !textureProgram){
            console.log("创建程序对象失败");
            return;
        }

        //获取单色立方体的attribute和uniform存储位置
        solidProgram.a_Position = gl.getAttribLocation(solidProgram, "a_Position");
        solidProgram.a_Normal = gl.getAttribLocation(solidProgram, "a_Normal");
        solidProgram.u_MvpMatrix = gl.getUniformLocation(solidProgram, "u_MvpMatrix");
        solidProgram.u_NormalMatrix = gl.getUniformLocation(solidProgram, "u_NormalMatrix");

        //获取纹理立方体的attribute和uniform存储位置
        textureProgram.a_Position = gl.getAttribLocation(textureProgram, "a_Position");
        textureProgram.a_Normal = gl.getAttribLocation(textureProgram, "a_Normal");
        textureProgram.a_TexCoord = gl.getAttribLocation(textureProgram, "a_TexCoord");
        textureProgram.u_MvpMatrix = gl.getUniformLocation(textureProgram, "u_MvpMatrix");
        textureProgram.u_NormalMatrix = gl.getUniformLocation(textureProgram, "u_NormalMatrix");
        textureProgram.u_Sampler = gl.getUniformLocation(textureProgram, "u_Sampler");

        if(solidProgram.a_Position < 0 || solidProgram.a_Normal < 0 || !solidProgram.u_MvpMatrix || !solidProgram.u_NormalMatrix || textureProgram.a_Position < 0 || textureProgram.a_Normal < 0 || textureProgram.a_TexCoord < 0 || !textureProgram.u_MvpMatrix || !textureProgram.u_NormalMatrix || !textureProgram.u_Sampler){
            console.log("无法获取变量的存储位置");
            return;
        }

        //设置单色立方体的相关数据，并存入缓冲区
        var cube = initVertexBuffers(gl);
        if(!cube){
            console.log("无法设置单色立方体的相关信息");
            return;
        }
        
        //设置纹理立方体的纹理数据，并存入缓冲区
        var texture = initTextures(gl,textureProgram);
        if(!texture){
            console.log("纹理数据存储失败");
            return;
        }

        //开启隐藏面消除功能，并设置背景色
        gl.enable(gl.DEPTH_TEST);
        gl.clearColor(0.0, 0.0, 0.0, 1.0);

        //计算视图投影矩阵
        var viewProjectMatrix = new Matrix4();
        viewProjectMatrix.setPerspective(30.0, canvas.width/canvas.height, 1.0, 100.0);
        viewProjectMatrix.lookAt(0.0, 0.0, 15.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

        //开始绘制立方体
        var currentAngle = 0.0; // 当前立方体的角度
        function tick() {
            currentAngle = animate(currentAngle); //更新角度

            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            //绘制单色立方体
            drawSolidCube(gl, solidProgram, cube, -2.0, currentAngle, viewProjectMatrix);

            //绘制纹理立方体
            drawTexCube(gl, textureProgram, cube, texture, 2.0, currentAngle, viewProjectMatrix);

            requestAnimationFrame(tick);
        }

        tick();
    }

    function drawTexCube(gl, program, obj, texture, x, angle, viewProjectMatrix) {
        gl.useProgram(program);

        //分配缓冲对象并启用赋值
        initAttributeVariable(gl, program.a_Position, obj.vertexBuffer); //顶点坐标
        initAttributeVariable(gl, program.a_Normal, obj.normalBuffer); //法向量
        initAttributeVariable(gl, program.a_TexCoord, obj.texCoordBuffer); //纹理坐标
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indexBuffer);

        //设置好纹理对象，开启使用0号的纹理
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture);

        //绘制单色立方体
        drawCube(gl, program, obj, x, angle, viewProjectMatrix);
    }

    function drawSolidCube(gl, program, obj, x, angle, viewProjectMatrix) {
        gl.useProgram(program);

        //分配缓冲区对象并启用赋值
        initAttributeVariable(gl, program.a_Position, obj.vertexBuffer); //顶点坐标
        initAttributeVariable(gl, program.a_Normal, obj.normalBuffer); //法向量
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indexBuffer); //绑定索引

        //绘制单色立方体
        drawCube(gl, program, obj, x, angle, viewProjectMatrix);
    }

    //声明绘制需要变换矩阵变量
    var g_modelMatrix = new Matrix4();
    var g_mvpMatrix = new Matrix4();
    var g_normalMatrix = new Matrix4();

    function drawCube(gl, program, obj, x, angle, viewProjectMatrix) {
        //计算模型矩阵
        g_modelMatrix.setTranslate(x, 0.0, 0.0);
        g_modelMatrix.rotate(20.0, 1.0, 0.0, 0.0);
        g_modelMatrix.rotate(angle, 0.0, 1.0, 0.0);

        //计算出法向量的方向，并赋值
        g_normalMatrix.setInverseOf(g_modelMatrix);
        g_normalMatrix.transpose();
        gl.uniformMatrix4fv(program.u_NormalMatrix, false, g_normalMatrix.elements);

        //计算模型视图投影矩阵
        g_mvpMatrix.set(viewProjectMatrix);
        g_mvpMatrix.multiply(g_modelMatrix);
        gl.uniformMatrix4fv(program.u_MvpMatrix, false, g_mvpMatrix.elements);

        gl.drawElements(gl.TRIANGLES, obj.numIndices, obj.indexBuffer.type, 0);
    }

    function initAttributeVariable(gl,a_attribute, buffer) {
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.vertexAttribPointer(a_attribute, buffer.num, buffer.type, false, 0, 0);
        gl.enableVertexAttribArray(a_attribute);
    }

    var angle_step = 30; //每秒旋转的增量
    var last = +new Date(); //保存上次调用animate()函数的方法
    function animate(angle) {
        var now = +new Date();
        var elapsed = now - last;
        last = now;
        var newAngle = angle + (angle_step * elapsed)/1000.0;

        return newAngle % 360.0;
    }
    
    function initTextures(gl,program) {
        var texture = gl.createTexture();
        if(!texture){
            console.log("无法创建纹理缓冲区");
            return null;
        }

        var img = new Image();
        
        img.onload = function () {
            //将图形数据存入纹理对象
            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);

            //将纹理存入到第一个纹理缓冲区
            gl.useProgram(program);
            gl.uniform1i(program.u_Sampler, 0);

            gl.bindTexture(gl.TEXTURE_2D, null); //解绑当前
        };

        img.src = './resources/orange.jpg';

        return texture;
    }

    function initVertexBuffers(gl) {
        // Create a cube
        //    v6----- v5
        //   /|      /|
        //  v1------v0|
        //  | |     | |
        //  | |v7---|-|v4
        //  |/      |/
        //  v2------v3

        var vertices = new Float32Array([   // 单色立方体的顶点位置数据
            1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0,    // v0-v1-v2-v3 front
            1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0,    // v0-v3-v4-v5 right
            1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0,    // v0-v5-v6-v1 up
            -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0,    // v1-v6-v7-v2 left
            -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,    // v7-v4-v3-v2 down
            1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0     // v4-v7-v6-v5 back
        ]);

        var normals = new Float32Array([   // 单色立方体的法相量
            0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,     // v0-v1-v2-v3 front
            1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,     // v0-v3-v4-v5 right
            0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,     // v0-v5-v6-v1 up
            -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,     // v1-v6-v7-v2 left
            0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,     // v7-v4-v3-v2 down
            0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0      // v4-v7-v6-v5 back
        ]);

        var texCoords = new Float32Array([   // 纹理的坐标
            1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,    // v0-v1-v2-v3 front
            0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0,    // v0-v3-v4-v5 right
            1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 0.0, 0.0,    // v0-v5-v6-v1 up
            1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,    // v1-v6-v7-v2 left
            0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,    // v7-v4-v3-v2 down
            0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0     // v4-v7-v6-v5 back
        ]);

        var indices = new Uint8Array([        // 索引值
            0, 1, 2, 0, 2, 3,    // front
            4, 5, 6, 4, 6, 7,    // right
            8, 9, 10, 8, 10, 11,    // up
            12, 13, 14, 12, 14, 15,    // left
            16, 17, 18, 16, 18, 19,    // down
            20, 21, 22, 20, 22, 23     // back
        ]);

        var obj = {}; //使用对象返回多个缓冲区对象

        //将顶点信息写入缓冲区对象
        obj.vertexBuffer = initArrayBufferForLaterUse(gl, vertices, 3, gl.FLOAT);
        obj.normalBuffer = initArrayBufferForLaterUse(gl, normals, 3, gl.FLOAT);
        obj.texCoordBuffer = initArrayBufferForLaterUse(gl, texCoords, 2, gl.FLOAT);
        obj.indexBuffer = initElementArrayBufferForLaterUse(gl, indices, gl.UNSIGNED_BYTE);
        if(!obj.vertexBuffer || !obj.normalBuffer || !obj.texCoordBuffer || !obj.indexBuffer){
            return null;
        }

        obj.numIndices = indices.length;

        //取消绑定焦点的数据
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

        return obj;
    }

    function initElementArrayBufferForLaterUse(gl,data,type) {
        var buffer = gl.createBuffer(); //创建一个缓冲区对象
        if(!buffer){
            console.log("无法创建缓冲区对象");
            return;
        }

        //将数据写入缓冲区
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);

        buffer.type = type;

        return buffer;
    }

    function initArrayBufferForLaterUse(gl, data, num, type) {
        var buffer = gl.createBuffer(); // 创建一个缓冲区对象
        if(!buffer){
            console.log("无法创建缓冲区对象");
            return;
        }

        //将数据写入缓冲区对象
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

        //保留必要的信息，以便后面使用
        buffer.num = num;
        buffer.type = type;

        return buffer;
    }

</script>
</html>