Lumina Workbench - Visual Shader Node Editor with AI Generation

Showcase
, , , ,
1

Lumina - Visual Shader Node Editor with AI Generation

Hey Three.js community! :waving_hand:

I’m excited to share Lumina Workbench - a visual shader node editor built on top of Three.js that I’ve been working on.

What is it?

Lumina is a desktop app (Electron + React + Three.js) for creating PBR materials through a visual node graph. The twist? It has an AI assistant that can generate shader graphs from text descriptions.

Key Features

  • :artist_palette: Visual Node Editor - 77 node types for PBR materials and post-processing

  • :eye: Real-time 3D Preview - Powered by Three.js with HDRI lighting

  • :robot: AI Material Generation - Describe what you want, get a working graph

  • :outbox_tray: Three.js Export - Export directly as

    ShaderMaterial

  • :performing_arts: Scene Compositor - Multi-material scenes with GLB/GLTF/OBJ/USDZ support

  • :books: Variant Library - Save and iterate on material versions

Three.js Integration

The app uses Three.js for:

  • Real-time PBR rendering with

    ShaderMaterial

  • HDRI environment maps via

    RGBELoader

  • GLB/GLTF/OBJ/USDZ model loading

  • Post-processing pipeline with ping-pong buffers

The shader compiler generates clean GLSL that exports as ready-to-use Three.js code:

javascript

const material = new THREE.ShaderMaterial({

uniforms: {

uTime: { value: 0.0 },

uAlbedoMap: { value: albedoTexture },

// ... generated uniforms

},

vertexShader: `/* generated */`,

fragmentShader: `/* generated */`

});

Tech Stack

  • React 19 + TypeScript

  • Three.js 0.181

  • LiteGraph.js for node graph

  • Electron 33 for desktop

  • Vite for building

Try it

Would love to hear your feedback! Any suggestions for improving Three.js integration are welcome.

1 Like
2

why electron? Why not a web page?

3

I chose Electron for easy local use without internet.

1 Like