A powerful, interactive WebGPU shader playground built with Vue.js and TypeScript. Write, test, and experiment with WGSL shaders in real-time with an intuitive web-based IDE.
- Real-time Shader Preview - See your WGSL shaders render instantly
- Monaco Editor Integration - Full-featured code editor with syntax highlighting
- Texture Loading - Import and apply custom textures to your shaders
- Multiple Mesh Support - Test shaders on various 3D models
- Interactive Controls - Real-time uniform manipulation
- Responsive Design - Works seamlessly across devices
- Comprehensive Testing - Test coverage with Vitest
The project follows a modular architecture with clear separation of concerns:
- Frontend: Vue 3 with Composition API and TypeScript
- WebGPU Engine: Custom renderer with pipeline management
- Shader System: WGSL parsing and uniform binding
- Resource Management: Texture and mesh loading utilities
- Testing: Comprehensive unit tests
| Category | Technologies |
|---|---|
| Frontend | Vue.js 3, TypeScript, Naive UI |
| Graphics | WebGPU, WGSL Shaders |
| Build Tools | Vite, Vue TSC |
| Code Editor | Monaco Editor |
| Testing | Vitest, Testing Library |
| Deployment | GitHub Pages, GitHub Actions |
- Node.js 18+
- Modern Browser with WebGPU support (Chrome 113+, Firefox 120+)
- GPU compatible with WebGPU
# Clone the repository
git clone https://github.com/AnuKritiW/splitshade-webgpu-playground.git
# Navigate to project directory
cd splitshade-webgpu-playground
# Install dependencies
npm install
# Start development server
npm run dev- Start the development server with
npm run dev - Open your browser to
http://localhost:5173 - Write WGSL shaders in the Monaco editor
- Select meshes and textures from the resource panels
- Watch your creations render in real-time!
# Run all tests
npm test
# Run tests with coverage
npm run test:coverageThe project automatically deploys to GitHub Pages when changes are pushed to the main branch.
# Build for production
npm run build
# Preview production build
npm run preview
# Manual deployment
npm run deploysrc/
├── ui/ # UI layer (Vue.js frontend)
│ ├── components/ # Vue components
│ │ ├── panels/ # Main application panels
│ │ │ ├── EditorPanel.vue # Monaco shader editor
│ │ │ ├── PreviewPanel.vue # WebGPU render canvas
│ │ │ ├── ResourcesPanel.vue # Mesh/texture selector
│ │ │ └── ConsolePanel.vue # Error/output display
│ │ ├── modals/ # Modal dialogs
│ │ │ ├── TextureModal.vue # Texture selection
│ │ │ └── MeshModal.vue # Mesh selection
│ │ └── WebGPUWarning.vue # Browser compatibility
│ ├── composables/ # Vue composition functions
│ │ ├── useShaderRunner.ts # Shader execution
│ │ ├── useTextures.ts # Texture management
│ │ └── useMesh.ts # Mesh handling
│ └── styles/ # UI styling
│ └── app.css
├── core/ # Core WebGPU setup
│ └── context.ts # Device/adapter management
├── runtime/ # Rendering execution
│ └── renderer.ts # Main rendering engine
├── pipeline/ # Rendering pipeline
│ ├── pipeline.ts # Render pipeline factory
│ └── uniforms.ts # Uniform buffer management
├── shader/ # Shader processing
│ ├── shaderUtils.ts # Shader compilation & templates
│ └── wgslReflect.ts # WGSL parsing & reflection
└── resources/ # Asset management
├── textures.ts # Texture loading & binding
└── mesh/
└── objParser.ts # OBJ file parsing
AI tools were used as a supplementary resource in the development of this project in the following ways:
- Providing starter code patterns and boilerplate (e.g. UI scaffolding, setup).
- Suggesting refactoring strategies and debugging approaches.
- Assisting with documentation phrasing and technical explanations (e.g. PR descriptions, README, comments).
All AI-assisted outputs were reviewed, adapted, and verified before inclusion.
Made with ❤️ by AnuKritiW