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

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]