LogoLogo
HomeBlogResources
  • README
  • Design
    • Awesome Design Tools
      • Awesome Design Tools
    • Awesome-UI-Templates
      • README-en
    • awesome-design-systems
      • Awesome Design System
    • Awesome Figma
      • Awesome Figma
    • awesome-styleguides
      • README-en
    • awesome-typography
      • Awesome Typography
    • awesome-ui
      • README-en
    • Awesome UX Design Styleguides
      • Awesome UX Design Styleguides
    • awesome-ux-designer
      • README-en
      • Reading list
    • awesome-ux
      • README-en
    • Awesome Webflow
      • webflow-masterclass
        • Webflow + Firebase用戶認證
    • webflow-masterclass
      • Webflow + Firebase用戶認證
  • Devops
    • Awesome SaaS boilerplate
    • Free for Dev
    • Mega Awesome List
    • Awesome-WordPress-Plugins
      • Awesome WordPress Plugins List
    • Awesome Wordpress Plugin List
    • Awesome CMS
    • awesome-flutter-cn
    • awesome-headless-cms
      • readme-en
    • Awesome-jamstack-resources
      • Awesome-jamstack-resources
    • Awesome Laravel
      • Awesome Laravel
    • awesome-list
      • The awesome manifesto
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • Creating Your Own List
      • pull_request_template
      • Media
    • Awesome Minio
    • awesome-react
      • README-en
    • Awesome Stack
      • Awesome Stacks
    • Awesome UI component library
      • Awesome UI component library
    • awesome-uikit
      • README-en
    • awesome-vercel
      • Awesome Vercel (Previously ZEIT )
    • Awesome WooCommerce
      • Awesome WooCommerce
    • Awesome WordPress
      • Awesome WordPress
    • Awesome Wordpress Developer Tools
      • Awesome WP Developer Tools
  • Marketing
    • Awesome ADTech
      • Awesome AdTech
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • HubSpot CMS Boilerplate
      • HubSpot CMS Boilerplate
    • Awesome HubSpot
    • Awesome Marketing
    • awesome-seo
    • marketing-for-engineers
      • README-en
    • Tech-Marketer
  • Nocode
    • Awesome NoCode / LowCode
      • readme-en
  • Server
    • Awesome Cloudflare
      • Awesome Cloudflare
    • Awesome-Selfhosted
      • Awesome-Selfhosted
  • shopify
    • Awesome Shopify
      • Awesome Shopify
    • Shopify Awesome 真棒!
      • Awesome Shopify
  • Tools
    • Awesome VS Code
    • Awesome Mac
      • Awesome Mac
      • editor-plugin-zh
      • editor-plugin
    • Awesome Nomad
      • Awesome Nomad
    • Awesome-notion
      • Awesome Notion (Eng)
    • awesome-tools-for-startups
      • Awesome list of FREE tools Startups should be using
  • web3
    • Blockchain-stuff
      • CONTRIBUTE
    • Blockchain-stuff
    • Web3.0_Vault-main
    • Web3.0_Vault-main
      • basics
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • awesome-ethereum
    • awesome-solidity-gh-pages
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • Awesome Web3
      • Awesome Web3 Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • Contributor Covenant Code of Conduct
    • free-Web3-resources
      • Contributing Guidelines
    • free-Web3-resources
    • free-Web3-resources
      • Intro to Solidity
    • free-Web3-resources
      • 200-days-of-Web3
    • free-Web3-resources
    • free-Web3-resources
    • Free Web3 Resources
    • free-Web3-resources
      • .github
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • Web3.0_Vault-main
    • web3together-main
      • CODE_OF_CONDUCT
      • sessions
        • Getting Started in Smart Contract Development with Solidity
    • free-Web3-resources
      • .github
        • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • bug_report
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • feature_request
  • webgl
    • Awesome-threejs
      • docs
        • Hellow Three.js 之 三维空间中观察物体的方法--照相机
        • 创建自己的全景图
        • Hellow Three.js 之 创建各种几何形状
        • hello-light-pro
        • Hellow Three.js 之 光影之谜
        • Hellow Three.js 之 加载外部3D模型
        • Hellow Three.js 之 给创建的物体赋予材质
        • hello-obj-mtl
        • P5
        • Hellow Three.js 之 有趣的着色器
        • Hellow Three.js 之 运动物体的性能监测
        • Hellow Three.js 之 让物体动起来
        • Hello Three.js 之 Hello world!
        • what-webgl
        • glsl
          • GLSL 中文手册
          • OpenGL GLSL 语法和函数详解
          • The book of shaders 记录
          • 各种 Shaders 效果
      • demo
        • 有趣的 three.js Demo
          • Decorative WebGL Backgrounds
          • Infinite Tubes
          • The Aviator
        • P5.js Demo
        • Learning-Threejs
          • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • assets
              • models
                • ogre
                  • ogro
    • awesome-threejs
      • README-en
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
    • Awesome WebGL
      • CONTRIBUTING
      • Awesome WebGL
      • Contributor Covenant Code of Conduct
      • Libraries
        • CONTRIBUTING
      • Libraries
        • WebGL Libraries - Features
      • Libraries
        • WebGL Libraries - File Size
      • Awesome WebGL - Libaries/Frameworks
  • AI
    • ChatGPT 中文指南
    • 生成式 AI 項目、工具、藝術作品和模型的精選列表
    • 精選 GPT-4 指南
    • ChatGPT 工具收錄
      • Awesome ChatGPT
    • ChatGPT 中文調教指南
    • GPT 開放原始碼項目合集
    • ChatGPT 應用收藏
    • Awesome OpenAI - 超酷的 OpenAI 蒐藏
      • Awesome-openAI
    • Awesome GPT-3 應用集
      • Awesome GPT-3
    • ChatGPT 提示指令庫
      • Awesome ChatGPT Prompts
  • SaaS
    • awesome-saas-boilerplates
