ShaderLabs

What is ShaderLabs?

ShaderLabs is a WebGL shader effects library built on Three.js. It provides beautiful, customizable visual effects like waves, plasma, gradients, and noise patterns that you can use as website backgrounds or visual elements.

Quick Start

Step 1: Get the ShaderLabs library:

Step 2: Include Three.js and ShaderLabs in your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="shaders.js"></script>

Step 3: Add a container element:

<div id="my-shader" style="width: 100%; height: 400px;"></div>

Step 4: Initialize ShaderLabs:

const lab = new ShaderLabs('my-shader', 'auroraWave');

// Customize colors and parameters
lab.setUniform('uColor1', [0.1, 0.2, 0.5]);
lab.setUniform('uSpeed', 0.03);

Available Shaders

• auroraWave - Flowing waves with Perlin noise
• plasma - Classic swirling plasma effect
• gradientFlow - Smooth animated gradients
• noiseField - Perlin noise visualization

API Reference

// Create instance
const lab = new ShaderLabs(containerId, shaderName);

// Update parameter
lab.setUniform(name, value);

// Apply preset
lab.applyPreset('ocean');  // or 'sunset', 'forest', etc.

// Switch shader
lab.loadShader('plasma');

// Get current config
const config = lab.getConfig();

// Clean up
lab.dispose();