skills.rest
millionco
millioncoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

improve-threejs

Audits and fixes Three.js and React Three Fiber apps for frame-loop performance, GPU memory leaks, and visual defects.

14.7k|470|Updated Feb 13, 2026
Search Tags:#performance audit#Three.js#useframe#react three fiber#visual defects#webGL#gpu memory leak
One-click install
npx skills add https://github.com/millionco/react-doctor --skill improve-threejs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: improve-threejs
Source: https://github.com/millionco/react-doctor/tree/main/skills/improve-threejs
Command: npx skills add https://github.com/millionco/react-doctor --skill improve-threejs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-doctor.

What problem does it solve?

Three.js and React Three Fiber apps often suffer from per-frame allocations, undisposed GPU resources, and visual defects like z-fighting, shadow acne, and wrong color spaces that general React scanners cannot detect. This Skill combines the React Doctor scanner with a frame-loop-aware triage process and a visual inspection rubric to find and fix these issues.

Core Features & Use Cases

  • Frame-loop performance triage: Re-ranks scanner findings by where code runs, prioritizing allocations and setState calls inside useFrame or requestAnimationFrame callbacks.
  • GPU memory leak detection: Identifies geometries, materials, textures, and render targets created imperatively without dispose() cleanup.
  • Visual defect rubric: Checks rendered output against ten criteria including z-fighting, shadow acne, color space errors, transparency sorting, and resize handling.
  • Use Case: A team notices their R3F product configurator stutters and leaks memory over time. Run this Skill to scan the codebase, find a new Vector3 allocated every frame and undisposed textures, fix them, and validate the score did not regress.

Quick Start

Ask the agent to audit and improve your Three.js or React Three Fiber app, or type /improve-threejs in your project directory.

Frequently Asked Questions about improve-threejs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix performance issues in a React Three Fiber app?▼

Run the audit to scan with React Doctor, then triage findings by frame-loop leverage. The most common fixes are hoisting allocations out of useFrame, replacing setState with ref mutations, and disposing GPU resources in cleanup functions.

How to find GPU memory leaks in Three.js applications?▼

Check that every imperatively created geometry, material, texture, and render target has a matching dispose() call in a cleanup function. After fixes, watch the memory profile while orbiting an idle scene; a rising heap means a disposal leak survived.

Does this work with plain Three.js or only React Three Fiber?▼

It supports both plain Three.js and React Three Fiber, including helper libraries like drei, postprocessing, and rapier. The recon step identifies the stack and locates the render loop before scanning.

Why does my Three.js scene have z-fighting or shadow acne?▼

Z-fighting usually comes from coplanar geometry needing polygonOffset or a near plane set too small for the scene scale. Shadow acne typically means shadow.bias and shadow.normalBias are untuned or the shadow camera frustum is far larger than the scene.

What causes washed-out colors in a Three.js render?▼

Washed-out or too-dark colors usually mean renderer.outputColorSpace is not set to SRGBColorSpace, color textures are missing texture.colorSpace assignment, or a data texture like a normal map is wrongly marked sRGB.

When should I use frameloop demand instead of always in R3F?▼

Use frameloop="demand" with invalidate() when the scene only changes on interaction, since frameloop="always" renders 60 frames per second even when nothing moves. This is flagged as a medium-severity finding during triage.

Related Skills

Explore More Software Engineering Skills→
Aurora-AIAurora-AI
1

r3f-bridge-engineer

Bridge React Three Fiber components with native Three.js for interactive 3D scenes.

Community
Intermediate
malinskibeniaminmalinskibeniamin
3

setup-react-doctor

Automate React health scoring with react-doctor during setup, commits, and CI.

Community
Intermediate
MohammedSaudAlsahliMohammedSaudAlsahli

web-perf

Audit web performance using Chrome DevTools profiling tools and Core Web Vitals.

Community
Advanced
CyapstayeCyapstaye
9

node-inspect-debugger

Control the Node.js V8 inspector for breakpoints, call-stack inspection, and heap profiling.

Community
Advanced