r/webgl • • Jul 15 '25

We built a Leetcode-style platform to learn shaders through interactive exercises – it's free!

Post image
98 Upvotes

Hey folks!I’m a software engineer with a background in computer graphics, and we recently launched Shader Academy — a platform to learn shader programming by solving bite-sized, hands-on challenges.

🧠 What it offers:

  • ~50 exercises covering 2D, 3D, animation, and more

  • Live GLSL editor with real-time preview

  • Visual feedback & similarity score to guide you

  • Hints, solutions, and learning material per exercise

  • Free to use — no signup required

Think of it like Leetcode for shaders — but much more visual and fun.

If you're into graphics, WebGL, or just want to get better at writing shaders, I'd love for you to give it a try and let me know what you think!

👉 https://shaderacademy.com


r/webgl • • Aug 24 '22

Just some projects I've made with webgl and three.js this year. :)

87 Upvotes

r/webgl • • Oct 05 '26

I finally got procedural grass looking the way I always wanted in Three.js

Post image
67 Upvotes

Every blade is rendered individually, with enough geometry and detail that you can get right down into the grass and still see the shape of individual blades.

What I'm really happy about is how well that detail holds up into the distance. The grass doesn't just look good up close and then turn into a blurry carpet. There's still a surprising amount of visual fidelity as you move further away.

And this is running at 1080p on a base M1 Mac.

I've spent a huge amount of time working on the rendering, LOD system, culling, tiling, wind, and overall density to get this balance between individual blade detail and performance.

This is essentially what I've been trying to achieve with Three.js Grassworks: pushing procedural grass in Three.js as far as I can while still keeping it practical enough to actually use in a real-time scene.

It's built around WebGPU and Three.js, and the current system can handle different grass types, terrain interaction, distance-based LOD, and large grass fields while maintaining this level of detail.

Still a lot more I want to push with it, but I'm genuinely really happy with where it's at now.

https://grassworks.techredux.co/


r/webgl • • May 19 '19

The WebGL 1.0 or 2.0 tradeoff / compromise for compatibility

59 Upvotes

Hello there my friends. My name is Marco Gomez and as per my passion regarding CGI (and also for full-stack development), I wrote my own GLSL editor for the browser. It is called ShaderLab, and if you want to check it out you can find it here: https://shaderlab.mgz.me . Even though I wrote it, I can consider myself a beginner regarding GLSL and WebGL, so I'd like to count with your opinions regarding the WebGL version I'm using, as I have to make some decisions before I get more users publishing their work on the platform. But first, a brief disclaimer regarding my app features:

Yes, there are a lot of similarities with any other online WebGL Fragment Shader editor around, like ShaderToy or the editor from The Book of Shaders, but I wanted to implement myself some unique features for my personal usage that I couldn't find in none of them, like, for example, loading an MP3 file for real-time FFT analysis to be used as input audio uniforms to create audio-reactive shaders, or accepting external images from any website (like imgur for example, or any other website that also allows cross-domain access), or VIM mode (for now toggle-able pressing F9 with the editor on focus, I'll create a toggle button on the navbar over the next weeks) to use search and replace regexps for example. Those are some of the reasons that made me decide to write my own editor.

It is a super recent project (I wrote the first lines of code about 2-3 months ago) and I made it all by myself, thus, there's still A LOT to do to even consider it on alpha stage. But it's already online and working.

Since I started writing it, my plan was to make it use WebGL 2.0 / ES 3.0 and I wrote it accordingly. However, after making the website publicly available, I received lots of complains from Safari and Edge users, as those browsers does not support WebGL 2.0 like Chrome and Firefox. I don't know if this compatibility table is up to date ( https://caniuse.com/#feat=webgl2 ) but it is a very scary one if you don't want to exclude lots of users from viewing or making use of your project, thus, I decided to make all the example shaders that I published on the platform ES 1.0 compatible.

Sticking with ES 1.0 to write shaders is kind of a severe compromise, as there's LOTS of WebGL 2.0 features that I'd like to use, like vertex array objects always (not optionally) available, 3D textures and a ton of texture formats available, non-PoT textures with mips, non-constant-restricted loops, integer arithmetic, multiple draw buffers, out layout, etc.

That said, right now I'm trying to decide between sticking with WebGL 1.0 and make it compatible with any reasonably modern browser, or jump straight to focus on WebGL 2.0 (of course, allowing compatibility with ES 100), but making it unavailable for Safari and Edge users. One of the solutions that I considered involves some user code manipulation, and storing the version of the shader on my database, in a sense that if some user access the website with a non-ES 3.0 compatible browser, my shader pagination method (on the home gallery and on the user gallery) would only return ES 1.0 shaders, and for a user with a WebGL 2.0 fully compatible browser, the pagination would return all shaders.

I honestly don't know if I should expect that browsers like Safari or Edge will have a decent implementation of WebGL 2.0 in a near future.

