r/shaders

▲ 23 r/shaders+1 crossposts

Fractal Tunnel Shader Tutorial

Here is a tutorial on a Fractal Tunnel Shader Tutorial

#float speed 0.5 0.1 2.0
#float zoom  2.0 0.5 5.0
#float twist 3.0 0.0 10.0
#color color1 #ff3366
#color color2 #3366ff
#color color3 #33ff66

void main() {
    vec2 uv = v_uv * 2.0 - 1.0;
    uv.x *= u_resolution.x / u_resolution.y;

    float t = u_time * speed;
    float r = length(uv);
    float a = atan(uv.y, uv.x);

    float tunnel = 1.0 / (r + 0.1);
    float angle  = a + tunnel * twist + t;

    float pattern = 0.0;
    for (int i = 0; i < 4; i++) {
        float fi = float(i);
        float scale = zoom * (1.0 + fi * 0.5);
        float wave  = sin(tunnel * scale - t * (1.0 + fi * 0.2));
        wave       += sin(angle * (3.0 + fi) + t);
        pattern    += wave / (2.0 + fi);
    }
    pattern = pattern * 0.5 + 0.5;

    vec3 color = mix(color1, color2, sin(pattern * PI) * 0.5 + 0.5);
    color = mix(color, color3, sin(pattern * 6.28318 + t) * 0.5 + 0.5);
    color *= 1.0 - r * 0.5;

    fragColor = vec4(color, u_opacity);
}
u/nycgio — 1 day ago
▲ 2 r/shaders+2 crossposts

how to study glsl shader on the website

Hey everyone,

I've been building Pixel Shader Academy

a browser-based, interactive GLSL learning site aimed at people who are completely new to shaders. It's free and live here: https://shader.dolstep.com

The full source is on itch.io https://bobddadoo.itch.io/pixel-shader-academy-full-source

What it actually is

A sequence of bite-sized stages where each lesson hands you a real fragment shader running in a WebGL canvas next to a code editor. You edit GLSL → it recompiles live → the result is the puzzle target. Stages walk through the usual fundamentals: UV coordinates, step/smoothstep, mix, SDFs for circles/rectangles, polar coordinates, time-based animation, simple noise, and a few small post-effects toward the end.

Implementation notes

  • Frontend: Vite + vanilla JS, no framework. Each stage is a small data file (starter code, target image, hint text, success predicate).
  • Rendering: a single full-screen triangle with a per-stage fragment shader. Shader compile errors are surfaced inline in the editor with the GLSL line number mapped back.
  • Validation: I render the user's shader and a reference shader to offscreen framebuffers at the same resolution, then do a per-pixel diff with a tolerance threshold. Below the threshold = stage passes. It's dumb but it works surprisingly well for "did you reproduce this image" puzzles.
  • Asset pipeline: all reference images are baked from the reference shaders themselves at build time, so I never have to hand-author solution PNGs.
  • Mobile: the biggest pain. Float precision differences (highp vs mediump) on some Android GPUs broke a few SDF stages — I ended up forcing highp and adding small epsilons in the diff.
  • I built it almost entirely by pairing with Claude (Anthropic). I designed the curriculum and made the pedagogical calls; Claude wrote most of the boilerplate and helped iterate on shader puzzles.

What I'd love feedback on

  1. The per-pixel-diff validator feels naive. Anyone done something smarter for "did the student reproduce this image" without being brittle to anti-aliasing differences across GPUs?
  2. Curriculum ordering — is there a fundamental I'm missing before noise/post-fx, or one I'm teaching too early?
  3. Any classic GLSL "aha" exercises you'd add?
  4. Anything else I should add?

Happy to answer anything about the architecture, the validator, or the Claude-assisted workflow. Roasts welcome.

u/Bobthief — 1 day ago
▲ 60 r/shaders+3 crossposts

i improved my volumetric cloud shader to support GLES3 [in godot but still relevant here]

u/Sea-Good5788 — 6 days ago
▲ 1 r/shaders+1 crossposts

Iris shaders cloud sticking

