📕 three.js Bookshelf

ben · 2018-04-18T04:34:44.794Z

Feel free to add more resources/books to help the three.js community!

three.js Website

Documentation
Official Examples
Scene Editor

Github

Download Latest Release
Release Log
Migration Guide
Wiki
Report a Bug/Request a Feature

NPM Package

Community Portals

Official Discord
Stackoverflow
Twitter
Slack
Reddit

Resources

Chrome Devtools extension
Firefox Devtools extension
spectorJS
Discover three.js Tips and Tricks

Tutorials

Creating a Scene (from the three.js Docs)

threejsfundamentals.org

Three.js Fundamentals

Learn Three.js

Mozilla Mixed Reality Blog – 24 Oct 18

ThreeJS Intermediate Skill Tutorials

ThreeJS is probably the most used 3D JavaScript library on the web and it’s pretty easy to get started with. However, I found there is little beyond the introductory tutorials. You quickly get dropped off a skills cliff. We need something in between...

Books

Note: this book is not finished yet but there’s an extensive free section which you can use as a beginner-friendly tutorial

Discover three.js

Welcome to the Missing Manual for three.js! | Discover three.js

Take your websites into the third dimension with the missing manual for three.js! Discover three.js is an exciting new book written by one of the core three.js developers

Note: The following books are outdated but may still be useful.

Packt

Learn Three.js - Third Edition

Create and animate stunning 3D browser based graphics with Three.js JavaScript library

amazon.com

HOW TO DESIGN 3D GAMES WITH WEB TECHNOLOGY - BOOK 01: Three.js – HTML5 and WebGL

4.7 out of 5 stars, $11.97

Examples

Curated list of examples from this forum
@mrdoob’s site
AlteredQualia’s site
Well known but very outdated list of examples by Lee Stemkoski

Physics Libraries

Cannon.js (example)
Ammo.js (example)
Oimo.js (example)

AI

Yuka

Built with three.js

A-Frame

A-Frame – Make WebVR

A web framework for building virtual reality experiences. Make WebVR with HTML and Entity-Component. Works on Vive, Rift, desktop, mobile platforms.

GitHub

react-spring/react-three-fiber

🇨🇭 A React renderer for Three.js (web and react-native) - react-spring/react-three-fiber

threekit.com

Product Configurator and Product Visualization | Threekit

Threekit's product configurator enables you to visualize products in photorealistic 2D, 3D and augmented reality, all from a single platform.

Poly

Explore the world of 3D

Soft8Soft

Verge3D: an artist-friendly toolkit for 3D web experiences – Soft8Soft

3D web technology becomes accessible with Verge3D. Your content will live on your website and thus will be available to billions of Internet users.

Rogue Engine
clara.io
nunustudio.org
Might is Right (Demo)

itch.io

Edelweiss by felixmariotto

Calm puzzle-platformer

ben · 2018-05-22T15:56:20.082Z

WebAssembly

Medium – 5 Jul 18

Parc3l: Combining Three.js, Rust, and WebAssembly!

WebAssembly has been interesting me lately, specifically the prospect of doing arithmetically-intensive operations with it, not unlike the…

Reading time: 5 min read

Rendering

amazon.com

Real-Time Rendering, Third Edition

Tomas Akenine-Moller, Eric Haines, Naty Hoffman

4.4 out of 5 stars,

ben · 2018-05-22T15:59:52.667Z

WebGL

Five ways to build WebGL apps

MDN Web Docs

Getting started with WebGL

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins.

MDN Web Docs

WebGL: 2D and 3D graphics for the web

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0...

Mozilla Hacks – the Web developer blog

The concepts of WebGL – Mozilla Hacks - the Web developer blog

This post is not going to be yet another WebGL tutorial: there already are enough great ones (we list some at the end). We are just going to introduce the ...

Acko.net

On WebGL

You can transform your ordinary browser into a lush 3D world with one click. Why should you care?

HTML5 Rocks - A resource for open web HTML5 developers

WebGL Fundamentals - HTML5 Rocks

Fundamentals of using WebGL as a 2D drawing API and using shaders for image processing.

experiments.withgoogle.com

WebGL - Chrome Experiments

