I’m building this Three.js browser MMO solo. Does the scene/UI hierarchy feel clear, or is the HUD taking over too much of the view?

Try it: https://realm-of-echoes-auth.realmofechoes.workers.dev/

Discord: https://discord.gg/BdF5w5G799

Hello, I’m a web developer and I recently came across a website called MONOLOG. There is an effect in the hero section (image reference attached) that really caught my attention: a dot grid with these smooth “waving”/distortion artifacts.

I don’t really know the correct name for this kind of effect, but it gave me that “wow” feeling - it’s a very simple visual, yet it creates a strong first impression. I’d love to learn how to create something similar.

I have two questions:

1. How difficult is an effect like this to make? Is it something achievable for a regular web developer, or does it require a lot of experience with graphics programming?
2. Where would you recommend starting with shaders? I’ve found some articles and resources about GLSL/WebGL, but I haven’t found a learning path that really fits me. I’d also like to avoid falling into the “watch endless YouTube tutorials without actually understanding anything” trap.

If anyone has experience creating similar effects or learning shaders from a web development background, I’d really appreciate some advice or resources.

PS: I found that they are using three.js

Thanks!

Playable here, free and no signup: https://attack-on-titan.magnusrodseth.com

Repo: https://github.com/magnusrodseth/attack-on-titan

Some architecture notes:

• The simulation is pure TypeScript stepped at a fixed 120 Hz, fully unit-tested. The Three.js renderer is a thin adapter reading sim state.
• Determinism: every random stream derives from a hashed seed per purpose, so a ?seed= URL replays the identical city, waves and upgrade offers. The daily run is just a rotating seed.
• Co-op runs the same sim server-side on a Cloudflare Durable Object (partyserver). Titans and scoring are server-authoritative, your own movement stays local at 120 Hz, and slashes are validated with lag compensation.
• All textures are CC0 assets, mostly Poly Haven, downscaled to 512px.

Fair warning: it looks rough, and I know it. This is a toy project for fun and for experimenting with 3D games in the browser, so the polish went into the physics instead of the art. The rope physics took the longest: momentum survives ground contact while you're tethered, so you can run the bottom of an arc out along the street and get scooped back up into the swing. Happy to answer anything about the stack or the feel tuning.

Let me know what you think, would you used it?

hal.ink/pharrell is a good example of usage

I've fully redone the engine for my game AresRPG, I aim for an immersive world! this is a browser based MMORPG on Sui. Looking for people to discuss and test https://discord.gg/aresrpg

Been working on this for a while — Universal Shader Studio is a browser-based GLSL editor built with React + Three.js.

What it does:

• Live vertex + fragment shader editing with real-time compile
• Preview on procedural terrain, primitives, or upload your own GLB model
• Multi-format export: Three.js ShaderMaterial, R3F component, raw GLSL, vanilla WebGL
• No install, no backend, runs entirely in the browser

Live: shader-studio-teal.vercel.app
Source: github.com/void032/shader-studio

Would love feedback from this community — especially on the export formats and what's missing for your workflow.

Hi everyone!!

I did several courses on webgl and three.js but still didnt pass that threshold from toy examples to real world premium looking webs.

So I will like to start with an space where we share docs/courses/repos/resources that can help us get closer to building a clone to: https://www.continuous.vc/ . I commit to build the clone and share it open source in Github if we get closer to this.

Any help on the effects? Thank you so much in advance!

Hey guys need help making a web gl three js based realistic jewelry render viewer, I’m stuck with my diamonds and stones looking like blobs please help me out

Khronos will host a WebGL+WebGPU BOF at SIGGRAPH 2026 in Los Angeles on Wednesday, July 22 at 9:00 AM. (Full schedule coming soon.) Do you have a product or demo based on these APIs that you would like to share? If so, please email [[email protected]](mailto:[email protected]) and we'll get you on the agenda.

Just shipped an MVP I've been quietly working on : a browser-based character customization lab.

Pick a gender. Swap hair, body, beard, headwear. Tint everything. Play animations. Trigger dialogue with proper lip-sync.

No download, no account, no plugin — just open a tab.

Still very early. Would love your thoughts.

https://cgstuff.xyz/viewer

Eaglercraft was a project originally developed by Lax1dude with contributions from other people such as Peyton. Me and my team are developing a brand new Eaglercraft version, well the most recent version of Minecraft. We like to refer to ourselves as Verdex Launcher.

Our team will be creating a client, a server, a launcher, and multiple side projects. As well as we will be creating costume plugins for the server. We will be using solutions to further improve FPS such as WebGL, which is exactly OpenGL. We will also be using object pools to use resources more efficiently. And much more costume solutions. We will be using TeaVM and port Minecraft 26.1.2 into the browser, which makes it possible in the first place.

Verdex Launcher will have a lot and a lot of features built-in such as private messaging system, global chatting system, cosmetics system, resource pack list, server list, mod list, and more. This is only the base. We will be able to do that, because Verdex Client will be set as the default client, therefore injecting mods properly into the client.

Our most recent side project will be known as Velocity Speedrunning. Velocity Speedrunning will allow you to queue ranked speedrunning on Eaglercraft. We will be creating a dedicated Eaglercraft Tierlist for speedrunning purposes. VCYSR(Abbreviated) will have its own costume ELO system that is not as similar as MCSR. However, we are not sure about this project actually being released.

We do not like to be known as pirating Minecraft, but more like embracing a hard project. This is purely for entertainment purposes rather than actually pirating it. And offline downloads will be available, because everyone hates that the school block websites in their school chromebook.

It is upcoming, so don't ask me where is it, join our Discord server for updates if you want.
https://discord.gg/DPcwubjjWj

