Introduction
Three.js is a widely used 3D rendering engine for web browsers with hardware accelerated rendering capabilities based on WebGL and the upcoming WebGPU APIs. The feature set of Three.js is broad and comprehensive to allow for quick prototyping, cool demos, and 3D applications. However, some computer graphics features in niche gaps are missing.
Scope and Context
We at the research group for Computer Graphics Systems, chaired by Prof. Dr. Jürgen Döllner, identified a couple of such missing features and designed a project seminar to fill these gaps.
As such, we conducted the seminar "3D Computer Graphics: Extending the Three.js Framework" with seven Bachelor's students in the winter semester 2023/24 at Hasso Plattner Institute, Digital Engineering Faculty, University of Potsdam.
The instructors and supervisors for the projects were Willy Scheibel (
scheibel) and Ole Wegen.
The results were as follows.
Projects
World-in-Hand Navigation
This navigation method aims to enhance the user experience by allowing users to interact with the virtual world as if it were a tangible object in their hands. By bridging the gap between the user's interaction and the virtual camera's movement, World-In-Hand Navigation offers a more intuitive, robust, and user-friendly navigation experience compared to the traditional navigation controls provided by Three.js.
Distance Field Font Rendering
Student: strawberriesandcheese
This extension adds 2D labels to three.js, allowing users to easily create annotations in their 3D scenes with minimal rendering overhead.
Block Decay Effect
Student: zerhacker1
ModelDecay introduces a solution for voxelization and animation within the Three.js library. This tool enables developers to take a 3D model and convert it into a voxelized representation, subsequently animating the fall of these voxels. The prinicipal objective was to examine the possibility of vanishing/decaying 3D model as a type of object in Three.js tested specifically on said voxelization effect.
Superquadrics as Base Geometry
Student: matteovoges
The goal of this project is introducing superquadrics as a new geometry type in three.js and take care of possible compability issues.
k-DOPs as Bounding Volume Representation
Student: robkosm
Bounding volumes offer efficient intersection tests for 3D objects. They help optimize tasks like rendering, physics, and user interaction. Although Three.js includes several types of bounding volumes, it currently lacks support for k-DOPs. This project aims to explore how k-DOPs can be integrated into Three.js and compares their performance with other bounding volumes.