Updates

hpicgs · Apr 3, 2024 · d8c698d · d8c698d
1 parent dc26432
commit d8c698d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -1 +1,5 @@
-<html> <head> <title>Three.js Seminar</title><link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css"><script defer src="index_bundle.js"></script></head><body class="dark"><nav class="navbar navbar-fixed-top navbar-expand-md" id="seminar-navbar"><div class="container"><a class="nav-link px-0" href="https://github.com/hpicgs"><img class="img-fluid mt-0" src="img/cgs_logo_0bbf.png" alt="CGS Logo"></a><ul class="navbar-nav ml-auto" id="nav"><li class="nav-item"><a class="nav-link" href="#">Link 1</a></li><li class="nav-item"><a class="nav-link" href="#">Link 2</a></li></ul></div></nav><section class="container" id="header"><div class="row text-left"> <div class="col-12 offset-0"><h1>Introduction</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie lectus quis erat semper, vel accumsan leo dignissim. Nullam viverra tellus lorem, at pharetra dolor pellentesque eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nisl sem, pharetra et odio a, tincidunt aliquam ex. Nunc fringilla ipsum ac mauris bibendum, quis mattis turpis faucibus. Duis ullamcorper nulla orci, in cursus sem elementum in. Integer auctor, orci egestas vestibulum porta, massa quam tincidunt tellus, ut mollis ante enim nec justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis leo eget lacus ultricies, sit amet volutpat ipsum ornare. </p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2>World-in-Hand Navigation for Three.js – <span class="nowrap"><a href="https://www.github.com/Stastez"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;Sandro Steeger</a></span>, <span class="nowrap"><a href="https://www.github.com/BelanaZ"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;BelanaZ</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://orbitnavjs.github.io/WIHNavigationWebsite/"><img class="img-fluid" src="img/wih_8e79.png" alt="World-in-Hand Navigation for Three.js"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>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.</p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2>three-openll-labels – <span class="nowrap"><a href="https://www.github.com/strawberriesandcheese"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;Ulrike Herwig</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://strawberriesandcheese.github.io/three-openll-labels/"><img class="img-fluid" src="img/three-openll-labels_7368.png" alt="three-openll-labels"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>This extension adds 2D labels to three.js, allowing users to easily create annotations in their 3D scenes with minimal rendering overhead.</p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2>ModelDecay – <span class="nowrap"><a href="https://www.github.com/zerhacker1"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;zerhacker1</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://zerhacker1.github.io/blockdecaydemo/"><img class="img-fluid" src="img/blockdecay_0dbf.png" alt="ModelDecay"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>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.</p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2>Playground – <span class="nowrap"><a href="https://www.github.com/abc013"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;abc013</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://abc013.github.io/three.js/playground/"><img class="img-fluid" src="img/playground_06d8.png" alt="Playground"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>(To be added.)</p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2>Superquadrics – <span class="nowrap"><a href="https://www.github.com/matteovoges"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;Matteo Voges</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://matteovoges.github.io/extending-three.js/"><img class="img-fluid" src="img/superquadrics_9308.png" alt="Superquadrics"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>The goal of this project is introducing superquadrics as a new geometry type in three.js and take care of possible compability issues.</p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2>k-DOPs in Three.js – <span class="nowrap"><a href="https://www.github.com/robkosm"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;Robert</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://robkosm.github.io/three-kdop/"><img class="img-fluid" src="img/kdop_b28b.png" alt="k-DOPs in Three.js"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>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.</p></div></div></section></body></html>
+<html> <head> <title>Three.js Seminar</title><link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css"><script defer src="index_bundle.js"></script></head><body class="dark"><nav class="navbar navbar-fixed-top navbar-expand-md" id="seminar-navbar"><div class="container"><a class="nav-link px-0" href="https://github.com/hpicgs"><img class="img-fluid mt-0" src="img/cgs_logo_0bbf.png" alt="CGS Logo"></a><ul class="navbar-nav ml-auto" id="nav"><li class="nav-item"><a class="nav-link" href="#">Link 1</a></li><li class="nav-item"><a class="nav-link" href="#">Link 2</a></li></ul></div></nav><section class="container" id="header"><div class="row text-left"> <div class="col-12 offset-0"><h2 class="mb-1">Introduction</h2><p>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.</p><h2 class="mt-2 mb-1">Scope and Context</h2><p>We at the research group for <a href="https://hpi.de/doellner/home.html">Computer Graphics Systems</a>, 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 results were as follows.</p></div></div><h1 class="mt-4 mb-1">Results</h1><div class="row text-left"> <div class="col-12 offset-0"><h2><a href="https://orbitnavjs.github.io/WIHNavigationWebsite/">World-in-Hand Navigation</a>&nbsp;–&nbsp;<span class="nowrap"><a href="https://www.github.com/Stastez"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;Stastez</a></span>, <span class="nowrap"><a href="https://www.github.com/BelanaZ"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;BelanaZ</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://orbitnavjs.github.io/WIHNavigationWebsite/"><img class="img-fluid" src="img/wih_8e79.png" alt="World-in-Hand Navigation"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>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.</p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2><a href="https://strawberriesandcheese.github.io/three-openll-labels/">Distance Field Font Rendering</a>&nbsp;–&nbsp;<span class="nowrap"><a href="https://www.github.com/strawberriesandcheese"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;strawberriesandcheese</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://strawberriesandcheese.github.io/three-openll-labels/"><img class="img-fluid" src="img/three-openll-labels_7368.png" alt="Distance Field Font Rendering"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>This extension adds 2D labels to three.js, allowing users to easily create annotations in their 3D scenes with minimal rendering overhead.</p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2><a href="https://zerhacker1.github.io/blockdecaydemo/">Block Decay Effect</a>&nbsp;–&nbsp;<span class="nowrap"><a href="https://www.github.com/zerhacker1"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;zerhacker1</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://zerhacker1.github.io/blockdecaydemo/"><img class="img-fluid" src="img/blockdecay_0dbf.png" alt="Block Decay Effect"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>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.</p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2><a href="https://abc013.github.io/three.js/playground/">Group Nodes for the Playground</a>&nbsp;–&nbsp;<span class="nowrap"><a href="https://www.github.com/abc013"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;abc013</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://abc013.github.io/three.js/playground/"><img class="img-fluid" src="img/playground_06d8.png" alt="Group Nodes for the Playground"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>(To be added.)</p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2><a href="https://matteovoges.github.io/extending-three.js/">Superquadrics as Base Geometry</a>&nbsp;–&nbsp;<span class="nowrap"><a href="https://www.github.com/matteovoges"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;matteovoges</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://matteovoges.github.io/extending-three.js/"><img class="img-fluid" src="img/superquadrics_9308.png" alt="Superquadrics as Base Geometry"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>The goal of this project is introducing superquadrics as a new geometry type in three.js and take care of possible compability issues.</p></div></div><div class="row text-left"> <div class="col-12 offset-0"><h2><a href="https://robkosm.github.io/three-kdop/">k-DOPs as Bounding Volume Representation</a>&nbsp;–&nbsp;<span class="nowrap"><a href="https://www.github.com/robkosm"><img class="logo-link" src="img/github-mark-white_925a.png" alt="GitHub Logo">&nbsp;robkosm</a></span></h2></div></div><div class="row text-center"> <div class="col-10 offset-1 col-sm-8 offset-sm2 col-md-8 offset-md-2"><a href="https://robkosm.github.io/three-kdop/"><img class="img-fluid" src="img/kdop_b28b.png" alt="k-DOPs as Bounding Volume Representation"></a></div></div><div class="row text-left"> <div class="col-12 offset-0"><p>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.</p></div></div></section></body></html>