内容
# ShaderVine
A WebGPU shader programming toolkit for creating, evolving, and exporting real-time visual effects. Write WGSL fragment shaders with live preview, tweak parameters with interactive uniform controls, run GPU compute simulations, and export to Unity, Unreal, Blender, and Three.js.
## Why
WebGPU changes what's possible in a browser. It brings [low-overhead, modern GPU access](https://meditations.metavert.io/p/web-renaissance-part-2-how-the-web) comparable to Vulkan and Metal — including compute shaders that enable GPU simulations previously confined to native apps. ShaderVine puts that power into an accessible creative tool: no install, no gatekeepers, no app store tax.
AI is remarkably good at generating shader code from natural language, but [visual iteration remains a bottleneck](https://meditations.metavert.io/p/when-ai-learns-to-paint-threejs-and) — describing what a shader should *look like* through text is lossy. ShaderVine bridges this gap with direct manipulation: live preview, parameter sliders, genetic evolution, and shader morphing let you explore the visual space hands-on.
The built-in [MCP server](https://meditations.metavert.io/p/the-agentic-web-discovery-commerce) exposes every shader operation as a tool that AI agents can call — search, create, fork, and export shaders programmatically. This makes ShaderVine a native participant in the agentic web.
## Features
**Shader Editor**
- Monaco-based WGSL code editor with syntax highlighting
- Live preview on a fullscreen quad or 3D shapes (sphere, cube, torus, cylinder, cone)
- Real-time compilation error reporting with line numbers
**Interactive Controls**
- Uniform sliders with configurable min/max/step
- Randomize and mutate buttons for parameter exploration
- Mouse position and click state passed as built-in uniforms
**GPU Compute Simulations**
- 16 compute shader presets with ping-pong buffer architecture:
Game of Life, Reaction-Diffusion, Physarum, Slime Mold, Fluid Simulation,
Wave Ripple, Falling Sand, Erosion, Particle Swarm, Particle Trails,
Magnetic Field, DLA, Turing Patterns, Noise Landscape, Domain Warp, Turbulence
- Adjustable grid size and simulation speed
**Creative Tools**
- Shader morphing — blend between any two shaders with a crossfade factor
- Genetic evolution — generate and select from mutated shader variants
- History scrubber — navigate through every edit, morph, and evolution step
- Visual node graph editor for composing shaders without code
**Export**
- WGSL (raw WebGPU shading language)
- HLSL (DirectX)
- Unity ShaderLab (complete .shader file with properties)
- Unreal Engine (Custom Expression node for Material Editor)
- Blender OSL (Open Shading Language for Cycles)
- Three.js (standalone HTML with WebGPU scene)
**Three.js Sandbox**
- Drop any shader onto 3D geometry with lighting and environment controls
- Export standalone HTML scenes
**MCP Server**
- AI agents can list, search, create, fork, and export shaders via Model Context Protocol
- Integrates with Claude, Cursor, and any MCP-compatible client
## Tech Stack
| Layer | Technology |
|-------|-----------|
| Frontend | React 19, TypeScript 5.9, Vite, Tailwind CSS 4 |
| Editor | Monaco Editor |
| Graphics | WebGPU, WGSL, Three.js |
| Node Graph | XY Flow (React Flow) |
| Backend | Go 1.23, Gorilla Mux |
| Database | MongoDB |
| Agent Protocol | MCP (mark3labs/mcp-go) |
| Deployment | Docker, Fly.io |
## Getting Started
### Prerequisites
- Go 1.23+
- Node.js 22+
- MongoDB (local or Atlas)
- A browser with WebGPU support (Chrome 113+, Edge 113+, Firefox 141+, Safari 18+)
### Local Development
```bash
# Clone the repo
git clone https://github.com/nickadjective/shadervine.git
cd shadervine
# Set up MongoDB connection
echo "MONGODB_URI=mongodb://localhost:27017" > backend/.env
# Install frontend dependencies
cd frontend && npm install && cd ..
# Start both frontend and backend
./start.sh
```
The frontend runs at `http://localhost:4466` and the backend at `http://localhost:4467`.
### Docker
```bash
docker build -t shadervine .
docker run -p 8080:8080 -e MONGODB_URI=<your-uri> shadervine
```
### Deploy to Fly.io
```bash
# First deploy sets up the app and secrets
./deploy.sh
```
## Project Structure
```
shadervine/
frontend/
src/
components/ # React UI (Editor, Preview, Explorer, Controls, Export, Sandbox, NodeGraph)
engine/ # WebGPU renderer with compute shader support
api/ # Backend API client
types/ # TypeScript type definitions
backend/
cmd/shadervine/ # Server entrypoint
internal/
handlers/ # REST API handlers + shader presets
mcp/ # MCP server for AI agent integration
middleware/ # Anonymous auth
models/ # MongoDB models
config/ # YAML config loader
export/ # WGSL-to-HLSL/Unity/Unreal/Blender/Three.js transpilers
pkg/healthz/ # Health check endpoint
config/ # Environment configs (dev.yaml, prod.yaml)
```
## License
MIT License. See [LICENSE](LICENSE).
MCP 市场