Does it handle 3D asset compression issues?

Absolutely, it includes configuration patterns for Draco, Meshopt, and KTX2 decoders to resolve common loading and decoding failures.

Which 3D libraries does this skill support?

It primarily supports Three.js (r171+), React Three Fiber (v9+), and related ecosystem tools like @react-three/drei and @react-three/rapier.

Yes, the skill includes diagnostic patterns for the Three.js WebGPU renderer and troubleshooting for the Three Shading Language (TSL).

Can it help with performance optimization?

Yes, it provides specific metrics and fixes for reducing draw calls, managing memory leaks, and optimizing geometry for better performance on mobile devices.

Web Graphics Troubleshooting

Name: Web Graphics Troubleshooting
Author: AnthemFlynn

byAnthemFlynn

•

게임 개발

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

This skill provides Claude with a specialized knowledge base for identifying and fixing common 3D web graphics problems, ranging from rendering failures like 'black screens' and z-fighting to complex memory leaks and shader compilation errors. It covers modern versions of Three.js (including WebGPU/TSL support), React Three Fiber, and physics engines like Rapier, offering optimized code patterns and diagnostic checklists to accelerate the development of high-performance 3D web applications.

주요 기능

01Shader and material error resolution including modern Three Shading Language (TSL) patterns.

02Performance profiling guidance to optimize draw calls, triangle counts, and memory management.

03Asset pipeline troubleshooting for GLTF, Draco, and KTX2 loading and decoding errors.

04Physics engine debugging for @react-three/rapier to resolve collision and jitter issues.

053 GitHub stars

06Comprehensive diagnostic checklists for rendering bugs, camera issues, and lighting failures.

사용 사례

01Fixing visual artifacts such as flickering faces (z-fighting) or inverted normals in complex 3D scenes.

02Optimizing 3D web applications that suffer from low FPS or stuttering on mobile devices.

03Resolving asset loading failures when importing compressed 3D models from diverse sources.

주요 기능

01Shader and material error resolution including modern Three Shading Language (TSL) patterns.

02Performance profiling guidance to optimize draw calls, triangle counts, and memory management.

03Asset pipeline troubleshooting for GLTF, Draco, and KTX2 loading and decoding errors.

04Physics engine debugging for @react-three/rapier to resolve collision and jitter issues.

053 GitHub stars

06Comprehensive diagnostic checklists for rendering bugs, camera issues, and lighting failures.

사용 사례

01Fixing visual artifacts such as flickering faces (z-fighting) or inverted normals in complex 3D scenes.

02Optimizing 3D web applications that suffer from low FPS or stuttering on mobile devices.

03Resolving asset loading failures when importing compressed 3D models from diverse sources.