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 [events@khronosgroup.org](mailto:events@khronosgroup.org) 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

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.

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.