www.xbdev.net
xbdev - software development
Thursday November 13, 2025
Home | Contact | Support | WebGL Espresso - A Shot of WebGL Knowledge .... | 101 WebGL & GLSL Projects Programming the web.....
     
 

101 WebGL & GLSL Projects

Programming the web.....

 



101 WebGL and GLSL Projects




Available Amazon



101 WebGL and GLSL Projects is both a learning resource and a reference text that provides lots of hands-on examples to teach and inspire you! If you're looking to get started - or want to try out something new - this text is definetly for you!

• Make WebGL and GLSL Fun and Interesting
• Working with the API and shader language directly
• Large range of hands-on examples (with code) from very basic through to more complex/advanced concepts
• 101 project examples (yes, 101!!)
• Great resource for building up your portfolio
• Quick reference text (how-to) for times when you've forgotten or need to know how to do something (e.g., load audio or create a fractal)
• ...


List 101 Projects


I Basic Rendering


1 Hello Triangle
2 Colored Triangle
3 Rotating Triangle
4 Two-Triangle Square (Quad)
5 Simple Gradient Background
6 Multiple Triangles in One Scene
_ Multiple Triangles in One Scene (Indices)
7 Drawing a Circle Using Triangles
_ Drawing a Circle Using Triangles (Colors)
_ Drawing a Circle Using Triangles (discard)
8 Basic Line Drawing
_ Basic Line Drawing (Triangles)
_ Basic Line Drawing (Pattern)
9 Points, Lines, and Triangle Primitives
10 Wireframe Cube
11 Full-Screen Color Transition
12 Anti-Aliasing Demonstration (Line)

II Shapes & Transformations


13 Spinning Cube
14 Pyramid with Colors
15 Scaling & Skewing a Quad
16 Perspective vs Orthographic Projection
17 Mouse-Controlled Rotation
18 Hierarchical Transformations (Parent-Child Object Animation)
19 3D Grid & Axis Visualization
20 Rotating Cube with Keyboard Controls
21 Rotating Cube with Quaternions
22 Model Transformations with Matrix Stack

III Textures & Shading


23 Basic Texture Mapping
24 Mipmapping Example
25 Multi-Texture Blending
26 Simple Lighting with Phong Model
27 Normal Mapping on a Plane
28 Cube Mapping for Skyboxes
29 Transparency & Alpha Blending
30 Procedural Texture Generation
31 Image-Based Texture Animation
32 Environment Mapping (Reflections)
33 Procedural Wood Texture

IV Interactivity & UI


34 Clickable 3D Objects (Color ID)
__ Clickable 3D Objects (RayCasting)
35 Drag-and-Drop Cube
36 Camera Orbit Controls
37 First-Person Camera Navigation
38 Interactive Heightmap Terrain
39 Picking Objects with Raycasting
40 WebGL UI Overlays (HUDs)

V 3D Models & Animation


41 Importing and Rendering a GLTF Model
42 Keyframe Animation of a Model
43 Skeletal Animation (Bone-based)
44 Morph Targets for Face Animation
45 Physics-based Object Motion
46 Instanced Rendering for Thousands of Objects
47 Path-based Animation
48 Importing and Rendering an MD2 Model (Quake II format)
49 Importing and Rendering a 3DS Model

VI Particle Systems & Effects


50 Basic Particle System (Points)
51 Fireworks Effect
52 GPU-accelerated Snowfall
53 Water Ripple Effect
54 Smoke Simulation
55 Confetti Explosion
56 Realistic Rainfall with Wind

VII Graphical Shading & Rendering Techniques


57 Cel Shading (Toon Shader)
58 Screen Space Ambient Occlusion (SSAO)
59 Deferred Rendering Pipeline
60 Real-Time Reflections Using Cube Maps
61 Volumetric Lighting
62 Shader-Based Motion Blur
63 Lens Flare Effect
64 Ray Tracing
65 Signed Distance Functions (SDF) with Ray Marching
66 Real-Time Soft Shadows with Ray Marching

