mesq retweeted
Sometimes all you need to scare rats away is a goose with a torch. 🪿🔥🐀
14
26
515
33,653
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
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
1
3
24
1,912
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
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
49
499
3,572
159,805
Testing #tsl and #threejsblocks
test: mesq.me/globe-tsl-bloc…
repo: github.com/mesqme/glass-w…
btw, phones should support tilt and shake (at least iPhone)
Very cool @sea3dformat and @onirenaud
test: mesq.me/globe-tsl-bloc…
repo: github.com/mesqme/glass-w…
btw, phones should support tilt and shake (at least iPhone)
Very cool @sea3dformat and @onirenaud
0
7
81
5,976
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)
0
1
20
2,014
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
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 s without sacrificing performance! 🔥
The event is in 4 days!
Join the crew 👉threejs.paris/ticket
1/2
1
4
38
3,399
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/utanomo…
Play it here: mesq.me/utanomori/
#threejs #r3f #threejsjourney
Sharing the repo: github.com/mesqme/utanomo…
Play it here: mesq.me/utanomori/
#threejs #r3f #threejsjourney
27
32
255
34,281
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 agment 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.
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 agment 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.
0
0
6
273
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 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)
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 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)
0
0
4
270
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 ng 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.
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 ng 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.
0
0
4
243
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 er 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.
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 er 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.
0
1
4
252
7) See-through
The main character, the spirits and the music stones should always be visible to the player, not covered by props like stones or trees. We take each "should be visible" object, project its position to screen space, and also get its distance from the camera. Then e props' material.
In the shader we check if the fragment of the tree or stone is closer to the camera than the "should be visible" object, and then check if that fragment falls inside a radius around the object's projected position. If both are true, we discard the fragment.
We correct that radius by the distance to the object, so the hole stays the same size around the object however far away it is from the camera.
Visually we get a cone with its apex at the camera and its base at the "should be visible" object center. Every part of a tree or stone that overlaps this cone gets discarded.
The main character, the spirits and the music stones should always be visible to the player, not covered by props like stones or trees. We take each "should be visible" object, project its position to screen space, and also get its distance from the camera. Then e props' material.
In the shader we check if the fragment of the tree or stone is closer to the camera than the "should be visible" object, and then check if that fragment falls inside a radius around the object's projected position. If both are true, we discard the fragment.
We correct that radius by the distance to the object, so the hole stays the same size around the object however far away it is from the camera.
Visually we get a cone with its apex at the camera and its base at the "should be visible" object center. Every part of a tree or stone that overlaps this cone gets discarded.
0
0
5
294
6) The paintery edge
We take a point on the ground that follows the character with a lerp, and pass it to every material except the surrounding sphere and the character himself.
Inside every shader we draw a circle around that point and discard everything outside it. Then we . We use world position to sample the noise, so we see a smooth wobble effect on the edge happening when we move the character.
Then on top of that we add a paintery texture as an additional discard mask, with some fading distance. For the ground we sample this mask in world space along X and Z. For the props we sample it in screen space instead, to avoid the texture stretching vertically on tall objects like stones or trees.
We take a point on the ground that follows the character with a lerp, and pass it to every material except the surrounding sphere and the character himself.
Inside every shader we draw a circle around that point and discard everything outside it. Then we . We use world position to sample the noise, so we see a smooth wobble effect on the edge happening when we move the character.
Then on top of that we add a paintery texture as an additional discard mask, with some fading distance. For the ground we sample this mask in world space along X and Z. For the props we sample it in screen space instead, to avoid the texture stretching vertically on tall objects like stones or trees.
0
1
5
318