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.

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

01Performance profiling for draw calls, triangle counts, and memory management

02Shader and Material error resolution for WebGL and WebGPU/TSL

031 GitHub stars

04Symptom-based diagnostic guide for 3D rendering and 'black screen' issues

05Asset pipeline troubleshooting for GLTF, Draco, and KTX2 loading

06Physics debugging for @react-three/rapier including collision and jitter fixes

Use Cases

01Optimizing frame rates and reducing memory leaks in complex scenes

02Configuring advanced asset loaders and resolving CORS or decoder errors

03Fixing 'black screen' or invisible model issues in 3D web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anthemflynn/ccmp graphics-troubleshooting

For use in Claude.ai and ChatGPT

Download Skill