Skip to content

Latest commit

 

History

History
184 lines (150 loc) · 5.32 KB

README.md

File metadata and controls

184 lines (150 loc) · 5.32 KB
Raw

TRY IT: https://shaderparkcomposer.tiiny.site

Shader Park Builder

A visual builder for creating and composing Shader Park shaders. Build complex shaders using a library of predefined elements and custom snippets.

Screenshot 2024-11-02 at 11 55 46 PM Screenshot 2024-11-02 at 11 56 36 PM

About Shader Park

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:

Features

Core Functionality

  • 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

Element Library

  • Geometry primitives (box, sphere, torus, etc.)
  • Material controls
  • Color controls
  • Space transformations
  • Modifiers
  • Utility functions

Environment System

  • Multiple preview environments
  • Environment controls
  • Studio lighting setup
  • Custom environment parameters

User Interface

  • Resizable panels
  • Collapsible sections
  • Search functionality
  • Parameter animations
  • Notes system
  • Settings panel

Getting Started

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/shader-park

  2. Install dependencies:

    cd shader-park-builder
yarn install

Development

Run the development server:

Development mode

yarn start

Production mode

yarn run build

Roadmap

Current Sprint

  • 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

Recent Updates

Environment 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

UI Improvements

  • Added toolbar with application title and settings
  • Implemented theme switcher with light/dark modes
  • Reorganized left panel into three sections:
    1. Library - Scrollable element catalog with search
    2. Presets - Quick access to saved configurations (in progress)
    3. 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

Next Up

  • 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

Documentation Integration

  • Built-in documentation viewer
  • Quick reference panel
  • Context-sensitive help

Element Library Expansion

  • Operation modes (union, difference, etc.)
  • Complex multi-line elements
  • Noise-based displacement presets
  • Complete Shader Park API coverage

User Elements & Snippets

  • Save custom elements
  • Import/Export snippets
  • Snippet organization system

Theming & UI

  • Dark/Light mode toggle
  • Custom color schemes
  • Configurable UI layouts
  • Responsive panel system

Preview Environment

  • Multiple background scenes
  • Environment presets
  • Custom environment import
  • Environment editor

User Data Management

  • Notes system
  • Preset library
  • Tags and search
  • Import/Export system

Code Management

  • Copy code button
  • Code formatting options
  • Drag-and-drop element reordering
  • Code history/undo system

Layout & Organization

  • Customizable panel layouts
  • Collapsible sections
  • Element grouping
  • Workspace presets