SJHacks 2026 Submission

Team

• Parth Patel - San Jose State University
• Eugene Lacatis - San Jose State University
• Neil Mewada - San Jose State University
• Shailen Sutradhar - San Jose State University

Project Name and Track

Track 1: WhatTheDiff

Project Description

WhatTheDiff is a visual diff platform for 3D .glb models, delivered as a desktop app.

Teams in game dev, XR, animation, and creative tooling often work with binary assets where normal source control diffs are unreadable. WhatTheDiff lets users compare two versions of a model and immediately see what changed using five modes:

• Side-by-side synced 3D viewer
• Ghost overlay blend view
• Pixel diff (freeform orbit)
• Turntable auto-rotation compare
• All angles grid summary

The app also shows a persistent structural diff panel (vertices, triangles, meshes, nodes, animations, material changes, and bounding-box deltas) so reviewers can combine visual and structural context.

How It Works

1. Load two .glb files by drag/drop or from GitHub commit/PR history.
2. Each file is parsed in parallel:
   • Three.js pipeline for rendering
   • glTF-Transform pipeline for structural metadata
3. The UI renders both versions with normalized framing and computes diff outputs.
4. Pixel diffs are computed across 6 camera angles using a worker pool for responsive interaction.
5. Users switch views, inspect changes, and use stats for quantitative verification.

Desktop support is implemented with Electron and runs the built Next.js app offline/local.

Problem Solved

Current code review tools treat most 3D assets as opaque binaries. That creates real production pain:

• Artists and technical artists cannot quickly validate geometry/material regressions.
• Reviewers rely on manual screenshot comparison or ad-hoc DCC checks.
• Asset review becomes slower, less consistent, and more error-prone.

WhatTheDiff turns model review into a repeatable and inspectable workflow by combining render-based visual comparison with structured metadata deltas.

Accessibility in Creative Technology Impact

WhatTheDiff improves accessibility in creative pipelines by making 3D change review understandable to more roles, not only engine specialists:

• Visual-first comparison reduces dependence on low-level mesh tooling.
• Persistent stats give non-rendering specialists concrete numbers.
• Keyboard shortcuts improve speed for power users.
• Screen-reader-friendly labels are included on key controls.
• A colorblind-safe palette is supported in ghost/stat visual semantics.

This lowers friction between artists, developers, and reviewers and helps teams catch issues earlier regardless of tooling background.

Bonus Cybersecurity / Safety Implementation

We implemented security-aware behavior in the architecture and runtime:

• Local-first design: model comparison runs client-side with no mandatory file upload backend.
• File validation: only .glb accepted; hard size cap at 200 MB; warnings for large files.
• Secure desktop defaults (Electron): nodeIntegration disabled and contextIsolation enabled.
• External link safety: external URLs open in system browser instead of in-app webview.
• Least-privilege guidance for GitHub integration: PAT flow documents public_repo vs repo scope usage.
• Explicit render/resource disposal to prevent GPU memory exhaustion after repeated swaps.
• Error boundaries and WebGL context-loss recovery to fail safely instead of hanging/black-screening.
• Git hook isolation: diff data is served from a short-lived local file server used only for the session.

Ethical AI Statement

Our product does not rely on runtime generative AI to replace artists or automate creative decisions.

• No model generation, style transfer, or prompt-based content replacement is used.
• Human creators still author assets; WhatTheDiff only helps humans review changes more clearly.
• The tool is an assistive reviewer layer, not an autonomous creator.
• We focused on transparent, deterministic visual/structural comparison rather than opaque AI output.

Built With

• electron
• gltf-transform
• hook
• next.js
• react
• three.js
• typescript
• wrapper
• zustand