r/webgl • u/ImmediateChallenge94 • 1d ago
macOS genie effect as a vertex shader: a 16×64 grid that bends, then drains row by row
r/webgl • u/ImmediateChallenge94 • 1d ago
r/webgl • u/qwertyalp1020 • 4d ago
Play in browser (no install): https://librecorsa.org
GitHub (MIT): https://github.com/KhazP/librecorsa
LibreCorsa is a racing sim I'm building solo on WebGL2 with Three.js.
- Rendering: AgX tone mapping, physically based atmosphere and volumetric clouds (`@takram/three-atmosphere` + `three-clouds`), a wet-road water film that dries along the racing line, a rubbered-in groove, normal-variance specular AA on water, live cockpit mirrors and wheel screens.
- Geometry: meshopt-compressed circuit GLBs that keep the hidden physics colliders bit-exact (`?colliders=1` to see them), and 4-LOD instanced foliage (~14k trees in 9.7 MB on RISE Motordrome).
- Sim: 500 Hz fixed-step 6-DOF physics, Pacejka combined-slip thermal tyres, WebRTC P2P multiplayer, gamepad trigger haptics, and experimental WebHID wheel force feedback.
I hope you guys like it.
r/webgl • u/kskbaits • 4d ago
Everything you see is generated at load in one ~650 KB HTML file with Three.js r160: the fish meshes, the scales
(painted one by one on a canvas), the plants, sand, driftwood, caustics and the post-processing. No glTF, no
images, no video.
The fish are simulated, not animated: two bass (a largemouth and a smallmouth) get hungry, hold by cover, stalk,
and strike with a suction feed that only takes prey whose body depth fits their gape. The shad school and burst
apart when attacked.
Day, night and the weather follow the real clock and weather at Lake Fork, Texas.
It runs 24/7 on YouTube, and the chat can drop in shad (!feed) or cast a lure.
Try it in the browser: https://ksk-baits-bass-aquarium.pages.dev
Live: https://www.youtube.com/@kskbaits/live
Happy to answer questions about any part of it (the fin shaders and the strike were the hardest).
r/webgl • u/Janet_believer1998 • 6d ago
After a discussion on another sub about whether 3D on websites is worth it, a lot of people said it’s mostly a gimmick, except in a few cases like furniture, cars or anything where size matters.
So I’m curious: what’s a real, live website (a store, a product page, a booking site, anything) where 3D actually made the experience better?
Bonus points if it also loaded fast on your phone 😄
r/webgl • u/DevelRoth • 7d ago
Hi!
Doodling and burning tokens. In the end it's a nice demo, maybe will inspire someone with such effects.
Don't forget to enable the sound, bottom right.
I had an idea in my head I had to describe it literally close as I could.
Cheers!
r/webgl • u/Then-Creme9892 • 9d ago
Hey everyone! I wanted to share a browser-based aerobatic air race project I've been building, powered entirely by Three.js and custom WebGL pipelines.
The project features a full flight loop: a 360-degree garage orbit camera view, dynamic M-14 engine sound states (E key trigger), low-altitude valley slaloms, and precise runway touchdown physics.
How I built it: For the visual pipeline, I handled all the 3D asset breakdown, modeling, and environment design using Blender and LEGO Studio. For the architecture and codebase, I paired up with my development stack to fast-track the coding loop, optimize draw calls, and build out the flight physics logic directly in Three.js. For the soundscape, I handled the audio design and procedural states to match the flight pacing.
Would love to hear your thoughts on the Three.js implementation, performance metrics, or the control scheme!
r/webgl • u/alphapokemonop • 10d ago
I made a liquid glass UI effect for the web(trying to copy Apple because thats what the world do)
Webgl helped me made it and hence I decided to make Mac for web too (inspired by windows 11 in react made for web)
I know you have seen many professional people make it, many guys on github, so I tried to make it as realistic and satisfying as I can


r/webgl • u/Beginning_Remote_474 • 12d ago
Hi everyone,
I wanted to show the digital output of my building configurator, PrintHaus. The examples are a half-timbered house, an English manor house, a defensive tower and a factory hall.
The building geometry comes from a deterministic parametric generator, not from generative AI.
The building is configured in the browser, with controls for its footprint, storeys, roof, openings and facade details. The GLB export contains the assembled scene with its project colours. It is separate from the print export, where parts have to be prepared for a printer.
The screenshots show the saved GLB files opened in CAD Viewer. There is one image for each building. The printable versions linked below are HO-scale examples.
One practical export choice is how much surface detail belongs in the mesh. Compact uses normal maps for surface relief. More detailed options retain finer geometry. The compressed options use Draco and WebP; an uncompressed option uses PNG images without Draco.
For people putting buildings into interactive web scenes, which is usually more useful to you: a lighter mesh with baked surface detail, or detailed geometry that still holds up close to the facade?
PrintHaus: https://printhaus.app/en/ Free registration includes a first free export for personal use.
Printable example files: Half-timbered house: https://makerworld.com/en/models/3483427-half-timbered-house-1-87-h0 English manor house: https://makerworld.com/en/models/3483219-english-manor-house-1-87-h0 Defensive tower: https://makerworld.com/en/models/3483497-defense-tower-1-87-h0 Factory hall: https://makerworld.com/en/models/3483425-factory-hall-1-87-h0
r/webgl • u/OkRepublic4506 • 21d ago
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.
r/webgl • u/BagOfWetToiletPaper • 22d ago
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.
r/webgl • u/Actual_South_2484 • 22d ago
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
r/webgl • u/AgreeableTreacle8851 • 23d ago
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.
r/webgl • u/sebwilgosz • 26d ago
Hi, I have recreated my personal website to better reflect what I'm doing online.
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?
r/webgl • u/Adventurous-Case-474 • 27d ago
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/
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!
r/webgl • u/gpeyton89 • 28d ago
Every scene is real-time three.js with an ink-and-paper style. Here's the finished video:
r/webgl • u/keaukraine • 28d ago
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
r/webgl • u/LumibakoGames • Oct 16 '26
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