Infinite Shaders

Infinite shaders is a rotating gallery of shaders, powered by the Shaderfrog editor and engine, and the fantastic Three.js framework. The shaders are modularized and composed together on the fly. The transitions between shaders are GLTransitions.

What's a "Modularized Shader"?

Shaders are self contained programs with a main(){} function. "Fragment" shaders are run for every pixel (technically every "fragment") on an object in a 3D scene, to shade the 3D object.

"Modularizing" a shader is part of the Shaderfrog composition engine. Shaderfrog parses shader programs and builds modular representations that can be"composed" with other shaders.

OK, What Does "Composing" a Shader Mean?

Modularized shaders get their source code transformed with unique main functions, like main_1(){} and main_2(){}. The simplest way to compose them is return main_1() + main_2();

A modularized shader can be imported into another shader, and called like a function. The importing shader can also pass parameters to the imported shader, "backfilling" variables, like overwriting UV coordinates. This enables shaders to pass their visual effects to other shaders.

‟Striped glass fireball” in Shaderfrog 2.0

Shaderfrog is a "hybrid graph" editor that seamlessly combines writing code and graph editing. Connections between nodes represent importing shader modules. Shader node inputs represent the part of the shader that gets replaced by the other shader's main(){} function.

Think of it like Photoshop for shaders, where each shader is a layer. Or, think of it like CSS Modules. Like CSS, shader code eventually all exists in a global namespace. Individual shaders need to be modularized so they can be composed into a final program, and not conflict with variable names from other shader modules.

That brings us to Infinite shaders. The gallery loads two shaders at random from the Shaderfrog featured shaders list. The loaded shaders are already modular from the Shaderfrog editor. They're composed into a wrapping transition shader from GLTransitions, and the whole bundle is smashed into a Three.js MeshPhysicalMaterial, providing realistic effects like reflections and refractions.

Is it Actually Infinite?

There aren't infinite shaders, but any shader featured on Shaderfrog is eligible for Infinite Shaders. There's no upper limit. If you watch the rotation for long enough, you'll see repeats. Uniforms are randomized when a shader is loaded to keep repeats interesting.

Hey, that Shader is From Shadertoy!

Some shaders are imported and remixed from the incredible Shadertoy. A powerful feature of the Shaderfrog editor is the ability to convert ShaderToy shaders into Three.js shaders. I always make sure to credit the original author in the Shaderfrog shader, and preserve the license. Please let me know if I missed one, or want your shader removed.

I got a Blank Screen / Crash

The shaders are randomly composed, and there are some edge cases that are rare. If you're willing, please report a bug with the most recent shaders from the "history" panel.

Is the Composition Truly Generic?

The core idea behind Shaderfrog is arbitrary shader composition, regardless of the GLSL. Wherever possible, Shaderfrog does a generic pass on the AST to understand GLSL and shader structure. In practice, there are a few hard coded assumptions that aren't truly generic composition. For example, Infinite Shaders hard codes the knowledge that the Three.js varying vNormal is the primary varying that controls the normals.

Is this Open Source?

Infinite Shaders itself is not currently open source, but Shaderfrog is an Open Core ecosystem. You can use the FrogMaterial to use Shaderfrog shaders in your own Three.js project!

A Personal Note

I'm Andrew Ray, the solo creator of Shaderfrog. Infinite Shaders represents the end of a journey I started 12 years ago. In a different life, I left my job, founded Shaderfrog, and worked full time to build and launch a product. I learned how to build a compiler, found a typo in the GLSL spec, and even a bug in Google's ANGLE graphics engine.

Shaderfrog has had thousands of users over the course of its existence. It's been used in multiple university graphics courses. It was featured on Hacker News, and I had the pleasure of presenting it live at a Khronos Group meetup. It's also led to the creation of a suite of open source tools and contributions to open source libraries, including Three.js. It's been a labor of love, sometimes consuming my life, not always in healthy ways. Today, Shaderfrog is a side project I still lovingly maintain.

I've bootstrapped Shaderfrog from day 1. I've attempted different ways to monetize the product, but the web graphics space is a challenging ecosystem. Today, I continue to pay for hosting and infrastructure out of pocket.

If Shaderfrog has impacted your life, or you enjoy the tool or the open source libraries that came out of it, please consider Shaderfrog Pro, a one-time purchase, not a subscription. There are no marketing emails, and you get free access to any new features I add. It would mean a lot to me and my little side project.