・fillmember.net

Yee Dog

Best dog ever

#webGL

Pet the dog, rotate the dog, feed the dog! An interactive 3D dog with hand-written inverse kinematics, built with Three.js and react-three-fiber. Visit the dog at yee.dog

Building the dog

Making the 3D model

screenshots of the early version of the dog model in Cinema4D
The early phase in modelling the dog

The model was made in regular 3D software and exported as a GLB file. GLB is the binary version of the JSON-based glTF format, which Facebook had adopted at the time for its 3D posts. It is one of the first widespread 3D formats focused on the web. Being JSON that can be packed into an all-in-one binary file makes it super efficient. Finally, the format can carry bone information, which makes it suitable for this interactive character project.

Key tech that makes it interactive

FABRIK

Through my experience working with Final IK in Unity at Artificial Rome, I found an inverse kinematics algorithm called FABRIK.

After studying the video presentation by the original author as well as an implementation in Lua made for Roblox, I tried to implement FABRIK in JavaScript. The code can be found here: FABRIK.js.

In the FABRIK.js for the first prototype, I did implement the constraint system. But I probably messed the math up pretty badly. Fortunately in this project, my joints are nested so it is not really a big problem. My imperfect and amateur weighting for my joints also means that the dog has a pretty limited range of motion. I could somehow design all these problems away by carefully placing my IK chain targets.

Behaviors

The simplified composition of the behaviors. (source)

I tried my best to divide all the things I wanted the dog to do into individual components and compose them together in React. Each script is essentially a bunch of hooks from react-three-fiber.

A few helper components are created to help orchestrate the behaviors. For example, EventHandler passes the global state of the dog Event.Eating into the DogBark component to disable it while the dog is eating.

Initially, I wrote an entire system akin to Unity's MonoBehaviour, called DoggoBehaviour, but it was quickly replaced once react-three-fiber came out.

Tricks

During development, the dog learned a lot of tricks. Some of them are no longer in the current version.

The dog can eat your file

  • Still working
  • No files are uploaded
  • The emitted particles are made of the file name.

The dog can emit confused particles

  • All the emotes are made with the same minimal particle system.

The first prototype

Link: old.yee.dog

The movement is faster, the ears are a tiny bit smaller, the rendering is somehow a bit crisper, the tail wags a little differently, and it does not bark out loud. Which one do you prefer?

This initial prototype was coded directly on Glitch. I love that something like this was possible in a week with just Three.js.

  • the dog has a big back in one of the experiments
  • the dog seen from the ground up
  • the dog barks by lifting its upper snout instead of its jaw
  • the dog's head moves into the body, making it look like it has no neck

The original dog

The dog and I on a staircase from a concrete structure leading downwards to a road with curb in the afternoon sun.

The dog is based on my neighbor's dog in Taiwan. I helped my neighbor walk the dog when I was living in Taiwan.

I built the project when I had just moved to Europe. I missed the dog, and wished I could visit him from time to time.

In my opinion they are almost the same.