Home
Shaders and presets

Shaders

Standalone GLSL shader collection for Three.js

The strata-game-library/shaders package provides a standalone collection of production-ready GLSL shaders. Use them with any Three.js project — no React required.

Installation

pnpm add strata-game-library/shaders

Available Shaders

Terrain

Shaders for procedural terrain rendering with height-based texture blending and triplanar mapping.

Water

Realistic water rendering with wave simulation and reflections.

  • Water Shaders — Gerstner waves, Fresnel reflections, caustics

Sky & Atmosphere

Physically-based atmospheric scattering for realistic skies.

  • Sky Shaders — Rayleigh/Mie scattering, day/night cycle

Clouds

Volumetric cloud rendering.

Volumetric Effects

Fog, god rays, and underwater overlays.

Material Effects

Advanced material shaders for special effects.

Vegetation

Wind animation for instanced vegetation.

Usage Without React

All shaders can be used directly with Three.js:

import { waterFragmentShader, waterVertexShader } from 'strata-game-library/shaders';

const material = new THREE.ShaderMaterial({
  vertexShader: waterVertexShader,
  fragmentShader: waterFragmentShader,
  uniforms: {
    uTime: { value: 0 },
    uWaveHeight: { value: 1.0 },
    uWaterColor: { value: new THREE.Color('#006994') },
  },
});

Shader Chunks

Reusable GLSL snippets for building custom shaders:

import { ShaderChunks, noiseSnippet } from 'strata-game-library/shaders';

// Use noise functions in your own shaders
const customShader = `
  ${noiseSnippet}

  void main() {
    float n = fbm(vPosition.xz * 0.1);
    gl_FragColor = vec4(vec3(n), 1.0);
  }
`;

Full API Reference

See the detailed TypeDoc documentation for all exported shaders, uniforms, and types.