I'd really like to hear opinions from the community regarding my concern with the WebGL version, and also, to have some feedback and suggestions regarding my platform (any type of feedback and suggestions will be highly appreciated and taken in consideration for future features). Stressing the most important question here: should I worry about making this platform available for users with non-webgl2.0 compatible browsers? (I'd also like to mention performance problems on Linux versions of Firefox ( https://bugzilla.mozilla.org/show_bug.cgi?id=1010527 ) but maybe it would be more appropriate to leave it for a more specific thread regarding that conversation, but definitely, it is also a conversation that I'd like to start).

Thanks a lot for your time being a part of this topic. I appreciate it.

Best regards.


r/webgl • • Dec 12 '20

After 3 long years, my three.js webgl game is almost complete

Thumbnail
gfycat.com
58 Upvotes

r/webgl • • Mar 03 '26

My first shader

56 Upvotes

r/webgl • • Jun 01 '21

I made a WebGL Noise library and used it to create a Planet Generator. Demo and GitHub in comments!

53 Upvotes

r/webgl • • May 21 '19

WebGL Fluid Simulation

Thumbnail
paveldogreat.github.io
51 Upvotes

r/webgl • • Apr 29 '26

Experimenting with 3D-like lighting and shadows in a lightweight WebGL2 2D engine (~46kb)

50 Upvotes

I've been working on a small WebGL2-based 2D engine as a hobby project, mainly experimenting with 3D-like lighting and shadow behavior in a 2D rendering setup.

The core build is around ~46kb — I was curious how far I could push things while keeping it lightweight.

Right now it's still pretty early, but I’ve been adding some small features around rendering and basic workflow to make it more usable.

I know there are already plenty of solutions in this space, so this is mostly just a personal experiment — but I’d be really interested in feedback from people working with WebGL or custom rendering pipelines.

Demos (desktop):

https://codepen.io/iroshan/full/rNMKbWv

https://codepen.io/iroshan/full/Kwzbbza

https://codepen.io/iroshan/full/wvELEmN

Docs & more examples:

https://asjs-dev.github.io/pwgl/

Repo:

https://github.com/asjs-dev/pwgl

What kind of lighting, shadow, or general rendering features would you expect from something like this?


r/webgl • • May 17 '20

A full, summarized, interactive WebGL tutorial

Thumbnail
xem.github.io
48 Upvotes

r/webgl • • Nov 29 '17

Infinitown | A WebGL Experiment by Little Workshop

Thumbnail
demos.littleworkshop.fr
43 Upvotes

r/webgl • • Jan 29 '20

An Interactive WebGL Internal State Diagram

Thumbnail
webglfundamentals.org
42 Upvotes

r/webgl • • Sep 24 '21

Safari 15 is released. WebGL 2 is now supported in every major browser and platform!

39 Upvotes

Why bother upgrading your code to WebGL 2? Here are all the nice things you can use now in WebGL 2: https://webgl2fundamentals.org/webgl/lessons/webgl2-whats-new.html


r/webgl • • Mar 16 '22

3D Interactive Portfolio and Resume

36 Upvotes

r/webgl • • Aug 18 '20

Made a 3D solar system with p5.js. Took a little time.

35 Upvotes

r/webgl • • Mar 15 '19

Ray tracing Wolfenstein using WebGL

Thumbnail
reindernijhoff.net
35 Upvotes

r/webgl • • Mar 03 '21

AI Upscaling in the Browser w/ WebGL

34 Upvotes

Hey everyone!

I'm working on a Javascript library which uses WebGL to implement a Super Resolution neural network, to upscale video in real-time in the browser (demo!).

I think AI Upscaling could be helping in improving the video quality for users on slow networks, or for improving reliability of WebRTC video calls (demo).

The main concern is client-side performance, but we've gotten it to work on real-time on everything but low-end smartphones.

We've just released our library for anyone who interested in playing around with AI Video Upscaling(docs, libraries, quickstart).

Would love any thoughts or feedback!


r/webgl • • Sep 09 '20

WebGL ribbons with Three.js and TensorFlow.js handpose | "also, my bored face for doing the same silly gestures to the webcam over and over again"

34 Upvotes

r/webgl • • Jan 22 '26

A node-based workflow for Three.js Shading Language (TSL).

Post image
32 Upvotes

Hey everyone! With Three.js moving toward WebGPU, TSL is becoming the standard. However, writing TSL by hand can feel like a step back if you're used to visual tools like Blender Nodes or Unreal's Material Editor. I’ve been working on TSL Graph to bridge that gap. It’s a visual graph that lets you build shaders with nodes.

It’s in public beta and I’d love for this community to try and break it. What nodes are missing? How’s the UX?

Try it here: http://tsl-graph.xyz/


r/webgl • • Apr 01 '20

WebGL best practices - Mozilla

Thumbnail
developer.mozilla.org
31 Upvotes

r/webgl • • Feb 13 '20

Interactive liquid metal :)

31 Upvotes

r/webgl • • Dec 10 '14

Physically based rendering in WebGL

Thumbnail
blog.playcanvas.com
31 Upvotes

r/webgl • • 21d ago

Amiga Juggler, 40 years later — a browser tribute

Post image
30 Upvotes

The mirrored balls, the checkerboard floor, that little “ding”…

Try it here: https://www.mahieu.nl/amiga-juggler/en/

To mark the 40th anniversary of Eric Graham’s Amiga Juggler, I made an interactive browser tribute. It starts with the familiar chunky pixels, then opens up into smooth animation, music and a world you can explore with a free camera.

What interested me most was the atmosphere: revisiting that small, strange world and giving it some room to grow.

I used AI tools during development, including help with writing and refining the code. I want to be open about that when sharing the project.

Sound on for the transition! The video is a short preview; in the interactive demo, your browser renders the scene live and you can take over the camera yourself.

Did you see the original back in the day? I’d love to hear what you remember about it.


r/webgl • • Feb 26 '22

webg2.0 instancing is neat! Rendering happens in microseconds for simple 2d drawing. Demo here: https://smallcluster.github.io/

30 Upvotes