mesq retweeted
I made a 3D printed version of my portfolio car.
And yes, the wheels spin 🛞🔥
Another side quest finished ⚔️
👇 Link in reply if you have a filament printer
🤖 Made with AI
mesq retweeted
Inspired by A Plague Tale: Innocence, and built for @bruno_simon's Halloween challenge.
Still in development
- VAT-baked instanced rats
- crowd flow simulation
- hand-painted normals
- stop-motion effect
- toon shading + paper grain
Made with #threejs and #tsl
#threejsJourney
Hand-painted normals + #tsl postprocessing
Project link: mesq.me/jelly-painting/
Also here:
+ brush strokes based on color gradients
+ fixed dither noise
+ soft body wobble
+ transmission material from #threejsblocks
Inspired by @mamomiji
#threejs #webgpu
Testing #tsl and #threejsblocks
test: mesq.me/globe-tsl-blocks/
repo: github.com/mesqme/glass-wate…
btw, phones should support tilt and shake (at least iPhone)
Very cool @sea3dformat and @onirenaud
So proud of the #threejs community and so happy I got to be part of #threejsconf! Thank you everyone for the inspiring conversations (sorry if I was too excited sometimes)
And of course huge thanks to @makio64 and Misaki for creating such a beautiful event✨
Thank you team🥹 @typingclub
At @threejsconf meeting the three.js community for the fist time and the energy in the room is 🤯
Look who we ran into @cassiecodes and @bruno_simon
Come say hi to us @typingclub (edclub)
@mesqme, @Rahzell83, @zkmake , lesia___lu (instagram)
See you at @threejsconf ✌️
If you’ve ever wondered how stylized hand-painted game worlds like World of Warcraft are created, I’ll give a talk about how our 3D team at @typingclub builds hand-painted assets and brings them into Three.js experiences.
#threejs #threejsconf #webgl #gamedev
"Three.js is my brush and canvas."
Say "Hi" to @mesqme , Technical Artist of edclub👋
@typingclub
Known for his hand-painted style, he's building soft and beautiful universe on the web.
In his talk, he'll show you how his team creates these assets and how to bring them into your own Three.js worlds without sacrificing performance! 🔥
The event is in 4 days!
Join the crew 👉threejs.paris/ticket
1/2
Better late than never. The breakdown of my Utanomori experience. I tried to cover the main interesting features in the comments under this post, hope it will be helpful👀
Sharing the repo: github.com/mesqme/utanomori
Play it here: mesq.me/utanomori/
#threejs #r3f #threejsjourney
11) Tree eyes
For the eyes we place planes around each tree in Blender. They are all copies of the same quad and share the same UV, so we can use one fragment shader on any of them. In Three.js each plane with its position and rotation goes into a single BatchedMesh as the other props.
Then, in the fragment shader we create the pair of eyes, add the blink and the sideways glance animations, and we offset the phase of those animations per plane to desync them.
To avoid having all the trees look the same, we show only some of the eye planes on each tree. Which ones we show is decided by a hash seeded on the tree's position.
We also want to avoid seeing these planes from the side. We calculate the fresnel and fade the plane out as this value gets large. That way you never see the planes on the edge of the tree, thus you never see that the eyes are actually floating slightly off the tree surface.
10) Layered Music
For the music we prepare 6 looping audio tracks: 2 drums, 2 piano, 2 winds. Each instrument has a simplified and a full version. The simplified one plays as a preview, before you win that spirit's mini-game. After that the spirit sings the full version.
Every track is a layer of the same song, so all of them have to stay perfectly synced. To make that work we start playing all 6 from the very beginning of the experience. They are all the same length, 12 seconds, and they loop perfectly, so we can keep them running forever.
During the game we only change their volumes, but never stop the tracks. For example, when you get close to the drum spirit, we raise the volume of the simplified drums. When you win the mini-game, we drop the simplified version's volume to 0 and bring the full version up.
Music itself was provided by @maninalex (maninalex.com/)
9) Camera movement
Let's separate the experience into 4 objects:
- camera + camera target
- visible round ground + props
- surrounding sphere with stars
- character
When we press WASD we move the character. The camera target, the center of the visible ground circle and the origin of the surrounding sphere are all the same point, and that point lerps toward the character's position. The camera position is that point plus an offset.
Moving the camera group and the world toward the character like this is much better than just copying character's position, especially if you use physics (there is none in this project though). This lerp hides the desync between the visual and the physics world.
8) Spirit following
For the spirit-following mechanic we record the main character's path. Every time he moves more than a threshold distance we save a new point position and the total distance the character has already walked.
Then each spirit gets its own distance it should keep behind the character along that path (2.4m, 4.1m, 5.8m). That distance usually lands between two points, so we place the spirit's target there — this is the point the spirit is always trying to reach.
The target only moves when a new point is recorded, so it jumps forward in small steps, creating abrupt movement. To hide that, the spirit lerps toward its target every frame. We rotate the spirit in a similar way: we take the direction of the line between those same two points and lerp the spirit's rotation toward it.