Interactive Lessons
- On top, the lesson with its shader running
- Below, the code you can change
- Move a slider and the light answers
WoGL
Viral
WoGL Academy
Code goes in.
Galaxies come out.
Learn graphics programming from scratch. Build shaders, visual effects, and 3D worlds for websites, games, and digital art. Code comes alive in your browser.
Academy
Interactive Lessons
Shader effects
for any project.
- Nearly 200 works ready in the Toolkit
- Copy a work's shader in one click
- Runs in any WebGL 2 canvas on your site
Move the numbers
with your finger.
- A slider for each value
- The shader changes as you move it
- In your phone's browser
Your pieces,
live.
- A tunnel of light in the first section
- Terrain, marble and liquid metal
- Fractals and a solar system at the end
Try it
Move a slider.
Watch what happens.
This wave is a 12-line shader. Move the sliders: the code and the light change together.
wave.frag · GLSL ES 3.0
All 100 lessons
Ten sections.
Ten lessons each.
You start with one color and end with the solar system. Every lesson opens in WoGL Academy.
00GLSL for beginnersColor, coordinates and time, from the first pixel to a tunnel of light. 10 lessons→ 01Shader patternsStripes, grids, polar coordinates, spirals, mirrors and Chladni plates. 10 lessons→ 02Forces in a shaderTime applied to coordinates: gravity, wind, vortex, turbulence, ripples. 10 lessons→ 03Noise in GLSLFrom raw randomness to FBM, terrain and a noise sphere. 10 lessons→ 04Domain warpingOne warp, many skins: giraffe, camo, wood, marble, liquid metal. 10 lessons→ 05Shader animationBreathing, phase, easing, morphs, flow fields and the seamless loop. 10 lessons→ 06Strange attractors on the GPUThe Aizawa attractor: an ODE, Euler, and 130,000 particles on the GPU. 10 lessons→ 07Ray marching in GLSL3D with distances: rays, SDFs, normals, light, shadows and materials. 10 lessons→ 08Fractals in GLSLz = z² + c: the complex plane, escape coloring, Julia sets and deep zoom. 10 lessons→ 09The Solar System in GLSLFrom the Sun to Neptune: exact spheres, light, clouds, rings, air and Kepler. 10 lessons→
WoGL PRO
WoGL Why tells you why.
- WoGL Why in Academy PRO: 58 GLSL errors, explained
- Practice PRO: challenges and remix
- WoGL TV, Pulse Rig and WoGL Worlds
- Your traveler profile, with your ship
Toolkit
Shader effects ready for your website.
These six works run live on this page. In the Toolkit, each work's shader copies or downloads in one click, for your site or your project.
Open Toolkit →Academy · Museum · Tools · Games · 3D Studio
WoGL Home.
01Academy100 shader lessons, from your first pixel to the solar system.academy.wogl.io →02MuseumLive generative art, in museum rooms.museum.wogl.io →03ToolsFour shader tools that run in your browser.tools.wogl.io →04GamesSeven games drawn by shaders, in your browser.games.wogl.io →053D StudioA 3D studio in your browser, on WebGPU.3dstudio.wogl.io →
Questions
Before your
first lesson.
What is WoGL?
World of GL: a GLSL academy, a museum of live generative art, and tools and games made with shaders. All of it runs in your browser.
Do I need an account?
Not for Academy: its 100 lessons open without one. With your Museum account you enter its rooms, Academy PRO and your traveler profile.
Do I need to know how to code?
No. The first section starts from zero: a color is three numbers.
What is a shader?
A small program that runs on your graphics card and decides the color of every pixel at once.
What do I need to install?
Nothing. The lessons run in your browser on WebGL.
Does it work on my phone?
Yes. The lessons open in your phone's browser.
Which languages?
Spanish and English.