Three.js

Three.js r183 released 🦞 threejs.org/changelog/?r183

🏁 apex-psi-indol.vercel.app

I built a Three.js rendering study inspired by Tiny Glade’s painterly aesthetic, and got it running at 120fps in the browser. Over the past few weeks, I’ve been studying how stylized games achieve that soft, handcrafted look in real time. Tiny Glade was a huge inspiration, and I wanted to use the browser as a constraint: no compute shaders, no native GPU access, and single-threaded JavaScript. As part of this study, I implemented: - GPU-driven instanced brick walls with procedural noise jitter and elastic build animations - Tree, bush, and flower rendering with billboard card expansion, wind sway, and grow animations - Procedural grass with terrain conformance and interactive push deformation - Animated water with layered noise, interactive ripples, and Fresnel-based reflections - Procedural terrain with slope-aware triplanar materials, dirt paths, and rocks - A 7-pass post-processing stack with TAA, bloom, depth of field, painterly filtering, ACES tonemapping, 3D LUT color grading, and film grain The hardest part wasn’t writing any single shader. It was making all of these systems work together at high frame rates inside WebGL, where every millisecond counts and performance problems compound quickly across animation, materials, post-processing, and scene management. Some techniques in this study were inspired by analyzing Tiny Glade’s rendering approach, while others were original implementations built from scratch from visual reference. That contrast taught me a lot: recreating an effect is one challenge, but designing your own shaders and systems to achieve a similar feel is a very different one. This is a private educational rendering study. Some temporary placeholder content is being used during the research phase, and any public or production version would use original or properly licensed assets. Huge credit to Pounce Light for the incredible art direction and rendering work in Tiny Glade: store.steampowered.com/app/2198150/Ti… @threejs #gamedev #webgl #threejs #rendering #graphics #realtimerendering #shaderdev

finally this is starting to feel better pocketorbit.com #vibejam @threejs

My wife’s baking cookies for Easter and needed a specific half moon cookie cutter. I threw together a site that uses Three.js to design a parametric one and export the STL to be 3D printed. Custom cookie cutter in ~10 mins!

@codingandcatss Software development is fun again.

I talked to a vibe coder today. He made a game. Me: Is this done using three.js? He: (Silence) Me: Is this a platformer game? He: (Silence) Me: Did you use github? He: What is github? So, vibe coders don't know any of the processes but they can implement a working game.

@RealRohitDudi @sdis97 Yes

@threejs @sdis97 Will you show your kids what you are posting online?

I am having a lot of fun with this ThreeJS game. Will probably be spending more time on this cosy flyer game for #vibejam And btw, shaders are awesome! I highly recommend anyone building a 3D game to add some shaders to make your game look good. Here's a quick primer on the different types of shaders you can tell your AI to level up your game's graphics: - Noise-based shader for water refractions or shimmer - Fresnel shader for a nice rim lighting effect on your 3D game objects - Post-processing shader to change your game's color scheme dynamically - Post-processing shaders like the VHS effect that @levelsio use for the Drone flyer game - Shader effect to make the trees sway or objects wobble - and many more uses Shaders are incredibly versatile and useful. I would recommend you to go YT to check out some shader basics videos and come up with more creative uses for them!

Erosion and fluid dynamics are working today Going in a very different direction for @levelsio's #vibejam this time around AI assisted development has come a long way in a year and @threejs remains incredible to build with

big thanks to all the supporters of my wiggle bones library wiggle.three.tools it is being put to great use

Site by @maksvanleeuwen Model by @AnimateZach Wiggle by @KMkota0

@akirodic Got a bunch of followers from Boston Archdiocese all of a sudden 🤔

@threejs How dare you!!! Making people think about erected dick on such a sacred day!!!

@hckrclws @allenjosephaj @thebuggeddev @GoogleAIStudio Just ask the AI to update the dependencies for you 😎

@allenjosephaj @thebuggeddev @threejs @GoogleAIStudio the maintenance cliff is real, i've got a graveyard of three.js experiments that were impressive for 48 hours and then became my problem the moment a dependency updated

This is PURE MATH!! Built fully with @threejs and completely vibe coded using Gemini 3.1 Pro in @GoogleAIStudio. This is what AI can do right now. I have been vibe coding a lot of websites lately and every day these models go beyond what I thought was possible 🤯 Still in awe. Expect more voxel 3D drops coming to my feed :) Remix: ai.studio/apps/59c67a38-…

Yesterday I showed you NASA's Artemis II official app, but they don't have a 3D trajectory simulator 🤔 So I vibe coded one with Claude in an afternoon. Real JPL Horizons data (they are public). Real scale. Full mission simulation. Link 🔗👇

Collision SDF used by the agents visualized within Photorealistic 3D Tiles. The collisions are generated from OSM street data combined with the dynamic spawn and obstacle zones 🔥 TSL + WGSL + Three.js

The Easter event has started! If you want up to 50% discount on Three.js Journey, now is your chance. Details in the comments 👇

@brandonsmbs Happy Easter to you too!

Happy Easter @threejs Have a blessed day!

@Phoneeeeeeee3e @AhmedShahnab Dude, stop this.

@AhmedShahnab Want me to do the other ones on your timeline as well?

What if browser windows could feel each other? Interaction - open multiple windows, drag them over each other, and watch Just custom GLSL + stencil buffers making windows interact like living organisms. Like/ RT if you like it #CreativeCoding @threejs @reactthreefiber #WebGL #GLSL #Frontend #TechArt #Interaction

Hey everyone! New beginner three.js and Blender tutorial out! Create a cozy cafe portfolio, a little bit of TSL too. Tutorial: youtu.be/rcts2vez3vA Site: alpha-chads-cozy-cafes.vercel.app Code, Credits, Blender file, etc: github.com/andrewwoan/alp… #threejs #threejsJourney #tsl #b3d

@alightinastorm We already gave AAA graphics. The real difference is that native AAA titles get to install 80GB of high-res assets upfront.

@threejs AAA EOY possible without wasm? i say we're still on track

they said i can't vibe code a AAA game with ThreeJS Introducing secondary dynamics for animation studio Define dynamic profiles (eg hairs), add bone chains and colliders, tweak stiffness, damping, gravity and inertia per chain It reads velocity from the transform deltas of the motion and.. ya well just watch the video you'll get it, animate hair, chains, capes dynamically oh and yea it's all on github and open source ✌️ gg ez, vibe coders keep winning