webgl-learn/rectangleX.html at master · KohPoll/webgl-learn · GitHub

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
    <title>Web GL Demo - TriangleX</title>
    <meta charset="utf-8" />

    <style>
    #c { border: 2px solid red; }
    </style>

    <script src="lib/vect-mat.js"></script>
    <script src="lib/gl-util.js"></script>
</head>
<body>
    <canvas id="c" width="400" height="400"></canvas>

    <script id="shader-vs" type="x-shader/vs">
        attribute vec3 aVertexPos;
        attribute vec3 aVertexColor;

        varying vec3 vVertexColor;

        void main() {
            gl_Position = vec4(aVertexPos, 1.0);
            vVertexColor = aVertexColor;
        }
    </script>

    <script id="shader-fs" type="x-shader/fs">
        precision mediump float;

        varying vec3 vVertexColor;

        void main() {
            gl_FragColor = vec4(vVertexColor, 1.0);
        }
    </script>

    <script>
        var glu = GLU('c'), gl = glu.gl();

        // buffer
        var vertexPosBuffer, vertices,
            vertexColorBuffer, verticesColor;

        /*
        2--3
        |\ |
        | \|
        0--1
		*/
        vertices = [
            -0.5, -0.5,  0.0,
            0.5, -0.5,  0.0,
            -0.5,  0.5,  0.0,
            0.5,  0.5,  0.0
        ];
        // -1.0 <= x <= 1.0
        // -1.0 <= y <= 1.0
        // -1.0 <= z <= 1.0
        vertexPosBuffer = glu.createBuffer(vertices);

        // r,g,b
        verticesColor = [
            1.0, 0.0, 0.0,
            0.0, 1.0, 0.0,
            0.0, 0.0, 1.0,
            0.0, 0.0, 0.0
        ];
        vertexColorBuffer = glu.createBuffer(verticesColor);

        var vs, fs, program;

        // shader
        vs = document.getElementById('shader-vs').textContent;
        fs = document.getElementById('shader-fs').textContent;

        // program
        program = glu.createProgram(vs, fs);
        gl.useProgram(program);

        /* note: (http://stackoverflow.com/questions/3665671/is-vertexattribpointer-needed-after-each-bindbuffer)
           you can bind multiple buffers to different attributes.
           say attribute 0 uses buffer 1, while attribute 1 and 2 use buffer 2).
           it may look like somthing as:
            glBindBuffer(GL_ARRAY_BUFFER, 1);
            glVertexAttribPointer(0, ...)

            glBindBuffer(GL_ARRAY_BUFFER, 2);
            glVertexAttribPointer(1, ...)
            glVertexAttribPointer(2, ...)

            glDraw*(...)
         */

        // 用bind的buffer,向shader传递attribute数据(点位置)
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBuffer);
        program.vertexPosAttrib = gl.getAttribLocation(program, 'aVertexPos');
        gl.enableVertexAttribArray(program.vertexPosAttrib);
        gl.vertexAttribPointer(program.vertexPosAttrib, 3, gl.FLOAT, false, 0, 0);

        // 用bind的buffer,向shader传递attribute数据(点颜色)
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
        program.vertexColorAttrib = gl.getAttribLocation(program, 'aVertexColor');
        gl.enableVertexAttribArray(program.vertexColorAttrib);
        gl.vertexAttribPointer(program.vertexColorAttrib, 3, gl.FLOAT, false, 0, 0);

        // draw
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    </script>
</body>
</html>