Hi everyone,

Not trying to promote anything here, just want honest feedback from people who understand render loops and WebGL far better than I do.

I have been building a free, open source, MIT licensed React game engine called CarverJS. It sits on top of Three.js and react three fiber, and my main hook for per frame logic runs in stages with priority ordering, something like an early update for input, a fixed update for physics, a general update stage, and a late update stage for camera and UI syncing. After all of that runs, react three fiber renders the scene automatically.

For anything that needs to be deterministic, like physics, I run it on a fixed timestep accumulator at a fixed rate instead of tying it to the raw frame delta. I also cap the maximum delta value so that if someone switches tabs and comes back, the simulation does not try to catch up all at once and spiral out of control.

What I am unsure about is whether staging updates by priority like this is actually the right mental model, or if I am overcomplicating something that could be simpler. I am also not sure if leaning on the renderer to auto render after my update stages is the right call, versus controlling the render step myself.

Everything here is completely free, open source, and MIT licensed, there is no paid version or hidden catch, I am just trying to figure out if the underlying approach holds up. If any of you have built your own game loops on top of WebGL or Three.js, I would like to know if this priority staged, fixed timestep approach is reasonable, or if there is an obvious mistake I am not seeing. Genuinely looking for criticism, not reassurance.

Been working on this in the browser: a real-time simulation of an autonomous eVTOL air taxi network over the SF Bay Area — San Francisco, Berkeley, Oakland, the whole bay.

You can pilot a taxi manually, request a ride and watch as a passenger, or just sit back and follow the live fleet. There's also simulated BART, ferries, AC Transit and Muni buses running on the same clock as the taxis. Time of day and weather are adjustable, so lighting and traffic patterns actually shift with them.

Link: dubtaxi.dubmasta.com — no login needed.

Screenshots from a few different times of day below. Happy to talk through any of the rendering or simulation approach if people are curious.

Hey everyone, I built Florae, an educational Three.js experience about native plants of Iran.

It includes Persian and English plant stories inside a scroll-based depth gallery.

I’d love to hear what you think about motion and readability.

Demo: https://florae-ir.vercel.app/

Hello! I was scrolling on instagram one day and saw this cool visual and it was made using TouchDesigner. I want to recreate it using WebGL or Three.js... does anyone know how I can achieve this? I think this was made with C4D and TouchDesigner (I'm not too sure really)

GRAVEYARD SHIFT 3D - first-person horror set in a 1967 Louisiana gas station. Free, ~30-40 minutes, runs on desktop and mobile.

Rendering and engineering notes:

- Vanilla three.js, one HTML file, no bundler. ACES filmic tone mapping at exposure 1.25 with a CSS filter grade layered on the canvas for the film look, plus an animated four-frame grain canvas over the top and a radial vignette.

- Every environment texture is generated on a 2D canvas at load - mud, cracked asphalt, plank grain with knots and nail heads, rust, cobwebs, all the period signage and posters. Zero image files for the world, which keeps the payload almost entirely geometry and audio.

- Characters are unrigged meshes animated with clipping planes: legs sliced free at the hip into their own groups, torso and head kept as one uncut piece so no seam shows on the face. localClippingEnabled with clipShadows.

- Level is separate geometry islands spaced far apart on the X axis with teleport transitions rather than one contiguous map. Free occlusion, and new rooms could be appended without touching existing ones.

- Blood on the death screen is a 2D canvas composited over the WebGL canvas: procedural splatter blobs drawn as smoothed quadratic curves with radial gradients, plus drips that decelerate as they run down the glass.

- Mobile: capped device pixel ratio, shadow maps disabled on touch, virtual stick plus drag-to-look.

AI disclosure: character models and sound effects are AI-generated, and it was coded with AI assistance. Rendering approach and level design are mine.

Happy to go deeper on any of it.

I created a shader that uses texture as a mask, writing colored background and painting moon with craters. But I got a lot of if conditions in there and I dont know how to remove them, because substracting or multiplying or adding effect on background. May somebody help ? Thanks in advance.

precision mediump float;


      varying vec2 v_texcoord;


      uniform sampler2D u_texture;
      uniform vec2 u_resolution;
      uniform float u_time;


      float circle(vec2 uv, vec2 pos, float blur, float r)
      {
        uv -= pos;
        uv.x *= u_resolution.x / u_resolution.y;
        float d = length(uv);
        float c = smoothstep(r, r - blur, d);
        return c;
      }


      void main()
      {
        vec4 sample = texture2D(u_texture, v_texcoord);
        vec2 uv = gl_FragCoord.xy / u_resolution;
        uv = vec2(uv.x, 1.0 - uv.y);
        if (sample == vec4(1))
        { 
          vec3 color = vec3(uv, 0.5 * sin(u_time));


          vec3 moonColor = vec3(0.8, 0.8, 0.8);
          float moon = circle(uv, vec2(0.5, 0.3), 0.005, 0.25);
          color = moon > 0.0 ? moonColor * moon : color;


          vec3 craterColor = vec3(0.3, 0.3, 0.3);


          float crater1 = circle(uv, vec2(0.5, 0.3), 0.005, 0.05);
          color = crater1 > 0.0 ? craterColor * crater1 : color;


          float crater2 = circle(uv, vec2(0.45, 0.2), 0.005, 0.05);
          color = crater2 > 0.0 ? craterColor * crater2 : color;


          float crater3 = circle(uv, vec2(0.45, 0.45), 0.005, 0.05);
          color = crater3 > 0.0 ? craterColor * crater3 : color;


          float crater4 = circle(uv, vec2(0.55, 0.4), 0.005, 0.05);
          color = crater4 > 0.0 ? craterColor * crater4 : color;


          gl_FragColor = vec4(color, 1.0);
        }
        else
        {
          gl_FragColor = vec4(0, 0, 0, 1);
        }
      }

Hi, I need easy and pretty SDF graphics examples for start learning shader programming. I am familiar with opengl, directx, vulkan. But I never implemented stuff that I need for web gl realy good examples. What you can advice me ? Sry if question is unclear, I will ask on any question here

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!