wiggle/examples/example001_triangle.html at master · devops001/wiggle · 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
<html>
  <head>
    <title>example001_triangle</title>
    <meta charset="utf-8"/>
    <script src="../glMatrix.js"></script>
    <script src="../wiggle.js"></script>

    <script id="vertex_shader" type="text/vertex-shader">
      attribute vec3 position;
      uniform   mat4 perspectiveMatrix;
      uniform   mat4 modelViewMatrix;
      void main(void) {
        gl_Position = perspectiveMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    </script>

    <script id="fragment_shader" type="text/fragment-shader">
      void main(void) {
        gl_FragColor = vec4(0.3, 0.5, 0.7, 1.0);
      }
    </script>

    <script id="shader_functions" type="text/javascript">
      function setupShaderLocations(gl, shaderProgram) {
        shaderProgram.loc = {};
        shaderProgram.loc.position          = gl.getAttribLocation(shaderProgram,  "position");
        shaderProgram.loc.perspectiveMatrix = gl.getUniformLocation(shaderProgram, "perspectiveMatrix");
        shaderProgram.loc.modelViewMatrix   = gl.getUniformLocation(shaderProgram, "modelViewMatrix");
        gl.enableVertexAttribArray(shaderProgram.loc.position);
      }

      function setupShaderMatrices(shaderProgram, canvas) {
        shaderProgram.mat4 = {};
        shaderProgram.mat4.perspective = mat4.create();
        shaderProgram.mat4.modelView   = mat4.create();
        mat4.perspective(45.0, canvas.width/canvas.height, 0.1, 100.0, shaderProgram.mat4.perspective);
        mat4.identity(shaderProgram.mat4.modelView);
      }

      function setShaderUniformValues(gl, shaderProgram) {
        gl.uniformMatrix4fv(shaderProgram.loc.modelViewMatrix,   false, shaderProgram.mat4.modelView);
        gl.uniformMatrix4fv(shaderProgram.loc.perspectiveMatrix, false, shaderProgram.mat4.perspective);
      }
    </script>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script id="main" type="text/javascript">
      var canvas = document.getElementById("canvas");
      var gl     = initGL(canvas);
      var shader = initShader(gl, canvas);

      setupShaderLocations(gl, shader);
      setupShaderMatrices(shader, canvas);
      setShaderUniformValues(gl, shader);

      var vertices = [
         0.0,  1.0, 0.0,
        -1.0, -1.0, 0.0,
         1.0, -1.0, 0.0
      ];

      var buffer = setupBuffer(gl, vertices, 3);

      startRendering();

      function render() {
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        gl.useProgram(shader);

        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.vertexAttribPointer(shader.loc.position, buffer.numFloatsPerVertex, gl.FLOAT, false, 0, 0);
        gl.drawArrays(gl.TRIANGLES, 0, buffer.numVertices);
      }

      function setupBuffer(gl, vertices, numFloatsPerVertex) {
        var buffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        buffer.numFloatsPerVertex = numFloatsPerVertex;
        buffer.numVertices        = vertices.length / numFloatsPerVertex;
        return buffer;
      }
    </script>
  </body>
</html>