Some time ago, WebGL began running very slowly on my PC's browsers (both Chrome and Opera and therefore probably others) after many years of running fast enough to render even those raymarching apps on ShaderToy at a decent framerate. I didn't change anything in the browsers. To give you some idea of how slow it is now, today I tested a really simple spinning cube app on ShaderToy which runs at less than 20 fps on my PC now but 119 fps on my mobile phone despite the obvious differences in video card ability. More elaborate ShaderToy apps are now so slow on my PC as to be unviewable (sometimes less than 1 fps if they run at all). What would cause this, and how do I fix it?

[Edited to include Opera among the browsers where this effect occurs]

Live demo: https://chroma-delta.vercel.app
(no signup, no upload — boots into a chr20:10M window with five demo tracks pre-loaded from public S3 / UCSC / Ensembl)

What it is

Chroma is a browser-based genome viewer aimed at being a faster, more keyboard-friendly alternative to IGV.js. The whole render path is WebGL2 (hand-written, no Three/Pixi); state lives in Solid.js signals; parsing runs in a Comlink-managed worker pool.

I've been driving the whole project through Claude Code — solo dev plus agents — and after ~50 commits, I've hit the wall on knowing what to ask it to build next, hence this post.

What works today

• 5 demo tracks:
  • hg19 reference FASTA (IGV/Broad mirror)
  • Ensembl gene annotations
  • UCSC phyloP100way conservation BigWig
  • HG00096 1000G BAM
  • HG002 GIAB 300× BAM (hidden by default — too slow to load for the default boot)
• Two-level navigator:
  • top bar = whole chromosome with Mb-scale ticks (click to jump, drag to pan, drag empty to drag-create)
  • bottom bar = local context with drag-create / move / edge-resize / Esc-cancel
• Reference renderer with two modes:
  • colored 1-bp quads at any zoom
  • actual A/C/G/T/N letters via a Canvas2D-baked atlas when basePixelWidth ≥ 12 px
• Gene name labels rendered on a Canvas2D overlay, shrink-wrapped with ellipses at narrow blocks, strand-aware alignment (5' anchors to the leading edge)
• Single-fetch viewport mode at pileup tier (≤50 kb spans): one HTTP Range per nav instead of N tile fetches — 6× speedup on the 1-track B1 cold load (4.7 s → 774 ms)
• Sticky URL → worker dispatch (FNV-1a hash on the file URL) so the per-worker u/gmod parser caches (BAI 8.7 MB) actually get reused instead of scatter-loaded N times
• 64-bit bigint coordinates throughout, with a single sanctioned conversion to Float32 for shader uniforms
• 60 fps pan / zoom on a 1 Mb BAM viewport, p95 fps locked
• 250 unit tests, TypeScript strict + noUncheckedIndexedAccess, ~88 kB main JS gzipped

Tech stack

• Solid.js for the reactive shell (picked over React for fine-grained signals + smaller bundle — the eventual goal is clinical-report embed)
• WebGL2 hand-written, instanced rectangles for everything geometric; Canvas2D overlay only for text labels
• u/gmod**/{bam, bbi, indexedfasta}** for the format parsers
• u/chenglou**/pretext** for unicode-correct text measurement and shrink-wrap on the label overlay
• Comlink worker pool + Cache API for HTTP range coalescing
• Vite + pnpm + Vitest

Honest gaps (what's still broken/missing)

• B1 cold gate target is 300 ms, currently ~3 s for the default 5-track demo — dominated by one-time BAI parse (~3.7 s for HG00096, ~6.6 s for the 300×). Needs either a streamed BAI parse or a cap-at-N read fetch in the worker.
• No CIGAR support — reads render as plain rectangles, no insertions/deletions/mismatches shown
• No VCF track (parser stubbed)
• No hover/select tooltip yet
• Pileup row collisions across tile boundaries are accepted (cross-tile merge is a carry-forward)
• HG002 300× BAM works but takes ~10 s on first nav — that's why it's visible: false in the default seed

What I'm asking the community for

1. Hit it in your browser and try to break it.

Bug reports welcome — please include the locus/zoom level when reporting.

2. Prompt suggestions for what I should build next.

I've been stuck between these and would love opinions:

• VCF track (parser stubbed already)
• CIGAR-aware read rendering with mismatch coloring
• Per-base read sequence letters at deep zoom (would need to extend the SoA ReadTile with packed SEQ)
• Splitview (two viewports side-by-side, IGV style)
• Click-to-pin tooltip with full feature info
• Cap-at-N read fetch for high-coverage BAM (so the 300× track stops being a footgun)
• Label color is reactive to the dark theme
• BED track for arbitrary user regions

Thanks in advance for any feedback.

Chroma Keyboard Shortcuts

Navigation

• h — pan left
• l — pan right
• + — zoom in
• - — zoom out
• 0 — zoom to fit
• g — focus the locus input (jump to position, e.g. chr20:31,500,000)

Tracks

• v — toggle visibility of the focused track
• d / Delete — remove the focused track
• t — toggle light / dark theme
• ? — show help overlay (not yet wired)

Mouse / pointer

Top overview bar (full chromosome):

• Click — jump viewport center, span preserved
• Drag the highlight window — pan, span preserved
• Drag the empty bar — create a new selection (replaces span)
• Esc while dragging — cancel

Local range bar (auto-adapted ~10× viewport):

• Drag inside the block — move
• Drag the left/right edge — resize
• Drag the empty bar — create a new selection
• Esc while dragging — cancel

Genome view:

• Shift + scroll wheel — horizontal pan
• Hover an annotation block — tooltip with full gene info + highlight outline

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.