Hi I am using Iris shaders with neo forge. My mods were working just fine so I started tweaking settings within sodium. I can't figure out why but my clouds go through the blocks. I have seen this happen with other people but with fabric. Not neoforge. I turned off clouds but the issue persisted. I also uninstalled iris and all my sodium and the issue was fixed, then brought back iris and it happened again. Please help if possible.

https://reddit.com/link/1tcbesq/video/ngd5s26upy0h1/player

reddit.com
u/Ill-Shopping-6213 — 6 days ago
▲ 111 r/shaders+1 crossposts

Three.js-based app for extruding PNG/SVG into 3D models

The app lets you to convert PNG or SVG into a 3D model. After PNG/SVG logo extrusion one can export and embed this model into a website. It is inspired by u/renatoworks 3DSVG app but works with PNG too.
The app is free, no login is required, but I set timed usage limits: 10 modifications per minute - so do not be too rush with it.

edit: added "logo"
edit 2: If after PNG conversion some details on the face of the model are lost or, coversely, are too extruded, play with "Raised details" parameter

u/PhDumb — 11 days ago
▲ 50 r/shaders+2 crossposts

Hey Everyone,

Ever tried adding a grayscale filter, wave distortion, or chromatic aberration to your Compose Multiplatform app and thought "surely this is one line of code"? Yeah, me too. Spoiler: it wasn't. So I built ShaderX to make it one line of code🎨

What started as "let me add a blur effect" quickly spiraled into a rabbit hole of RuntimeShader on Android, RuntimeEffect on Skia, expect/actual hell, animation loops, shader caching, and the existential question of "why are there 30 files for 10 effects?"

After much suffering (and a surprising amount of fun), ShaderX now ships with:
✨ One-line API — Modifier.shaderEffect(GrayscaleEffect()) works on Android, iOS, Desktop, and Wasm
✨ Operator chaining — GrayscaleEffect() + VignetteEffect() + NativeBlurEffect() because why not
✨ Animated effects — rememberShaderEffect() handles the frame loop so you don't have to
✨ Type-safe parameters — auto-generates UI controls (percentages, pixels, colors, toggles)
✨ Native acceleration — routes blur to platform-optimized APIs instead of compiling shader code
✨ LRU shader cache — because compiling shaders every frame is a crime
✨ Built-in gallery — Grayscale, Sepia, Invert, Vignette, Pixelate, ChromaticAberration, Wave, NativeBlur, and more .

The hardest part wasn't writing shaders — it was making the same SkSL/AGSL source work across platforms with completely different uniform APIs without drowning in boilerplate. Wrote a full breakdown of how I got there (with code samples for building shaders from scratch) in the blog

Medium: https://medium.com/gitconnected/building-gpu-shader-effects-for-compose-multiplatform-from-scratch-to-shaderx-326659c4f47b

Github: https://github.com/Debanshu777/ShaderX

u/Informal_Leading_943 — 14 days ago
▲ 15 r/shaders+2 crossposts

MetalToy — a free, native Shadertoy client for macOS

Built a native macOS app for writing and previewing fragment shaders in real time — basically Shadertoy, but as a local Mac app running on Metal.

What it does:

• Write Shadertoy-compatible GLSL and see the output update live as you type

• Multi-buffer support (Buffer A/B/C/D) for effects like Game of Life, feedback trails, etc.

• Texture inputs on any channel

• VS Code-style editor with syntax highlighting

• File history with side-by-side diffs

https://github.com/aryvector/MetalToy

u/70xH — 13 days ago
▲ 7 r/shaders+2 crossposts

Good programs for working with vertex colors?

Vertex data is incredibly useful for driving different shader functions, but god DAMN is it annoying to apply to the model. Are there any good programs/workflows anyone's aware of that aren't so grueling?

My current best solution is to make a texture with the colors I want, then bake those onto the vert colors in Blender, but it's not very clean. Plus, Blender's default texture painting leaves a lot to be desired, so I think I'm gonna have to figure something out for that which just adds to the headache.

reddit.com
u/Nobongo — 14 days ago