Learning path · 12 lessons · about 4 hours
From Shadertoy to Unity
You will: take what you learn in the browser into a real unity project. For: game developers who use unity (built-in or urp).
Shader tutorials online are mostly written for Shadertoy, but you want effects in your game. This path teaches the ideas once, in HLSL, then shows what changes when the shader runs on a real mesh in Unity: vertex and fragment stages, normals, lighting and the rim glow every game uses. Every lesson ends in code you can export as a Unity shader.
Start lesson 1What you will be able to do
- Write a fragment shader and export it as a Unity shader file
- Understand vertex shaders and move vertices with waves
- Light a mesh with normals and diffuse shading
- Add a Fresnel rim glow to any object
The lessons, in order
- 1 Every pixel, one functionPlay
Make the whole screen the same blue as the target.
- 2 Colors are four numbersPlay
Match the green. The Colors panel shows its hex code — convert it to floats.
- 3 Two axesPlay
Red grows to the right, green grows upward, blue is a constant 0.5.
- 4 Distance fields & antialiasingPlay
Turn the solid disc into a glowing ring: radius 0.3, soft edge width 0.02.
- 5 Time: make it movePlay
Make the ring pulse: radius = 0.25 + 0.08 × sin(time × 3).
- 6 Cosine palettesPlay
Make a rainbow that scrolls: t = uv.x + time × 0.2.
- 7 Taking it into UnityPlay
Free play. Export it with the button above.
- 8 Real 3D: vertex & fragment shadersPlay
Color the sphere by its normals: red = facing +x, green = facing +y, blue = facing +z.
- 9 Diffuse light on a torusPlay
Light the torus from one direction with a little ambient light.
- 10 Fresnel rim glowPlay
A dark blue knot with a cyan glow around the edges.
- 11 Your first vertex shader: wavesPlay
Make the plane ripple with a 2D wave and light it using i_faceNormal.
- 12 Push vertices along their normalsPlay
Make rings of bulges travel up the sphere.
Ideas you will meet
Short explainers with a live example for each: