webgl-learn/rectangle.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
113
114
115
<!DOCTYPE html>
<html>
<head>
    <title>Web GL Demo - Rectangle</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/vertex">
        attribute vec3 aVertexPosition;
        varying vec3 vTexCoord;
        uniform vec3 uOffset;

        void main() {
            gl_Position = vec4(aVertexPosition, 1.0);
            vTexCoord = aVertexPosition + uOffset;
        }
    </script>

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

        varying vec3 vTexCoord;

        void main() {
            gl_FragColor = vec4(vTexCoord, 0.9);
        }
    </script>

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

        //gl.clearColor(0.0, 0.0, 0.6, 1.0);
        //gl.clear(gl.COLOR_BUFFER_BIT);

        // buffer
        var vertexPosBuffer, vertices;

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

        var vs, fs, program,
            offset = [1.0, 1.0, 0.0];

        // 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, 'aVertexPosition');
        gl.enableVertexAttribArray(program.vertexPosAttrib);
        gl.vertexAttribPointer(program.vertexPosAttrib, 3, gl.FLOAT, false, 0, 0);

        // 向shader传递uniform数据
        program.offsetUniform = gl.getUniformLocation(program, 'uOffset');
        gl.uniform3f(program.offsetUniform, offset[0], offset[1], offset[2]);

        // draw
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

        /*note:
          这里设置uOffset为1,1,0.传入fragment shader的vTexCoord是aVertexPosition+uOffset
          然后将这个vTexCoord赋给gl_FragColor.
          则最终各个vertex的颜色会是：
          (0,2,0,1)2--3(2,2,0,1)
                   |\ |
                   | \|
          (0,0,0,1)0--1(2,0,0,1)
          按r,g,b,a来理解,则0->黑色,1->红色,2->绿色,3->黄色
          然后真正的像素颜色,会以这4个顶点的颜色进行插值后得到
         */
    </script>
</body>
</html>