Animated Triangle - Webgl Typing CST Test
Loading…
Animated Triangle — Webgl Code
Animates a triangle by updating vertex positions every frame.
# webgl/demo/animated_triangle.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
// Setup shaders and buffers
// ... setup code ...
let offset = 0;
function render() {
offset += 0.01;
// update vertex positions with offset
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(render);
}
requestAnimationFrame(render);Webgl Language Guide
WebGL (Web Graphics Library) is a low-level JavaScript API for rendering high-performance 2D and 3D graphics in the browser using the GPU. It provides a JavaScript binding to OpenGL ES, allowing hardware-accelerated graphics without plugins.
Primary Use Cases
- ▸3D games and engines in the browser
- ▸3D product configurators (cars, furniture, etc.)
- ▸Scientific and medical visualization
- ▸Architectural & engineering simulations
- ▸GPU-accelerated data visualization dashboards
Notable Features
- ▸GPU-accelerated real-time rendering
- ▸Programmable shader pipeline
- ▸Cross-platform & plug-in free
- ▸Based on OpenGL ES
- ▸Broad browser and hardware support
Origin & Creator
WebGL was developed by the Khronos Group, the same industry consortium behind OpenGL, Vulkan, and WebGPU. The first final specification (WebGL 1.0) was released on March 3, 2011, with precursor work starting around 2006 at Mozilla as a Canvas 3D experiment.
Industrial Note
WebGL is widely used in scientific visualization, CAD tools, GIS mapping, medical imaging, and 3D configurators for industries like automotive and e-commerce.
Quick Explain
- ▸WebGL enables GPU-accelerated graphics in browsers.
- ▸It is a JavaScript API based on OpenGL ES 2.0/3.0.
- ▸Runs entirely inside the browser sandbox with no plugins.
- ▸Provides programmable graphics via vertex/fragment shaders.
- ▸Suitable for games, simulations, visualizations, and 3D apps.
Core Features
- ▸Vertex + Fragment shaders
- ▸GPU buffers (VBOs, IBOs)
- ▸Textures and texture sampling
- ▸Framebuffers for offscreen rendering
- ▸Depth, stencil, blending, and rasterization control
Learning Path
- ▸Learn basic GLSL
- ▸Understand vertex/fragment pipeline
- ▸Draw shapes and apply textures
- ▸Implement lighting models
- ▸Build or use a 3D engine
Practical Examples
- ▸Interactive 3D product viewers
- ▸Web-based 3D games
- ▸Medical scans (MRI/CT) visualization
- ▸Scientific simulations
- ▸Real-time particle systems
Comparisons
- ▸WebGL vs WebGPU: WebGPU is modern and faster; WebGL is widely supported.
- ▸WebGL vs Canvas2D: WebGL is GPU-based; Canvas2D is CPU-based.
- ▸WebGL vs OpenGL: WebGL is sandboxed; OpenGL has native access.
- ▸WebGL vs Three.js: Three.js is a high-level abstraction over WebGL.
- ▸WebGL vs Babylon.js: Babylon offers a full engine; WebGL is low-level.
Strengths
- ▸Runs directly on GPU for high performance
- ▸Wide browser compatibility
- ▸Massive ecosystem (Three.js, Babylon.js)
- ▸Ideal for complex 3D scenes
- ▸Works on desktops, mobiles, and embedded devices
Limitations
- ▸Low-level API (verbose and complex)
- ▸Difficult debugging
- ▸Context loss issues
- ▸No guaranteed performance parity across devices
- ▸Deprecated long-term in favor of WebGPU
When NOT to Use
- ▸You need compute shaders (use WebGPU)
- ▸Simple 2D graphics only
- ▸Heavy GPU compute workloads
- ▸High-precision rendering
- ▸Legacy browsers with no WebGL support
Cheat Sheet
- ▸const gl = canvas.getContext('webgl');
- ▸gl.createShader(GL.VERTEX_SHADER);
- ▸gl.bufferData(...) for VBOs
- ▸gl.useProgram(shaderProgram);
- ▸gl.drawArrays or gl.drawElements
FAQ
- ▸Is WebGL still relevant?
- ▸Yes - despite WebGPU, WebGL is widely supported and still used.
- ▸Is WebGL difficult?
- ▸Low-level, but libraries like Three.js simplify it.
- ▸Does WebGL require plugins?
- ▸No - native browser API.
- ▸Does WebGL work on mobile?
- ▸Yes - with limitations.
- ▸Is WebGL going to be replaced?
- ▸WebGPU is the future, but WebGL will coexist for years.
30-Day Skill Plan
- ▸Week 1: GLSL fundamentals
- ▸Week 2: Buffers, VAOs, textures
- ▸Week 3: Lighting & materials
- ▸Week 4: Optimization strategies
- ▸Week 5: Build a small WebGL engine
Final Summary
- ▸WebGL enables real-time GPU rendering in browsers using JavaScript.
- ▸It is based on OpenGL ES, with programmable shaders in GLSL.
- ▸Used widely for games, visualization, and simulations.
- ▸Large ecosystem of engines and libraries.
- ▸Still essential, although WebGPU is the modern successor.
Project Structure
- ▸index.html - canvas + script
- ▸main.js - initialization
- ▸shaders/vertex.glsl - vertex shader
- ▸shaders/fragment.glsl - fragment shader
- ▸assets/ - textures/models
Monetization
- ▸3D product viewers
- ▸Web-based game platforms
- ▸CAD software licensing
- ▸Medical imaging SaaS tools
- ▸Visualization dashboards
Productivity Tips
- ▸Use Three.js for rapid development
- ▸Write GLSL snippets reusable
- ▸Profile GPU performance
- ▸Keep shaders simple
- ▸Use offline texture compression tools
Basic Concepts
- ▸Shaders - vertex/fragment programs
- ▸GLSL - shading language
- ▸Buffers - store mesh data
- ▸Textures - images for materials
- ▸Rendering pipeline - GPU-based rasterization