Tag : webgl

Builds or debugs interactive 3D web scenes with Three.js: scene, camera, renderer, lights, materials, GLTF loading and controls, plus performance basics like capping pixel ratio, handling resize, disposing WebGL resources and reduced motion.

Steers WebGL-heavy landing pages toward a chosen look by picking one of four visual lanes per page type, passing message, performance, accessibility and reliability gates, and outputting a lane, visual spec, stack, fallback and build order.

Adds a lightweight interactive WebGL globe with the cobe library: canvas sizing for device pixel ratio, location markers, rotation in onRender, resize handling and teardown, for plain pages or React/Next.js hero sections.

Three.js animation reference with code: procedural motion with Clock, the AnimationClip, AnimationMixer and AnimationAction keyframe system, playing GLTF animations, skeletal animation, morph targets and blending multiple animations.

Three.js fundamentals with code: setting up the scene, cameras and WebGLRenderer, Object3D hierarchy, coordinate systems and transforms, the render loop and resize handling. A starting point for building a 3D scene on the web.

Three.js geometry reference with code: parameters for built-in shapes like boxes, spheres, cylinders and tori, building custom meshes from vertices with BufferGeometry, and instanced rendering for large numbers of objects.

Three.js interaction reference with code: raycasting for click detection and object selection, camera controls such as OrbitControls, and mouse and touch input handling for interactive 3D experiences.

Three.js lighting reference with code: ambient, hemisphere, directional, point, spot and area lights with their cost and shadow support, shadow setup, image-based environment lighting and lighting performance tips.

Three.js materials reference with code: when to use Basic, Lambert, Phong, Standard, Physical, Toon and other materials, PBR properties such as roughness and metalness, custom ShaderMaterial and material performance.

Three.js post-processing reference with code: chaining passes with EffectComposer, adding bloom, depth of field, color grading, blur and glow, and writing custom screen-space shader passes.

Three.js shader reference with code: writing GLSL vertex and fragment shaders, ShaderMaterial versus RawShaderMaterial, uniforms and animating them, and extending built-in materials for custom visual effects.

Three.js texture reference with code: loading and configuring texture maps, UV mapping, cubemaps and HDR environment maps, texture settings and optimization.

Guides building small always-on WebGL visuals (avatars, ambient orbs, glass and iridescent surfaces) inside product UI: one shared context, a single capped frame loop, cheap fragment shaders, context-loss handling, a mandatory non-WebGL fallback, and React SSR and Server Components pitfalls.