Hyped about AI? Hate AI? Have literally no opinion on AI?
I made a video about AI & agentic coding, and what it might mean for you as a developer.
https://t.co/19bOerYS6f
Noise is used everywhere in games: terrain, animations, camera shake, and more.
But it can still feel like magic. How do you turn greyscale blobs into real effects?
Here are a few practical ways to use it.
#threejs#shaders
After few adjustments and thanks to #threejs TSL 💙🙏 this experiment runs on #webgpu and #webgl !
Try it with firefox to test webgl fallback : https://t.co/TFEZYchiOX
Source : https://t.co/L6vR0LUUVv
Ported Google's Draco decoder to pure JavaScript.
https://t.co/jbXeB6AzsF
4.3× smaller than the WASM build, byte-for-byte identical output, often faster once you factor in load, init and parse.
Noise is used everywhere in games: terrain, animations, camera shake, and more.
But it can still feel like magic. How do you turn greyscale blobs into real effects?
Here are a few practical ways to use it.
#threejs#shaders
For camera shake, use vector noise:
offset = vectorNoise(time);
This is just noise that gives you a 2D "random" value back. You can get the same thing by doing:
offset.x = noise(time, seed1);
offset.y = noise(time, seed2);
This gets you smooth but unpredictable movement, with no jarring jumps.
Here's the tool Anderson is talking about!
Most online tools only optimize file size, but they're still reinflated in memory.
This will optimize your GLTF/GLB assets and export to GPU-compressed KTX2, entirely client-side.
Try it here: https://t.co/BvJyySGLIl
#threejs #gamedev
Thats a combination of many optimizations together. Everything starts with the 3d mesh, that was optimized to the triangle level. I only have triangles when needed. For example, the dense forest you see is just some trees as meshes and many are instanced billboards with textures. Saves a lot of draw calls.
You need to think threejs scenes like a budget You have drawcalls and triangle count . Ideally, your triangle count should not exceed 300.000 and your drawcall not exceed 50. It is a balance that is hard to keep. But it you keep this in mind you can use many techniques to fake things so you can save some performance where is needed to use other things like post processing effects, more elements on screen, etc.
These god rays for examples They feel super integrated to the scene and looks like real god rays, but it is just a cone with a inverted fresnel shader.
This is also using KTX2 tool from @iced_coffee_dev. It was a game changer in this project.
The secret is optimizarion. I plan to show some of these techniques in my workshop soon 🤗
One of the best things about building interactive experiences with #threejs is the creative freedom it unlocks. These controls helped @dieg0liv and me to tweak the scene to our desire 😊.
In this video, I’m showcasing some of the custom scene controls I built, allowing the environment to be transformed in countless ways in real time. What I enjoy most is that these debug tools also become a great way to share the process behind the work, making it easier to understand how everything was designed and developed. I've learned a lot when other developers share how the project was constructed. So I decided to share a bit on how it works behind the scenes.
You can explore these debug parameters yourself here:
👉 https://t.co/2ENT5dcX3v
If you’re curious about any specific part of the project or want to know how something was built, drop a question in the comments. I’m always happy to share insights from the development process.
#CreativeCoding #ThreeJS #ReactThreeFiber #WebGL #ShaderArt #InteractiveDesign #CreativeDevelopment #ThreeJSJourney
Here's a list of the upcoming features in Three.js Water Pro v3. It's a big update!
✅ Improved Wave Realism — Updated spectrum produces more organic wave patterns.
✅Improve Lighting Model — completely revamped lighting model that produces realistic color changes in shallows areas and allows you to see through water surface
✅Persistent Wave-Crest Foam — Foam lingers and rolls off breaking waves.
✅Multiplayer-Ready Determinism — fixed-step simulation and syncing between clients
✅Sea Spray — attach emitters to boats, rocks, etc. to generate spray as water hits the surface
✅Rain — wind-driven streaks plus water-surface ripples.
✅HDRI Environment Maps — procedural sky has been replaced by realistic HDRI maps
✅Boat Wake — V-shaped wakes with automatic foam on breaking crests,
and much more!
My #threejs Lumen Decor Studio is getting an update. It will now support more settings and more complex scenes, thanks to the latest library updates.
I'm combining #WebGPU SSGI with light probes, giving us the best of both worlds. Real-time light bounces via SSGI, and when the camera stops moving, I bake probes to measure the average light in the room, generating fill lights that paint an envmap.
I also created a denoiser for SSGI, avoiding the previous blur that discarded the AO. Now, everything is lighter, a little noisier, but it complements indirect light well.
Live link coming soon.
BTW: The video is on my YouTube Channel in case you want to watch it in a higher resolution: https://t.co/Zr8eJ2fYfO
#creativecoding #archiviz #WebGPU