Exported assets are free to use commercially and modify.

THREE.JS SHADER COLLECTION

Explore every Shader in action.

From toon shading to image filters. Preview, compare and download the code.

Three.js 0.187.0 · 18 core + 64 official addons + 38 site custom shaders

Preview quality

Every thumbnail is rendered by its actual shaderSelect to explore

basic

basic

Unlit surfaceShows an object's color without lighting or shadows on its surface. Use it for a flat, illustration-like look.Materials & toon

lambert

lambert

Diffuse lightingMakes the side facing a light brighter and the other side darker. Think of clay without a shiny coating.Materials & toon

phong

phong

Specular highlightsMakes an object look like shiny plastic, with bright spots you can make bigger or smaller.Materials & toon

standard

standard

Physically based surfaceMakes objects look like real things, from rough surfaces to shiny metal.Materials & toon

toon

toon

Cel-shaded bandsSplits light and dark into clear patches of color for a cartoon look.Materials & toon

matcap

matcap

Baked lighting textureUses a picture to add shine and shading that stay the same when scene lights change.Materials & toon

points

points

Point particlesDraws a shape with tiny dots, like a cluster of stars. Here the dots form a ball you can turn around.Backgrounds & special

dashed

dashed

Dashed linesDraws lines with gaps, like a route on a map. This demo uses them for the edges of a box.Backgrounds & special

depth

depth

Camera depthUses shades of gray to show distance from the camera. The computer uses this map to tell what is in front or behind.Technical data

normal

normal

Surface directionsColors each surface according to the direction it faces. These colors are direction labels that help calculate lighting.Technical data

sprite

sprite

Camera-facing imageKeeps a picture facing the camera, like a card that turns toward you. Useful for glowing dots, smoke or labels.Backgrounds & special

background

background

Flat backgroundPlaces a picture behind the whole scene. Like a flat stage backdrop, it does not become a 3D space when you turn.Backgrounds & special

backgroundCube

backgroundCube

Environment backgroundSurrounds the scene with six pictures, like standing inside a huge box. Turn the camera to see different directions.Backgrounds & special

cube

cube

Cubemap samplingUses pictures from six directions for surrounding scenery or reflections on metal and glass.Backgrounds & special

equirect

equirect

Panoramic environmentWraps one panoramic picture around the scene, like turning a world map into a globe. Turn to look in different directions.Backgrounds & special

distance

distance

Distance dataTurns distance from a chosen point into shades of gray. Like an invisible ruler, this data can help calculate shadows.Technical data

shadow

shadow

Shadow receiverDraws only the shadows falling onto a surface and leaves the rest transparent. A small round stand catches them in this demo.Backgrounds & special

physical

physical

Glass and clearcoatMakes objects look like glass or shiny toys, with a view through to what is behind them.Materials & toon

ACESFilmicToneMappingShader

ACESFilmicToneMappingShader

Filmic tone mappingKeeps very bright areas readable for a movie-like look and lets you adjust brightness.Color & filters

AfterimageShader

AfterimageShader

Motion trailsLeaves fading trails behind moving objects, like waving a glow stick. Higher persistence keeps the trails for longer.Backgrounds & special

BasicShader

BasicShader

Constant red outputMakes an object see-through red so you can see what is behind it.Materials & toon

BleachBypassShader

BleachBypassShader

Bleach bypass contrastFades colors and makes light and dark more dramatic, like a gritty movie. Higher strength makes the look stronger.Color & filters

BlendShader

BlendShader

Blend two imagesLayers two pictures like sheets of see-through paper. The mix slider chooses which picture shows more.Color & filters

BokehShader

BokehShader

Depth-of-field bokehKeeps your chosen area clear while nearer and farther scenery blurs, like a phone portrait.Blur & depth of field

BokehDepthShader

BokehDepthShader

Bokeh depth dataShows distance from the camera with light and dark to help choose what should blur.Technical data

BokehShader · 2

BokehShader · 2

