Can it help me fix 3D models that aren't showing up?

Absolutely. It provides a 'Nothing Renders' checklist covering camera positioning, lighting requirements, and canvas scaling.

Does this skill support the latest WebGPU features?

Yes, it includes troubleshooting patterns for Three.js WebGPU renderers and the new Three.js Shading Language (TSL).

How does it help with performance optimization?

The skill provides target metrics for draw calls and triangle counts, along with specific fixes like instancing, geometry merging, and asset compression.

Does it support physics engine debugging?

Yes, it features a dedicated section for @react-three/rapier to fix common physics issues like tunneling, jitter, and collider mismatches.

Is this skill specific to React users?

No, it provides comprehensive debugging guidance and code examples for both React Three Fiber and vanilla Three.js.

3D Web Graphics Troubleshooting

Name: 3D Web Graphics Troubleshooting
Author: AnthemFlynn

byAnthemFlynn

•

Game Development

Diagnoses and resolves 3D rendering issues, performance bottlenecks, and asset pipeline failures in Three.js and React Three Fiber.

About

This skill empowers developers to rapidly identify and fix common 3D web graphics problems by providing a symptom-based diagnostic framework. It covers a wide range of issues including empty scenes (black screens), visual artifacts like Z-fighting, memory leaks, and loading failures associated with Draco or KTX2 compression. With specific guidance for both vanilla Three.js (including WebGPU) and React Three Fiber environments, it simplifies complex 3D debugging tasks such as physics jitter in Rapier or shader compilation errors, ensuring high-performance and visually consistent 3D web experiences.

Key Features

Performance profiling for draw calls, triangle counts, and memory management
Shader and Material error resolution for WebGL and WebGPU/TSL
1 GitHub stars
Symptom-based diagnostic guide for 3D rendering and 'black screen' issues
Asset pipeline troubleshooting for GLTF, Draco, and KTX2 loading
Physics debugging for @react-three/rapier including collision and jitter fixes

Use Cases

Optimizing frame rates and reducing memory leaks in complex scenes
Configuring advanced asset loaders and resolving CORS or decoder errors
Fixing 'black screen' or invisible model issues in 3D web applications

About

Key Features

Performance profiling for draw calls, triangle counts, and memory management
Shader and Material error resolution for WebGL and WebGPU/TSL
1 GitHub stars
Symptom-based diagnostic guide for 3D rendering and 'black screen' issues
Asset pipeline troubleshooting for GLTF, Draco, and KTX2 loading
Physics debugging for @react-three/rapier including collision and jitter fixes

Use Cases

Optimizing frame rates and reducing memory leaks in complex scenes
Configuring advanced asset loaders and resolving CORS or decoder errors
Fixing 'black screen' or invisible model issues in 3D web applications