Distinguished Engineer @ Shopify. Building random experiments in my spare time.
Ottawa, Ontario
- Tweets 6,470
- Following 441
- Followers 38,563
- Likes 4,577
Pinned Tweet
This is three.js running on the Exosphere. 🤯
Rendering in realtime from a browser at 8K / 60fps.
Here’s how Shopify just pulled it off 👇
110
445
4,398
996,113
Can't believe I got this working 🤯
Live preview of a Blender scene with the Vision Pro.
517
2,568
26,072
2,536,520
Shopify just launched a racing game built in threejs and React (R3F).
No physics libraries. No raycasts.
Not vibe coded. But all vibes. ✨
301
512
8,266
1,420,293
This pottery simulator is all done using shaders 🤯
Here's a thread of how I did it 👇
[1/7]
76
1,277
6,100
Shopify has a 3D telephone pole as an internal message board.
It seems silly, but it’s one way we experiment with new tech. We call it “unserious exploration”.
73
243
5,588
542,276
Every time a sale is made on @Shopify this Black Friday weekend, it shows up on this 3D globe.
It runs at 120fps in the web with a full 3D environment, physics engine, music synth, VR support, and more.
It’s hard to believe it's a React app 👀🧵
99
316
4,089
464,113
Just got Doom running on the Dynamic Island!
#iphone14
48
398
3,441
These fireworks are a single draw call 🤯
No particles. Just an instanced shader in threejs.
Here’s how 👇🧵
48
199
2,983
289,050
The best part of my pottery shader is that it works with any object.
It's super precise and doesn't rely on colliders at all! 🐴
37
485
2,631
Today @Shopify is open sourcing the tool we use for optimizing glTF 3D models.
🔧 Tweak compression settings per texture
⚡ See changes immediately
🧰 Mesh compression options
🌐 Hosted online & free
👇 Check the thread for details
44
286
2,981
254,586
Wondering if a product will fit in your space? 👇
Step 1: Go to size.link
Step 2: Enter dimensions
Step 3: View in augmented reality
54
662
2,763
We built an internal game at Shopify to make virtual hangouts more fun. It’s called Shopify Party, and I’d love to tell you all about it 👇🏻
[1/6]
75
367
2,452
2011: Shopify
2012: Shopify
2013: Shopify
2014: Shopify
2015: Shopify
2016: Shopify
2017: Shopify
2018: Shopify
2019: Shopify
2020: Shopify
No seriously, it’s a pretty great place to work. P.S we’re hiring 😉
77
83
2,218
Spent too long thinking whether I could.
Didn’t stop to think whether I should.
Yo-yo VR.
39
254
1,425
A stroller is such a great use case for AR shopping. How big is it? How much space does it take up on a sidewalk? Will it fit in my car?
You have to try this out: tryit.media
34
293
1,464
These arcade cabinets are powered by three.js
Here are the 3 browser APIs that make this possible 👀
40
96
1,361
185,576
This method works with different shapes and cuts. It has limitations, but it’s really fun to play with! [6/6]
15
83
1,116
WebXR now supports hand tracking, so I built a VR Theremin to test it out.
Try it on Oculus Quest: vrtheremin.glitch.me/
[🔊 on]
30
190
1,012
Introducing HandSpace: A collection of hand tracking oddities.
Get it here: sdq.st/handspace
25
163
932
My team @shopify launched AR functionality in @magnolia’s app! See products in stunning detail before buying them: itunes.apple.com/us/app/magn…
45
292
910
I built a VR orb simulator to satisfy your pondering needs.🔮✨
Ponder it here: orbsimulator.glitch.me/
27
137
790
Playing around with @andreintg's amazing Clayxels engine.
9
110
798
Google's Teachable Machine is a magical ML tool. ✨
In 2 minutes I trained my computer to recognize what part of my shoe it was looking at.
You have to try it: teachablemachine.withgoogle.…
7
176
742
@shopify will be open sourcing this in the next couple weeks :)
23
14
711
61,127
If you scroll the texture fast enough you get a really convincing effect. Setting the material roughness close to 0 gives that wet clay look.
While this technique doesn't support pulling the clay upwards or outwards (yet), I'm amazed by how well it works!
[6/7]
5
27
538
It’s built with Unity Jobs + Burst compiler.
Each frame I loop over the vertices of the mesh. If any of them are above the knife, I move them down to be flush with the knife. [2/6]
4
26
491
Used the amazing HairStudio asset: assetstore.unity.com/package…
Made a few modifications to support realtime cutting.
9
47
482
It’s an easter egg inside our latest Editions page, and was handcrafted by @letkma , @maca_graphics and myself. With support from the Editions team @shopify
You have to try it out:
shopify.com/ca/editions/summ…
15
24
524
37,895
Imagine being able to pull a product right out of a page to look at it closer. Here's a Shopify store viewed with the @magicleap browser.
12
125
449
If a vertex has been cut, I store a special value in its vertex color property. This lets me texture those vertices differently from the untouched bark vertices. [5/6]
Tada! 🎉
2
16
418
The hero on the latest @Shopify Editions page was all built with React Three Fiber. Here’s how we did it 👇
14
43
460
53,988
Need Unreal Tournament sounds
M M M M ONSTER SWEEP
RAMPAGE
@TimSweeneyEpic for the license plz 🙏
5
3
411
55,191
No physics libraries? No raycasts? That's right!
The track is a spline that lets us easily figure out the normals and tangents at any given point on the curve.
This makes collision and twisting tracks simple and super performant.
Reply if you want an in-depth break down 😃
39
12
446
39,727
You'll soon be able to use AR to preview wall art from Shopify stores. No app needed as it's all on the web! Coming to iOS 13 browsers this Fall.
11
78
412
Now here's the fun part.
By simply scrolling the texture horizontally, you get the illusion of the cylinder rotating.
It looks like you're deforming a moving mesh.
[5/7]
5
14
369
I'm looking forward to AR headsets + hand tracking to make our favourite games even more portable :)
5
1
340
I rotate the vertices of the shavings as the knife moves. The angle can be tweaked to find the right amount of curl. [4/6]
1
8
349
I still can’t believe this thing runs at 120fps and is only 7MB.
This was a super fun project to build with
@maca_graphics and @letkma and the lovely data team here at @Shopify
Can you find all the easter eggs? Be sure to play around with it on desktop!
bfcm.shop/
16
21
363
22,046
It also works in VR 🤯
Grab a Quest or Apple Vision Pro and step into the immersive cockpit. Got to love WebXR and the amazing react-three/xr.
20
15
359
106,344
The shavings are procedurally built.
As the knife moves each frame, I find the vertex that's been "cut" closest to the top of the blade and the one closest to the bottom.
These get added to the shaving's mesh. [3/6]
2
7
316
Last week I launched a winter update to Shopify Party, our internal game.
Here's how I built the snowboarding 👇
[1/6]
18
37
338
You can see it recalculating the env map here to include the yellow book under it. Amazes me each time.
6
8
312
36,275
This texture can be used as a displacement map on the cylinder. This lets you press into the mesh to deform it.
Surface normals can then be generated in the shader from the displacement map.
I could have used tessellation here, but was too lazy 🤷♂️
[4/7]
2
9
300
I start with a shader that can project (orthographic) any object onto a cylindrical surface.
This is done by taking an object's world xyz coords, mapping them to cylindrical coords, and rendering them to a texture.
[2/7]
6
6
273
It was built with three.js and react-three-fiber. Everything is interactive and designed for delight.
This wire interaction as you switch between infrastructure metrics is *chefs kiss*
4
5
295
15,420
It's made in Unity + WebGL, with the amazing Normcore.io library powering all the networking functionality.
The core experience was built over 3 months by @byrondelgado and myself. Big shout out to our culture tools team who helped with integration & rollout! 🥳[4/6]
6
6
277
The colour of the projection is then calculated based on how far each vertex is from the surface of the cylinder. Sorta like a depth map.
By not clearing the texture every frame, you can keep track of where the hand has moved inside the cylinder.
[3/7]
3
8
248
