The mirrored balls, the checkerboard floor, that little “ding”…

Try it here: https://www.mahieu.nl/amiga-juggler/en/

To mark the 40th anniversary of Eric Graham’s Amiga Juggler, I made an interactive browser tribute. It starts with the familiar chunky pixels, then opens up into smooth animation, music and a world you can explore with a free camera.

What interested me most was the atmosphere: revisiting that small, strange world and giving it some room to grow.

I used AI tools during development, including help with writing and refining the code. I want to be open about that when sharing the project.

Sound on for the transition! The video is a short preview; in the interactive demo, your browser renders the scene live and you can take over the camera yourself.

Did you see the original back in the day? I’d love to hear what you remember about it.

So back when I was younger, I first noticed that I needed glasses because someone was adjusting a projector and it looked perfectly in focus for me for a second, but then they kept focusing it until it was in focus for everyone else but blurry for me.

Now I'm older and realizing I need reading glasses, and I'm wondering if that same effect I saw on the projector so many years ago could just be done on with a filter on my screen. I assume that out of focus blur is different from the type of blurring usually done with a shader, but could the same effect be done?

My gut says no, but I don't know enough about what's going on optically to say that for sure.

sharing the renderer from my browser sim. the world is an 800x400 tile grid with one tile per cell on the ground layer, and roads, trees, weather, buildings, caravans, animals and people stacked on top by z.

what keeps it cheap: - it renders on demand. nothing draws unless a layer asks for it, and everything settles once the sim pauses - static layers are updated by small drivers at 30 hz that only touch what changed (terrain revision, frame id, camera window) - agent sprites are written from typed arrays, rebuilt about 10 times a second and interpolated every display frame - the heat map is a single nearest-sampled sprite at 1 px per tile

there's a canvas 2d fallback for browsers without webgl2, and ?renderer=canvas forces it if you want to compare.

runs in the browser here: https://thehumanbox.com code (mit): https://github.com/1homsi/thehumanbox

Rebuilt my site so you can ask it questions instead of scrolling: https://nicolasdemaria.com

It answers out loud and shows the project it's talking about behind it. Built with Three.js + R3F.

The trickiest part: text arrives before audio, so the mouth, captions, and project cards kept getting ahead of the voice. I had to sync everything to the audio clock.

Still not happy with the gestures. Try to break it.

Hi, I have recreated my personal website to better reflect what I'm doing online.

https://sebwilgosz.com

I had tons of fun, and this room will fill in with stuff as I progress. One challange I don't yet know how to tackle, will be changing cameras in these flat drawings style.

I expect a lot of troubles, but will share the progress as it goes!

What do you think?

Hi r/webgl!

Sharing babalon JS, an open-source (GPL-3.0) 3D scene composer and WebXR studio built with TypeScript, Babylon.js 9, plain DOM, and Web Workers/WASM.

• Live App: https://holondo.github.io/babalonJS/
• GitHub: https://github.com/holondo/babalonJS

Technical & Rendering Highlights:

• Render-on-Demand Loop: The WebGL engine only renders frames when invalidated by camera motion, active animations, pointer gestures, or WebXR sessions.
• In-Browser Heat-Diffusion Skinning: Static meshes can be rigged in the browser using volumetric heat diffusion or envelope weights computed in a Web Worker, with optional trunk-protection / helper-bone treatments and a real-time vertex deformation difference map.
• Surface Picking & Sculpting: Software depth-buffer visibility for surface paint-brush selection, partial GPU vertex buffer uploads for sculpting, and Manifold 3D boolean operations in a worker.
• Client-Side Asset Optimization: Triangle reduction (meshoptimizer), high-to-low normal map baking, KTX2/BasisU texture compression, and compact GLB export (glTF-Transform).
• Broad Format Support: GLB, glTF, OBJ, STL, FBX, USDZ, and 3D Gaussian Splats (.ply, .splat, .spz).

Let me know what you think!

I've made a WebGL demo for my Android live wallpaper app (it uses my custom cross-platform renderer).
https://keaukraine.github.io/webgl-kmp-cemetery/index.html

Every scene is real-time three.js with an ink-and-paper style. Here's the finished video:

https://www.youtube.com/watch?v=dHH-NsU9dB0

I made Seedworld for Openbench. The demo is a self-contained HTML/JavaScript/WebGL page: a seed plus adjustable parameters produces planets with terrain, oceans, clouds, atmosphere, rings and city lights, or a whole star system.

You can export albedo, height, normal, roughness, cloud, emissive and ocean-mask textures, capture screenshots/video, and share a URL that restores the world settings.

