webGL笔记2-绘制三角形

36次阅读

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

<!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">
            attribute vec3 v3Position;
            void  main(void) {gl_Position = vec4(v3Position, 1.0);
            }
        </script>
        <script id="shader-fs" type="x-shader/x-fragment">
            void main(void) {gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
            }
        </script>
        <script>
            var canvas = document.getElementById('canvas');
            var webgl = canvas.getContext('webgl');
            var v3PositionIndex = 0;
            // 用来设置视口
            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.linkProgram(programObject);

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

            webgl.useProgram(programObject);

            var jsArrayData = [
                0.0, 0.5, 0.0,
                -0.5, -0.5, -0.0,
                0.5, -1.0, 0.0
            ];
            // 创建缓冲区对象
            var traingleBuffer = webgl.createBuffer();
            // 绑定缓冲区对象
            webgl.bindBuffer(webgl.ARRAY_BUFFER, traingleBuffer);
            // 顶点数组 data 数据传入缓冲区
            webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);

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

            webgl.drawArrays(webgl.TRIANGLES, 0, 3);
        </script>
    </body>
</html>

正文完