TRY IT: https://shaderparkcomposer.tiiny.site
A visual builder for creating and composing Shader Park shaders. Build complex shaders using a library of predefined elements and custom snippets.
This project is built on top of Shader Park, an incredible platform that makes creating shaders accessible through a JavaScript API. Shader Park was created by Torin Blankensmith and Peter Whidden.
Key Shader Park Resources:
- Shader Park Website
- Shader Park Documentation
- Shader Park GitHub
- Shader Park Examples
- Shader Park Discord
- Visual shader composition using Shader Park's JavaScript API
- Live preview with Three.js integration
- Real-time code generation
- Parameter controls with animation support
- Custom snippet system
- Dark/Light mode
- Geometry primitives (box, sphere, torus, etc.)
- Material controls
- Color controls
- Space transformations
- Modifiers
- Utility functions
- Multiple preview environments
- Environment controls
- Studio lighting setup
- Custom environment parameters
- Resizable panels
- Collapsible sections
- Search functionality
- Parameter animations
- Notes system
- Settings panel
- Node.js (v14 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/yourusername/shader-park
-
Install dependencies:
cd shader-park-builder yarn install
Run the development server:
yarn start
yarn run build
- Copy code button
- Basic theming support
- Light/Dark mode toggle
- Theme settings panel
- Persistent theme preference
- Left panel reorganization
- Collapsible sections with arrows
- Resizable panels
- Library/Presets/Notes tabs
- Scrollable content
- Multi-note system with add/delete
- Drag-and-drop reordering
- Basic preset system
- Added multiple 3D environments for shader preview:
- Ocean environment with animated water and floating platform
- Sky environment with dynamic lighting and ground plane
- Studio environment with grid floor and fog
- Plain background option
- Added shadow support across all environments
- Added proper lighting setup for each environment
- Added ground/platform to each environment for better spatial reference
- Added toolbar with application title and settings
- Implemented theme switcher with light/dark modes
- Reorganized left panel into three sections:
- Library - Scrollable element catalog with search
- Presets - Quick access to saved configurations (in progress)
- Notes - Multi-note support with add/edit/delete capabilities
- Added resizable dividers between panel sections
- Improved scrolling behavior for overflow content
- Added dark mode support throughout the application
- Made library elements more compact with grid layout
- Added preset system with JSON storage
- Improved notes system with collapsible entries
- Added custom snippet creation functionality
- Updated UI for better space utilization
- Environment enhancements
- Environment-specific controls
- Custom environment parameters
- Environment presets
- Preset system implementation
- Preset storage structure
- Save/load functionality
- Preset management UI
- Custom snippet creation
- Drag-and-drop element reordering
- Built-in documentation viewer
- Quick reference panel
- Context-sensitive help
- Operation modes (union, difference, etc.)
- Complex multi-line elements
- Noise-based displacement presets
- Complete Shader Park API coverage
- Save custom elements
- Import/Export snippets
- Snippet organization system
- Dark/Light mode toggle
- Custom color schemes
- Configurable UI layouts
- Responsive panel system
- Multiple background scenes
- Environment presets
- Custom environment import
- Environment editor
- Notes system
- Preset library
- Tags and search
- Import/Export system
- Copy code button
- Code formatting options
- Drag-and-drop element reordering
- Code history/undo system
- Customizable panel layouts
- Collapsible sections
- Element grouping
- Workspace presets