first commit

bchirlsbiodigital · Oct 31, 2023 · 1b0f70a · 1b0f70a
commit 1b0f70a
Show file tree

Hide file tree

Showing 3 changed files with 238 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/index.html b/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>BioDigital Plasma Engine (Brian Chirls)</title>
+		<meta charset="utf-8"/>
+		<meta http-equiv="X-UA-Compatible" content="IE-edge"/>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
+		<style type="text/css">
+			@import url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
+			@import url(//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
+			@import url(//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
+			body {
+				font-family: 'Droid Serif';
+		        text-shadow: 0 0 20px #333;
+			}
+			.remark-slide-content {
+				background-color: #272822;
+				color: #cccccc;
+			}
+			h1, h2, h3 {
+				font-family: 'Yanone Kaffeesatz';
+				font-weight: normal;
+				color: #f3f3f3;
+				line-height: 0.8em;
+			}
+			.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
+			div.remark-slide-content > ul > li {
+				font-size: 2em;
+				margin: 0.3em 0;
+			}
+
+			div.remark-slide-content > ul > li > ul > li {
+				font-size: 0.7em;
+			}
+
+			.smaller > ul {
+				font-size: 0.7em;
+			}
+
+			a, a:visited {
+				color: #d7d7d7;
+			}
+		</style>
+	</head>
+	<body>
+		<script src="//gnab.github.io/remark/downloads/remark-latest.min.js"></script>
+		<!--
+		<script>
+		if (!window.remark) {
+			document.write('<script ' + 'src="js/remark-latest.min.js"><' + '/script>');
+		}
+		</script>
+		-->
+		<script>
+			var slideshow = remark.create({
+				ratio: '16:9',
+				sourceUrl: 'readme.md'
+			});
+			var fsNames = [
+				'requestFullscreen',
+				'mozRequestFullScreen',
+				'msRequestFullscreen',
+				'webkitRequestFullscreen'
+			];
+			function fs() {
+				var i;
+				for (i = 0; i < fsNames.length; i++) {
+					if (document.body[fsNames[i]]) {
+						document.body[fsNames[i]]();
+						return;
+					}
+				}
+			}
+			document.body.addEventListener('dblclick', fs, false);
+		</script>
+	</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -0,0 +1,159 @@
+class: middle, center
+# Plasma Engine
+## Building a WebGL Engine for an Educational Platform
+by Brian Chirls
+3D Graphics Engineer, BioDigital
+
+---
+class: middle, center
+# What is BioDigital?
+"The BioDigital Human is an interactive 3D software platform for visualizing anatomy, disease, and treatment."
+
+---
+
+# Product Scope
+- 1000+ library modules, plus client content
+- Content types
+  - Gross anatomy
+  - Conditions & Procedures
+  - Medical devices
+  - Cellular and microscopic
+- 6k+ objects, 3mil+ vertices, ~200 textures
+
+---
+
+# How is a platform different?
+
+--
+- Range of content, can't customize code
+
+--
+- Range of hardware
+
+--
+- Range of network conditions
+
+--
+- Lots of text (DOM) [accessibility]
+
+---
+
+# Unique content challenges
+
+--
+- So many objects
+
+--
+- So many vertices
+
+--
+- Nothing is repeated (more than once)
+
+--
+- Everything is visible
+
+--
+- Nothing is far away
+
+---
+
+# Content pipeline
+- Authoring in Maya and Substance Painter
+- Custom export via Maya plugin
+- Compress textures on server
+- Authoring in web app
+- Load on demand in browser
+
+---
+
+# Starting Point
+- Old engine: SceneJS abandoned and forked years ago
+- Heavily optimized but inflexible and hard to understand
+- Old coding conventions
+- Old hardware/software support assumptions
+
+---
+
+# New Engine Goals:
+- Improve architecture for upgrades and fixes
+- Improve documentation in and outside code
+- Match or exceed performance
+- Maintain support for old WebGL 1 devices
+- WebXR support
+
+---
+
+# Architecture
+- Separation of concerns:
+  - Anatomy Objects (application object)
+  - Scene Graph (renderable objects)
+  - Simulation (particles & animation)
+  - Renderer
+- Event-driven
+
+---
+
+# Why not Three.js?
+
+--
+- No semver, breaking changes on every release
+
+--
+- Kills features and support too often
+
+--
+- Custom particle systems & animation
+
+--
+- Would be too much use of low-level hooks like custom shaders
+
+---
+
+# Why not GLTF?
+
+--
+- Conditional loading of compressed textures, based on support
+
+--
+- Full representation of scene graph w/ application-specific info and references to shared resources
+
+--
+- Restrictions on texture maps:
+  - cannot stack multiple layers
+  - metallic/roughness must be same image, but no support for other texture packing
+
+---
+# Why not GLTF?...
+- Custom particle systems
+
+--
+- Could address with custom extensions, but at that point may as well use our own format
+
+---
+
+exclude: true
+
+# QA strategies
+
+--
+exclude: true
+- Bugs
+  - Unit tests with Jest (~46% coverage, ~1200 tests)
+  - Screenshot diffing
+  - Manual testing
+
+--
+exclude: true
+- Performance
+  - Frame rate, loading time, 
+  - Define specific targets
+  - Automated benchmarks with jest
+  - Manual profiling with browser tools
+
+---
+# zSpace
+
+- Lenticular display: 3D without glasses
+- WebXR
+- Scaling and placement
+- Stylus input