README-en

Awesome Threejs

3️⃣ A curated list of awesome ThreeJS resources

Contents

Core

Books

3D Theory

• : A must-read book to be comfortable with 3D maths. by &

• : A reference in term of PBR concepts. A gold mine. by , &

Creative Coding

• : Amazing book by a very funny author about a bunch of stuff to make experiences more natural based on the Processing language by

ThreeJS

Courses

ThreeJS

• : A great course accessible for the most beginner programmer who wants to learn how to make ThreeJS 3D experiences from scratch. by

Shaders

• by

• : A reference on the road to master shaders. And it's free. by

Articles

Documentation

• : Documentation on GLSL

3D Theory

• : A very comprehensive article on homogeneous coordinates and projective geometry (To finally understand what is the 4th coordinate (w) in your vertex shaders)

Tutorials

• : A comprehensive article about MeshSurfaceSampler

• : A good article to learn how to add a fake depth to a 2D image in ThreeJS.

• : A limpid tutorial to understand shader projection, view and model matrices (visually impactful)

Water

• Clever approach to caustics rendering

• Awesome article for the ones that want to create truly realistic water

Generative Art

• : Really awesome evolutive tutorial to acquire some knowledge on Generative Art by &

Collision detection

Inspiration

Common

• : Visual search engine by keyword or picture (a bit like Pinterest)

• : Good source of inspiration

Shaders

• : Prepare to be blown away by this shader sharing platform.

Videos

Shaders

• : Some awesome videos about ShaderShop and more. by

Resources

Matcaps

3D assets

• : Assets for 3D artists (Textures, Models, HDRI)

• : Public CC0 3D Asset Library (Textures, Models, HDRI)

Textures

• : Free PBR textures with Diffuse, Normal, Displacement, Occlusion, Specularity and Roughness Maps.

• : Digital textures for 3D rendering and real-time use.

• : - CC0 textures for Physically Based Rendering

GLSL Shaders

Main

• : A useful set of signal shaping patterns (to convert into GLSL) by

• : Awesome set of shaping functions for shaders by

• : A quick reminder on how to make some signal patterns by

Other

• : 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

  • Library associated with the PixelSpirit Elemens Deck by

Tools

Scene Creation

• : Node-based WebGL design tool, used for procedural geometry, particles, materials and animation.

3D modeling

• : Free and powerful to create your own 3D assets. A lot of export file extensions are available.

• : To create procedural 3D assets. The free licence "Houdini Apprentice" can be used to learn (no commercial usage)

• : A promising tool for 3D modeling, collaboratively.

Materials

Cube Texture

• : A tool to convert your HDRI file into a Cube map that can be load as a CubeTexture in ThreeJS. by

Shaders

Online tools

• : Powerful tool to wrap your head around and test shaping signals in GLSL by

• : Visually impactful editor to work on shaping signals, by drag and dropping patterns. (Mindblowingly awesome) by

Installed tools

• : Console-based GLSL Sandbox for 2D/3D shaders by . 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

• : Sandbox to experiment and share with people. ThreeJS template can be easily found.

• : Found it hard to configure for ThreeJS x Typescript, but a good sandbox to try out new things.

• : A nice tool to, for example, try out your Blender exports and how they will react in ThreeJS.

Hosting

• : Easy tool to host your projects, and free for a personal/hobbyist type of projects.

Libraries

GLSL/HLSL Shaders

• : a granular and multi-language shader library designed for performance and flexibility by . 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

• : A declarative way of handling your ThreeJS stuff for React by

• : Useful helpers for react-three-fiber by

Angular

• : Declarative ThreeJS inspired by r3f for the Angular ecosystem by

Vue

• : The equivalent of r3f for VueJS by

Svelte

• : A three.js component library for Svelte.

• : Declarative ThreeJS for Svelte by

Physics

• by

Spatial querying & Raycasting

• by : 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

• by : 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

• Useful library with tons of settings

• Three.js plugin for navigation

• Easy to use steering library

Characters

• A complete character skinning & animation library for the web

• Library for procedural character generation. Armature included

Demonstrations

Water

• Fast Fourier Transform ocean rendering for Three.js

• Marvellous project with realistic water interaction

• Demo project that shows water ripple effect

Collision detection

• AABB based collision detection

Community

Core

• : Forum where you can ask your questions ( be sure to search well before)

Contribute

Contributions welcome! Read the first.

Or you can reach me on Twitter:

Related Lists

• - A curated list of awesome GLSL resources.

• - A curated list of awesome WebGL libraries, resources and much more.

• - A curated list of awesome WebGPU resources.