Three.js

Overview

Three.js is a JavaScript library used for creating and displaying 3D graphics in a web browser. It provides simpler graphics APIs by providing an abstraction layer over low-level APIs that directly interact with the GPU for rendering graphics in the browser.

Should I Use It?

Pros

• High-level APIs make it incredibly easy to render 3D content, unlike OpenGL or Vulkan, which require extensive boilerplate code and low-level management of graphics resources

• Say goodbye to pointers and memory management in C++, the language most traditional graphics libraries are built with

• Cross-platform (supported on mobile, pc, and headset)

• The vibrant community continue to deliver cool new features, demo projects, and add-on features

Cons

• Performance is limited because it abstracts away low-level tuning and runs in a single thread

• Advanced graphics features are in an early stage as WebGPU support is still experimental

Open Source

Three.js is an open source software and its source code is completely public. If you are interested in contributing, go to its Github repository, where you access source code, developer documents, and contributor community.

Resources

• Three.js Official Website

• What is Really Three.js Framework? A Brief Introduction

Tutorial

• The Very Basics

• JavaScript Brush-up

• Interactive Content

(For future students in the class who are interested in web graphics technologies, feel free to add more pages here to expand the content and resources!)

WebXR overview

WebXR is a browser API that enables immersive AR/VR experiences on the web:

• Access AR/VR hardware (headsets, controllers, and spatial tracking)

• Manage XR sessions (entering/exiting immersive mode)

• Provide essential data, such as view and projection matrices, to graphics APIs, allowing them to implement features like stereo rendering, positional tracking, and hand interactions

Using Three.js. together with WebXR, developers can create interactive 3D environments directly through the browser.

WebXR Compatibility

Even though WebXR is supported on mainstream browsers like Chrome and Firefox, it's still a new standard and the specific supported features may vary across different platforms. For the full compatibility notes, go here.

What's worth noting is that, WebXR is supported on Safari (on visionOS), if you go to advanced system settings and enable WebXR API. However this seems to be a developer preview feature early in experiment due to the lack of core functionalities (e.g. hand-tracking input) and the very low resolution of the rendering, underutilizing the device's superior screen resolution.