If you are a fan of Sci-Fi, Virtual Realities and Augmented Realities like I am, then you have probably seen the "shockwave reveal effect" maybe once or twice. Imagine your avatar or a protagonist in a VR or AR world, all around him is pitch darkness, and then some initialization takes place and the world comes alive inch by inch, distance by distance or in our case pixel by pixel, this is exactly what happens with this effect regarding our 3D scene.

To get this working, we need to:

• Create shared uniforms by setting up a main JavaScript object which holds the radius, width, origin point and vertical lift for the wave itself.

• Create a vertex shader chunk which calculates each vertex position in world space (our actual 3D scene coordinates).

• Create a mesh fragment shader chunk that compares each pixel's distance from the wave origin to the instantaneous wave radius, delays the reveal by pixel height, and discard unrevealed pixels. It also adds a glow on the edge of the wave.

• Inject our GLSL code into Three.js MeshStandardMaterial using the onBeforeCompile, a built-in callback function, this allows us to keep realistic lighting from Three.js without writing a raw shader from scratch.

• Instruct Three.js to compile our custom shader for each material instead of reusing cached programs.

• Animate our wave radius using GSAP.

Creating the Shared Uniforms

import * as THREE from 'three';

// 1. Shared Uniforms
const shockUniforms = {
    uWaveRadius:    { value: -2.0 },
    uWaveWidth:     { value: 2.5 },
    uColor:         { value: new THREE.Color(0x60d5ff) },
    uOrigin:        { value: new THREE.Vector3(0, 0, 0) },
    uVerticalLift:  { value: 3.0 }
};

uWaveRadius refers to the current radius of the animated, expanding wave. We start at -2.0 (a negative number) so all meshes are initially outside the wave and hidden.

uWaveWidth this controls how thick the wave crest (the rising part) is.

uColor holds the color for the glowing outer edge.

uOrigin refers to the base floor center coordinates (x, y, z) where the shockwave begins from. Because all shared materials will point to this exact same shockUniforms object in memory, updating shockUniforms.uWaveRadius.value once in JavaScript instantly updates every single material across the entire GPU.

Injecting The Vertex Shader and Capturing World Positions

// to be injected into the top of the vertex shader
export const vertCommon = /* glsl */`
varying vec3 vWorldPos;
uniform vec3 uOrigin;
`;

// to be injected where vertex positions are calculated
export const vertBegin = /* glsl */`
vec4 _wPos = modelMatrix * vec4(position, 1.0);
vWorldPos  = _wPos.xyz;
`;

By default, vertices only know their very own local positions, to know how far a vertex is from the center of the entire scene, we need to know its WORLD POSITION

we create a varying vec3 vWorldPos, a variable passed down from vertex shader to fragment shader, in here you will be storing the obtained world position.

modelMatrix * vec4(position, 1.0), this multiplies the mesh's local position by its modelMatrix converting local coordinates into world coordinates.

vWorldPos = _wPos.xyz saves the full (X,Y,Z) world coordinate into our varying so the fragment shader knows exactly where each pixel is in 3D space.

The Mesh Fragment Shader

// injected into the top of the fragment shader
export const fragCommon = /* glsl */`
varying vec3  vWorldPos;
uniform float uWaveRadius;
uniform float uWaveWidth;
uniform float uVerticalLift;
uniform vec3  uColor;
uniform vec3  uOrigin;
`;

// injected after lighting calculation
export const fragMesh = /* glsl */`
// calculates ground distance
float xzDist = distance(vWorldPos.xz, uOrigin.xz);

// adds vertical lift
float fDist  = xzDist + max(0.0, vWorldPos.y) * uVerticalLift;

// checks, is the wave past this point?
float fReveal = 1.0 - smoothstep(uWaveRadius - 0.5, uWaveRadius + 0.5, fDist);
if (fReveal < 0.001) discard;

// glowing wave front
float fFlash = pow(1.0 - smoothstep(0.0, uWaveWidth, abs(fDist - uWaveRadius)), 3.0);
gl_FragColor.rgb += uColor * fFlash * 0.20;
`;

this is where we write the logic that runs on every pixel of our 3D geometries.

distance(vWorldPos.xz, uOrigin.xz) calculates the horizontal distance along the ground from the wave origin to the current pixel

fDist = xzDist + max(0.0, vWorldPos.y) * uVerticalLift this handles sweeps across geometries while accounting for the height too.

smoothstep(min, max, value) creates a smooth transition between 0.0 and 1.0

