diegomacario

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:

- Tiny ray-tracer: https://github.com/diegomacario/Super-Sunshine - 2D rigid-body simulator: https://github.com/diegomacario/Dyna-Kinematics - Character animation system: https://diegomacario.github.io/Animation-Experiments/public/... - Animation curve visualizer: https://diegomacario.github.io/Animation-Magic/public/index.... - Motion capture playback in the web: https://diegomacario.github.io/Hands-In-The-Web/public/index...

That's a mountain of code that served one purpose: to gain knowledge.

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.

Thanks for your time.

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.

For the arms you could use Meta's new Movement SDK: https://developer.oculus.com/documentation/unity/move-overvi...

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

Wow that's super cool! That's definitely the biggest challenge - how to keep the size of the mocap data small.

Our library is not the best at that, since it simply records everything to Alembic files, which are quite heavy.

Best of luck with Explayn. I really like the idea of learning from mocapped lessons.

Holy smoke that's so cool, thanks for sharing it! I love that your work helped increase the number of morphTargets in Three.js. That's real impact!

We actually built this to easily add hands to this concept video: https://twitter.com/StrangeNative/status/1613218237969494017...

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:

https://twitter.com/StrangeNative/status/1544666221181734912... https://twitter.com/StrangeNative/status/1562450155080597505...

It does amazingly well. Last May Meta released their Hand Tracking 2.0 update, and the quality of the hand tracking improved enormously. You can see a comparison of 1.0 and 2.0 here: https://www.youtube.com/watch?v=K-l-RXxYnzs&t=4s&ab_channel=...

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.

Hi dolmen!

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.

I hope this explains things.

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.

Wow that's fascinating, thanks for sharing it!

Although I disagree with how the author describes quaternions as black boxes. The two questions he asks:

- Why does i2=j2=k2=−1 and ij=k? - Why do we take a vector and upgrade it to an "imaginary" vector in order to transform it, like q(xi+yj+zk)q∗?

Are clearly explained in these interactive videos created by Grant Sanderson and Ben Eater: https://eater.net/quaternions

After I watched those videos, quaternions stopped being so opaque to me. I recommend them :-)

Hi suyash, take a look at the README for information on what all the little graphs represent: https://github.com/diegomacario/Animation-Magic/blob/main/RE...

There's also a button in the controls that allows you to open the README. Thank you!

I recommend running it on Chrome. It runs more smoothly there. I'm still improving the performance on Safari.

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.

That's a really cool idea!

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.

Thank you! That's exactly what I was going for :-)

Thank you! :-)

Hi everyone!

I'm the author of this project. I wrote it because I was very curious about physics simulation, and also because I wanted a reason to study a few libraries that I had never worked with like Qt.

In the readme I tried to explain all the details of how the simulator works. If you don't have time to read it, at least take a look at the GIFs in it. They showcase everything that the simulator can do.

Hi everyone!

I'm the author of this project. I wrote it because I was very curious about physics simulation, and also because I wanted a reason to study a few libraries that I had never worked with like Qt.

In the readme I tried to explain all the details of how the simulator works. If you don't have time to read it, at least take a look at the GIFs in it. They showcase everything that the simulator can do.

Thank you! I will do that!

Hehehe it's just for show! A simple equation that uses the incident angle of a collision to produce a visually appealing result.

I felt I could get away with this because the physics in the original Pong are also made up: the further the ball hits the center of the paddle, the larger the angle of reflection.

You have a good eye!

I would say that it is.

I think that the idea of having each state be its own class is very natural, and that it helps organize the code very effectively.

My failure was in how I made those classes share many components that they shouldn't be sharing, thinking that this would make things more efficient without any proof to support that.

So even though my code uses global variables implicitly, I still think the pattern I used for game state management makes it more organized than an implementation where everything is global.

I hope this answer your question :-)

That's a question that I'm still asking myself :P

Here's an example of what's wrong with my state management system:

- Let's say that state A places the teapot at position X.

- Now let's say that we need to transition to state B, where the teapot needs to be placed at position Y.

- Since both states share the same teapot, and since the teapot stores its own position, it's as if its position is a global variable, so both states needs to maintain variables external to the teapot where they store its position.

Now imagine the same situation, but with dozens of different variables. It makes the code difficult to understand and maintain.

One way to fix that problem is to give each state its own teapot. By not sharing certain objects between the different states, the code is simplified enormously. But I made the decision to share things to reduce memory usage.

When I come up with a solution that I'm satisfied with, I'll leave a comment here!

Hi everyone!

After 4 months of effort, I can finally show you my first game!

I decided to work on this project to gain a deeper understanding of some fundamental concepts of computer graphics and real-time rendering in particular.

In a way, this game is built on top of my own tiny game engine, but I don't like to call it that because it's not very flexible. It's more of a set of classes that can be reused to build other games.

There are many things that I'm proud of, but also many things that I know were big mistakes.

My goal was to write a game without using any global variables, where each game state (e.g. menu, play, pause, win, etc.) would be fully independent and encapsulated.

And while you won't find any global variables in the code, and while you'll see that each game state is represented by its own class, I did not foresee how sharing components (e.g. the camera, the 3D objects, etc.) between the different game states would essentially make those components global.

This lead to game states that depend on each other tightly, which is precisely what I wanted to avoid.

Regardless of that failure (or perhaps because of it), building this game was an amazing learning experience, and the end result is surprisingly beautiful.

The code is fully open source in case anyone wants to learn from my mistakes.

I hope you enjoy my first game! :-)

Wooo! I heard the course is being updated so that it covers more modern OpenGL, so it might be worth it to revisit it soon. Thank you for your nice comment!