Anatomy of a WebGL App

1. Create a canvas element.
2. Obtain a drawing context for the canvas.
3. Initialize the viewport.
4. Create one or more buffers containing the data to be rendered (typically vertices).
5. Create one or more matrices to define the transformation from vertex buffers to screen space.
6. Create one or more shaders to implement the drawing algorithm.
7. Initialize the shaders with Draw.

Enable webGL in firefox

1. In firefox, bring up about:config
2. Make sure webgl.disabled set to false

operations to manipulate WebGL buffers

• createBuffer - creates a new buffer
• deleteBuffer(buffer) - Deletes a supplied buffer
• bindBuffer(target, buffer) - binds a buffer object. Don't forget to unbind a buffer when your done using it, so you don't run into memory problems later...
  • Accepted values for target are:
  • ARRAY_BUFFER - for vertices
  • ELEMENT_ARRAY_BUFFER - for indices
• bufferData(target, data, type) - Provides buffer data. Accepted values for target are:
  • Accepted values for target are:
  • ARRAY_BUFFER - for vertices
  • ELEMENT_ARRAY_BUFFER - for indices
• Accepted values for data are:
• JavaScript typed arrays - Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, and Float64Array.
• Accepted values for type are:
• STATIC_DRAW - buffer will be populated once and never changed
• DYNAMIC_DRAW - buffer will change frequently
• STREAM_DRAW - buffer will change on every rendering cycle (spec'ed once and used once)

activate a vertex shader

1. Bind a VBO (Vertex Buffer Object - contains the data that describes the geometry to be rendered
   
   gl.bindBuffer(gl.ARRAY_BUFFER, myBuffer)
2. Point an attribute to currently bound VBO
   
   gl.vertexAttribPointer(index, size, type, normalize, stride, offset);
• Index: An attribute's index that we are going to map the currently-bound buffer to.
• Size: Indicates the number of values per vertex that are stored in the currently bound buffer
• Type: Specifies the data type of the values stored in the current buffer. It is one ofthe following constants: FIXED, BYTE, UNSIGNED_BYTE, FLOAT, SHORT, or UNSIGNED_SHORT.
• Normalize: This parameter can be set to true or false. It handles numeric conversions that are beyond the scope of this introductory guide. For our purposes, we will set this parameter to false.
• Stride: If stride is 0, then we are indicating that elements are stored sequentially in the buffer.
• Offset: The position in the buffer from which we will start reading values for the corresponding attribute. It is usually set to 0 to indicate that we will start reading values from the first element of the buffer.
3. Enable the attribute
   
   gl.enableVertexAttribArray(positionAttributeLocation);
4. unbind
   
   gl.bindBuffer(gl.ARRAY_BUFFER, null);

Render

• mode: Represents the type of primitive that we are going to render. The possible values for mode are gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, and gl.TRIANGLES.
• first: Specifies the starting element in the enabled arrays.
• count: The number of elements to be rendered.

• mode: Represents the type of primitive we are going to render. The possible values for mode are POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP, TRIANGLE_FAN, and TRIANGLES.
• count: Specifies the number of elements to be rendered.
• type: Specifies the type of the values in indices. Must be UNSIGNED_BYTE or UNSIGNED_SHORT, as we are handling indices (integer numbers).
• offset: Indicates which element in the buffer will be the starting point for rendering. It is usually the first element (zero value).
• Index Buffer Objects (IBOs) - IBOs contain information about the relationship of the vertices as the rendering pipeline constructs the drawing type primitives.

buffers/definitions

• Vertex Array Objects (VAOs) allow you to store all of the vertex/index binding information for a set of buffers in a single, easy to manage object.
• Vertex Buffer Objects (VBOs) - VBOs contain the data that is used to describe the geometry to be rendered. Vertex coordinates, which are points that define the vertices of 3D objects, are usually stored and processed in WebGL as VBOs
• Index Buffer Objects (IBOs) - IBOs contain information about the relationship of the vertices as the rendering pipeline constructs the drawing type primitives.
• Vertex Shader - The shader manipulates per-vertex data, such as vertex coordinates, normals, colors, and texture coordinates. This data is represented by attributes inside the vertex shader.
• Fragment Shader - Every set of three vertices defines a triangle. Each element on the surface of that triangle needs to be assigned a color. Without this, our surfaces wouldn't have a color. Each surface element is called a fragment.
• Framebuffer - 2D Buffer containing fragments that have been processed by the fragment shader. Final dest of rendering pipeline
• Attributes - input vars used in vertex shader. used to specify how to pull data out of buffers and provide them to vertex shader. For example., you may put positions in a buffer as 3 32-bit floats per position.
• Uniforms - input vars that are available to both vertex shader and fragment shader. constant during rendering cycle
• Varyings - used to pass data from vertex shader to the fragment shader. values set on a varying by a vertex shader will be interpolated while executing the fragment shader
• Vertices - points that define the corners of 3d objects. 3 floating-point numbers.
• indices - numeric labels for vertices in a given 3d scene. They allow us to tell WebGL to connect vertices in order to produce a surface.

Operations to Manipulate WebGL Buffers

• createBuffer() - creates new buffer
• deleteBuffer(buffer) - deletes supplied buffer
• bindBuffer(target, buffer)
• bufferData(target, data, type)

Associating Attributes to VBOs

1. Bind a VBO
   gl.bindBuffer(gl.ARRAY_BUFFER, myBuffer);
2. Point an attribute to the currently-bound VBO
   gl.vertexAttribPointer(index, size, type, normalize, stride, offset);
3. Enable the attribute
   gl.enableVertexAttribArray(positionAttributeLocation);
4. unbinding a VBO
gl.bindBuffer(gl.ARRAY_BUFFER, null);