fillmember.net

home/work/yee-dog

Yee Dog

date
02-2018
tags
#webGL

Pet the dog, rotate the dog, feed the dog! Visit the dog at yee.dog

Trick Highlights – The dog know (or used to know) these tricks.

During the development, The dog has 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 particle is made of the file name.

The dog can emit confused particles

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

First Prototype

Link: old.yee.dog

The movement is faster, the ears are 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 is coded directly on Glitch. I love how such thing is possible just with Three.js in a week.

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

The tech aspect - behind the scene

Making 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 a usual 3D software and exported as a GLB file. GLB is the binary version of the JSON-based glTF format, which at the time was adopted by Facebook with those 3D posts. It is one of the first widely spread 3D format that is focused on web. It being JSON and can be converted 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 techs that make 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 implemented 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 will have pretty limited range of motion. I can 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 want 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, EvenHandler pass 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 that is akin to Unity's MonoBehaviour system called DoggoBehaviour, but it is quickly replaced once react-three-fiber came out.

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 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.