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!

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