Powered by GitBook
On this page
  • Awesome Threejs
  • Contents
  • Core
  • Books
  • 3D Theory
  • Creative Coding
  • ThreeJS
  • Courses
  • ThreeJS
  • Shaders
  • Articles
  • Documentation
  • 3D Theory
  • Tutorials
  • Water
  • Generative Art
  • Collision detection
  • Inspiration
  • Common
  • Shaders
  • Videos
  • Shaders
  • Resources
  • Matcaps
  • 3D assets
  • Textures
  • GLSL Shaders
  • Tools
  • Scene Creation
  • 3D modeling
  • Materials
  • Cube Texture
  • Shaders
  • Sandbox
  • Hosting
  • Libraries
  • GLSL/HLSL Shaders
  • Related Frameworks
  • Physics
  • Spatial querying & Raycasting
  • Constructive Solid Geometry
  • Pathfinding
  • Characters
  • Demonstrations
  • Water
  • Collision detection
  • Community
  • Core
  • Contribute
  • Related Lists
Export as PDF
  1. webgl
  2. awesome-threejs

README-en

Previousawesome-threejsNextContributor Covenant Code of Conduct

Last updated 2 years ago

Awesome Threejs

3️⃣ A curated list of awesome ThreeJS resources

Contents

Core

Books

3D Theory

Creative Coding

ThreeJS

Courses

ThreeJS

Shaders

Articles

Documentation

3D Theory

Tutorials

Water

Generative Art

Collision detection

Inspiration

Common

Shaders

Videos

Shaders

Resources

Matcaps

3D assets

Textures

GLSL Shaders

Main

Other

Tools

Scene Creation

3D modeling

Materials

Cube Texture

Shaders

Online tools

Installed tools

Sandbox

Hosting

Libraries

GLSL/HLSL Shaders

Related Frameworks

React

Angular

Vue

Svelte

Physics

Spatial querying & Raycasting

Constructive Solid Geometry

Pathfinding

Characters

Demonstrations

Water

Collision detection

Community

Core

Contribute

Or you can reach me on Twitter:

Related Lists

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

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

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

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

by

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

: Documentation on GLSL

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

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

