WebGL

Dive into the world of 3D graphics, shaders, and immersive web experiences using WebGL and modern JavaScript.

WebGL Interactive Demos

Basic WebGL Triangle

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

const vertexShaderSource = `
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 0.0, 1.0);
  }
`;

const fragmentShaderSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

Rotating 3D Cube

function createCube() {
  const vertices = [
    // Front face
    -1, -1,  1,
     1, -1,  1,
     1,  1,  1,
    -1,  1,  1,
    // Back face
    -1, -1, -1,
    -1,  1, -1,
     1,  1, -1,
     1, -1, -1
  ];
  
  return vertices;
}

Custom Shader Effects

const fragmentShader = `
  precision mediump float;
  uniform float time;
  uniform vec2 resolution;
  
  void main() {
    vec2 uv = gl_FragCoord.xy / resolution.xy;
    vec3 color = vec3(
      sin(uv.x * 10.0 + time),
      cos(uv.y * 10.0 + time),
      sin(uv.x + uv.y + time)
    );
    gl_FragColor = vec4(color, 1.0);
  }
`;

WebGL Particle System

const particleVertexShader = `
  attribute vec2 position;
  attribute float size;
  uniform float time;
  
  void main() {
    vec2 pos = position + vec2(sin(time), cos(time)) * 0.1;
    gl_Position = vec4(pos, 0.0, 1.0);
    gl_PointSize = size;
  }
`;

Advanced WebGL Techniques

Texture Mapping

Apply textures to 3D objects for realistic rendering and visual effects.

function loadTexture(url) {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  
  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);
    gl.generateMipmap(gl.TEXTURE_2D);
  };
  
  image.src = url;
  return texture;
}

3D Lighting

Implement Phong lighting model for realistic 3D scene illumination.

const lightingVertexShader = `
  attribute vec3 position;
  attribute vec3 normal;
  uniform mat4 modelViewMatrix;
  uniform mat4 projectionMatrix;
  uniform mat3 normalMatrix;
  
  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);
  }
`;

Post-Processing Effects

Apply screen-space effects like bloom, blur, and color grading.

const postProcessFragmentShader = `
  precision mediump float;
  uniform sampler2D texture;
  uniform vec2 resolution;
  
  void main() {
    vec2 uv = gl_FragCoord.xy / resolution;
    vec4 color = texture2D(texture, uv);
    
    // Bloom effect
    float brightness = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722));
    if (brightness > 0.8) {
      color.rgb += color.rgb * 0.5;
    }
    
    gl_FragColor = color;
  }
`;

Instanced Rendering

Render thousands of objects efficiently using instanced rendering techniques.

const instancedVertexShader = `
  attribute vec3 position;
  attribute vec3 instancePosition;
  attribute float instanceScale;
  
  uniform mat4 viewMatrix;
  uniform mat4 projectionMatrix;
  
  void main() {
    vec3 worldPosition = position * instanceScale + instancePosition;
    gl_Position = projectionMatrix * viewMatrix * vec4(worldPosition, 1.0);
  }
`;

Performance Tips

⚡

Batch Draw Calls

Minimize draw calls by batching similar objects and using instanced rendering.

🎯

Texture Atlases

Use texture atlases to reduce texture switching and improve performance.

🔄

Level of Detail

Implement LOD systems to reduce polygon count for distant objects.

📱

Mobile Optimization

Reduce shader complexity and polygon count for mobile devices.

🎨

Frustum Culling

Only render objects that are visible in the camera's view frustum.

⏱️

Shader Optimization

Optimize shaders by reducing calculations and using appropriate precision.