Simple Lighting - Webgl Typing CST Test

Mode:

Duration:

Coding works best on desktop or with an external keyboard.

Simple Lighting — Webgl Code

Applies a simple directional light to a cube.

# webgl/demo/lighting.js
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Setup shaders with normal and light uniforms
// ... setup code ...
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

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

Official Docs

More Webgl Typing Exercises

Simple WebGL Triangle WebGL Clear Color WebGL Animated Triangle WebGL Colored Triangle WebGL Texture Example WebGL Perspective Cube WebGL Wireframe Cube WebGL Orbiting Camera WebGL Post-processing Effect

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

# webgl/demo/lighting.js const canvas = document.getElementById('canvas'); const gl = canvas.getContext('webgl'); // Setup shaders with normal and light uniforms // ... setup code ... gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);