ShaderBattle

Learning path · 10 lessons · about 4 hours

Game effects: smoke, fire and snow

You will: smoke grenades with bullet holes, a campfire, snow that keeps footprints. For: game developers building effects with shaders.

The effects players actually notice in games. A smoke grenade that parts when a bullet passes through it, a campfire you can see into, snow that remembers where you walked, and smoke that follows a flow field. Each series builds the effect in small steps and ends with something you could ship. Reading the pages is free; playing the lessons needs Plus.

Start lesson 1

What you will be able to do

  • Build volumetric smoke and carve holes in it
  • Make fire that looks lit from within
  • Leave footprints in snow and add sparkle
  • Move smoke along a noise flow field

The lessons, in order

  1. 1
    Smoke grenade 1: a ball of smokePlus

    Draw the expanding smoke ball: noisy-edged density, marched inside its bounding sphere, evenly grey, in…

    Play
  2. 2
    Smoke grenade 2: light and a floorPlus

    Light the smoke with a shadow lookup towards the sun, and put a checkered floor and horizon haze behind it.

    Play
  3. 3
    Smoke grenade 3: bullet holesPlus

    Carve four bullet tunnels into the smoke: each is a line fired at its own time, with a radius that shrinks…

    Play
  4. 4
    Fire 1: a flame you can see intoPlus

    March a ray through a swaying, turbulent flame column and add up its glow: hot at the base, cooler at the…

    Play
  5. 5
    Fire 2: a campfire at nightPlus

    Make it a campfire: the flame lights the ground around it with a flickering glow, and 14 embers rise and fade.

    Play
  6. 6
    Snow 1: a field of snowPlus

    Draw rolling snow dunes with lumpy noise, lit by a low sun with blue shadows, fading into the sky with fog.

    Play
  7. 7
    Snow 2: footprintsPlus

    Add ten footprints to the height function: oval pits with raised rims, left and right feet turned a little…

    Play
  8. 8
    Snow 3: sparklePlus

    Add flickering ice glints to the snow: a very fine random grid, a few cells flash, each with its own phase…

    Play
  9. 9
    Smoke simulation 1: a flow field from noisePlus

    Write flow(q): the curl of a slowly scrolling noise. Show it as colors: red = sideways flow, green = upward…

    Play
  10. 10
    Smoke simulation 2: follow the smoke back to its sourcePlus

    Trace each pixel back along the flow to the chimney. Where it started inside the chimney it is smoke…

    Play

Ideas you will meet

Short explainers with a live example for each:

See all learning paths