README-en

Awesome Threejs

3️⃣ A curated list of awesome ThreeJS resources

Contents

• Core

• Books

• Courses

• Articles

• Videos

• Inspiration

• Resources

• Tools

• Libraries

• Community

• Demonstrations

• Others

Core

• ThreeJS official website

• ThreeJS examples

• ThreeJS documentation

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

• Discover three.js

• Learn Three.js - Third Edition

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

• Bounding volume collision detection

• Physics based 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

Matcaps

• Matcap repository

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

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

• Adobe Substance3D Suite

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

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.

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

Angular

• angular-three: Declarative ThreeJS inspired by r3f for the Angular ecosystem by @nartc

Vue

• trois: The equivalent of r3f for VueJS by @troisjs

Svelte

• threlte: A three.js component library for Svelte.

• svelte-cubed: Declarative ThreeJS for Svelte by @Rich-Harris

Physics

• cannon-es by @pmndrs

• Ammo.js

• Oimo.js

• Rapier by @dimforge

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.