Dentifyy Orthorobo

Executive Summary

In modern orthodontics, aligner treatments involve sequential stages where a patient transitions through multiple teeth-correcting molds. Showing the patient the progression of their alignment is key to patient conversion and monitoring. Traditionally, this required heavy CAD software (such as OnyxCeph3) or complicated patient portals requiring login credentials, creating a high-friction experience.

Dentifyy Orthorobo is a specialized web-based 3D STL viewer that simplifies this workflow. Orthodontists can upload a zipped treatment folder of STL scans directly onto their VPS admin panel. The system automatically uncompresses and syncs these heavy files into patient folders on Google Drive, records metadata locally, and generates a secure, unauthenticated preview URL. The patient can immediately view their step-by-step treatment progress interactively on their mobile device or desktop browser without requiring a password.

Key Challenges & Requirements

Engineering Dentifyy Orthorobo required overcoming several core UX and infrastructure bottlenecks:

• Authentication Friction vs. Patient Privacy: Forcing patients to register, download apps, or remember passwords to view their teeth progress leads to high drop-offs. The system required a single-click sharing link (similar to Google Docs view-only sharing) that is secure and restricted to that patient's report, without exposing other clinical data.
• Scale and Storage Cost on VPS: STL dental files are extremely large (typically 10MB to 30MB per treatment step). With 10 to 30 steps per patient, a single patient dataset can reach 500MB. Storing files locally on a VPS SSD causes storage expenses to grow exponentially. The system needed to utilize external cloud storage (Google Drive) as a scalable storage broker while maintaining metadata locally on the VPS.
• Rendering Raw STL Meshes: Orthodontic scanners export raw, untextured, single-color geometries. Viewing a single-color grey model is unintuitive for patients, as they cannot distinguish between gums and teeth. The viewer needed a way to dynamically isolate and colorize the teeth and gums in the browser on the fly.

System Architecture & Data Pipeline

The software utilizes a Next.js frontend and API backend. Heavy models are stored in Google Drive folders created via the Google Drive API, while a lightweight local JSON database on the VPS records file mappings:

1. Admin ZIP Upload: The orthodontist uploads a patient alignment ZIP folder. The server processes the file upload in memory using Next.js route handlers.
2. Asynchronous Extraction & Sync: Using the server-side extraction engine, the zip archive is uncompressed. The files are uploaded via the Google Drive API into a folder named for that patient ID.
3. Lightweight Indexing: A reference is written to the local JSON database (reports.json) mapping the Patient UUID to the Google Drive folder ID and starting step. No large 3D file is stored on the VPS.
4. Streaming Patient Link: A public link is generated: /report/[id]. When visited, the VPS server acts as a proxy, fetching the binary STL models from Google Drive and streaming them directly to the client browser WebGL canvas.

Key Engineering Accomplishments

A. Playable Aligner Timeline

The system organizes dental STL files alphabetically or by step number (e.g., Step 0 to Step 10). The frontend viewer uses **React Three Fiber** and **Three.js** to mount and unmount these steps seamlessly. A custom play/pause timeline slider lets patients play the alignment progression in real-time, watching their teeth straighten step-by-step.

B. Real-Time Math-Based Gum/Teeth Colorization

Instead of requiring pre-textured models, the WebGL canvas analyzes the bounding boxes of the meshes in real-time. It uses height-ratio thresholds along the vertical axis to programmatically color vertices in the shader context:

// Dynamically color teeth white and gums pink
const min = bbox.min[splitAxis];
const max = bbox.max[splitAxis];
const height = max - min;
const count = geom.attributes.position.count;
const colors = new Float32Array(count * 3);

for (let i = 0; i < count; i++) {
  const val = geom.attributes.position.getZ(i);
  let isGum = isUpper ? val > threshold : val < threshold;
  if (isGum) {
    colorGum.toArray(colors, i * 3); // Pink (#ff99a8)
  } else {
    colorTeeth.toArray(colors, i * 3); // White (#ffffff)
  }
}

C. Secure Streaming Proxy

Rather than loading files directly via public Google Drive sharing links (which would expose folder IDs and clinical permissions), the Next.js API acts as a secure stream broker. It reads the file chunk-by-chunk using Google OAuth2 credentials on the server side and pipes the data directly into the client Response object.

Impact & Results

• 99% VPS Storage Cost Savings: By offloading storage to Google Drive, the company avoids local VPS SSD costs completely.
• Zero-Friction Sharing: Patients gain instantaneous access to interactive, colorized 3D models of their treatment plans directly on their phones without passwords or downloads.
• High Treatment Conversion: Enables orthodontists to visually demonstrate alignment outcomes, increasing treatment acceptance rates.