webgpu-claude-skill

🥈Silver

Develop WebGPU applications with Three.js. Ideal for operations teams building high-performance 3D web apps. Integrates with existing Three.js workflows, enabling advanced rendering capabilities.

685270Updated 2w ago

Intermediate30min to implementautomation

Saves ~240 min per use

Quick InstallView Source

git clone https://github.com/dgreenheck/webgpu-claude-skill.git

Works with:

Claude

Overview

About This Skill

Develop WebGPU applications with Three.js. Ideal for operations teams building high-performance 3D web apps. Integrates with existing Three.js workflows, enabling advanced rendering capabilities.

How to Use

["1. **Set Up Environment**: Install Three.js (v158+) and enable WebGPU in your project. Add `import { WebGPURenderer } from 'three/addons/renderers/webgpu/WebGPURenderer.js';` to your entry file. Ensure your browser supports WebGPU (Chrome 113+, Edge 113+, or Firefox Nightly).","2. **Define Requirements**: Specify the [APPLICATION_PURPOSE], [SPECIFIC_FEATURE], and [INTERACTIVITY_REQUIREMENT] in the prompt. For example, ‘a real-time fluid simulation with user-controlled lighting.’","3. **Generate Code**: Use the prompt template to generate the Three.js + WebGPU code. Replace [PLACEHOLDERS] with your actual requirements (e.g., particle count, data source).","4. **Optimize**: Profile the generated code using Chrome DevTools (Performance tab) or WebGPU Inspector. Adjust [PERFORMANCE_METRIC] (e.g., reduce particle count, simplify shaders) if needed.","5. **Deploy**: Build your app with Vite (`npm run build`) or your preferred bundler. Test on target devices (e.g., mobile browsers) and implement fallbacks for unsupported browsers (e.g., WebGL renderer).","Tip: For large datasets, use `GPUComputationRenderer` to offload calculations to the GPU. Prefer `Float32Array` over `Uint8Array` for vertex data to avoid precision issues."]

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/dgreenheck/webgpu-claude-skill

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Develop a WebGPU-enabled 3D visualization using Three.js for [APPLICATION_PURPOSE]. Use WebGPU for [SPECIFIC_FEATURE: e.g., particle systems, real-time lighting, large-scale geometry]. Implement [INTERACTIVITY_REQUIREMENT: e.g., user-controlled camera, dynamic object manipulation] with Three.js controls. Optimize rendering for [TARGET_PLATFORM: e.g., desktop browsers, mobile devices] with a focus on [PERFORMANCE_METRIC: e.g., 60 FPS, low memory usage]. Include a minimal setup guide for deployment in [DEPLOYMENT_ENVIRONMENT: e.g., GitHub Pages, internal web server].

Example Output

### WebGPU Particle System with Three.js

**Purpose**: A real-time 3D particle simulation for a data center monitoring dashboard, visualizing server load across 10,000+ nodes.

**Implementation**:
1. **Setup**: Used Three.js r158 with WebGPU support enabled via `import * as THREE from 'three'; import { WebGPURenderer } from 'three/addons/renderers/webgpu/WebGPURenderer.js';`. Configured the renderer with `new WebGPURenderer({ antialias: true })` to ensure smooth edges on high-DPI displays.

2. **Particle System**: Created a custom `GPUComputationRenderer` to handle 16,384 particles (4x oversampling for smoothness). Each particle’s position and velocity are updated in a compute shader using WebGPU’s compute pipeline, achieving 60 FPS on a mid-range GPU (NVIDIA RTX 3060).

3. **Data Integration**: Fetched server load data from a REST API (`/api/servers/load`) and mapped it to particle colors (green for low load, red for high load). Used a `DataTexture` to stream updates every 500ms without blocking the main thread.

4. **Interactivity**: Added orbit controls (`OrbitControls` from Three.js) for zooming/panning. Implemented a click handler to display detailed metrics for a selected node in a side panel.

5. **Performance**: Achieved 58-62 FPS on Chrome/Edge with WebGPU enabled. Memory usage stabilized at ~200MB, even with 100k+ particles in the buffer.

**Deployment**:
- Built with Vite (`npm run build -- --mode production`)
- Deployed to an internal Kubernetes cluster with a CDN for global access.
- Fallback to WebGL renderer for users on unsupported browsers (e.g., Safari).

**Code Snippet**:
```javascript
// Particle system initialization
const particleCount = 16384;
const particles = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);

// Populate with random data (simplified)
for (let i = 0; i < particleCount; i++) {
  positions[i * 3] = (Math.random() - 0.5) * 1000;
  positions[i * 3 + 1] = (Math.random() - 0.5) * 1000;
  positions[i * 3 + 2] = (Math.random() - 0.5) * 1000;
  colors[i * 3] = Math.random(); // Load value (0-1)
  colors[i * 3 + 1] = 0.5; // Static color component
  colors[i * 3 + 2] = 0.5;
}

particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));

const particleMaterial = new THREE.PointsMaterial({
  size: 4,
  vertexColors: true,
  blending: THREE.AdditiveBlending,
  transparent: true
});

const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);
```