Shaders and presets
Material Effect Shaders
GLSL shaders for special material effects - toon, hologram, dissolve, and more
Special effect shaders for stylized and dynamic materials including toon shading, holograms, dissolve transitions, and more.
Available Shaders
import {
toonVertexShader,
toonFragmentShader,
hologramVertexShader,
hologramFragmentShader,
dissolveVertexShader,
dissolveFragmentShader,
forcefieldVertexShader,
forcefieldFragmentShader,
glitchVertexShader,
glitchFragmentShader,
} from 'strata-game-library/shaders';Toon Shader
Cel-shading with customizable color bands:
Uniforms
| Uniform | Type | Description |
|---|---|---|
uColor | vec3 | Base color |
uLightDirection | vec3 | Light direction |
uBands | int | Number of shade bands |
uOutlineWidth | float | Outline thickness |
uOutlineColor | vec3 | Outline color |
Usage
import { toonVertexShader, toonFragmentShader } from 'strata-game-library/shaders';
const toonMaterial = new THREE.ShaderMaterial({
vertexShader: toonVertexShader,
fragmentShader: toonFragmentShader,
uniforms: {
uColor: { value: new THREE.Color(0xff6b6b) },
uLightDirection: { value: new THREE.Vector3(1, 1, 1).normalize() },
uBands: { value: 4 },
uOutlineWidth: { value: 0.03 },
uOutlineColor: { value: new THREE.Color(0x000000) },
},
});Hologram Shader
Sci-fi holographic effect with scanlines and flicker:
Uniforms
| Uniform | Type | Description |
|---|---|---|
uTime | float | Animation time |
uColor | vec3 | Hologram color |
uOpacity | float | Base opacity |
uScanlineSpeed | float | Scanline movement |
uScanlineCount | float | Number of scanlines |
uFlickerSpeed | float | Flicker frequency |
uRimPower | float | Rim light intensity |
Usage
import { hologramVertexShader, hologramFragmentShader } from 'strata-game-library/shaders';
const hologramMaterial = new THREE.ShaderMaterial({
vertexShader: hologramVertexShader,
fragmentShader: hologramFragmentShader,
uniforms: {
uTime: { value: 0 },
uColor: { value: new THREE.Color(0x00ffff) },
uOpacity: { value: 0.5 },
uScanlineSpeed: { value: 2 },
uScanlineCount: { value: 100 },
uFlickerSpeed: { value: 10 },
uRimPower: { value: 2 },
},
transparent: true,
side: THREE.DoubleSide,
});Dissolve Shader
Noise-based dissolve transition effect:
Uniforms
| Uniform | Type | Description |
|---|---|---|
uProgress | float | Dissolve progress (0-1) |
uNoiseTexture | sampler2D | Noise pattern |
uEdgeColor | vec3 | Dissolve edge color |
uEdgeWidth | float | Edge glow width |
uBaseTexture | sampler2D | Object texture |
Usage
import { dissolveVertexShader, dissolveFragmentShader } from 'strata-game-library/shaders';
const dissolveMaterial = new THREE.ShaderMaterial({
vertexShader: dissolveVertexShader,
fragmentShader: dissolveFragmentShader,
uniforms: {
uProgress: { value: 0 },
uNoiseTexture: { value: noiseTexture },
uEdgeColor: { value: new THREE.Color(0xff4400) },
uEdgeWidth: { value: 0.1 },
uBaseTexture: { value: objectTexture },
},
transparent: true,
});
// Animate dissolve
gsap.to(dissolveMaterial.uniforms.uProgress, {
value: 1,
duration: 2,
ease: 'power2.out',
});Forcefield Shader
Energy shield / forcefield effect:
Uniforms
| Uniform | Type | Description |
|---|---|---|
uTime | float | Animation time |
uColor | vec3 | Shield color |
uOpacity | float | Base opacity |
uFresnelPower | float | Edge glow falloff |
uPulseSpeed | float | Pulse animation speed |
uHexScale | float | Hexagon pattern scale |
uImpactPoint | vec3 | Impact location |
uImpactStrength | float | Impact ripple strength |
uImpactTime | float | Time since impact |
Usage
import { forcefieldVertexShader, forcefieldFragmentShader } from 'strata-game-library/shaders';
const forcefieldMaterial = new THREE.ShaderMaterial({
vertexShader: forcefieldVertexShader,
fragmentShader: forcefieldFragmentShader,
uniforms: {
uTime: { value: 0 },
uColor: { value: new THREE.Color(0x00aaff) },
uOpacity: { value: 0.3 },
uFresnelPower: { value: 3 },
uPulseSpeed: { value: 2 },
uHexScale: { value: 10 },
uImpactPoint: { value: new THREE.Vector3(0, 0, 1) },
uImpactStrength: { value: 0 },
uImpactTime: { value: 0 },
},
transparent: true,
side: THREE.DoubleSide,
depthWrite: false,
});Glitch Shader
Digital glitch / corruption effect:
Uniforms
| Uniform | Type | Description |
|---|---|---|
uTime | float | Animation time |
uIntensity | float | Glitch intensity |
uBlockSize | float | Glitch block size |
uColorShift | float | RGB shift amount |
uScanlines | bool | Enable scanlines |
uBaseTexture | sampler2D | Source texture |
Usage
import { glitchVertexShader, glitchFragmentShader } from 'strata-game-library/shaders';
const glitchMaterial = new THREE.ShaderMaterial({
vertexShader: glitchVertexShader,
fragmentShader: glitchFragmentShader,
uniforms: {
uTime: { value: 0 },
uIntensity: { value: 0.5 },
uBlockSize: { value: 30 },
uColorShift: { value: 0.02 },
uScanlines: { value: true },
uBaseTexture: { value: texture },
},
});GLSL Code Samples
Toon Shading
float toonShade(vec3 normal, vec3 lightDir, int bands) {
float NdotL = dot(normal, lightDir);
float shade = (NdotL * 0.5 + 0.5);
shade = floor(shade * float(bands)) / float(bands);
return shade;
}Hologram Scanlines
float scanlines(vec2 uv, float time, float count, float speed) {
float line = sin((uv.y + time * speed) * count * 3.14159);
return smoothstep(0.0, 0.5, line);
}Dissolve Edge
float dissolveEdge(float noise, float progress, float edgeWidth) {
float edge = smoothstep(progress - edgeWidth, progress, noise);
edge *= smoothstep(progress + edgeWidth, progress, noise);
return edge;
}Fresnel Rim
float fresnel(vec3 viewDir, vec3 normal, float power) {
return pow(1.0 - max(dot(viewDir, normal), 0.0), power);
}Related
- Core Features - High-level components
- Vegetation Shaders - Wind animation
