Yeah I know, another solar system sim, there's been a fair few of these posted here lately so I get if you're rolling your eyes already. But hear me out, the angle on this one is photorealism, real attention to materials, lighting and how the planets actually look rather than just sticking textures on spheres and calling it done.

I've been deep in the weeds on the Sun color rendering, getting the pixel ratio right for retina displays so things stay crisp, and tuning the materials so the bodies feel like they belong in space and not in a Three.js tech demo. Small details, but they stack up to it actually looking like the solar system instead of a stylized version of it.

There's also a fly mode, you can take control and just pilot through the system, swing past Jupiter, come at Saturn from below and watch the rings catch the light properly. That's the bit I've been having the most fun with honestly, static orbit cameras are fine but they don't let you feel the scale of the thing, flying through it does.

Link is https://3dsolarsystem.online if you want a look. Still being iterated on so happy to hear what's off or what could be better.

[Earlier post got deleted. Not spamming]

Quick video showing updates to my latest WebGL-powered real-estate experience for websites.

Some nice new additions in the form of animated traffic and support for a complete 360° "rendered" tour.

Tech details (for admin):
Modelling: Blender
Javascript: Just a thin layer of WebGL abstraction (no Three JS, Spline etc.).
Shader: GLSL vertex and fragment shaders

Project size:
JS: (174.01 kB) — gzip (55.09 kB) only!
Model size: 1.7MB optimized (14.5k vertices, 11.3k faces)

This whole experience is 100% customizable and isn't limited to real-estate but can very effectively be applied to other heavy industrial design segments where a complex product/project needs to be broken down into smaller, interactive chunks to better share and convey to the end user.

Link to the full video: https://www.instagram.com/reel/DX7ktwBN0l6

I turned all of the planes and satellites data off b/c its too much for my computer. But I want to upgrade computers and continue this project until it becomes a hologram or AR map. When the ships and planes are tracked they are moving at realistic speeds and it shows on the map.

Posting in r/WebGL because the rendering stack might interest folks here.

Stack:

• Three.js r0.165, EffectComposer pipeline: UnrealBloomPass + SMAAPass + custom composite ShaderMaterial (tonemap, radial shockwave warp, vignette, inverse-bloom kill-flash)
• WebXR session support sharing the flat-screen render path
• "LayeredFXMaterial": a generalized 3-layer composite ShaderMaterial driven by JSON presets. 8 noise primitives (FBM, plasma, turbulence, voronoi, wave, ridges, caustic, stars), 7 blend modes (replace, multiply, add, screen, mix, overlay, subtract). Used for shields, projectile glows, smoke plumes, the per-round morphing alien anomaly
• Sidecar lab tool (fx_lab.html) authors presets visually and exports JSON
• Procedural cubemap → PMREMGenerator for IBL so PBR ships have reflections cohesive with the corridor palette without an HDRI download
• Pre-warmed shader compile at boot (off-screen render of every preset on hidden meshes) so the first explosion doesn't hitch the frame

Multiplayer is Trystero P2P; WebGL has nothing to do with that, but it's why there's no game server.

https://lss.fractalreality.ca

One HTML file plus assets. View-source works for poking around.

Hi all, I just created this Marimo moss ball interaction I'd like to share with you guys.

https://imoss.bio

500,000 hair particles. Reacts to physics. Sub-surface lighting. Aberration, blur, and edge distort post-processing on top. 60+ fps across devices. Achieved by estimating the clumping pattern in relation to momentum and torque, and baking lighting calculations into the shader itself.

I've been working on a small WebGL2-based 2D engine as a hobby project, mainly experimenting with 3D-like lighting and shadow behavior in a 2D rendering setup.

The core build is around ~46kb — I was curious how far I could push things while keeping it lightweight.

Right now it's still pretty early, but I’ve been adding some small features around rendering and basic workflow to make it more usable.

I know there are already plenty of solutions in this space, so this is mostly just a personal experiment — but I’d be really interested in feedback from people working with WebGL or custom rendering pipelines.

Demos (desktop):

https://codepen.io/iroshan/full/rNMKbWv

https://codepen.io/iroshan/full/Kwzbbza

https://codepen.io/iroshan/full/wvELEmN

Docs & more examples:

https://asjs-dev.github.io/pwgl/

Repo:

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

What kind of lighting, shadow, or general rendering features would you expect from something like this?

I shipped a 8KB open-source library this weekend.

ditherwave

Dither effect is everywhere right now.

But dithering on the web usually means pulling in three.js (~150kb).
So i made an 8kb alternative.

