🎨 Cel-Shade Editor PRO — Guide

A procedural cel-shade material editor with real-time 3D preview. Everything runs in-browser, single file, zero dependencies.

📐 Layout

Left Panel — Timeline, Curve Editor, Motion & Destruction, Audio Reactive. These are the animation and performance tools.

Center — 3D viewport. Drag to orbit, scroll to zoom. The object updates in real-time as you tweak parameters.

Right Panel — 4 tabs: Shape (geometry, displacement, morphing), Style (palette, bands, textures, lighting, post-process), Particles, Export.

🎛️ Right Panel Tabs

Shape

Render Mode — Switch between Mesh (polygon-based) and SDF Raymarching (distance field, infinite resolution). SDF has its own primitives and boolean operations.

Geometry — 11 base shapes from Sphere to Torus Knot. Import custom .GLB meshes.

Displacement — 3 octaves of noise layered on the surface. Controls amplitude, frequency per octave.

Shape — Stretch, taper, twist, asymmetry, profile sculpting (bottom/mid/top), morph blending to other shapes, dissolve modes.

Flow — Speed and scale of the noise animation driving the surface.

Style

Palette — 5-band classic mode or free-form color ramp (up to 8 stops). Click the ramp track to add stops, drag handles to reposition.

Bands — Thresholds between color bands, distance mapping, shading softness.

Texture — Project an uploaded image onto the surface (spherical, planar, cylindrical) with blend modes.

Edge Noise — Adds detail to band edges. Overlay patterns: dots, hatching, crosshatch.

Emission / Lighting — Glow, rim light, iridescence, emissive patterns (lava veins), fake SSS (subsurface scattering).

GLSL Inject — Write custom GLSL code injected into the fragment shader. Access col, t, vPos, uTime.

Post-Process — Bloom, chromatic aberration, vignette, contrast, saturation, tint, trails, heat haze. NEW v13: ACES/Filmic tone mapping, god rays, film grain, split-tone grading, sharpening, lens distortion, letterbox, scanlines.

Scene — Background, ground plane, multi-object clones (max 5).

Particles

Up to 300 GPU particles with turbulence, emission shapes (point/ring/sphere/cone), gravity, velocity trail stretching, size-over-life curves.

Export

PNG, normal map, spritesheet, animated GIF. PBR material pack (roughness, metallic, AO, height, emissive). Native Godot .gdshader, Unity .shader, and Three.js module export. JSON import/export with URL sharing.

⏱️ Left Panel

Timeline

Keyframe animation system. Add keyframes at different times, and parameters interpolate between states. Supports loop and scrubbing.

Curve Editor

Edit Bezier animation curves per parameter. Presets: linear, ease in/out, bounce, elastic. Drag points and control handles.

Motion & Destruction

Launch the object along a path (linear, arc, orbit) with scale/glow changes during flight. At impact: explode into fragments with physics, dissolve, or implode. Screen shake + shockwave + spark burst.

Audio Reactive

Connect microphone or audio file. FFT frequency bands drive shader parameters: bass→displacement, mids→glow, highs→edge, volume→bloom.

🎲 Randomizer

The dice button uses an intelligent archetype system (12 archetypes: Inferno, Crystal, Organic, Cosmic, etc.) with coherent palettes from color theory and feature correlation. Check browser console for which archetype was selected.

⌨️ Shortcuts

Ctrl+Z Undo · Ctrl+Shift+Z Redo · Scroll Zoom · Drag Orbit

💡 Layers

3 independent shader layers, each with its own displacement, palette, animation. Toggle on/off, adjust opacity, copy parameters between layers.

Save Preset
History0
Ctrl+Z undo · Ctrl+Shift+Z redo
⚡ Animation & VFX
Timeline
Dur s
No keyframes · Add keyframes to animate between states
Curve Editor
Select a parameter to edit its animation curve
⚡ Motion & DestructionOFF
Path
-4.0
0.0
4.0
0.0
3.0
1.5
Flight
0.50
1.20
1.00
2.0
Destruction
35
6.0
8.0
1.5
1.5
Set path → hit Launch → watch destruction
Audio Reactive
BASS
MID
HIGH
VOL
1.50
0.85
1.00
0.80
0.60
0.50
Shape
Style
Particles
Export
Layer
Presets
My Presets
No saved presets
Render ModeMESH
Geometry
Displacement3 oct
Shape
Flow
SDF Primitives
SDF Shape
Domain Warp
Palette
Click track to add · Drag handles · Click handle to select
Bands
Texture
Edge Noise
Emission / Lighting
GLSL Injectv11
Post-Process
Scene
-1.50
Scene Objects
Max 5 objects · Clone copies current state
Particles
Sphere Visibility
Toggle the main mesh on/off
Export Asset
Camera
📦 PBR Material Pack
Exports PBR maps derived from current shader state
JSON

      
Batch Export
Ctrl+Z undo · Ctrl+Shift+Z redo