skills.rest
bovinphang
bovinphangCOMMUNITY
Explore all skills by this author →
GitHub

fec-canvas-threejs

Consolidate best practices for Canvas 2D, Three.js/WebGL, and React Three Fiber graphics.

21|3|Updated Mar 17, 2026
Search Tags:#canvas#gpu#glsl#webgl#three.js#react-three-fiber#shader
One-click install
npx skills add https://github.com/bovinphang/frontend-craft --skill fec-canvas-threejs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fec-canvas-threejs
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-canvas-threejs
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-canvas-threejs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Builds and audits high-performance Canvas 2D and WebGL graphics workflows, including Three.js, GLSL shader handling, React Three Fiber, and robust resource management, with accessibility considerations.

Core Features & Use Cases

  • Performance-first rendering guidance for Canvas 2D, Three.js/WebGL, and React Three Fiber scenes.
  • Shader and GL workflow best practices covering GLSL, shader debugging, and WebGL2 compatibility.
  • Lifecycle and cleanup patterns to avoid memory leaks by disposing geometry, materials, textures, and renderers.
  • Use Case: When optimizing an interactive data visualization, apply these patterns to ensure smooth rendering across devices.

Quick Start

Set up a responsive 2D/3D scene following the guide and verify cleanup of geometry, materials, and renderers when unloading.

Frequently Asked Questions about fec-canvas-threejs

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

FAQPage Schema
How do I prevent memory leaks when disposing of Three.js geometry and materials?▼

Proper Three.js cleanup requires explicitly disposing of geometry, materials, textures, and renderers when unmounting scenes. This prevents memory leaks by ensuring GPU resources are fully released during real-time WebGL workflows.

What is the best way to handle DPR and resize behavior for responsive WebGL scenes?▼

Responsive WebGL scenes require proper DPR handling and resize behavior updates to camera and renderer dimensions. Applying these patterns maintains high-performance rendering and visual clarity across modern browsers and varying device pixel ratios.

Does this guide cover GLSL shader debugging and WebGL2 compatibility?▼

Yes, the guide covers GLSL shader debugging and WebGL2 compatibility. It provides best practices for robust shader management and GL workflows, ensuring real-time graphics tasks function correctly across modern browsers.

How do I optimize React Three Fiber performance for interactive data visualization?▼

Optimizing React Three Fiber for interactive data visualization involves applying performance-first rendering patterns, proper lifecycle cleanup, and robust resource management. These practices ensure smooth rendering across devices during real-time graphics tasks.

Why does my Canvas 2D visual lag on high-resolution displays?▼

Canvas 2D visuals often lag on high-resolution displays due to improper DPR handling. Applying correct device pixel ratio scaling and resize behavior ensures high-performance rendering without performance drops on modern browsers.

Related Skills

Explore More Software Engineering Skills→
DexploarerDexploarer
6

threejs-scene-builder

Build Three.js scenes with camera, renderer, controls, and lighting.

Community
Advanced
ConnectiveTCSConnectiveTCS

webgl

Develop GPU-accelerated WebGL 2.0 shaders for the JARVIS 3D HUD.

Community
Advanced
MonichreMonichre

threejs-shaders

Integrate custom GLSL shaders into Three.js using ShaderMaterial and RawShaderMaterial.

Community
Intermediate
ayofemiadeayofemiade

pixijs-2d

Create interactive 2D graphics, games and particle effects with PixiJS.

Community
Advanced