Skip to content
<Hyun/>
All projects

Oral Atlas

Personal · 3D learning tools

Find a structure. See how it fits.

Explore a visual guide to bilingual search, structure isolation and study tools around the actual anatomy screens.

Interactive explanation · not the live service

Loading interactive explanation…

Watch the original recordingsWeb · Recording notes included

Use the left and right arrow keys to switch slides.

Web

Recorded frame by frame from a local build because WebGL ran in software here, so the pacing is scripted.

Rotating the 3D head, inspecting the mandible from search, opening the jaw in the D2 jaw-motion tool, then switching to Korean.

1 / 6
Explore the architectureSystem diagrams, design decisions and detailed flows

Build, delivery and runtime

  1. VERSIONED INPUTSGLB modelZ-Anatomy + BodyParts3D
    gzip + hash
    GITHUB ACTIONSCI buildchecks, esbuild, build.py
  2. VERSIONED INPUTSstructures.json265 records, EN/KO
    inline
    CI build
  3. VERSIONED INPUTSViewer sourceThree.js + study modules
    bundle
    CI build
    dist/
    GITHUB ACTIONSBrowser QAPlaywright + axe
    deploy
    GitHub Pagespage, model, sw.js, ZIP
    hashed URLs
    STUDENT'S BROWSERService workerversioned cache
    cache-first model
    STUDENT'S BROWSER3D viewerThree.js + meshopt

Other connections

  • GLB modeltostructures.jsonderive nearby
  • D1–D4 learningto3D viewerhighlight, jaw pose
The versioned model, metadata and viewer source are checked and built in GitHub Actions and deployed from main to a static site on GitHub Pages. The purple path is how a change reaches a student: build, browser QA, deploy, then the service worker caches the content-hashed model so the viewer and the D1–D4 tools work offline.
View the diagram as text

Parts

  • GLB model (Z-Anatomy + BodyParts3D): Data store / broker
  • structures.json (265 records, EN/KO): Data store / broker
  • Viewer source (Three.js + study modules): Hosting / CI
  • CI build (checks, esbuild, build.py): Hosting / CI
  • Browser QA (Playwright + axe): Hosting / CI
  • GitHub Pages (page, model, sw.js, ZIP): Hosting / CI
  • D1–D4 learning (lessons, quizzes, labs): Client / UI
  • 3D viewer (Three.js + meshopt): Client / UI
  • Service worker (versioned cache): Background job

Connections

  • GLB model → structures.json: derive nearby
  • GLB model → CI build: gzip + hash
  • structures.json → CI build: inline
  • Viewer source → CI build: bundle
  • CI build → Browser QA: dist/
  • Browser QA → GitHub Pages: deploy
  • GitHub Pages → Service worker: hashed URLs
  • Service worker → 3D viewer: cache-first model
  • D1–D4 learning → 3D viewer: highlight, jaw pose

How the atlas loads and keeps working offline

  1. Open the page

    The page is a single HTML file holding the inlined metadata for all 265 structures and the minified viewer bundle. On a return visit the service worker serves it network-first and falls back to its cached copy.

  2. Stream the model

    The viewer fetches the gzipped GLB under a content-hashed URL and shows download progress as it streams. The URL changes only when the model changes, so the service worker can serve it cache-first.

  3. Decode in the browser

    The file is inflated with DecompressionStream, then GLTFLoader with the meshopt decoder parses it. Meshes are matched by name to the metadata, and loading stops with an error if any of the 265 structures is missing.

  4. Build the scene

    Each structure gets a tissue material, shaders compile asynchronously, and the viewer builds the layout, the searchable list and the D1–D4 learning panel, then applies any view shared in the URL.

  5. Register for offline

    Once the model is ready, the page registers the service worker, which caches the versioned model and the HTML pages and deletes older caches when it activates.

  6. Reopen offline

    Without a connection, pages come from the cache in either language and the model is served cache-first. The offline ZIP takes a different route: its page embeds the model and opens from disk with no service worker.

The project & my contribution

Problem
Dental students need to see oral structures in 3D and learn their names in both English and Korean.
Solution
A bilingual 3D atlas of 265 structures with search, isolation, sections, measuring and learning tracks for each dental-school year (D1–D4).
Result
Runs in the browser and offline, built on the open Z-Anatomy and BodyParts3D models and tested before every deploy.
  • 265 3D structures
Explore featuresLive site(opens in a new tab)

The source code is private. I'm happy to walk through it on request.

For students

  • Search by English or Korean name, older textbook terms, synonyms or tooth number
  • Isolate structures, cut sections, measure, pin notes and share the exact view as a link
  • Tracks run from tooth anatomy (D1) to clinical cases and treatment planning (D3–D4)

How it's built

  • Static site on GitHub Pages with a Three.js viewer and a compressed GLB model
  • Versioned service worker for offline use, plus a ZIP that opens from disk
  • CI runs Playwright interaction tests and axe-core audits before each deploy