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)
• ...
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
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