Depth-of-field bokehKeeps a chosen area clear and blurs the rest, spreading blurred lights into little circles.Blur & depth of field

BrightnessContrastShader

BrightnessContrastShader

Brightness and contrastChanges how bright the picture is and how far apart light and dark look. Like brightness and contrast in a phone photo editor.Color & filters

ColorCorrectionShader

ColorCorrectionShader

Color curves and gainAdjusts how light or dark each color is, giving a photo a different mood.Color & filters

ColorifyShader

ColorifyShader

Single-color tintTurns the scene into shades of one color, like looking through tinted glass. Pick a color to change the mood.Color & filters

ConvolutionShader

ConvolutionShader

Convolution blurGently mixes nearby colors to soften and blur the picture.Blur & depth of field

CopyShader

CopyShader

Copy input unchangedCopies the input picture unchanged, like a photocopier. Before and after should match; that does not mean it is broken.Color & filters

DOFMipMapShader

DOFMipMapShader

Mipmap depth of fieldMakes scenery clear or blurry based on distance, like a photo with only one area sharp.Blur & depth of field

DepthLimitedBlurShader

DepthLimitedBlurShader

Depth-aware blurSoftens shadows while trying not to smear their colors onto nearby objects.Technical data

DigitalGlitch

DigitalGlitch

Digital distortionShifts and bends pieces of the picture and separates colors, like a broken TV.Color & filters

DotScreenShader

DotScreenShader

Printed dotsRedraws the picture with black-and-white dots like a newspaper, with adjustable spacing and angle.Color & filters

ExposureShader

ExposureShader

Exposure adjustmentMakes the whole picture lighter or darker, like adjusting brightness on a phone camera.Color & filters

FXAAShader

FXAAShader

Fast antialiasingSoftens tiny stair steps along edges so diagonal lines look smoother. Look closely at outlines; the whole picture will not change color.Color & filters

FilmShader

FilmShader

Film grainAdds tiny moving specks like grain in a film movie. Higher grain strength makes the speckles easier to see.Color & filters

FocusShader

FocusShader

Radial focus filterKeeps the center clearer with blur and colored edges around it, regardless of object distance.Blur & depth of field

FreiChenShader

FreiChenShader

Edge detectionFinds places where the picture changes sharply and marks them with bright lines. Like a computer tracing visible edges with a pen.Color & filters

GTAOBlendShader

GTAOBlendShader

Combine ambient occlusionAdds shadows back to the color picture so corners and touching objects are easier to see.Technical data

GTAODepthShader

GTAODepthShader

Ambient-occlusion depthShows object distances with light and dark to help check shadow placement.Technical data

GTAOShader

GTAOShader

Ambient occlusionShows places where nearby objects block light in black and white to help add shadows.Lighting & reflections

GammaCorrectionShader

GammaCorrectionShader

Gamma correctionAdjusts light and dark so the screen shows suitable colors.Color & filters

HalftoneShader

HalftoneShader

Color halftone printingRebuilds the picture with colored dots, like a printed poster. Larger dots make the pattern easier to see.Color & filters

HorizontalBlurShader

HorizontalBlurShader

Horizontal blurSmears colors left and right, like wiping wet paint sideways.Blur & depth of field

HorizontalTiltShiftShader

HorizontalTiltShiftShader

Horizontal focus bandKeeps a horizontal strip sharp and blurs above and below it. It can make a scene feel like a photographed miniature.Blur & depth of field

HueSaturationShader

HueSaturationShader

Hue and saturationChanges the picture's colors or makes them more vivid or closer to gray.Color & filters

KaleidoShader

KaleidoShader

KaleidoscopeFlips and repeats the picture into a flower-like shape, like looking through a kaleidoscope.Color & filters

LuminosityHighPassShader

LuminosityHighPassShader

Extract highlightsKeeps only bright enough areas so a soft glow can be added to them next.Color & filters

LuminosityShader

LuminosityShader

Grayscale luminanceTurns the color picture into a black-and-white photo. Colors become shades of gray based on how bright they look to our eyes.Color & filters

