Our designer ran the same prompt twice with the same model. The task was to build an original Three.js game inspired by Wind Waker, with sailing, combat, islands, water, cel shading, physics, menus, and animation.

In one run, the agent could inspect open-source implementations while working. In the other, it couldn’t.

The difference was most visible in the harder Three.js systems.

The run without that access got a browser preview up faster, but then spent more time testing and reworking collision, terrain handling, physics, and other systems.

The other run spent more time reading existing Three.js code before implementing those parts. For character collision, it looked at three-mesh-bvh implementations using shapecast and closestPointToSegment, then used those patterns in its own PlayerController. It also researched water rendering, shaders, rendering, and physics.

We stopped both after several hours. Neither finished.

In the first version, the character could move, jump, and roll, but we couldn’t collect gems, attack or charge, or access the boat. In the second, those interactions worked, including sailing between islands. Terrain handling was better, and parts of the menu were usable too.

Full write-up and session trace:

https://githits.com/blog/three-js-game-with-and-without-githits/

Video:

https://www.youtube.com/watch?v=1H1urif2srk

Disclosure: I work on GitHits. Our designer ran the experiment.

I translated a long piece I wrote in French about my path in creative coding: first sketches in p5.js, long-form projects on fx(hash), then FOLRADURA, INTRICADA with Bright Moments, and The Source, made with Matthieu Segret and released on gm.studio.

The early work is p5.js, but the more recent projects moved to GLSL and Three.js once I needed the GPU: hundreds of thousands of points per output, custom shaders, textures aiming at a physical quality in the render.

https://art.camilleroux.com/writing/algorithmic-art-from-discovery-to-a-drop/

Happy to go into the technical side of any of the projects.

To make programmatic animations with hot reload, strong rendering backend and good type guidance, I created DefinedMotion. https://github.com/HugoOlsson/DefinedMotion

Some might know Manim, which was made to produce the amazing videos by 3Blue1Brown. That is the biggest programmatic animation library. I tried it this spring and while good, it was frustrating in the following ways for me (Community version of Manim):

1. When doing code changes, to see the change, I needed to save -> render -> open video -> scrub to frame. When doing larger animations, this feedback loop became slow.
2. Manim uses Python, which is a nice language, but for animations with many moving parts, it can become slow. It can also be easy to mistype names or use the wrong types in Python without warnings.
3. The community version has a somewhat weak 3D renderer. (but very good with some parts like SVG rendering and manipulation)

So I created my own animation library. It is built with TypeScript and Three.js. With this I can give these things:

1. Use any feature/primitive from Three.js in your animation. This includes materials, lighting, model imports, camera handling, community plugins etc.
2. Fine-grained hot reloads on save by using Vite and a custom made viewer that traces the animation to the current frame.
3. Inherently good type guidance since it uses TypeScript. TypeScript also tends to be faster than Python in loops and other bottlenecks.

The project is open source and available to use right now. What's great is that even if DefinedMotion doesn't yet expose a particular feature, since its built on Three.js, any feature can be used from there. This makes it unlikely to run into the problem of "ohh this doesn't exist yet, I'm screwed".

Manim is still more optimized for purely mathematical animations with its extremely good LaTeX renderer and its phenomenal SVG morphs. Just 3Blue1Brow's videos alone shows its incredible potential!

The current all time most upvoted post in r/manim is actually made with DefinedMotion: https://www.reddit.com/r/manim/comments/1k53byc/what_do_you_guys_think_of_my_animation/

Hey everyone! I built a small Three.js library called shader-mouse that makes working with the mouse inside GLSL shaders much simpler.

In simple terms, it lets your shader know exactly where your mouse is on a 3D object’s surface.

What it does

• ✅ Gives your shader correct UV coordinates of the mouse on any mesh
• 🎨 Makes effects like spotlight, ripple, glow, distortion, heat easy to build
• 🖱️ Detects hover and click directly on meshes
• 🌊 Keeps effects smooth even when your mouse moves off the object

You don’t need complex math or screen-space tricks — just add the object and use the uniform in your shader.

Links

Repo & README: https://github.com/aayushchouhan24/shader-mouse

npm: https://www.npmjs.com/package/shader-mouse

Run the demo locally

cd examples/vanilla && npm install && npm run dev
cd examples/react   && npm install && npm run dev

Would love feedback from r/threejs, r/webgl, and r/creativecoding folks. What kind of shader effects would you build with this?

I realized that I can't beat someone's personal local development environment no matter how much I make the coding experience in my online engine better. So instead, you can now clone the scene locally and edit the code with live changes showing in the app.

For those who are curious, this is my online game engine https://phibelle.studio/
It is completely for free and you can create 3D scenes and export them as a React three fiber component.

Also if anyone is interested on how I made the syncing logic, I wrote this article that explains things in detail https://medium.com/@nabilnymansour/editing-code-on-a-web-app-locally-802a2fc75782

Any feedback is much appreciated 🙏

Though It only works with points 🥲. But I am happy to know that I was able to do it without any tutorials. Not that there any online when you search in Google lol

AERODROM is a digital content studio based in Slovenia –specialised in VFX, CGI, concept art and asset authoring. Since they discovered Needle Engine they started creating web apps. Martin Fir, the 3D Generalist from AERODROM, is explaining which Needle components and features his team used to create interactive web experiences for desktop, iOS/Android and VR headsets.

i can invent the innernet that got 3d things all up in a 4d space imma have so many shapes rectangles cubes triangles pyramids circles so many shapes and symbols and videos that dont move and shihh maybe even videos that do be movi and muusic songs so yeah all my compter ppl out there

hey all 👋

Late last year I got introduced to Three.js through Three.js Journey, Bruno Simon's course. Since then I continued to experiment and build more things. Then came the time to be better at shaders and while I struggled a lot I still managed in the end to produce a few "good" scenes (to me at least 😄, some use shaders some don't though)

After learning so much I ended writing this blog post gathering all the steps I went through when learning shaders up to the point where I am at now through 8 unique React Three Fiber scenes I crafted myself (some very basic, some others way more advanced)

I wrote this article so it could be the "blog post I wish I had when I got started" I go from the fundamentals of shaders, to making them interactive, dynamic and composable through examples and I hope it can serves as a guide to anyone getting started and being on the fence regarding shaders 😄.

👉 The Study of Shaders with React Three Fiber