if fReveal < 0.001, the wave has not reached this pixel yet, calling discard tells the GPU to completely throw this specified pixel away, making it appear completely invisible.

fFlash this is responsible for the edge glow.

abs(fDist - uWaveRadius) finds out how close this pixel is to the wavefront

pow(..., 3.0) sharpens the glow into a clean, bright band of light

gl_FragColor.rgb += ... adds the cyan light on top of the object's regular PBR lighting from MeshStandardMaterial

Shader Injection with onBeforeCompile

This is where we connect our GLSL snippets into Three.js native MeshStandardMaterial.

function applyShockwave(mat) {
    mat.onBeforeCompile = (shader) => {
        // pass uniforms into the shader
        shader.uniforms.uWaveRadius   = shockUniforms.uWaveRadius;
        shader.uniforms.uWaveWidth    = shockUniforms.uWaveWidth;
        shader.uniforms.uColor        = shockUniforms.uColor;
        shader.uniforms.uOrigin       = shockUniforms.uOrigin;
        shader.uniforms.uVerticalLift = shockUniforms.uVerticalLift;

        // inject vertex shader chunks
        shader.vertexShader = shader.vertexShader.replace(
            '#include <common>',
            `#include <common>\n${vertCommon}`
        );
        shader.vertexShader = shader.vertexShader.replace(
            '#include <begin_vertex>',
            `#include <begin_vertex>\n${vertBegin}`
        );

        // inject fragment shader chunks
        shader.fragmentShader = shader.fragmentShader.replace(
            '#include <common>',
            `#include <common>\n${fragCommon}`
        );

                // compatible across all Three.js versions (r154+ uses opaque_fragment, older uses dithering_fragment)
        const targetChunk = shader.fragmentShader.includes('#include <opaque_fragment>')
            ? '#include <opaque_fragment>'
            : '#include <dithering_fragment>';

        shader.fragmentShader = shader.fragmentShader.replace(
            targetChunk,
            `${targetChunk}\n${fragMesh}`
        );
    };

    // force unique shader compilation
    mat.customProgramCacheKey = () => mat.uuid;
}

mat.onBeforeCompile is a native method provided by Three.js, right before Three.js compiles the material into a WebGL program, it passes the internal GLSL code to this function so we can modify it.

replace('#include <...>', ...) Three.js shaders are assembled from reusable blocks called chunks such as #include <common> or #include <opaque_fragment>. we perform a string replacement to insert our code where it belongs.

mat.customProgramCacheKey = () => mat.uuid a really important line, by default, Three.js reuses compiled shaders between materials with the same setttings, attaching customProgramCacheKey guarantees that Three.js compiles our custom code for every material rather than skipping some.

Applying the Effect to your Meshes

Now, whenever we create a material, we can simply pass it to applyShockwave()

// Floor
const floorMat = new THREE.MeshStandardMaterial({ color: 0x050a14, roughness: 1.0 });
applyShockwave(floorMat); 
const floor = new THREE.Mesh(new THREE.PlaneGeometry(60, 60), floorMat);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);

// Example Mesh
const meshMat = new THREE.MeshStandardMaterial({ color: 0xff4081, roughness: 0.3, metalness: 0.2 });
applyShockwave(meshMat); 
const box = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), meshMat);
box.position.set(0, 1, 0);
scene.add(box);

Any material passed to applyShockwave() gets the features to react to the wave.

Animating the Shockwave with GSAP

To trigger the shockwave, animate uWaveRadius.value using GSAP, consider:

import gsap from 'gsap';

let isPlaying = false;

function triggerShockwave() {
    if (isPlaying) return;
    isPlaying = true;

    // resets wave radius to behind everything
    shockUniforms.uWaveRadius.value = -2.0;

    // animates the radius outwards across the scene
    gsap.to(shockUniforms.uWaveRadius, {
        value: 60.0,
        duration: 4.5,
        ease: 'power2.out',
        onComplete: () => {
            isPlaying = false;
        }
    });
}

// trigger automatically on load or hook it up to a button
triggerShockwave();

shockUniforms.uWaveRadius.value = -2.0 resets the radius so everything turns dark again.

gsap.to(..., {value: 60.0, ease: 'power2.out'}) smoothly tweens the radius from -2.0 to 60.0 over 4.5 seconds

The power2.out easing causes the wave to expand rapidly then gently decelerate, like an actual blast wave.

There! We have our shockwave-reveal effect in motion! Have fun trying this out and tweaking things to your satisfaction, and if you have any questions or get stuck along the way, don't forget to reach out so we can figure this out together.

Thanks for sticking around this far!

Code      Demo