Creative code for the web.

The Khronos Group – 19 Jul 11

WebGL - OpenGL ES for the Web

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES, exposed to ECMAScript via the HTML5 Canvas element. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API…

https://www.reddit.com/r/webgl/

en.wikipedia.org

List of WebGL frameworks

Frameworks are available to create WebGL content quickly and easily without building from the ground up. Note: The following list mixes WebGL libraries with game engines as well as cloud services without any distinctions.

WebGL 2

Does this browser support WebGL 2?
What percentage of various systems support WebGL 2 and its various extensions?
Specification
How to start using WebGL 2?
New features in WebGL 2: Samples, Examples, Bugs
Blog

WebGL 2 Videos

WebGL & glTF BOF - SIGGRAPH 2016

Books

amazon.com

WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL (OpenGL)

4.3 out of 5 stars, ISBN: 978-0321902924, Addison-Wesley Professional, July 19, 2013, $42.10

amazon.com

Programming 3D Applications with Html5 and WebGl: 3D Animation and Visualization for Web Pages

4.2 out of 5 stars, ISBN: 978-1449362966, O'Reilly Media, March 6, 2014, $35.58

amazon.com

WebGL Beginner's Guide

Brandon Jones, Diego Cantor

4.0 out of 5 stars, ASIN: B008CEMBPI, Packt Publishing, June 15, 2012, $16.54

amazon.com

Professional WebGL Programming: Developing 3D Graphics for the Web

4.4 out of 5 stars, $28.72

amazon.com

WebGl: Up And Running

3.3 out of 5 stars, ISBN: 978-1449323578, O'Reilly Media, August 30, 2012, $26.21

Videos

SIGGRAPH University - “An Introduction to WebGL Programming”

Presentations

Making WebGL Dance

ben · 2018-05-22T16:00:19.969Z

Shaders

Sites

Jam3
OpenGL ES Shading Language functions, used for WebGL/Three.js shaders
Chrome Shader Editor
Shader Compliance
What tools do you use to create shaders for your three.js projects? - #12 by wwwonka

Books

The Book of Shaders

Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.

amazon.com

Amazon.com: OpenGL 4 Shading Language Cookbook: Build high-quality, real-time 3D...

Amazon.com: OpenGL 4 Shading Language Cookbook: Build high-quality, real-time 3D graphics with OpenGL 4.6, GLSL 4.6 and C++17, 3rd Edition: 9781789342253: Wolff, David: Books

$48.99

Three.js Example

Clipping Box (shaders) Resources

Hi community! Here is a picture: [BoxesOfVisibility] And here is a working example: This topic is related to the other one: The difference is that in this example I use a box for visibility. It has more parameters than a sphere, thus I use a structure (as I’ve never used it before, so I’ve gave it a try ), passing it to the shaders. Just to clarify: points are static, only the box of visibility moves through them.

GLSL = OpenGL Shading Language

Introduction to writing GLSL Resources

WIP but it has code, the idea is to explain the parts we can affect with GLSL while still keeping the webgl boilerplate automated. So it touches a bit on the geometry and slowly introduces shaders, not sure if this approach is right for explaining:

Learn GLSL Shaders from Scratch

ben · 2018-05-22T16:01:16.408Z

Math

Basic 3D Math
Vector Math for Graphics
Mathematics of Vectors Applied to Graphics

https://www.amazon.com/Math-Primer-Graphics-Game-Development/dp/1568817231

SDF = Signed Distance Functions
https://discourse.threejs.org/t/clipping-solids-sdf-functions/4444

ben · 2018-05-22T16:01:49.121Z

Other Resources

File Formats

GitHub

KhronosGroup/glTF

glTF – Runtime 3D Asset Delivery. Contribute to KhronosGroup/glTF development by creating an account on GitHub.

You can preview your glTF export with this tool: https://gltf-viewer.donmccurdy.com/

Compression

Open 3D
Open CTM

GitHub

google/draco

Draco is a library for compressing and decompressing 3D geometric meshes and point clouds. It is intended to improve the storage and transmission of 3D graphics. - google/draco

Videos

udacity.com

Interactive 3D Graphics | Udacity

