> For the complete documentation index, see [llms.txt](https://docs.tenten.co/awesome/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tenten.co/awesome/webgl/awesome-threejs/readme-en.md). # README-en \ ![logo](/files/3LeByUlHBn0S8GN0qtUU) ## Awesome Threejs [![Awesome badge](https://awesome.re/badge.svg)](https://awesome.re) **3️⃣ A curated list of awesome ThreeJS resources** ## Contents * [Core](#Core) * [Books](#Books) * [Courses](#Courses) * [Articles](#Articles) * [Videos](#Videos) * [Inspiration](#Inspiration) * [Resources](#Resources) * [Tools](#Tools) * [Libraries](#Libraries) * [Community](#Community) * [Demonstrations](#Demonstrations) * [Others](#Others) ## Core * [ThreeJS official website](https://threejs.org/) * [ThreeJS examples](https://threejs.org/examples/#webgl_animation_keyframes) * [ThreeJS documentation](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) ## Books ### 3D Theory * [3D Math Primer for Graphics and Game Development](https://gamemath.com/book/intro.html): A must-read book to be comfortable with 3D maths. by [@ZPostFacto](https://twitter.com/ZPostFacto) & [@Ian-Parberry](https://github.com/Ian-Parberry) * [Physically Based Rendering - From Theory to Implementation](https://pbr-book.org/): A reference in term of PBR concepts. A gold mine. by [@mmp](https://github.com/mmp), [@wjakob](https://github.com/wjakob) & [@humper](https://twitter.com/humper) ### Creative Coding * [The Nature of Code](https://natureofcode.com/): Amazing book by a very funny author about a bunch of stuff to make experiences more natural based on the Processing language by [@shiffman](https://github.com/shiffman) ### ThreeJS * [Discover three.js](https://discoverthreejs.com/) * [Learn Three.js - Third Edition](https://www.packtpub.com/product/learn-three-js-third-edition/9781788833288) ## Courses ### ThreeJS * [ThreeJS Journey](https://threejs-journey.com/): A great course accessible for the most beginner programmer who wants to learn how to make ThreeJS 3D experiences from scratch. by [@bruno\_simon](https://twitter.com/bruno_simon) ### Shaders * [The Easiest Way to Learn GLSL](https://simondev.teachable.com/p/glsl-shaders-from-scratch) by [@iced\_coffee\_dev](https://twitter.com/iced_coffee_dev) * [The Book of Shaders](https://thebookofshaders.com/): A reference on the road to master shaders. And it's free. by [@patriciogv](https://twitter.com/patriciogv) ## Articles ### Documentation * [ThreeJS Fundamentals](https://threejs.org/manual/#en/fundamentals) * [Shaderific for OpenGL](https://shaderific.com/index.html): Documentation on GLSL * [GLSL documentation](https://docs.gl/sl4/clamp) ### 3D Theory * [Explaining Homogeneous Coordinates & Projective Geometry](https://www.tomdalling.com/blog/modern-opengl/explaining-homogenous-coordinates-and-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](https://tympanus.net/codrops/2021/08/31/surface-sampling-in-three-js/): A comprehensive article about MeshSurfaceSampler * [How to Create a Fake 3D Image Effect with WebGL](https://tympanus.net/codrops/2019/02/20/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](http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/): A limpid tutorial to understand shader projection, view and model matrices (visually impactful) ### Water * [Real-time rendering of water caustics](https://medium.com/@martinRenou/real-time-rendering-of-water-caustics-59cda1d74aa) Clever approach to caustics rendering * [Realtime fluid simulation](https://shahriyarshahrabi.medium.com/gentle-introduction-to-fluid-simulation-for-programmers-and-technical-artists-7c0045c40bac) Awesome article for the ones that want to create truly realistic water ### Generative Art * [generative artistry tutorials](https://generativeartistry.com/tutorials/): Really awesome evolutive tutorial to acquire some knowledge on Generative Art by [@rumyra](https://github.com/rumyra) & [@tholman](https://github.com/tholman) ### Collision detection * [Bounding volume collision detection](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js) * [Physics based collision detection](https://medium.com/@bluemagnificent/collision-detection-in-javascript-3d-physics-using-ammo-js-and-three-js-31a5569291ef) ## Inspiration ### Common * [same.energy](https://same.energy/): Visual search engine by keyword or picture (a bit like Pinterest) * [Pinterest](https://www.pinterest.fr/): Good source of inspiration ### Shaders * [ShaderToy](https://www.shadertoy.com/): Prepare to be blown away by this shader sharing platform. ## Videos ### Shaders * [ShaderShop videos](http://tobyschachman.com/Shadershop/): Some awesome videos about ShaderShop and more. by [@mandy3284](https://twitter.com/mandy3284) ## Resources ### Matcaps * [Matcap repository](https://github.com/nidorx/matcaps) ### 3D assets * [Poliigon](https://www.poliigon.com/): Assets for 3D artists (Textures, Models, HDRI) * [Poly Haven](https://polyhaven.com/): Public CC0 3D Asset Library (Textures, Models, HDRI) ### Textures * [3D textures](https://3dtextures.me/): Free PBR textures with Diffuse, Normal, Displacement, Occlusion, Specularity and Roughness Maps. * [Arroway Textures](https://www.arroway-textures.ch/): Digital textures for 3D rendering and real-time use. * [ambientCG](https://ambientcg.com/): - CC0 textures for Physically Based Rendering ### GLSL Shaders #### Main * [Signal shaping functions](https://iquilezles.org/articles/functions/): A useful set of signal shaping patterns (to convert into GLSL) by [@iquilezles](https://twitter.com/iquilezles) * [Shaping functions](http://www.flong.com/archive/texts/code/): Awesome set of shaping functions for shaders by [@golan](https://twitter.com/golan) * [Cheat sheet on curves](https://www.flickr.com/photos/kynd/9546075099/): A quick reminder on how to make some signal patterns by [@kyndinfo](https://twitter.com/kyndinfo) * [GLSL Noises](https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83): Noises coded by others so you can use them directly in your shaders for cool effects (included: Perlin noises) * [Realistic water shader](https://github.com/jbouny/ocean) There are also some links with explanation of the approach #### Other * [PixelSpirit Elements Deck](https://pixelspiritdeck.com/): 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](https://twitter.com/patriciogv) * [PixelSpirit GitHub](https://github.com/patriciogonzalezvivo/PixelSpiritDeck) Library associated with the PixelSpirit Elemens Deck by [@patriciogv](https://twitter.com/patriciogv) ## Tools ### Scene Creation * [Polygonjs](https://polygonjs.com): Node-based WebGL design tool, used for procedural geometry, particles, materials and animation. ### 3D modeling * [Blender](https://www.blender.org/): Free and powerful to create your own 3D assets. A lot of export file extensions are available. * [Houdini](https://www.sidefx.com/products/houdini/): To create procedural 3D assets. The free licence "Houdini Apprentice" can be used to learn (no commercial usage) * [Spline](https://spline.design/): A promising tool for 3D modeling, collaboratively. ### Materials * [Adobe Substance3D Suite](https://www.adobe.com/fr/products/substance3d/3d-augmented-reality.html) ### Cube Texture * [HDRI-to-CubeMap](https://matheowis.github.io/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](https://github.com/matheowis) ### Shaders #### Online tools * [GraphToy](https://graphtoy.com/): Powerful tool to wrap your head around and test shaping signals in GLSL by [@iquilezles](https://twitter.com/iquilezles) * [ShaderShop editor](http://tobyschachman.com/Shadershop/editor/): Visually impactful editor to work on shaping signals, by drag and dropping patterns. (Mindblowingly awesome) by [@mandy3284](https://twitter.com/mandy3284) #### Installed tools * [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer): Console-based GLSL Sandbox for 2D/3D shaders by [@patriciogv](https://twitter.com/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](https://codesandbox.io/): Sandbox to experiment and share with people. ThreeJS template can be easily found. * [codepen](https://codepen.io/): Found it hard to configure for ThreeJS x Typescript, but a good sandbox to try out new things. * [threejs-editor](https://threejs.org/editor/): A nice tool to, for example, try out your Blender exports and how they will react in ThreeJS. ### Hosting * [vercel](https://vercel.com/): Easy tool to host your projects, and free for a personal/hobbyist type of projects. ## Libraries ### GLSL/HLSL Shaders * [lygia](https://github.com/patriciogonzalezvivo/lygia): a granular and multi-language shader library designed for performance and flexibility by [@patriciogv](https://twitter.com/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](https://github.com/pmndrs/react-three-fiber): A declarative way of handling your ThreeJS stuff for React by [@pmndrs](https://github.com/pmndrs) * [drei](https://github.com/pmndrs/drei): Useful helpers for react-three-fiber by [@pmndrs](https://github.com/pmndrs) #### Angular * [angular-three](https://github.com/nartc/angular-three): Declarative ThreeJS inspired by r3f for the Angular ecosystem by [@nartc](https://github.com/nartc) #### Vue * [trois](https://github.com/troisjs/trois): The equivalent of r3f for VueJS by [@troisjs](https://github.com/troisjs) #### Svelte * [threlte](https://github.com/grischaerbe/threlte): A three.js component library for Svelte. * [svelte-cubed](https://github.com/Rich-Harris/svelte-cubed): Declarative ThreeJS for Svelte by [@Rich-Harris](https://github.com/Rich-Harris) ### Physics * [cannon-es](https://github.com/pmndrs/cannon-es) by [@pmndrs](https://github.com/pmndrs/) * [Ammo.js](https://github.com/kripken/ammo.js/) * [Oimo.js](https://lo-th.github.io/Oimo.js/#basic) * [Rapier](https://github.com/dimforge/rapier) by [@dimforge](https://github.com/dimforge/) ### Spatial querying & Raycasting * [three-mesh-bvh](https://github.com/gkjohnson/three-mesh-bvh) by [@gkjohnson](https://github.com/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](https://github.com/gkjohnson/three-bvh-csg) by [@gkjohnson](https://github.com/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](https://github.com/qiao/PathFinding.js) Useful library with tons of settings * [Three-pathfinging](https://github.com/donmccurdy/three-pathfinding) Three.js plugin for navigation * [Kompute](https://github.com/oguzeroglu/Kompute) Easy to use steering library ### Characters * [ossos](https://github.com/sketchpunklabs/ossos) A complete character skinning & animation library for the web * [mannequin.js](https://boytchev.github.io/mannequin.js/) Library for procedural character generation. Armature included ## Demonstrations ### Water * [fft-ocean](https://github.com/jbouny/fft-ocean) Fast Fourier Transform ocean rendering for Three.js * [skunami.js](https://github.com/skeelogy/skunami.js/) Marvellous project with realistic water interaction * [Shallow water](https://vuoriov4.github.io/webgl-water-demo/) Demo project that shows water ripple effect ### Collision detection * [Axis-Aligned Bounding Boxes](https://github.com/mozdevs/gamedev-js-3d-aabb) AABB based collision detection * [Raycast based Collision detection](http://stemkoski.github.io/Three.js/Collision-Detection.html) ## Community ### Core * [Stackoverflow ThreeJS](https://stackoverflow.com/questions/tagged/three.js): Forum where you can ask your questions ( be sure to search well before) * [Official ThreeJS Discord](https://discord.com/invite/56GBJwAnUS) * [Official ThreeJS Forum](https://discourse.threejs.org/) * [Official Slack](https://join.slack.com/t/threejs/shared_invite/zt-rnuegz5e-FQpc6YboDVW~5idlp7GfDw) * [Official Twitter](https://twitter.com/threejs) * [Official Reddit](https://www.reddit.com/r/threejs/) ## Contribute Contributions welcome! Read the [contribution guidelines](/awesome/webgl/awesome-threejs/contributing.md) first. Or you can reach me on Twitter: [![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge\&logo=Twitter\&logoColor=white)](https://twitter.com/0xAxiome) ## Related Lists * [awesome-glsl](https://github.com/vanrez-nez/awesome-glsl) - A curated list of awesome GLSL resources. * [awesome-webgl](https://github.com/sjfricke/awesome-webgl) - A curated list of awesome WebGL libraries, resources and much more. * [awesome-webgpu](https://github.com/mikbry/awesome-webgpu) - A curated list of awesome WebGPU resources. * [awesome-opengl](https://github.com/eug/awesome-opengl) - A curated list of awesome OpenGL libraries, debuggers and resources. * [awesome-creative-coding](https://github.com/terkelg/awesome-creative-coding) - A carefully curated list of awesome creative coding resources primarily for beginners/intermediates. * [awesome-computer-vision](https://github.com/jbhuang0604/awesome-computer-vision) - A curated list of awesome computer vision resources. * [awesome-vulkan](https://github.com/vinjn/awesome-vulkan) - A curated list of awesome Vulkan projects and ecosystem. * [gamedev](https://github.com/ellisonleao/magictools) - A awesome list about game development. * [graphics-resources](https://github.com/mattdesl/graphics-resources) - A list of graphic programming resources. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.tenten.co/awesome/webgl/awesome-threejs/readme-en.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.