Public shader repository and preview

Feature requests
1

One of the best things about babylonjs is the tooling.
One tool I thought would be great to have is a shader repository that the community can save shaders too and allow other people to use in their projects.

Most all people are familiar with shader toy but it’s not a easy tool to use as part of your development toolchain.

There obviously needs to be some relationship between the other tooling also.
For example, in the play ground, lookup a shader and use it.
In the node editor, search for a shader, create a shader and save it.

People can rate shaders for performance, usability, and plain old cool factor.
Over time this community shader repository could significantly help people with their projects.

You can also have shaders associated with it’s creator so that you can “follow” someone if you like the work they do.

To be honest, this idea originated because I need to write a shader and have no idea on how to accomplish what I want to do. Translating between shader toy and babylon is a bit of a pain so this can not only serve the community with already made shaders meaning they don’t have to make it again, but can also be a great learning resource… kind of like the playground but for shaders.

5 Likes
2

Have you looked at This handy tool? especially check the drop down for shader starter templates.

It’s not quite what you describe on the community sharing angle but otherwise seems to fit the bill!

HTH

3

@Johan_Rabie the repository idea seems like a good one to me, maybe you could start with a vetted list of sample links to the playground or nme … like the awesome list but just for shaders
Symbitic/awesome-babylonjs: A curated list of awesome things related to Babylon.js (github.com)

4

I really is a great tool.
Personally I like the node editor so that I don’t have to learn the syntax but instead express intent using a visual language. There is also the business of generating webgpu shaders instead of glsl.
Additionally the PBR node is priceless in the node editor.
Consider the blender market for shaders.

A searchable repository would be of great benefit…

1 Like
5

I really like the idea. I too would like to write shaders, but I have no idea how to write them, how it works, the logic… It’s really a world apart from shaders when you don’t know anything about them. Having a repository with shaders + a visual or something like the playground would be cool.

6

This is a good place to start

These are also pretty helpful but I feel assumes too much from skill levels.
In other words, hard for people starting out to follow, but I think it is what it is.

Use the UV node for the xy values and there are some videos on.
This being a simple example of showing red based on the x axis.

image
image1128×274 16.6 KB

Just note that the orientation of the geometry may through you for a loop since the default layout looks like it could be affecting the y value instead.
image
Not sure if I am mistaken or if that is a bug or as designed.

Note there are a couple of missing nodes.
One of them would be the mix node.
The add currently seems to do the same thing but the mix node has a factor you can also plug in.
https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/mix.xhtml

Either way, the node editor is my preferred way to develop shaders.
I think there are some additional things we can do to make it even better.

For example having shape nodes.
Circles, lines, rectangles, triangles, polygons …

Some basic pattern nodes such as.
grids, lines vertically / horizontally or slanted.

They have already added things like the noise node, witch is fantastic.
Over time I am sure the node editor will just grow better and better.

Having said that, from a productivity perspective just being able to load a existing shader, tweak properties and export will be idea.

lets use some examples:
Polar Coordinates

Toon Shader

Genshin Shader

Step Node Switches

The list can get crazy long so I am going to stop there.
The problem here is that all the examples I have shared were for the most part created by the babylon team. Having a repo to save, rate and draw from basically means that the community can contribute to a central use base and the babylon team can perhaps just review the shaders if needs be.

Thus a database of custom nodes created by babylon team and community to be used in babylon tooling for the purpose of productivity and learning.

3 Likes