MirrorShader

MirrorShader

Mirror imageCopies and flips half the picture, like placing a mirror through its middle. Choose a side to change the reflection direction.Color & filters

NormalMapShader

NormalMapShader

Height to surface normalsTurns a height picture into color marks that make a surface look bumpy without changing its shape.Technical data

OutputShader

OutputShader

Tone and color outputAdjusts very bright areas and overall colors to prepare the final picture for the screen.Color & filters

PoissonDenoiseShader

PoissonDenoiseShader

Edge-aware denoisingSmooths little specks in shadows while keeping object edges as clear as possible.Technical data

RGBShiftShader

RGBShiftShader

Chromatic separationMoves the red, green and blue layers apart a little. This creates colored fringes like an old lens or a faulty screen.Color & filters

SAOShader

SAOShader

Scalable ambient occlusionUses the picture's distance data to estimate places light cannot easily reach. Darker gaps help you read the shapes.Lighting & reflections

SMAABlendShader

SMAABlendShader

Antialiasing blendSoftens little stair steps along edges so thin and slanted lines look smoother.Technical data

SMAAEdgesShader

SMAAEdgesShader

Antialiasing edgesMarks picture edges with colored lines to help smooth them in the next step.Technical data

SMAAWeightsShader

SMAAWeightsShader

Antialiasing weightsUses colored marks to decide how much nearby color to mix into stepped edges.Technical data

SSAOBlurShader

SSAOBlurShader

Occlusion blurSmooths little specks in a shadow picture to make the shadows softer.Technical data

SSAODepthShader

SSAODepthShader

Screen-space depthShows distance in shades of black and white to check that front objects and background are separate.Technical data

SSAOShader

SSAOShader

Screen-space occlusionAdds shadows where objects are close together, using only what the camera can see.Lighting & reflections

SSRBlurShader

SSRBlurShader

Reflection blurSoftens reflections and reduces specks. Areas without reflections look dark.Technical data

SSRDepthShader

SSRDepthShader

Reflection depthShows object distances with light and dark to help decide what appears in reflections.Technical data

SSRShader

SSRShader

Screen-space reflectionsAdds nearby reflections to shiny surfaces. Things outside the picture may be missing.Lighting & reflections

SepiaShader

SepiaShader

Vintage sepiaTints the picture warm brown, like a photo in an old album. Higher strength removes more of the original colors.Color & filters

SobelOperatorShader

SobelOperatorShader

Outline detectionFinds strong brightness changes and draws bright outlines. Useful for seeing boundaries or making an outline style.Color & filters

SubsurfaceScatteringShader

SubsurfaceScatteringShader

Translucent scatteringMakes light spread beneath a surface, like light passing through skin, wax or a leaf. Look for warm color on the backlit side.Materials & toon

TechnicolorShader

TechnicolorShader

Vintage color filmRemixes red, green and blue for a bold early-color-movie look. It is a fixed color style without extra sliders.Color & filters

ToonShader1

ToonShader1

Cartoon shadingUses simplified shading and highlights for a cartoon look. Turn the model to see how different sides catch the light.Materials & toon

ToonShader2

ToonShader2

Layered cartoon shadingUses clear patches of color for a hand-drawn cartoon look with distinct light and dark areas.Materials & toon

ToonShaderDotted

ToonShaderDotted

Dotted cartoon shadingUses small dots to shade darker areas, like dotted comic-book shading. The pattern helps show the shape.Materials & toon

ToonShaderHatching

ToonShaderHatching

Sketch hatchingDraws dark areas with crossing lines like a pencil sketch, adding more lines in darker places.Materials & toon

TriangleBlurShader

TriangleBlurShader

Triangle-weighted blurBlends nearby colors like gently blurring a picture with a soft brush.Blur & depth of field

UnpackDepthRGBAShader

UnpackDepthRGBAShader

Decode depth dataTurns saved distance marks into a black-and-white picture that shows what is in front or behind.Technical data

VelocityShader

VelocityShader

