webGL笔记4-绘制渐变矩形

43次阅读

共计 2716 个字符，预计需要花费 7 分钟才能阅读完成。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <canvas id="canvas" width="500" height="500"></canvas>
        <script id="shader-vs" type="x-shader/x-vertex">
            precision lowp float;
            attribute vec3 v3Position;
            attribute vec4 inColor;
            varying   vec4 outColor;
            void  main(void) {
                outColor = inColor;
                gl_Position = vec4(v3Position, 1.0);
            }
        </script>
        <script id="shader-fs" type="x-shader/x-fragment">
            precision lowp float;
            varying vec4 outColor;
            void main(void) {gl_FragColor = outColor;}
        </script>
        <script>
            var canvas = document.getElementById('canvas');
            var webgl = canvas.getContext('webgl');
            var v3PositionIndex = 0;
            var inColor  =  1;
            // 用来设置视口
            webgl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);
            webgl.clearColor(0.0, 0.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT);

            // 创建 shader
            var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
            var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
            // 指定 shader 数据
            webgl.shaderSource(vertexShaderObject, document.getElementById("shader-vs").innerText);
            webgl.shaderSource(fragmentShaderObject, document.getElementById("shader-fs").innerText);
            // 编译 shader
            webgl.compileShader(vertexShaderObject);
            webgl.compileShader(fragmentShaderObject);

            if (!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) {alert("error: vertexShaderObject");
            }

            if (!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)) {alert("error: fragmentShaderObject");
            }
            // 创建 program
            var programObject = webgl.createProgram();
            // 连接 shader
            webgl.attachShader(programObject, vertexShaderObject);
            webgl.attachShader(programObject, fragmentShaderObject);
            // 为 v3Position 赋值
            webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");
            webgl.bindAttribLocation(programObject, inColor, "inColor");

            webgl.linkProgram(programObject);

            if (!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) {alert("error: programObject");
            }

            webgl.useProgram(programObject);

            var jsArrayData = [// x, y, z, r, g, b, a
                -0.5, 0.5, 0.0, 1.0, 0.0, 0.0, 1.0,
                0.5, 0.5, -0.0, 0.0, 1.0, 0.0, 1.0,
                0.5, -0.5, 0.0, 0.0, 0.0, 1.0, 1.0,
                -0.5, -0.5, 0.0, 1.0, 1.0, 0.0, 1.0
            ];
            var indexDatas = [
                0, 1, 2,
                0, 2, 3
            ];
            // 创建缓冲区对象
            var traingleBuffer = webgl.createBuffer();
            // 绑定缓冲区对象
            webgl.bindBuffer(webgl.ARRAY_BUFFER, traingleBuffer);
            // 顶点数组 data 数据传入缓冲区
            webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);
            
            var indexBuffer = webgl.createBuffer();
            webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);
            webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexDatas), webgl.STATIC_DRAW);

            webgl.enableVertexAttribArray(v3PositionIndex);
            webgl.enableVertexAttribArray(inColor);
            // 缓冲区中的数据按照一定的规律传递给位置变量 apos
            webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 4 * 7, 0);
            webgl.vertexAttribPointer(inColor, 4, webgl.FLOAT, false, 4 * 7, 12);

            webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0)
        </script>
    </body>
</html>

正文完