Hello Window
rendering
Unofficial WebGL examples for learnopengl.com
- written in C, compiled to WebAssembly
- shader dialect GLSL v450, cross-compiled to GLSL v100 (WebGL) and GLSL v300es (WebGL2)
- uses Sokol libraries for cross platform support
- last updated: February 04 2021
Getting started
Hello Triangle
triangle
quad
quad-wireframe
Shaders
in-out
uniforms
attributes
Textures
texture
texture-blend
multiple-textures
Transformations
scale-rotate
rotate-translate
Coordinate Systems
plane
cube
more-cubes
Camera
lookat
walk
look
Lighting
Colors
scene
Basic Lighting
ambient
diffuse
specular
Materials
material
light
light-colors
Lighting Maps
diffuse-map
specular-map
Light Casters
directional-light
point-light
spot-light
soft-spot-light
Multiple Lights
combined-lights
Model Loading
Model
backpack-diffuse
backpack-lights
Advanced OpenGL
Depth Testing
depth-always
depth-less
depth-buffer
linear-depth-buffer
Stencil Testing
object-outlining
Blending
grass-opaque
grass-transparent
blending
blending-sorted
Face Culling
cull-front
Framebuffers
render-to-texture
inversion
grayscale
sharpen
blur
edge-detection
Cubemaps
skybox
relfection-cube
relfection-backpack
refraction-cube
refraction-backpack
Advanced GLSL
point-size
frag-coord
front-facing
uniform-buffers
Geometry Shader
Webgl does not provide support for geometry shaders. As an alternative the following examples emulate the behavior by using data textures in the vertex shader.
lines
houses
exploding-object
visualizing-normals
Instancing
instancing
instanced-arrays
asteroid-field
asteroid-field-instanced
Anti Aliasing
msaa
offscreen-msaa
grayscale-msaa
Advanced Lighting
blinn-phong
Gamma Correction
gamma-correction
Shadow Mapping
mapping-depth
rendering-shadows
improved-shadows
Point Shadows
omnidirectional-depth
omnidir-shadows
omnidirectional-PCF
Normal Mapping
normal-mapping
tangent-space
complex-object
