WebGL

I decided that I wanted to know more about WebGL, so I am creating this page to house some WebGL projects as I go through a WebGL tutorial. The tutorial that I am going through can be seen here.

WebGL Notes

• WebGL Overview

  • WebGL allows front-end, client-side applications to use OpenGL ES (specifically, the 2.0 standard).
  • It's a combination of JavaScript and graphics programming.

• WebGL Setup

  • Requires an HTML5 <canvas> element.
  • You obtain an OpenGL context from the canvas, which is the state machine for OpenGL operations.
  • Initialization in WebGL is simpler than in C++ or other languages.

• Graphics Pipeline

  • Data loading in WebGL from the internet can be slower than from a local hard drive.
  • The general pipeline involves:
    • Updating global variables for the graphics card.
    • Drawing, typically using triangles.
    • Vertex shader: Transforms 3D coordinates to 2D screen space (from -1 to 1 on both axes). Can also pass other vertex data (e.g., color).
    • Rasterization: Fills in the triangles (determines pixels and their properties).
    • Fragment shader: Determines the color of each pixel.
    • Frame buffer (skipped over).

• Coordinate Systems

  • WebGL's Y-axis goes from bottom to top, unlike some other graphics APIs.

• Shaders

  • Vertex shaders use attribute for input parameters and varying for output parameters.
  • GL_Position is a special variable in vertex shaders to set the vertex position.
  • Fragment shaders use varying for input and GL_FragColor for output.

• Buffers

  • Vertex data is stored in buffers on the GPU.
  • gl.createBuffer(), gl.bindBuffer(), and gl.bufferData() are used to manage these buffers.
  • gl.vertexAttribPointer() defines the layout of vertex attributes.
  • gl.enableVertexAttribArray() enables attributes for use.

• Drawing

  • gl.drawArrays() is used to draw primitives (usually triangles).

• Clearing the Canvas

  • gl.clearColor() sets the clear color.
  • gl.clear() clears the color and depth buffers.

• Programs

  • A program in OpenGL consists of a vertex shader and a fragment shader.
  • gl.createProgram(), gl.attachShader(), and gl.linkProgram() are used to create and link programs.
  • gl.useProgram() activates a program.

• Uniforms

  • Uniforms are global variables that stay the same for all vertices and fragments.
  • Used to pass matrices (e.g., world, view, projection) to shaders.
  • Accessed in JavaScript using gl.getUniformLocation() and set with functions like gl.uniformMatrix4fv().

• Matrices

  • Matrices (4x4) are used for transformations (translation, rotation, scale).
  • The order of matrix multiplication is important.
  • External libraries (e.g., GL Matrix) can be used for matrix operations.

• 3D Concepts

  • Points in 3D space are represented as 4D vectors (the 4th component being 1 for positions).
  • View transform simulates a camera (position, target, up direction).
  • Projection matrix transforms 3D camera space to 2D screen space.

• Index Arrays

  • Index arrays (gl.ELEMENT_ARRAY_BUFFER) are used to draw complex geometry by specifying the order of vertices.
  • gl.drawElements() is used instead of gl.drawArrays() when using index arrays.

• Textures

  • Textures are applied to 3D objects by mapping image coordinates (UV coordinates, ranging from 0 to 1) to triangle vertices.
  • Texture parameters (gl.texParameteri()) control wrapping (how the texture repeats) and filtering (how pixels are sampled).
  • gl.createTexture(), gl.bindTexture(), and gl.texImage2D() are used to load and configure textures.
  • Cross-origin images may cause security errors; using a local server can resolve this.
  • gl.activeTexture() selects the texture unit.
  • gl.uniform1i() is used to set the sampler.

• Lighting

  • Phong lighting model (ambient, diffuse, specular).
  • Ambient light: Simulates general illumination.
  • Diffuse light: Depends on the angle of the surface to the light source (dot product of normal and light direction).
  • Normal vectors: Vectors perpendicular to the surface.
  • Lighting calculations can be done per-vertex or per-fragment (per-fragment is more accurate).
  • Structs can be used to organize lighting data in shaders.

• Loading External Files

  • AJAX (XMLHttpRequest) is used to load shaders and other resources asynchronously.
  • Callback functions are used to handle asynchronous results.

• Mandelbrot Fractal

  • Fragment shaders can be used to generate complex visuals like the Mandelbrot fractal.
  • Each pixel's color is calculated independently within the shader.
  • Limitations in floating-point precision (32-bit floats in WebGL) can introduce visual artifacts when zooming in very close.

• Additional WebGL Features (mentioned)

  • Vertex skinning
  • Bump mapping
  • Blending textures
  • Video textures
  • Webcam input