WebGL/WebGL_01_Triangle.html at main · mikem8891/WebGL · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebGL Demo 1: Triangle</title>
</head>
<body>
  <h1>WebGL Demo 1: Triangle</h1>
  <canvas id="renderCanvas" width="800" height="600">
    Browser does not support HTML5
  </canvas><br>
  Demo is above
</body>

<!-- Vertex Shader Source Code -->
<script id="vshader" type="x-shader/x-vertex">

  precision mediump float;
  attribute vec2 vertPosition;
  attribute vec3 vertColor;

  varying vec3 fragColor;

  void main(){
    gl_Position = vec4(vertPosition, 0.0, 1.0);
    fragColor = vertColor;
  }

</script>

<!-- Fragment Shader Source Code -->
<script id="fshader" type="x-shader/x-fragment">

  precision mediump float;

  varying vec3 fragColor;

  void main(){
    gl_FragColor = vec4(fragColor, 1.0);
  }

</script>

<!-- Initialize WebGl canvas and Render Triangle -->
<script>
function main(){
  console.log('Working');

  const canvas = document.getElementById('renderCanvas');
  var gl = canvas.getContext('webgl');

  if(!gl){
    console.log('Attempting to use experimental context.');
    canvas.getContext('experimental-webgl');
  }

  if(!gl)
    alert('WebGL not supported');

  gl.clearColor(0.75, 0.85, 0.80, 1.00);
  gl.clear(gl.COLOR_BUFFER_BIT);

  // Create Blank Shaders Object
  var vertexShader   = gl.createShader(gl.VERTEX_SHADER);
  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

  // Get Shader source code from above
  var vertexShaderText   = document.getElementById('vshader').innerHTML;
  var fragmentShaderText = document.getElementById('fshader').innerHTML;

  // Set shader source code
  gl.shaderSource(vertexShader,   vertexShaderText);
  gl.shaderSource(fragmentShader, fragmentShaderText);

  // Compiler shader with source code
  gl.compileShader(vertexShader);
  gl.compileShader(fragmentShader);

  // Check for compilation errors
  if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)){
    alert('ERROR compiling vertex shader!',
                  gl.getShaderInfoLog(vertexShader));
    return;
  }
  if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)){
    alert('ERROR compiling fragment shader!',
                  gl.getShaderInfoLog(fragmentShader));
    return;
  }

  // Create and link the program to run the shaders
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);

  // Check for errors
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)){
    alert('ERROR linking program',
                  gl.getProgramInfoLog(program));
    return;
  }
  gl.validateProgram(program);
  if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)){
    alert('ERROR validating program',
                  gl.getProgramInfoLog(program));
    return;
  }

  // Specify vertices
  var triangleVertices =
  [ // X,    Y,    R,    G,    B
     0.0,  0.5, 1.00, 1.00, 0.00,
    -0.5, -0.5, 0.70, 0.00, 1.00,
     0.5, -0.5, 0.10, 1.00, 0.60
  ];

  // Create buffers
  var triangleVertexBufferObject = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

  var positionAttribLocation = gl.getAttribLocation(program, 'vertPosition');
  var colorAttribLocation    = gl.getAttribLocation(program, 'vertColor');
      // Returns '0' because this the first attribute in the shader source code
  gl.vertexAttribPointer(
    positionAttribLocation,  // Attribute location
    2,                       // Number of elements per attribute (X, Y)
    gl.FLOAT,                // Data type of the elements
    gl.FALSE,                // Whether the elements are normalized
    5 * Float32Array.BYTES_PER_ELEMENT,  // Size of an individual vertex
    0  // Offset from the beginning of a single vertex to this attribute
  );
  gl.vertexAttribPointer(
    colorAttribLocation,  // Attribute location
    3,                    // Number of elements per attribute (R, G, B)
    gl.FLOAT,             // Data type of the elements
    gl.FALSE,             // Whether the elements are normalized
    5 * Float32Array.BYTES_PER_ELEMENT,  // Size of an individual vertex
    2 * Float32Array.BYTES_PER_ELEMENT // Offset from the beginning of a single vertex to this attribute
  );

  gl.enableVertexAttribArray(positionAttribLocation); // Enables the attribute
  gl.enableVertexAttribArray(colorAttribLocation); // Enables the attribute

  // Main render loop for something like a game (just for info)
  /*
  var loop = function () {
    updateWorld();
    renderWorld();
    if (running)
      requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
  */

  gl.useProgram(program);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
}

window.onload = main;
</script>
</html>