VIII Procedural & Fractal Graphics


67 3D Noise-based Terrain Generation
__ 3D Noise-based Terrain Generation (Height Color)
68 Mandelbrot Set Visualization
69 Procedural Cloud Rendering
70 Real-time Lava Shader
71 Infinite Procedural Cityscape
72 Fractal Tree Generation
73 Terrain Erosion Simulation

IX Data Visualizations


74 3D Scatter Plot
75 Interactive Line Graph
76 Geographic Data Visualization (Map)
77 Real-time Stock Market Visualization
78 Volume Rendering of Scientific Data
79 Heatmap
80 Population Density Simulation

X Compute Shaders


81 Parallel Matrix Multiplication
82 GPU-accelerated Physics Simulation
83 Cellular Automaton (Game of Life)
84 Fluid Simulation using Compute Buffers
85 Image Processing Filters (e.g., Blur and Edge Detection)
86 Real-time Video Effects (e.g., Grayscale and Sepia)
87 Rigid Body Simulation

XI AI & Simulations


88 Boids Flocking Simulation
__ Boids Flocking Simulation (Random Colors)
89 Traffic Flow Simulation
90 Swarm Intelligence
91 Reinforcement Learning
92 Genetic Algorithm Visualization
93 Ant Colony Pathfinding Simulation
94 Ecosystem Simulation with Predator-Prey Interaction

XII 2D & 3D Game Prototypes


95 Simple 2D Sprite Renderer
__ Simple 2D Sprite Renderer (Animated)
96 Top-down RPG Movement System
97 First-Person Shooter Prototype
98 Physics-Based Platformer
99 Multiplayer Game
100 Tower Defense Game
101 3D Racing Game


Appendix


External libraries (gl-matrix)
• Load texture (png/jpg/gif)
• Load json model
• Loading video textures
• Audio loader/filter
• SDF - ray tracer
• SDF - mod (repeat) - marching shapes, sdf 'combining' shapes (add/subtract)
Save WebGL canvas to 'file' (png/jpg) with Transparency
• Swirl effect image/fragement shader
• Generate skybox textures (in compute shader) - e.g., sky/clouds procedurally
• Ambient occlusion


Resources & Links


Lots of other projects and examples are available on the WebGL Lab editor
• WebGL Lab (Online Editor/Code) [LINK]























101 WebGPU Programming Projects. WebGPU Development Pixels - coding fragment shaders from post processing to ray tracing! WebGPU by Example: Fractals, Image Effects, Ray-Tracing, Procedural Geometry, 2D/3D, Particles, Simulations WebGPU Games WGSL 2d 3d interactive web-based fun learning WebGPU Compute WebGPU API - Owners WebGPU Development Cookbook - coding recipes for all your webgpu needs! WebGPU & WGSL Essentials: A Hands-On Approach to Interactive Graphics, Games, 2D Interfaces, 3D Meshes, Animation, Security and Production Kenwright graphics and animations using the webgpu api 12 week course kenwright learn webgpu api kenwright programming compute and graphics applications with html5 and webgpu api kenwright real-time 3d graphics with webgpu kenwright webgpu for dummies kenwright webgpu wgsl compute graphics all in one kenwright webgpu api develompent a quick start guide kenwright webgpu by example 2022 kenwright webgpu gems kenwright webgpu interactive compute and graphics visualization cookbook kenwright wgsl webgpu shading language cookbook kenwright WebGPU Shader Language Development: Vertex, Fragment, Compute Shaders for Programmers Kenwright WGSL Fundamentals book kenwright WebGPU Data Visualization Cookbook kenwright Special Effects Programming with WebGPU kenwright WebGPU Programming Guide: Interactive Graphics and Compute Programming with WebGPU & WGSL kenwright Ray-Tracing with WebGPU kenwright



 
Advert (Support Website)

 
 Visitor:
Copyright (c) 2002-2025 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.