Three.js Smoke Shader Tutorial: Create Realistic 3D Smoke Effects

1️⃣ Scene Setup

A minimal Three.js scene consists of a THREE.Scene, a THREE.PerspectiveCamera, and a THREE.WebGLRenderer. The smoke will be rendered on a THREE.PlaneGeometry that faces the camera.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 100);
camera.position.set(0, 1, 3);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.PlaneGeometry(2, 2, 1, 1);

2️⃣ Loading the Perlin‑Noise Texture

Perlin noise provides the random, cloud‑like density needed for smoke. The tutorial uses a grayscale PNG that is loaded via THREE.TextureLoader. The texture is set to repeat vertically so the animation can loop seamlessly.

const loader = new THREE.TextureLoader();
const smokeTex = loader.load('path/to/perlin-noise.png');
smokeTex.wrapT = THREE.RepeatWrapping;

3️⃣ UV Mapping & Masking

The fragment shader receives the UV coordinates from the vertex shader. By using the texture’s red channel as the alpha value and forcing the RGB to white, the texture becomes a mask that defines where smoke is opaque.

uniform sampler2D uTexture;
varying vec2 vUv;

void main() {
  float density = texture(uTexture, vUv).r;
  gl_FragColor = vec4(1.0, 1.0, 1.0, density);
}

Remember to enable transparent: true on the material so the WebGL pipeline respects the varying alpha.

4️⃣ Time‑Driven Animation

To simulate rising smoke, the shader shifts the texture’s vUv.y coordinate based on a uTime uniform. The JavaScript side updates this uniform each frame using THREE.Clock.

uniform float uTime;
uniform float uSpeed;

void main() {
  vec2 uv = vUv;
  uv.y -= uTime * uSpeed; // scroll texture upward
  float density = texture(uTexture, uv).r;
  gl_FragColor = vec4(1.0, 1.0, 1.0, density);
}

The uSpeed parameter lets you control how fast the smoke rises.

5️⃣ Color Remapping & Edge Fading

Raw Perlin noise often looks too dense. The smoothstep function remaps the density range, turning dark grays into full transparency and bright spots into opaque smoke.

uniform float uRemapLow;
uniform float uRemapHigh;

float density = texture(uTexture, uv).r;
density = smoothstep(uRemapLow, uRemapHigh, density);

Edge fading prevents a hard rectangular silhouette. By applying another smoothstep on the UV coordinates, the opacity gradually drops toward the plane’s borders.

float fadeX = smoothstep(0.0, uEdgeX, vUv.x) *
               smoothstep(1.0, 1.0 - uEdgeX, vUv.x);
float fadeY = smoothstep(0.0, uEdgeY, vUv.y) *
               smoothstep(1.0, 1.0 - uEdgeY, vUv.y);
float edgeFade = fadeX * fadeY;
gl_FragColor.a = density * edgeFade;

6️⃣ Geometry Twisting for 3‑D Swirl

A flat plane looks like a sheet of smoke. To give it volume, the vertex shader twists each vertex around the Y‑axis based on a random value sampled from the same noise texture. This creates a subtle spiral that mimics real smoke currents.

uniform float uTwistStrength;
uniform float uTwistSampleX;
uniform float uTwistSampleHeight;
uniform float uTime;
uniform float uTwistSpeed;

varying vec2 vUv;

vec2 rotate2D(vec2 v, float a) {
  float s = sin(a), c = cos(a);
  return mat2(c, s, -s, c) * v;
}

void main() {
  vUv = uv;
  float y = uv.y * uTwistSampleHeight - uTime * uTwistSpeed;
  float sample = texture(uTexture, vec2(uTwistSampleX, y)).r;
  float angle = sample * uTwistStrength;
  vec3 pos = position;
  pos.xz = rotate2D(pos.xz, angle);
  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}

7️⃣ Occlusion Handling (Depth Write)

Transparent objects in Three.js normally write to the depth buffer, which can cause nearer smoke layers to hide farther ones. Disabling depthWrite ensures every fragment is blended correctly, preserving the volumetric feel.

const smokeMaterial = new THREE.ShaderMaterial({
  uniforms: {...},
  vertexShader: vertexSrc,
  fragmentShader: fragmentSrc,
  transparent: true,
  depthWrite: false,
});