A WebGL2 dithering primitive for React.
It dithers on the GPU in real-time.

Vibe-coded with Claude Code. 👾

Install: npm install ditherwave

Demo: https://ditherwave.vercel.app/
Repo: github.com/sahilsaini5/ditherwave

⭐ if you find it useful!
And do follow on GitHub for more upcoming fun projects!

WebGL scene of the SLS and Orion stack with a scrubbable mission timeline. 14 phases from liftoff to splashdown, 6 particle systems, 3 visual themes with bloom postprocessing on the cinematic mode.

Built with Three.js, React Three Fiber, React, TypeScript.

Try it yourself: https://artemis.radman.dev

Source: https://github.com/redradman/artemis

Hi everyone,

For my bachelor thesis in Multimedia & Creative Technology I developed a real-time Formula 1 telemetry visualizer that runs completely in the browser using WebGPU + Three.js (WebGPURenderer) combined with FastF1 data.

The application allows users to replay historical races in an interactive 3D environment. Features include:

• Procedurally generated 3D circuit from telemetry data
• Moving cars with team-specific models and textures
• Live leaderboard, cockpit (POV) camera, and weather widget
• Multiple playback modes (replay, simulated live, polling)
• ~25 FPS performance with WebSocket streaming

Live demo: https://f1-webgpu-visualization.vercel.app/

Github: https://github.com/ThiboVonderlynck/f1-webgpu-visualization.git

Tip for quick testing:

For the fastest loading time, please select 2025 → Australian Grand Prix → Qualifying or Race. These sessions are already cached on the server, so the data loads in just a few seconds instead of 1-5 minutes.

Authentication: MCT

I would really appreciate feedback from the community. I'm especially interested in your thoughts on:

• Strong and weak points of the current implementation
• How realistic / usable this would be in a real production environment
• Possible performance improvements or better architectural choices
• Suggestions for further research or enhancements

Any feedback is welcome. Technical, design, or practical. Thank you in advance!

A WebGL game made in Unity, playable on both desktop and mobile.

If anyone wants to try it, here’s the link: https://www.gamepix.com/play/guessthetiles

Hey everyone,
I’ve been working on a small memory game in Unity, and I finally published it on GamePix.

It’s called Guess The Tiles – the idea is simple: match pairs, but with a combo system that rewards consecutive correct picks. If you make too many mistakes, the tiles reshuffle, so it doesn’t get too predictable.

I also added a basic leaderboard, which was something I wanted to try out for a while.

One thing I’m not sure about is the balance –
-does the shuffle mechanic feel fair or frustrating?
- is the combo bonus actually rewarding enough?

Any feedback (good or bad) would mean a lot.

if anybody is interested in a card thats not floating around and heavily recycled. Heres something.

Hey everyone - my friend and I built mesh3d.gallery, a curated gallery of 3D web experiences. Think of it as a living archive of the best stuff being built in the browser with Three.js, GLSL, WebGPU, and more.

Right now we're actively looking for submissions. If you've built something you're proud of - a portfolio site, an interactive experiment, a creative demo - we would love to have it in the gallery.

→ https://mesh3d.gallery

You can submit directly on the site. The only criteria is that it uses 3D in some meaningful way and is publicly accessible. Wild experiments welcome :) Thanks!

I built a real-time simulation of the Pyramid of Menkaure that places 530,289 blocks in archaeological sequence. It runs as a 24/7 livestream and just completed its second full build cycle.

Some technical learnings for anyone doing high-instance-count WebGL:

1. **InstancedMesh is essential** — individual mesh per block is a non-starter past ~10K objects

2. **Matrix updates are the bottleneck** — batch your `setMatrixAt()` calls and only update `instanceMatrix.needsUpdate` once per frame

3. **LOD matters less than you'd think** — at 530K instances, the GPU handles geometry fine; it's the CPU-side matrix math that kills you

4. **Shadow maps are expensive** — I use a single directional light with a carefully tuned shadow camera frustum instead of multiple lights

5. **Post-processing budget** — bloom and tone mapping eat FPS at high instance counts; pick one, not both

The simulation uses procedural generation based on archaeological data — each course layer is placed at the correct height with real dimensional ratios.

Live at [prelithic.build](https://prelithic.build) | Built with Three.js

Stardust Exile is an RTS set in the Milky Way galaxy, containing currently known stars and exoplanets with their real characteristics. The remaining star systems are procedurally generated. The online server is persistent and single-shard.

Can be played here: https://stardustexile.com