Last year we shipped a pinball game at Shopify that took some inspiration from Space Cadet. You can still play it here: https://bfcm.shopify.com/
Every year we ship a live visualization of our merchant's sales on Black Friday. For a long time it was just a globe with arcs where each arc shows a real sale going from seller to buyer, but in the last few years we have been transforming the website into something more fun and interactive.
I found programming a pinball machine to be quite challenging. We were a team of 2 engineers and 1 artist and we worked on that project for about a month and a half. We wrote some notes on the process and put them in the desktop computer next to the pinball machine if anyone is curious about how things work.
I did this for years to learn computer graphics. I spent so many weekends and evenings building weird things that never made me a single dollar, but all the knowledge I gained eventually led to the job of my dreams. Here are some of the weird things I built:
Hey mike, I'm the Diego, the person who wrote this blog post and implemented the majority of it. Reading this comment, I feel the need to challenge some of your assumptions. I don't expect to change your mind, but here's my take on this:
- I have only been a developer for 7 years, and I don't have a degree in Software Engineering. I actually studied electrical engineering and upon graduating I landed my first job writing device drivers for graphics cards, which got me started writing software professionally.
- I did that for 3 years, and after discovering a passion for computer graphics I worked at Autodesk for 3 years on a desktop application called 3ds Max.
- After all those years working on that old and heavy desktop application I started seeing web-based applications like Figma as the right way to do things. Nothing beats the convenience of opening a link to launch an app, and of being able to launch an app on any device. That's why I joined Shopify's Spatial Commerce Team.
- My favorite programming language is C++, and the demos you see in the blog post are written in C++. I developed them as desktop applications, and compiled them to WebAssembly using Emscripten.
- I have never done "resume driven development." I studied computer graphics as a hobby for years because of a deep interest in it, and I was poorly paid all those years.
Well consider this sample from the Meta Movement SDK that allows you to control the facial expressions of a character with the face tracking of the Quest Pro: https://youtu.be/IQt4wTdGK64?t=315
Our tool could record those facial expressions into an Alembic file.
And as for holding objects, our tool could capture those too. Meta's Interaction SDK is excellent. Here's another sample they provide: https://youtu.be/WS4vtcwm8Zw?t=1
And I have to say that the cliff-climbing game is really fun.
Although in my opinion the arms still look a bit janky. You can see a demo of a sample they included with the SDK here: https://youtu.be/IQt4wTdGK64?t=419
Animating hands by hand (no pun intended) is horrendously difficult, so our 3D artist asked if we could help.
We built this within Shopify's Spatial Commerce team, which is a team that explores the intersection between AR/VR and commerce. Here are some of our other projects:
I love this so much, thanks for sharing it! We have been thinking about similar concepts at Shopify. Mocapped performances convey so much more emotion than images or videos.
In the "Implementation Details" section at the bottom of the README I actually explain why I only display 4 curves instead of 10, and you can change the speed of the animation and pause it using the "Playback Speed" slider. If you set it to 0, the animation will pause.
Thanks for your suggestions about being able to select joints and displaying titles. I hope to improve things in the future!
Sorry for the confusion. Your second statement is correct. Sampling just means to evaluate the function at an appropriate t value. I will update the README to make this clearer.
Hahaha this is a fair comment. I guess my intention was to show the complex number crunching that happens in the background to make characters move. I'm still thinking about better ways to visualize things.
Thanks proc0! What you are describing (a hierarchy of bones) is exactly what I'm doing. I decided not to mention that to simplify the explanation of how character animations work, but here are the missing details:
- All the little curves that I'm plotting show the local orientation of each joint.
- To obtain the world orientation of a particular joint, it's necessary to combine the transform matrices of all its parent joints until you reach the root of the hierarchy.
For example, to get the world transform of a wrist joint, you need to combine the local transforms of the wrist, elbow, shoulder, neck, etc. joints.
Animation curves are stored in local space in glTF files, and those are the curves that I'm displaying.
To be honest I don't see this as such a bad thing. Google Chrome has 70% of the browser market share, while Safari has 4%. I don't think there's anything wrong with prioritizing more popular platforms, specially when you just want to ship a project that you worked on in your spare time to learn new things.
Oh thanks for reporting that dwrodri! Note that the controls don't work on touchscreens yet. If you use a mouse/trackpad and keyboard, you should be able to play with all the settings.
It's funny that you mention this because when I simulated the blocks hitting the words "Dyna-Kinematics" for the title GIF I thought: "This is what graphic designers struggle to do manually. They spend hours animating things so that they look natural."
If graphic designers had access to a physics simulator, they wouldn't have to do anything manually. They could just let the physics do the talking.
I really love that idea, and I think it would sell.
Every year we ship a live visualization of our merchant's sales on Black Friday. For a long time it was just a globe with arcs where each arc shows a real sale going from seller to buyer, but in the last few years we have been transforming the website into something more fun and interactive.
I found programming a pinball machine to be quite challenging. We were a team of 2 engineers and 1 artist and we worked on that project for about a month and a half. We wrote some notes on the process and put them in the desktop computer next to the pinball machine if anyone is curious about how things work.