3d-graphics_skill

Overview

This skill provides practical expertise for building high-performance 3D web applications using Three.js (WebGL/WebGPU). It covers scene composition, cameras, materials, lighting, animations, model loading, post-processing, custom shaders, performance patterns, and VR/XR integration. The focus is on actionable techniques to create interactive visuals, product configurators, and immersive experiences that run smoothly in browsers.

How this skill works

The skill inspects and designs 3D scenes by assembling cameras, geometries, materials, lights, and renderers, then applying animation loops and asset loaders (GLTF/FBX/OBJ). It configures PBR materials, shadow mapping, post-processing passes (bloom, SSAO, SSR), and custom GLSL shaders, and applies optimization patterns like instancing, LOD, and frustum culling. It also integrates physics engines and WebXR hooks when interactive simulation or VR/AR support is required.

When to use it

• Building interactive 3D product configurators, visualizers, or demos for the web.
• Creating data visualizations that require spatial layouts, camera controls, or animation.
• Loading and displaying GLTF/FBX assets with materials, textures, and animations.
• Adding post-processing effects, custom shaders, or PBR materials to improve realism.
• Optimizing scenes with instancing, LOD, or GPU-driven rendering for performance.
• Implementing VR/XR experiences or physics-driven interactions in the browser.

Best practices

• Start with a minimal scene and progressively add complexity to isolate performance costs.
• Use GLTF for complex assets, keep textures power-of-two, and compress with KTX2/Basis when possible.
• Prefer instancing and LOD for repeated geometry; enable frustum culling and reduce draw calls.
• Use MeshStandardMaterial or MeshPhysicalMaterial for PBR workflows and tune maps (albedo, metalness, roughness, ao).
• Apply post-processing selectively; use lower-resolution passes or dithering for heavy effects like SSAO/bloom.
• Test on target devices early and profile GPU/CPU hotspots with browser devtools and RAF timing.

Example use cases

• An interactive product configurator with real-time PBR rendering and material switching.
• An architectural walkthrough with baked and dynamic lighting, LOD, and navigation controls.
• A data-driven 3D dashboard visualizing geospatial or time-series data with camera interaction.
• A web-based VR gallery that loads GLTF models, supports controllers, and applies physics for interactions.
• A game prototype using instancing for many objects and custom shaders for stylized rendering.