Pawtotype

Inspiration

Inspired by the desire to break away from static 2D web interfaces and create responsive, emotionally engaging digital pets without native app installs, the project taught us how to orchestrate complex end-to-end graphics pipelines, balance mobile GPU performance against draw calls, and navigate high-stakes Git edge cases under midnight hackathon pressure.

What it does

Pawtotype is an interactive, browser-native 3D digital companion designed to bring real-time physical presence and spatial awareness to web-based human-computer interaction. To overcome the latency and hardware friction of traditional vision tracking, we engineered a low-overhead WebGL physics and state management engine: utilizing vector unprojection ($Vector3.unproject$) for $Raycaster$ pointer tracking, dynamic kinematic interpolation (lerp) to simulate physical head mass, and seamless 300ms directional cross-fading (AnimationMixer) between animation clips.

How we built it

I built it by bridging a custom Blender asset pipeline, complete with quad-topology mesh optimization, quadruped armature rigging, and NLA animation tracks, directly into a high-performance Three.js runtime powered by Vite.

Challenges we ran into

Just past midnight, I ran into a Git rebase conflict where an unrelated remote history temporarily emptied the entire working directory comprised of 900+ lines of custom GLSL shader code and all of my 3D model assets. I had to diagnose the rebase state, and execute a git rebase --abort to preserve data integrity. At this point in the night I was already feeling immensely tired and had to resolve the branch conflict with a merge strategy to get back on track in minutes.

Accomplishments that we're proud of

Learning 3D creation for real-time web applications required me to learn how to animate a four-legged animal in Blender and well as mastering programmatic execution in WebGL (Three.js) This came with many technical hurdles such as rigging spine articulation. limb contact, and clean file exports.

What's next for Pawtotype

Moving forward, Pawtotype is set to expand beyond spatial cursor-tracking by integrating THREE.PositionalAudio for head-relative spatial barks, adding draggable 3D bounding-box toys with collision physics, and introducing web-based skeletal blend shapes to let users customize their canine companion in real time.

Built With

• blender
• csss
• html5
• javascript
• node.js
• three.js
• vercel
• vite