This course will teach you the principles of 3D computer graphics: meshes, transforms, lighting, animation, and making interactive 3D applications run in a browser.

Udacity Resources: Interactive 3D Graphics
Udacity Syllabus: Interactive 3D Graphics
Udacity Three.js Reference: Interactive 3D Graphics

FutureLearn

3D Graphics for Web Developers - Online Course

Use WebGL to develop high-quality, interactive 3D graphics applications that run natively in browsers.

Camera

Curves

pomax.github.io – 13 Jun 13

A Primer on Bézier Curves

A detailed explanation of Bézier curves, and how to do the many things that we commonly want to do with them.

Any good bezier spline editors?

Character Rigging

How to apply animations automatically

Inverse Kinematics = IK

Does three.js supports FK (forward kinematics) and IK (Inverse kinematics)?

ben · 2018-05-22T16:02:26.371Z

Tools

WebGL Browser Editors
WebGL Inspector
Debuggers and profilers
Debugging WebGL with Spector.js
Firefox Canvas Debugger
WebGL Texture Tester
Analyzing Traces

Spector.js

Spector.js demos & documentation

SpectorJS is an Open source toolking helping to Explore and Troubleshoot your WebGL scenes with ease.

ben · 2018-05-22T16:02:40.049Z

3D Editor

Three.js Editor
Clara.io

Three.js Alternatives

What is the best alternative to Three.js?

ben · 2018-05-22T16:03:09.036Z

3D Viewer

– Ruku

Sketchfab
ArtisGL 3D Publisher

Other Libraries/Frameworks

3dc.io
ShaderToy
OSGjs.org and examples
Playcanvas.com
WebGLStudio.org
Cesiumjs.org
Troika

Babylon.js

Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best

Babylon.js is one of the world's leading WebGL-based graphics engines. From a new visual scene inspector, best-in-class physically-based rendering, countless performance optimizations, and much more, Babylon.js brings powerful, beautiful, simple, and...

deck.gl

Large-scale WebGL-powered Data Visualization

deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.

WebVR

About WebVR
Google VR Blocks

prisoner849 · 2018-05-22T17:12:30.307Z

Is it possible to pin this thread at the top of the list in the category? Would be more comfortable and helpful to have it there

looeee · 2018-05-23T02:28:55.763Z

looeee · 2018-05-23T02:29:34.648Z

Done!

ben · 2018-05-23T07:01:54.186Z

What’s New?

WebXR
WebAssembly
– WebAssembly Concepts
WebCL

Atul_Mourya · 2018-05-23T09:35:36.691Z

There’s a whole lot more at this link. Feel free to filter and add some of the relevant resources. In my view, they all looks relevant.

Atul_Mourya · 2018-05-23T10:04:47.026Z

More Math :

Basic 3D Math
Vector Math for Graphics
Mathematics of Vectors Applied to Graphics
Matrix Math

ben · 2018-05-23T14:56:13.336Z

@Atul_Mourya thanks for sharing, bookshelf updated!

Atul_Mourya · 2018-05-28T11:19:38.308Z

Hi Yuri, This is example is definitely very much impressive. I would encourage you to post this as a new resource where other people can find it easily. Let’s just keep this current resource only for books, tutorial and other learning materials. Cheers

Mugen87 · 2018-07-07T21:26:45.431Z

I’d like to share a great book about the topic “Computational Geometry”. This area is necessary for all kinds of geometry related algorithms like triangulation, intersections tests, computing bounding volumes (e.g. convex hulls), path finding and many more. Although the examples in the book are written in C, I highly recommend to do the exercises

https://www.amazon.com/Computational-Geometry-Cambridge-Theoretical-Paperback/dp/0521649765

Waverider · 2018-07-08T21:07:16.852Z

What makes this site awesome is that it’s totally free and covers most of the vector math. it uses processing.js for it’s demos

https://natureofcode.com/book/
https://natureofcode.com/book/

use this playground if you want to edit some of the codes to do other cool stuffs:wink:

http://valentin.dasdeck.com/processing/index.php

Atul_Mourya · 2018-08-04T07:12:41.538Z

PBR & Lights
A really good learning resource.

https://google.github.io/filament/Filament.md.html