webgl-learn/triangle.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
<!DOCTYPE html>
<html>
<head>
    <title>Web GL Demo - Triangle</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>
        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
		   /\
		  /  \
		0/____\1
		*/
        vertices = [
            -1.0, -1.0, -1.0,
            1.0, -1.0, -1.0,
            0.0, 1.0, 1.0
        ];
        // -1.0 <= x <= 1.0
        // -1.0 <= y <= 1.0
        // -1.0 <= z <= 1.0
        vertexPosBuffer = glu.createBuffer(vertices);

        var vs, fs, program;

        // shader
        vs = 'attribute vec3 pos; void main() { gl_Position = vec4(pos, 1.0); }';
        fs = 'precision mediump float; void main() { gl_FragColor = vec4(0.0, 0.8, 0.0, 1.0); }';

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

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

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