webGL笔记-1 索引缓存区的使用-绘制矩形


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!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(0.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.5, 0.5, 0.0, 0.0, 0.0, 0.0,
                0.5, 0.5, -0.0, 0.0, 0.0, 0.0,
                0.5, -0.5, 0.0, 0.0, 0.0, 0.0,
                -0.5, -0.5, 0.0, 0.0, 0.0, 0.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);
            //缓冲区中的数据按照一定的规律传递给位置变量apos
            webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 4 * 6, 0);

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