Clever approach to caustics rendering

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

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

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

: Good source of inspiration

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

: Some awesome videos about ShaderShop and more. by

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

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

: 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

: 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

: Noises coded by others so you can use them directly in your shaders for cool effects (included: Perlin noises)

There are also some links with explanation of the approach

: 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

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

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

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

: 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

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

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

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

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

: Useful helpers for react-three-fiber by

: Declarative ThreeJS inspired by r3f for the Angular ecosystem by

: The equivalent of r3f for VueJS by

: A three.js component library for Svelte.

: Declarative ThreeJS for Svelte by

by

by

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)

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, ...)

Useful library with tons of settings

Three.js plugin for navigation

Easy to use steering library

A complete character skinning & animation library for the web

Library for procedural character generation. Armature included

Fast Fourier Transform ocean rendering for Three.js

Marvellous project with realistic water interaction

Demo project that shows water ripple effect

AABB based collision detection

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

Contributions welcome! Read the first.

- 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.

- A curated list of awesome OpenGL libraries, debuggers and resources.

- A carefully curated list of awesome creative coding resources primarily for beginners/intermediates.

- A curated list of awesome computer vision resources.

- A curated list of awesome Vulkan projects and ecosystem.

- A awesome list about game development.

- A list of graphic programming resources.

ThreeJS official website
ThreeJS examples
ThreeJS documentation
3D Math Primer for Graphics and Game Development
@ZPostFacto
@Ian-Parberry
Physically Based Rendering - From Theory to Implementation
@mmp
@wjakob
@humper
The Nature of Code
@shiffman
Discover three.js
Learn Three.js - Third Edition
ThreeJS Journey
@bruno_simon
The Easiest Way to Learn GLSL
@iced_coffee_dev
The Book of Shaders
@patriciogv
ThreeJS Fundamentals
Shaderific for OpenGL
GLSL documentation
Explaining Homogeneous Coordinates & Projective Geometry
Surface Sampling in Three.js
How to Create a Fake 3D Image Effect with WebGL
Tutorial on Matrices
Real-time rendering of water caustics
Realtime fluid simulation
generative artistry tutorials
@rumyra
@tholman
Bounding volume collision detection
Physics based collision detection
same.energy
Pinterest
ShaderToy
ShaderShop videos
@mandy3284
Matcap repository
Poliigon
Poly Haven
3D textures
Arroway Textures
ambientCG
Signal shaping functions
@iquilezles
Shaping functions
@golan
Cheat sheet on curves
@kyndinfo
GLSL Noises
Realistic water shader
PixelSpirit Elements Deck
@patriciogv
PixelSpirit GitHub
@patriciogv
Polygonjs
Blender
Houdini
Spline
Adobe Substance3D Suite
HDRI-to-CubeMap
@matheowis
GraphToy
@iquilezles
ShaderShop editor
@mandy3284
glslViewer
@patriciogv
codesandbox
codepen
threejs-editor
vercel
lygia
@patriciogv
react-three-fiber
@pmndrs
drei
@pmndrs
angular-three
@nartc
trois
@troisjs
threlte
svelte-cubed
@Rich-Harris
cannon-es
@pmndrs
Ammo.js
Oimo.js
Rapier
@dimforge
three-mesh-bvh
@gkjohnson
three-bvh-csg
@gkjohnson
Pathfinging.js
Three-pathfinging
Kompute
ossos
mannequin.js
fft-ocean
skunami.js
Shallow water
Axis-Aligned Bounding Boxes
Raycast based Collision detection
Stackoverflow ThreeJS
Official ThreeJS Discord
Official ThreeJS Forum
Official Slack
Official Twitter
Official Reddit
contribution guidelines
awesome-glsl
awesome-webgl
awesome-webgpu
awesome-opengl
awesome-creative-coding
awesome-computer-vision
awesome-vulkan
gamedev
graphics-resources
Core
Books
Courses
Articles
Videos
Inspiration
Resources
Tools
Libraries
Community
Demonstrations
Others
Twitter
Awesome badge
logo