Introduction to WebGL and Basic Concepts

WebGL is a JavaScript API based on OpenGL ES that enables the rendering of interactive 3D and 2D graphics in browsers. It leverages GPU acceleration directly, allowing high-performance graphics processing without plugins, and is widely used in gaming, data visualization, engineering modeling, and other fields.

Core Technical Principles of WebGL

WebGL is based on the OpenGL ES 2.0 specification and provides a drawing context through the HTML5 Canvas element. Its core lies in shader programming, using GLSL (OpenGL Shading Language) to write vertex and fragment shaders:

// Vertex shader example
const vertexShaderSource = `
  attribute vec2 aPosition;
  void main() {
    gl_Position = vec4(aPosition, 0.0, 1.0);
  }
`;

// Fragment shader example
const fragmentShaderSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.5, 0.2, 1.0);
  }
`;

The rendering pipeline includes the following key stages:

1. Vertex processing: Transforming coordinates via the vertex shader
2. Primitive assembly: Connecting vertices into triangles/lines, etc.
3. Rasterization: Converting primitives into pixels
4. Fragment processing: Calculating colors via the fragment shader

Basic Rendering Process

A complete WebGL program typically involves the following steps:

// 1. Get the Canvas element
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

// 2. Create shader program
function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}

// 3. Initialize buffer
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [0, 1, -1, -1, 1, -1]; // Triangle vertices
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 4. Rendering loop
function drawScene() {
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  requestAnimationFrame(drawScene);
}
drawScene();

Coordinate System

WebGL uses a right-handed coordinate system with the following characteristics:

• Positive X-axis points to the right
• Positive Y-axis points upward
• Positive Z-axis points out of the screen
• Normalized device coordinates range from [-1, 1]

Coordinate transformations typically require multiple matrices:

// Model matrix
const modelMatrix = mat4.create();
mat4.translate(modelMatrix, modelMatrix, [0.5, 0, 0]);

// View matrix
const viewMatrix = mat4.create();
mat4.lookAt(viewMatrix, [0, 0, 5], [0, 0, 0], [0, 1, 0]);

// Projection matrix
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 45 * Math.PI/180, canvas.width/canvas.height, 0.1, 100);

Textures and Materials

Texture mapping is a key technique in 3D rendering. The typical workflow:

// Create texture
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// Set parameters
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

// Load image
const image = new Image();
image.onload = function() {
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
};
image.src = "texture.png";

Material properties can be passed via uniform variables:

// Define material in fragment shader
uniform vec3 uAmbientColor;
uniform vec3 uDiffuseColor;
uniform float uShininess;

Implementing Lighting Models

The Phong lighting model consists of three components:

// Vertex shader calculates normals
varying vec3 vNormal;
varying vec3 vPosition;

void main() {
  vNormal = normalize(normalMatrix * normal);
  vPosition = vec3(modelViewMatrix * vec4(position, 1.0));
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// Fragment shader calculates lighting
vec3 calculateLight(vec3 normal, vec3 lightDir, vec3 viewDir) {
  // Ambient light
  vec3 ambient = uLightColor * uAmbientStrength;
  
  // Diffuse reflection
  float diff = max(dot(normal, lightDir), 0.0);
  vec3 diffuse = diff * uLightColor;
  
  // Specular reflection
  vec3 reflectDir = reflect(-lightDir, normal);
  float spec = pow(max(dot(viewDir, reflectDir), 0.0), uShininess);
  vec3 specular = uSpecularStrength * spec * uLightColor;
  
  return ambient + diffuse + specular;
}

Performance Optimization Strategies

1. Instanced Rendering: Use the ANGLE_instanced_arrays extension

const ext = gl.getExtension('ANGLE_instanced_arrays');
ext.vertexAttribDivisorANGLE(positionLoc, 0); // Per instance
ext.vertexAttribDivisorANGLE(offsetLoc, 1); // Per vertex
ext.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 6, 1000);

2. Buffer Management:

// Use VAO (Vertex Array Object)
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

// Set vertex attributes
gl.enableVertexAttribArray(positionLoc);
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);

3. Shader Optimization:

• Avoid dynamic loops
• Reduce branching statements
• Use built-in functions instead of custom implementations

Modern WebGL Development Tools

1. Debugging Tools:

• WebGL Inspector
• Spector.js

2. Advanced Frameworks:

// Three.js example
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

3. Shader Editors:

• ShaderToy
• GLSL Sandbox

WebGL 2.0 New Features

1. Enhanced Texture Support:

• 3D textures and texture arrays
• Full support for non-power-of-two textures
• ETC2/EAC texture compression

2. Advanced Shading Features:

// Compute shader example
#version 300 es
layout(local_size_x = 16, local_size_y = 16) in;
layout(rgba32f) uniform image2D outputTexture;

void main() {
  ivec2 storePos = ivec2(gl_GlobalInvocationID.xy);
  imageStore(outputTexture, storePos, vec4(1.0, 0.0, 0.0, 1.0));
}

3. Transform Feedback:

const transformFeedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, outputBuffer);
gl.beginTransformFeedback(gl.POINTS);
gl.drawArrays(gl.POINTS, 0, particleCount);
gl.endTransformFeedback();