vincentdesmares

function buffer(vertices){
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
}

vincentdesmares

function drawScene() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

vincentdesmares

var option = gl.TRIANGLE_STRIP; // see above
var start = 0; // The first vertex to plot, in order provided in the buffer.
var count = 4; // The number of vertices to be rendered from the buffer
gl.drawArrays(option, start, count);

vincentdesmares

var numCoordinates = 3; // The numbers of coordinates per vertex. Here 3 coordinates (x,y,z).
var type = gl.FLOAT; // The size of each element is a float.
var normalize = false; //we don’t want to normalize the values here.
 
var stride = 3 * 4 ; // the length of the stride in bytes (the size of a float in bytes is 4).
var offset = 0; // the offset in bytes between the vertices.
gl.vertexAttribPointer(attributePositionAttribute, numCoordinates, type, normalize, stride, offset);

vincentdesmares

gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer); 
// gl.ARRAY_BUFFER will refer to squareVerticesBuffer
gl.bufferData(gl.ARRAY_BUFFER,vertices, gl.STATIC_DRAW);
// Fills the buffer bound to the gl.ARRAY_BUFFER variable, squareVerticesBuffer

vincentdesmares

var vertices = new Float32Array( [
 
0.2,  0.2,  0.0,
 
-0.2, 0.2,  0.0,
 
0.2,  -0.2, 0.0,
 
-0.2, -0.2, 0.0
 

vincentdesmares

var fragmentShaderSource = document.getElementById("shader-fs").firstChild.textContent;
 
vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
 
fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
 

vincentdesmares

<script id="shader-fs" type="x-shader/x-fragment">
 void main(void) {
   gl_FragColor = vec4(232.0/255.0, 85.0/255.0, 47.0/255.0, 1.0);  // The Inovia orange color!
 }
</script>

vincentdesmares

<script id=”shader-vs” type=”x-shader/x-vertex”>
  attribute vec3 position; // For each vertex, the position value will be defined in JS. 
  
  void main(void) {
    gl_Position = vec4(position, 1.0); // Define gl_Position. Values have to be between -1 and 1.
  }
</script>

vincentdesmares

gl.clearColor(27.0/255,27.0/255,27.0/255, 1.0); // Clear to the Inovia black 
gl.clearDepth(1.0); // Clear the depth buffer. More on that later. 
gl.enable(gl.DEPTH_TEST); // Enable depth testing (objects in the front hide the others)