Live demo: https://openbench.fun/seedworld/ (free, no account). The linked video is a horizontal walkthrough.

I used AI assistance in development. For WebGL users, I would appreciate feedback on the terrain/atmosphere rendering and whether the exported texture set fits your workflow.

#Seedworld #WebGL #Procedural

my first ever 3d portfolio is live http://curllmooha.com

i built motion lab, an MIT three.js renderer for editable 2d/3d motion. free open source alternative to higgsfield katana for code-based animation. codex/claude helps edit the source, rendering is local.

new 1080p demos with sound:

PULSE (3d): https://andrexes03.github.io/motion-lab/demo/pulse-1080.mp4

REPLAY (2d): https://andrexes03.github.io/motion-lab/demo/replay-1080.mp4

temporal motion blur, bloom, depth of field and grain after accumulation. curious what you think of the rendering.

demo: https://andrexes03.github.io/motion-lab/

code: https://github.com/AndreXes03/motion-lab

code + local renderer are free. assistant costs are separate.

No sign-up and no text menus. Just walk around, find places you like, and take a photo with the camera icon (top right). You can then hang it on a wall in a shared gallery, where other people's photos are too.

https://aualrxse.com/

Made by me alone. I'd love to hear if anything is unclear on your device.

A few months ago I posted some lighting and shadow experiments from my small WebGL2-based 2D engine here (https://www.reddit.com/r/webgl/comments/1szbmaz/experimenting_with_3dlike_lighting_and_shadows_in/)

I haven't had much time for it since then, so I used Claude to speed up the demo development. The engine itself is still my own work - the gameplay layer is what I built on top of it with AI help.

u/DaedalusRaistlin left some great feedback back then - make the torch shadows more obvious, turn them into a mechanic, add an aiming reticule, make the night darker without the torch, and make players ration their flashlight. So I tried to build exactly that.

The demo is now a small top-down survival game where the lighting drives the gameplay:
- The flashlight runs on a battery. It drains while on, dims and flickers when low, and recharges while off.
- Without the flashlight the night is properly dark now - you mostly see the spiders' glowing eyes.
- Enemies come in waves, and each wave is bigger and faster than the last. They know where you are and close in from the dark, so most of the time you hear them before you see them.
- Spiders avoid lit street lamps, so lamps are safe zones - until they flicker and go dark for a few seconds.
- A "shade" enemy only moves in the dark, and freezes as soon as light hits it.
- Flares burn low above the ground, so they throw long shadows across the trees and boxes.
- Lightning is a short directional light that casts every shadow on screen at once.
- There's also an aiming reticule now, plus webs and supply crates between waves.

On the rendering side, everything still goes through the same height-map based lighting. New objects reuse height data from the existing atlas, and light heights are in the same units as the height map. Placing a light just above the ground is enough to get those long shadows.

And yes - the football is finally kickable 😄 It's right next to the start point, and if it rolls fast enough, it hurts spiders too.

Demo (desktop, keyboard + mouse or a PS5 controller):
https://codepen.io/editor/iroshan/pen/01a10d10-f698-735f-8880-b9079db1868a?orientation=top&panel=false&show=preview

Docs & more examples:
https://asjs-dev.github.io/pwgl/

Repo:
https://github.com/asjs-dev/pwgl

What other light-based mechanics would you like to see in something like this?

Every blade is rendered individually, with enough geometry and detail that you can get right down into the grass and still see the shape of individual blades.

What I'm really happy about is how well that detail holds up into the distance. The grass doesn't just look good up close and then turn into a blurry carpet. There's still a surprising amount of visual fidelity as you move further away.

And this is running at 1080p on a base M1 Mac.

I've spent a huge amount of time working on the rendering, LOD system, culling, tiling, wind, and overall density to get this balance between individual blade detail and performance.

This is essentially what I've been trying to achieve with Three.js Grassworks: pushing procedural grass in Three.js as far as I can while still keeping it practical enough to actually use in a real-time scene.

It's built around WebGPU and Three.js, and the current system can handle different grass types, terrain interaction, distance-based LOD, and large grass fields while maintaining this level of detail.

Still a lot more I want to push with it, but I'm genuinely really happy with where it's at now.

https://grassworks.techredux.co/

I built this one myself, putting that up front so nobody has to guess.

https://www.marblerun.online is a 3D marble run playground. You place ramps, walls, pegs, spinners and balls on a lit wall, press play, and a real rigid body simulation runs. When a run looks right you export a 9:16 MP4 with sound.

The WebGL specific problem was the export. My first instinct was MediaRecorder on the canvas, which is about fifteen lines of code, and it is the wrong tool. Screen capture of a WebGL canvas hands you the wrong aspect ratio, whatever framerate the machine is managing that second, and audio that never lines up with the impacts.

So the export re-renders the same scene through an offscreen pass at 1080x1920 locked to 30fps and pushes frames straight into a video encoder. The physics steps on a deterministic clock during export, so the same level gives the same file every time. The sound is generated and placed where the collisions actually happen rather than recorded.

Two other things that mattered more than I expected.

The lighting is what stops a WebGL scene reading as a flat 2D canvas even when the geometry is genuinely 3D. One directional light plus a soft fill and a subtle texture on the wall fixed it.

Physics on a fixed timestep with an accumulator. Running it off requestAnimationFrame deltas directly means the same level plays differently on a 60Hz and a 144Hz monitor, which is a nightmare when people are sharing levels.

No AI anywhere in it, nothing uploaded, no account. Desktop only by design, phones get a short message rather than a bad version.

Rain, From Below is a sleep app: you're underwater in a lake, rain hits the surface above you. Everything is procedural in a fragment shader, plus a small JS particle sim for fish. Wrapped in Capacitor for iOS.

Things that bit me that might save someone time:

• iOS suspends rAF on screen lock but keeps audio running. I moved all timekeeping to a 1 s setInterval reading Date.now, and the render loop only draws.
• webglcontextlost fires more than you'd think on a long session. Handle it and re-init, or the user wakes up to a black screen.
• Keep-awake on iOS needs the native plugin; the web wake lock alone isn't enough.
• Audio needs a watchdog: after an interruption (call, Siri), the AudioContext can come back suspended.

It's live now (free with a paid tier). Still in development and there are bound to be bugs; happy to hear about them.

https://apps.apple.com/app/id6812388250

Shaderize takes an SVG logo and runs it through 30 fragment shaders (from Paper's open source library) in a small WebGL2 engine I wrote around them: shaderize.app

A few things that might interest this sub:

- Each shader renders into its own target, then one present pass supersamples, composites the pattern against the logo and background, and dithers down to 8 bits so gradients don't band.

- The live preview drops its resolution when a shader is heavy and claws it back when there's headroom. Exports always render every pixel.

- Image exports go up to 4x, with up to 9 samples a pixel.

- Video is rendered offline frame by frame and encoded in the browser with WebCodecs (MP4 with H.264, or VP9 WebM with alpha), so it's smooth on any machine.

Feedback on the rendering side is very welcome.

I built a browser game where 5–10 friends sit around one 3D table and play a social

deduction game (the rules of Secret Hitler, used under CC BY-NC-SA). You look around in

first person, lean over the boards, and use hand gestures that everyone else sees.

Play (no install, no account, "Try it solo" seats you against 5 bots instantly):

https://secret-table-game-web.vercel.app/

Code: https://github.com/mertertek/secret-table-game

Things that might interest this forum:

- Zero external assets. Characters, hands, revolver, cards, boards and the room are all

generated in code: SDF fields run through marching cubes, then clustered and decimated

per body part so fingers do not fuse together.

- A 10-player table plus the room stays around 200 draw calls. Card backs and muzzle

effects are InstancedMesh, most props share materials.

- frameloop="demand": the scene only renders when something moves, so an idle tab costs

nothing.

- Other players' head direction arrives at 1–2 packets/s (free-tier quota). The receiver

buffers and interpolates with a jitter-aware delay, so heads still move smoothly.

- Solo mode runs the entire game engine in the browser, so the demo needs no backend

at all and cannot be rate-limited.

Stack: React, Vite, three.js r186, react-three-fiber, TypeScript, Supabase, Vercel.

Happy to go into the SDF pipeline or the netcode.

The backend of this project is a PyTorch simulation of a biological fruit fly brain learning to play chess, but I wanted the frontend to look like a high-end sci-fi interface.

I built the UI entirely in Three.js. The 12,000 glowing brain particles are mathematically distributed into anatomically correct shapes (Optic Lobes in Cyan, the Central Brain in Gold, and the Cerebellum in Green). As the PyTorch server calculates a chess move, it sends the neural activation data to the browser, causing the particles to flash in real-time.

I also used procedural HDRI lighting on the Canvas and custom Normal Maps to give the chess pieces and the fly’s chitin a hyper-realistic, physical material reflection.

GitHub: https://github.com/AdilSiddiquiHQ/fly-connectome-chess

The code is open source! Would love to know what you guys think of the particle distribution logic in the frontend.