https://jsantell.com/projects/

1<!DOCTYPE html><html lang="en"><head><title>Jordan Santell - Projects</title><meta name="description" content="Jordan Santell, focusing on open web engineering, immersive web, WebXR, WebGL, JavaScript, open source, open standards, and all things weird web."><meta charset="utf8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:title" content="Jordan Santell - Projects"><meta property="og:description" content="Jordan Santell, focusing on open web engineering, immersive web, WebXR, WebGL, JavaScript, open source, open standards, and all things weird web."><meta property="og:url" content="https://jsantell.com/projects/"><meta property="og:image" content="https://jsantell.com/favicon.jpg"><meta property="og:site_name" content="jsantell.com"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@jsantell"><meta name="twitter:creator" content="@jsantell"><link rel="canonical" href="https://jsantell.com/projects/"><link rel="icon" type="image/jpg" href="/favicon.jpg"><link rel="stylesheet" type="text/css" href="/styles/core.css"><link rel="preload" href="/fonts/fira-sans-v8-latin-200.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="/fonts/fira-sans-v8-latin-300.woff2" as="font" type="font/woff2" crossorigin="anonymous"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' https://stats.jsantell.com; frame-src 'self' https://jsantell.dev https://media.jsantell.com; font-src 'self'; img-src 'self' https://stats.jsantell.com; style-src 'self' 'unsafe-inline'; media-src 'self' https://media.jsantell.com; form-action 'self' https://tinyletter.com"><link rel="stylesheet" type="text/css" href="/projects/projects.css"></head><body><header><a class="site-title" href="/">Jordan Santell</a> <span class="subtitle">immersive engineer</span><div class="spacer"></div><nav><ul><li name="Projects"><a href="/projects/">Projects</a></li><li name="Notes"><a href="/notes/">Notes</a></li><li name="Speaking"><a href="/speaking/">Speaking</a></li><li name="About"><a href="/about/">About</a></li></ul></nav></header><main id="projects"><div active-filter="featured"><h1>Projects</h1><input id="filter-featured" checked class="filter" name="filter" type="radio" value="featured"> <label for="filter-featured" role="tab" tabindex="0">Featured</label> <input id="filter-xr" class="filter" name="filter" type="radio" value="xr"> <label for="filter-xr" role="tab" tabindex="0">Immersive</label> <input id="filter-graphics" class="filter" name="filter" type="radio" value="graphics"> <label for="filter-graphics" role="tab" tabindex="0">Graphics</label> <input id="filter-audio" class="filter" name="filter" type="radio" value="audio"> <label for="filter-audio" role="tab" tabindex="0">Audio</label> <input id="filter-tools" class="filter" name="filter" type="radio" value="tools"> <label for="filter-tools" role="tab" tabindex="0">Tools</label> <input id="filter-all" class="filter" name="filter" type="radio" value="all"> <label data-tooltip="Pardon the jank!" for="filter-all" role="tab" tabindex="0">All</label><ul class="filtered-list"><li web-tag graphics-tag audio-tag featured-tag><a href="/priceless-2019/" title="Priceless 2019"><h2>Priceless 2019</h2><div class="image-container"><img alt="Image for Priceless 2019" src="../priceless-2019/priceless-full-2.jpg" loading="lazy"></div><div class="subtitle">Cyberpunk Visuals @ Dirt Stage</div></a></li><li xr-tag web-tag featured-tag><a href="/webxr-polyfill/" title="Polyfilling WebXR"><h2>Polyfilling WebXR</h2><div class="image-container"><img alt="Image for Polyfilling WebXR" src="thumbs/webxr-polyfill.png" loading="lazy"></div><div class="subtitle">Making WebVR/WebXR Responsive</div></a></li><li graphics-tag xr-tag web-tag featured-tag><a href="/model-viewer/" title="model-viewer"><h2>model-viewer</h2><div class="image-container"><img alt="Image for " src="thumbs/model-viewer.png" loading="lazy"></div><div class="subtitle">Easy interactive 3D models on the web &amp; AR</div></a></li><li graphics-tag web-tag featured-tag><a href="/three-ik/" title="THREE.IK"><h2>THREE.IK</h2><div class="image-container"><img alt="Image for " src="thumbs/three-ik.png" loading="lazy"></div><div class="subtitle">Inverse kinematics for three.js</div></a></li><li graphics-tag web-tag featured-tag><a href="/codevember-2017/" title="Codevember 2017"><h2>Codevember 2017</h2><div class="image-container"><img alt="Image for " src="thumbs/codevember-2017.png" loading="lazy"></div><div class="subtitle">30 days of 3D experiments</div></a></li><li xr-tag graphics-tag web-tag featured-tag><a href="/web-ar-prototypes/" title="Prototyping Web AR"><h2>Prototyping Web AR</h2><div class="image-container"><img alt="Image for Prototyping Web AR" src="thumbs/prototyping-augmented-reality-on-the-web.png" loading="lazy"></div><div class="subtitle">Prototyping cross-platform augmented reality on the web</div></a></li><li web-tag browsers-tag greenfield-tag><a href="/tofino/" title="Tofino"><h2>Tofino</h2><div class="image-container"><img alt="Image for " src="thumbs/tofino.png" loading="lazy"></div><div class="subtitle">Experimental Web Browser</div></a></li><li web-tag audio-tag firefox devtools-tag tools-tag featured-tag><a href="/firefox-web-audio-editor/" title="Web Audio Tools"><h2>Web Audio Tools</h2><div class="image-container"><img alt="Image for " src="thumbs/web-audio-tools.png" loading="lazy"></div><div class="subtitle">Firefox devtools for Web Audio API</div></a></li><li featured-tag web-tag firefox devtools-tag tools-tag><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance" title="Performance Tools"><h2>Performance Tools</h2><div class="image-container"><img alt="Image for " src="thumbs/performance-tools.png" loading="lazy"></div><div class="subtitle">Firefox devtools for jank</div></a></li><li web-tag firefox devtools-tag tools-tag><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory" title="Memory Tools"><h2>Memory Tools</h2><div class="image-container"><img alt="Image for " src="thumbs/memory-tools.png" loading="lazy"></div><div class="subtitle">Firefox devtools for memory</div></a></li><li web-tag firefox devtools-tag tools-tag><a href="https://wiki.mozilla.org/DevTools/Performance/JIT" title="JIT Debugger"><h2>JIT Debugger</h2><div class="image-container"><img alt="Image for " src="thumbs/jit-debugger.png" loading="lazy"></div><div class="subtitle">Firefox Devtools</div></a></li><li web-tag firefox-tag tools-tag><a href="https://developer.mozilla.org/en-US/Add-ons/SDK" title="Add-on SDK"><h2>Add-on SDK</h2><div class="image-container"><img alt="Image for " src="thumbs/add-on-sdk.png" loading="lazy"></div><div class="subtitle">Firefox Extensions</div></a></li><li web-tag audio-tag><a href="/dancer-js/" title="dancer.js"><h2>dancer.js</h2><div class="image-container"><img alt="Image for " src="thumbs/dancer-js.png" loading="lazy"></div><div class="subtitle">Audio Explorations</div></a></li><li web-tag finance-tag app-tag><a href="https://unbury.me" title="unbury.me"><h2>unbury.me</h2><div class="image-container"><img alt="Image for " src="thumbs/unbury-me.png" loading="lazy"></div><div class="subtitle">Loan Calculator</div></a></li></ul></div><footer><form action="https://tinyletter.com/jsantell" method="post" target="_new"><p>Sign up for infrequent updates on things that I make</p><input type="hidden" value="1" name="embed"><div class="form-group"><label for="tlemail">email</label> <input type="text" placeholder="[email protected]" name="email" id="tlemail"></div><div class="form-group"><button type="submit" value="Subscribe">Subscribe</button></div></form></footer></main>

1<script src="/scripts/dummy.js"></script>

1<script async defer src="https://stats.jsantell.com/app.js"></script>

1<noscript><img src="https://stats.jsantell.com/image.gif" alt=""></noscript></body></html>