The Vibeary — round-up
Best Three.js and WebGL resources
3D on the web has crossed from novelty into a normal design tool, and Three.js is where most projects start. The hard part is no longer rendering a cube — it is performance, asset pipelines, lighting that does not look like a 2011 tech demo, and knowing which helper library saves a week. This shelf collects the helpers, ecosystem packages and learning resources worth your time, including the ones aimed specifically at designers who want scenes that look art-directed rather than default-lit.
What earned a place
- Saves real work rather than wrapping three lines of Three.js
- Performance-aware: instancing, LOD, texture handling
- Learning resources build a mental model, not just recipes
- Actively maintained against recent Three.js releases
24 picks from the library
- 01
cgbookcase
Free unrestricted PBR textures plus an open-source tiling tool for making any texture seamless.
Why it made the list: The bundled tiling tool is the hidden gem - it fixes textures from anywhere.
3D & texturesfreeDorian Zgraggencgbookcase.com
- 02
Computer Graphics from Scratch
Free online book building a raytracer then a rasteriser in pseudocode, explaining what OpenGL does underneath.
Why it made the list: Shortest honest path from zero to understanding the whole rendering pipeline
3D & WebGL learningfreeGabriel Gambetta (@gabrielgambetta)gabrielgambetta.com
- 03
Kenney Game Assets
Fifteen years of free 2D sprites, 3D kitbash kits, UI prompts, textures and VFX, all released into the public domain.
Why it made the list: Public-domain input-prompt icons alone save every game UI project a week.
3D & texturesfreeKenney Vleugels (@KenneyNL)kenney.nl
- 04
kokomi.js
Growing vanilla Three.js helper library with component base classes, asset managers, shader passes and scroll or pointer utilities.
Why it made the list: drei-grade conveniences for people not using React; almost nobody knows it exists.
Three.js helpersMITalphardex (@alphardex)github.com
- 05
Kompute
Steering behaviour and spatial query library for 3D agents, usable with Three.js for flocking and pursuit.
Why it made the list: Boids and steering behaviours as a standalone library; rare on the web platform.
Three.js helpersMITOguz Eroglu (@oguzeroglu)github.com
- 06
Learn OpenGL
Comprehensive modern OpenGL tutorial covering lighting, model loading, shadows, PBR and deferred shading with full source.
Why it made the list: The PBR and shadow chapters transfer directly to WebGL and three.js work
3D & WebGL learningCC-BY-NCJoey de Vries (@JoeyDeVriez)learnopengl.com
- 07
mannequin.js
Library for building and posing articulated human figures procedurally in Three.js through a body-part joint API.
Why it made the list: Instant posable humans with zero modelling, perfect for diagrams and quick prototypes.
Three.js helpersMITPavel Boytchev (@boytchev)boytchev.github.io
- 08
Modeling with Distance Functions
Inigo Quilez's reference collection of signed distance functions for primitives, plus operators for blending and repetition.
Why it made the list: The copy-paste source for basically every raymarching shader on Shadertoy
3D & WebGL learningfreeInigo Quilez (@iquilezles)iquilezles.org
- 09
OpenGameArt
Community repository of CC0, CC-BY and OGA-BY game art: sprites, 3D models, textures, music and sound effects.
Why it made the list: Two decades of libre game art with explicit per-asset licensing metadata.
3D & texturesopen-sourceOpenGameArt communityopengameart.org
- 10
ossos
Character skinning, inverse kinematics and animation retargeting library for the web, independent of any renderer.
Why it made the list: Rig and retarget characters in JavaScript, a gap nothing else in the web stack fills.
Three.js helpersMITSketchpunkLabs (@sketchpunklabs)github.com
- 11
Poly Haven
CC0 library of 16K unclipped HDRIs, 8K photoscanned PBR textures and production-quality 3D models, no account required.
Why it made the list: The HDRIs are unclipped, which is why every serious render uses them.
3D & texturesfreePoly Haven (Greg Zaal, Rob Tuytel)polyhaven.com
- 12
Programming Design Systems
Free interactive book teaching graphic design fundamentals — colour, shape, typography, grids — through executable code examples.
Why it made the list: The bridge between graphic-design theory and generative code, and it's free
3D & WebGL learningfreeRune Madsen (@runemadsen)programmingdesignsystems.com
- 13
Quaternius
Large sets of free low-poly 3D game assets - characters, vehicles, nature, dungeons - released as coherent themed packs.
Why it made the list: Packs share one art style, so a whole scene looks intentional instead of scavenged.
3D & texturesfreelaulhet (@quaternius)quaternius.com
- 14
Scratchapixel
Free computer graphics curriculum building ray tracers and rasterisers from mathematics up, with derivations shown.
Why it made the list: University-grade graphics theory, free, with the maths actually worked through
3D & WebGL learningfreeScratchapixel teamscratchapixel.com
- 15
ShareTextures
CC0 library of 1,700-plus 4K textures plus scanned 3D models of food, furniture and ceramics.
Why it made the list: The scanned prop models are unusual for a free CC0 site.
3D & texturesfreeShareTexturessharetextures.com
- 16
Texture Ninja
Large collection of public-domain photographic textures shot for artists - walls, rust, signage, grime.
Why it made the list: Photo textures rather than tiled PBR - what you want for collage and grunge work.
3D & texturesfreeTexture Ninjatexture.ninja
- 17
The Nature of Code
Free online book on simulating natural systems — forces, oscillation, particles, autonomous agents, neural networks — in code.
Why it made the list: Where realistic UI motion, particles and flocking behaviours actually come from
3D & WebGL learningCC-BY-NCDaniel Shiffman (@shiffman)natureofcode.com
- 18
three-bvh-csg
Fast, memory-compact constructive solid geometry for Three.js with runtime boolean union, subtraction and intersection on meshes.
Why it made the list: Real-time boolean geometry in a browser, which most developers assume is impossible.
Three.js helpersMITGarrett Johnson (@gkjohnson)github.com
- 19
three-gtvbao
GT-VBAO screen-space ambient occlusion for three.js WebGPU and WebGL2, written in TSL with presets, TRAA and denoising.
Why it made the list: Drop-in AO that hooks three.js lighting, not another SSAO clone you have to wire by hand.
Three.js helpersMITnoriogithub.com
- 20
three-mesh-bvh
Bounding volume hierarchy for Three.js geometry that makes raycasting, collision checks and clipping orders of magnitude faster.
Why it made the list: The one dependency that turns an unusably slow scene into a smooth one.
Three.js helpersMITGarrett Johnson (@gkjohnson)github.com
- 21
three-pathfinding
Navigation mesh pathfinding for Three.js scenes, computing agent routes across baked navmesh geometry at runtime.
Why it made the list: Navmesh agent movement without importing a whole game engine into your bundle.
Three.js helpersMITDon McCurdy (@donrmccurdy)github.com
- 22
Three.js Journey
Ninety-plus hours of video teaching three.js from geometry basics through GLSL, physics, Blender and React Three Fiber.
Why it made the list: Load-bearing for the whole WebGL-portfolio scene; early lessons are free
3D & WebGL learningpaidBruno Simon (@bruno_simon)threejs-journey.com
- 23
WebGL Fundamentals
Ground-up WebGL course that avoids frameworks and explains buffers, attributes, textures and 3D math from first principles.
Why it made the list: Corrects the mental-model mistakes every three.js-first developer quietly accumulates about GPUs
3D & WebGL learningfreeGregg Tavares (@greggman)webglfundamentals.org
- 24
WebGPU Fundamentals
Article series teaching WebGPU: pipelines, bind groups, memory layout, compute shaders, lighting and post-processing.
Why it made the list: Earliest coherent WebGPU curriculum, written before the docs existed
3D & WebGL learningfreeGregg Tavares (@greggman)webgpufundamentals.org
Questions
- Three.js or raw WebGPU?
- Three.js for almost everything product-shaped. Go lower-level only when you need control it cannot express.
- How do I keep a 3D hero from destroying mobile battery?
- Cap the pixel ratio, pause the render loop off-screen, and give reduced-motion users a static frame.