
Shader learning
Shader Learning is an interactive platform designed to teach and enhance shading skills through probl
Three.js Marketplace
Three.js Marketplace
Kickstart your Three.js and React Three Fiber (R3F) projects with our free and premium components themes and tools. Designed for freelancers, developers, and agencies, each product includes essential features to get you up and running quickly.
Web Development
Help with your project?
Custom Three.js, WebGL, and WebGPU development — from product visualizers to interactive 3D websites.
Links
Featured Badge
Add this badge to your website to show you are featured on Three.js Resources.
Description
Shader Learning is an interactive platform designed to teach and enhance shading skills through problem-solving. It offers a variety of modules that cover essential topics in shader programming, including:
- Built-in Functions: Understanding fragment shaders and exploring GLSL functions.
- Image Manipulation with Shaders: Techniques for manipulating 2D images using fragment shaders.
- Vertex Transformations: Comprehensive insights into vertex shaders and their role in the graphics pipeline.
- Lighting Basics: Fundamental lighting models for simulating realistic effects.
- Shadow Mapping: Techniques for creating realistic shadows in real-time rendering.
- Signed Distance Fields: Rendering smooth and detailed shapes using distance functions.
- Noise: Various algorithms for creating visual effects.
- Water: Techniques for visualizing realistic waves, reflections, and refractions.
- Ray Tracing: Simulating the physical behavior of light to create highly realistic images.
Each module consists of tasks that combine theoretical explanations with practical exercises, facilitating hands-on learning. Users have praised the platform for its balanced approach and effectiveness in improving shader programming skills.
Shader Learning offers various subscription plans, including one-month, two-month, and three-month options, providing access to all tasks during the subscription period. The platform emphasizes accessibility and encourages donations to keep its resources available to learners worldwide.
Sponsors
Want to write shaders yourself?
Learn TSL — the Three.js Shading Language — step by step in our interactive shader course, with live code you edit in the browser.
Related Resources

thebookofshaders
The Book of Shaders is an interactive guide to mastering GLSL shaders, ideal for three.js resources.

Nodetoy
NodeToy is a visual shader editor for creating custom shaders, ideal for three.js resources.

Shadertoy
ShaderToy is an online community and platform for creating, sharing, and exploring GLSL shaders.

Shaders.app
Shaders.app is an interactive GLSL shader editor for creating visual effects in three.js
