Awesome
<div align="center"> <br> <img src="assets/awesome-threejs-logo.png" alt="logo" width="80%"/> <h1>Awesome Threejs <a href="https://awesome.re", '_self');> <img src="https://awesome.re/badge.svg" alt="Awesome badge"/></a></h1> <p> <b>3️⃣ A curated list of awesome ThreeJS resources</b> </p> </div>Contents
- Core
- Books
- Courses
- Articles
- Videos
- Inspiration
- Resources
- Tools
- Libraries
- Community
- Demonstrations
- Others
Core
Books
3D Theory
- 3D Math Primer for Graphics and Game Development: A must-read book to be comfortable with 3D maths. by @ZPostFacto & @Ian-Parberry
- Physically Based Rendering - From Theory to Implementation: A reference in term of PBR concepts. A gold mine. by @mmp, @wjakob & @humper
Creative Coding
- The Nature of Code: Amazing book by a very funny author about a bunch of stuff to make experiences more natural based on the Processing language by @shiffman
ThreeJS
Courses
ThreeJS
- ThreeJS Journey: A great course accessible for the most beginner programmer who wants to learn how to make ThreeJS 3D experiences from scratch. by @bruno_simon
Shaders
- The Easiest Way to Learn GLSL by @iced_coffee_dev
- The Book of Shaders: A reference on the road to master shaders. And it's free. by @patriciogv
Articles
Documentation
- ThreeJS Fundamentals
- Shaderific for OpenGL: Documentation on GLSL
- GLSL documentation
3D Theory
- Explaining Homogeneous Coordinates & Projective Geometry: A very comprehensive article on homogeneous coordinates and projective geometry (To finally understand what is the 4th coordinate (w) in your vertex shaders)
Tutorials
- Surface Sampling in Three.js: A comprehensive article about MeshSurfaceSampler
- How to Create a Fake 3D Image Effect with WebGL: A good article to learn how to add a fake depth to a 2D image in ThreeJS.
- Tutorial on Matrices: A limpid tutorial to understand shader projection, view and model matrices (visually impactful)
Water
- Real-time rendering of water caustics Clever approach to caustics rendering
- Realtime fluid simulation Awesome article for the ones that want to create truly realistic water
Generative Art
- generative artistry tutorials: Really awesome evolutive tutorial to acquire some knowledge on Generative Art by @rumyra & @tholman
Collision detection
Inspiration
Common
- same.energy: Visual search engine by keyword or picture (a bit like Pinterest)
- Pinterest: Good source of inspiration
Shaders
- ShaderToy: Prepare to be blown away by this shader sharing platform.
Videos
Shaders
- ShaderShop videos: Some awesome videos about ShaderShop and more. by @mandy3284
Resources
Miscellaneous
- Three.js Resources: Contains a bunch of curated resources (tools, tutorials, libraries, and techniques...) related to Three.js
Matcaps
3D assets
- Poliigon: Assets for 3D artists (Textures, Models, HDRI)
- Poly Haven: Public CC0 3D Asset Library (Textures, Models, HDRI)
Textures
- 3D textures: Free PBR textures with Diffuse, Normal, Displacement, Occlusion, Specularity and Roughness Maps.
- Arroway Textures: Digital textures for 3D rendering and real-time use.
- ambientCG: - CC0 textures for Physically Based Rendering
GLSL Shaders
Main
- Signal shaping functions: A useful set of signal shaping patterns (to convert into GLSL) by @iquilezles
- Shaping functions: Awesome set of shaping functions for shaders by @golan
- Cheat sheet on curves: A quick reminder on how to make some signal patterns by @kyndinfo
- GLSL Noises: Noises coded by others so you can use them directly in your shaders for cool effects (included: Perlin noises)
- Realistic water shader There are also some links with explanation of the approach
Other
- PixelSpirit Elements Deck: This is a tarot deck for learning GLSL shaders. Each PixelSpirit card has a visual element and its GLSL shader code. The cards are ordered from simplest to most complex, building a library of code functions that combine like a book of spells to form an infinite visual language. by @patriciogv
- PixelSpirit GitHub Library associated with the PixelSpirit Elemens Deck by @patriciogv
Tools
Debug/Optimization
- GLTF Report: Web app to diagnose, optimize your gltf files. Nice inspector that even support BASIS/KTX2 textures. by @donmccurdy
- gltf-transform: CLI to run on your GLTF file for a lot of different optimizations (welding, pruning, draco compression...). It also enables the conversion of textures into KTX2 for optimizing textures on the GPU by @donmccurdy
Scene Creation
- Polygonjs: Node-based WebGL design tool, used for procedural geometry, particles, materials and animation.
3D modeling
- Blender: Free and powerful to create your own 3D assets. A lot of export file extensions are available.
- Houdini: To create procedural 3D assets. The free licence "Houdini Apprentice" can be used to learn (no commercial usage)
- Spline: A promising tool for 3D modeling, collaboratively.
Materials
Cube Texture
- HDRI-to-CubeMap: A tool to convert your HDRI file into a Cube map that can be load as a CubeTexture in ThreeJS. by @matheowis
Shaders
Online tools
- GraphToy: Powerful tool to wrap your head around and test shaping signals in GLSL by @iquilezles
- ShaderShop editor: Visually impactful editor to work on shaping signals, by drag and dropping patterns. (Mindblowingly awesome) by @mandy3284
- NodeToy: The shader tool for the web. NodeToy provides creators a powerful editor to create incredible new shaders and visual effects. If you are a react-three-fiber user, consider checking react-nodetoy. All of this provided by @Nodetoy.
- Shader Park: A JavaScript library for creating interactive procedural 2D and 3D shaders. Helpful for raymarching shaders (the raymarcher is already built-in, SDFs and boolean operation between them already available). Works both in p5js style and GLSL. (to contribute) by @shader-park
Installed tools
- glslViewer: Console-based GLSL Sandbox for 2D/3D shaders by @patriciogv. Battle-tested by its creator, it enables to build a creative pipeline agnostic to the target platform and to iterate very fast and with less frictions for making a draft of your shaders ideas. A must-have in your toolkit.
Sandbox
- codesandbox: Sandbox to experiment and share with people. ThreeJS template can be easily found.
- codepen: Found it hard to configure for ThreeJS x Typescript, but a good sandbox to try out new things.
- threejs-editor: A nice tool to, for example, try out your Blender exports and how they will react in ThreeJS.
Hosting
- vercel: Easy tool to host your projects, and free for a personal/hobbyist type of projects.
Libraries
GLSL/HLSL Shaders
- lygia: a granular and multi-language shader library designed for performance and flexibility by @patriciogv. A cross platform library that will help you iterate on your shaders very easily. Going deep in the code of a specific functionality can also help you learn GLSL/HLSL.
Animation
- gsap: A mastodon for animations in CSS and for three.js too, backed up by awesome plugins like ScrollTrigger, Flip,... and mostly framework agnostic.
Related Frameworks
React
- react-three-fiber: A declarative way of handling your ThreeJS stuff for React by @pmndrs
- drei: Useful helpers for react-three-fiber by @pmndrs
- react-postprocessing: a postprocessing wrapper for @react-three/fiber by @pmndrs
- react-spring: An awesome library about physically accurate animations. Works smoothly also for react-three-fiber using the package
@react-spring/three - framer-motion: A nice animation library for react, and can be used with react-three-fiber too through the
framer-motion-3dpackage usage. Very nice for binding animation on entering and leaving the viewport element.
Angular
- angular-three: Declarative ThreeJS inspired by r3f for the Angular ecosystem by @nartc
Vue
- trois: The equivalent of r3f for VueJS by @troisjs
- TresJs: Declarative ThreeJS using Vue Components by @tresjs_dev
- Cientos: Collection of useful helpers and fully functional, ready-made abstractions for TresJs @tresjs_dev
- tres-post-processing: Post-processing library for TresJs @tresjs_dev
Svelte
- threlte: A three.js component library for Svelte.
- svelte-cubed: Declarative ThreeJS for Svelte by @Rich-Harris
Physics
Spatial querying & Raycasting
- three-mesh-bvh by @gkjohnson: Highly effective way to check for collisions and to accelerate raycasting by the usage of bounding volume hierarchy. (Really a must have in your toolkit)
Constructive Solid Geometry
- three-bvh-csg by @gkjohnson: A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh. (Amazing tool to perform some Boolean operations between meshes like intersection, difference, ...)
Pathfinding
- Pathfinging.js Useful library with tons of settings
- Three-pathfinging Three.js plugin for navigation
- Kompute Easy to use steering library
Characters
- ossos A complete character skinning & animation library for the web
- mannequin.js Library for procedural character generation. Armature included
Demonstrations
Water
- fft-ocean Fast Fourier Transform ocean rendering for Three.js
- skunami.js Marvellous project with realistic water interaction
- Shallow water Demo project that shows water ripple effect
Collision detection
- Axis-Aligned Bounding Boxes AABB based collision detection
- Raycast based Collision detection
Community
Core
- Stackoverflow ThreeJS: Forum where you can ask your questions ( be sure to search well before)
- Official ThreeJS Discord
- Official ThreeJS Forum
- Official Slack
- Official Twitter
- Official Reddit
Contribute
Contributions welcome! Read the contribution guidelines first.
Or you can reach me on Twitter:
Related Lists
- awesome-glsl - A curated list of awesome GLSL resources.
- awesome-webgl - A curated list of awesome WebGL libraries, resources and much more.
- awesome-webgpu - A curated list of awesome WebGPU resources.
- awesome-opengl - A curated list of awesome OpenGL libraries, debuggers and resources.
- awesome-creative-coding - A carefully curated list of awesome creative coding resources primarily for beginners/intermediates.
- awesome-computer-vision - A curated list of awesome computer vision resources.
- awesome-vulkan - A curated list of awesome Vulkan projects and ecosystem.
- gamedev - A awesome list about game development.
- graphics-resources - A list of graphic programming resources.