Motion velocity dataUses colors to show movement between two frames. Still areas stay near the background color; moving areas change more.Technical data

VerticalBlurShader

VerticalBlurShader

Vertical blurSmears colors up and down, like wiping wet paint vertically.Blur & depth of field

VerticalTiltShiftShader

VerticalTiltShiftShader

Vertical focus bandKeeps a vertical strip sharp and blurs the sides. Move the focus band to choose which strip gets attention.Blur & depth of field

VignetteShader

VignetteShader

Darkened image cornersDarkens the picture's edges to draw attention toward the center, like some camera lenses. Adjust the size and darkness of the corners.Color & filters

VolumeRenderShader1

VolumeRenderShader1

3D density volumeShows a block of information as a 3D shape, like a cloud or body scan, with selected parts visible.Backgrounds & special

$WaterRefractionShader$

WaterRefractionShader

Water refractionDistorts what is behind a surface as if seen through moving water. The transparent surface is the effect itself.Backgrounds & special

Embers and heated cracks shader

Embers and heated cracks shader

Embers and heated cracks shaderSends sparks outward while glowing cracks on a wall or floor cool and fade.Site custom · Backgrounds & special

Golden spatial ripple shader

Golden spatial ripple shader

Golden spatial ripple shaderGolden water ripples flow outward at the aerial source. Their bright centers hide the background, while the edges soften into a golden haze.Site custom · Backgrounds & special

Spell indicator shader

Spell indicator shader

Spell indicator shaderA circle or fan marks danger and slowly fills from the center as an attack approaches.Site custom · Backgrounds & special

Golden chain link shader

Golden chain link shader

Golden chain link shaderDark ochre links retain visible holes while irregular golden liquid contours flow across their surfaces. The chains fall, rebound and dissolve into light.Site custom · Materials & toon

Golden-Bladed Lightning Arrow Shader

Golden-Bladed Lightning Arrow Shader

Golden-Bladed Lightning Arrow ShaderA golden arrow carries jumping lightning that bursts outward on impact and fades into light.Site custom · Backgrounds & special

Surrounding intake smoke shader

Surrounding intake smoke shader

Surrounding intake smoke shaderDark smoke curves along the ground, then rises and shrinks near the center as if drawn into a dark ball.Site custom · Backgrounds & special

Ink-brush aura shader

Ink-brush aura shader

Ink-brush aura shaderBlack brush marks curve inward from all around, speeding up as they approach the dark ball.Site custom · Backgrounds & special

Darkchain / dark orb shader

Darkchain / dark orb shader

Darkchain / dark orb shaderPurple-glowing black chains surround a twisting dark ball, then burst into red-purple light and broken links.Site custom · Backgrounds & special

Spatial sweep shader

Spatial sweep shader

Spatial sweep shaderA clear curved slash stretches the view behind it with a thin white edge. Glass may stay unchanged.Site custom · Backgrounds & special

Weapon smear shader

Weapon smear shader

Weapon smear shaderA sword swing leaves a clear trail with a brighter outer edge that fades after motion stops.Site custom · Backgrounds & special

Sweep blade shader

Sweep blade shader

Sweep blade shaderA curved blue slash opens quickly, with soft glow and fine lines, then closes from tail to tip.Site custom · Backgrounds & special

Gravitational lens shader

Gravitational lens shader

Gravitational lens shaderBends scenery behind a black hole while keeping its dark center round. Glass may stay unchanged.Site custom · Backgrounds & special

Accretion disk shader

Accretion disk shader

Accretion disk shaderA bright ring surrounds a dark ball, with thin streaks circling inward as if being pulled in.Site custom · Backgrounds & special

Spatial distortion shader

Spatial distortion shader

Spatial distortion shaderShifts pieces of the background before restoring them. Smoke and glass may stay unchanged.Site custom · Backgrounds & special

Flame surface shader

Flame surface shader

Flame surface shaderKeeps flame edges moving with flowing bright and dark patches, making the fire feel alive.Site custom · Materials & toon

Projectile surface shader

