webgpu-claude-skill

# WebGPU Optimization for Three.js in Architectural Visualization

## Shader Performance Optimization

To optimize shader performance in your Three.js WebGPU application for architectural visualization, consider the following strategies:

- **Minimize branching in shaders**: Branching can lead to performance penalties. Simplify conditional statements and use uniform values where possible.
- **Use efficient data structures**: For example, use `float` instead of `vec3` for color values when possible.
- **Avoid dynamic branching**: Dynamic branching can cause performance issues. Use static branching or uniform values instead.

## Custom Post-Processing Effect

To implement a custom post-processing effect in your Three.js WebGPU application, you can use the `THREE.ShaderPass` class. Here's an example of how to create a simple blur effect:

```javascript
const blurPass = new THREE.ShaderPass(blurShader); // blurShader is a custom shader that you've created
blurPass.uniforms['tSize'].value.set(window.innerWidth, window.innerHeight);

// Add the blur pass to your post-processing pipeline
composer.addPass(blurPass);
```

## Troubleshooting Tips

- **Check for WebGPU errors**: Use the `THREE.WebGPUError` class to catch and handle errors.
- **Profile your application**: Use the browser's built-in profiling tools to identify performance bottlenecks.
- **Test on different devices**: Ensure your application runs smoothly on a variety of devices and browsers.