Three.js Scenes & Shaders

Build production-quality vanilla Three.js scenes (no R3F) — voxel worlds, procedural geometry, instancing/BatchedMesh, particle systems, and GLSL shader effects (bloom, god rays, depth of field, glitch). Includes EffectComposer post-processing and draw-call optimization.

A deep, vanilla Three.js skill focused on visual richness and performance. It builds isometric games, voxel and infinite worlds, procedural geometry, particle systems, and billboards; authors GLSL ShaderMaterial effects and EffectComposer post-processing chains (bloom, lens flares, god rays, DOF, chromatic aberration); and optimizes draw calls, LOD, and frame-rate capping for smooth 3D on the web.

When to use

Use when building 3D scenes in the browser with vanilla Three.js, writing GLSL shaders or post-processing chains, creating procedural/instanced geometry or particle systems, adding camera controls, or optimizing Three.js performance and draw calls.

Examples

Custom shader effect

Write a GLSL post-processing pass

Add a bloom + chromatic aberration post-processing chain with EffectComposer and a custom GLSL film-grain pass to my Three.js scene

Instanced particle field

Render thousands of objects efficiently

Create an animated starfield of 50k instanced points with a GLSL ShaderMaterial that twinkles, keeping draw calls to one