Projectile surface shader

Projectile surface shaderAdds bright edges and moving patterns to a flying shot so it feels full of magic.Site custom · Materials & toon

Trail shader

Trail shader

Trail shaderLeaves a twisting trail behind a flying object that fades toward its end.Site custom · Backgrounds & special

Impact shader

Impact shader

Impact shaderFlashes on impact as the hit shape spreads, breaks apart or fades away.Site custom · Backgrounds & special

Beam shader

Beam shader

Beam shaderBright patterns run along a beam with a brighter center, like energy flowing forward.Site custom · Backgrounds & special

Lightning shader

Lightning shader

Lightning shaderBright lightning shakes quickly with dimmer little branches, like jumping electricity.Site custom · Backgrounds & special

Glow shader

Glow shader

Glow shaderMakes a little spot bright in the middle and softer toward its edge.Site custom · Backgrounds & special

Rune / sigil shader

Rune / sigil shader

Rune / sigil shaderDraws glowing magic lines and symbols with light moving along the pattern.Site custom · Backgrounds & special

Aura shader

Aura shader

Aura shaderAdds soft moving light around a magic pattern, gently changing its brightness.Site custom · Backgrounds & special

Barrier surface shader

Barrier surface shader

Barrier surface shaderDraws a see-through shield with moving squares and bright bands, like a magic barrier.Site custom · Materials & toon

Burst surface shader

Burst surface shader

Burst surface shaderSends flames, fragments and light outward, changing shape and color before fading.Site custom · Backgrounds & special

Vortex surface shader

Vortex surface shader

Vortex surface shaderSpirals layers of air upward, using light and dark to give the wind a fuller shape.Site custom · Backgrounds & special

Ground swirl shader

Ground swirl shader

Ground swirl shaderAdds rotating marks below a whirlwind, as if dust on the ground is being stirred too.Site custom · Backgrounds & special

Smoke shader

Smoke shader

Smoke shaderMakes smoke roll and fade, with edges spreading out as it disappears into the air.Site custom · Backgrounds & special

Particle shader

Particle shader

Particle shaderAdds flying little fragments and light spots around the main shape for extra detail.Site custom · Backgrounds & special

Custom toon surface shader

Custom toon surface shader

Custom toon surface shaderUses clear color patches and patterns for a cartoon shape that opens and closes.Site custom · Materials & toon

Temporary ground cracks shader

Temporary ground cracks shader

Temporary ground cracks shaderCracks spread from the landing point and fade away without changing the ground.Site custom · Backgrounds & special

Raised magic smoke wave shader

Raised magic smoke wave shader

Raised magic smoke wave shaderWhite-gold smoke rolls outward from mid-height, leaving an open center, and fades with the ground wave.Site custom · Backgrounds & special

Healing wave shader

Healing wave shader

Healing wave shaderFlowing white-gold water patterns travel across a broad wave with a low raised edge and an open center.Site custom · Backgrounds & special

Grass wind / brush shader

Grass wind / brush shader

Grass wind / brush shaderKeeps grass roots still while the tips bend in the wind, with painted-looking streaks on the leaves.Site custom · Materials & toon

Flower shader

Flower shader

Flower shaderDraws softly colored petals and lets flowers sway gently in the wind.Site custom · Materials & toon

Watercolor object material

Watercolor object material

A shared watercolor material for game objectsMakes objects look like watercolor paintings, with soft colors and little paper marks.Site custom · Materials & toon

Hand-painted vegetation

Hand-painted vegetation

Brush strokes and gentle wind for trees, grass and flowersTrees, grass and flowers look hand-painted, with leaves and petals swaying gently in the wind.Site custom · Materials & toon

Oil Paint

Oil Paint

Directional brush strokes and thick paint for your gameMakes the whole picture look painted with thick oil paint, visible brush marks and fine canvas lines.Site custom · Color & filters

Official shaders are listed by version. Custom material families merge identical programs; select versions in the preview. Game modules are identified in the download area. No third-party shaders or TSL nodes.