Hi Community,
I have, as I wrote above, a pretty complex glsl-aesthetics question. Here we go:
When I cruise shader toy what I notice is that glsl seems to be really good for shiny, psychedelic, fluid simulationy, wavy, sparkly stuff.
What I’m not seeing is anything that looks at all like (a.) graphic design and/or (b.) architecture (I don’t mean 3D architecture, but like an architectural image rendered on a 2D plane).
When I use p5.js, I can make “dynmic graphic design” type things, but you can’t throw multiple p5js canvasses on your meshes, or you’ll slay performance.
So, here’s my question, can glsl make anything like this: 700 Layout ideas in 2021 | typography design, graphic design inspiration, graphic design ← except dynamic?
What is a Russian Costructivist in 2021 supposed to do with themselves?
Looked through 150 examples searching “pattern” this is what I came up with.
Shader - Shadertoy BETA ← this is more my aesthetic
Shader - Shadertoy BETA ← as is this
Shader - Shadertoy BETA ← super into this (but I think those characters are designed)
Shader - Shadertoy BETA
Shader - Shadertoy BETA
Shader - Shadertoy BETA
Shader - Shadertoy BETA ← favorite so far
Shader - Shadertoy BETA
Shader - Shadertoy BETA
Shader - Shadertoy BETA
Shader - Shadertoy BETA
Shader - Shadertoy BETA
Shader - Shadertoy BETA
Shader - Shadertoy BETA
Unclear if this makes it worth learning glsl; unclear if there’s some more specific way to search for these architectonic glsl patterns.
It looks like it does exist but it’s a very specific sub-class of shader…
1 Like
Hi saitogroup,
I’m not 100% sure I understand the question. The first selection of things you linked to looked like they were full of textures; you can definitely move textures and things around in shaders.
Babylon.js Node Material Editor (babylonjs.com)
More broadly speaking, you can do pretty much anything in shaders, but there are certain things that they’re good at and other things that they’re not. Shaders are (as far as I know) the most common example of massive parallelism, which makes them very well-suited for applications where outputs (pixels) can be computed without any direct reference to the outputs of other pixels. The more interdependent state there is, the more difficult it will be to get a shader to do this well. This is one of the reasons you see so many shiny, fluid, etc. mathematics-based shaders out there; sophisticated math functions can hold complex structure which can be evaluated at any point independently, so shaders and continuous functions are a match made in heaven. By contrast, the other sorts of things you mentioned tend to get the bulk of their structure from data, not arithmetic. Shaders are still useful for this, but it’s usually best to create/load/manage the data-based structure on the CPU side (because the CPU is comparatively good at problems ill-suited to parallelism) and then just hand that data over to the GPU so that shaders can treat it like a massively parallel problem. This, in fact, is one of the biggest things a 3D engine like Babylon does: use the CPU to characterize problems in such a way that shaders on the GPU can handle them efficiently to render your scene as fast as possible.
So, to sum up, you can do pretty much anything with shaders. If you want to go as fast as possible, though, shaders are often a great choice, but not always; and you’re dealing with data-based structure in your rendering, leveraging the strengths of both the CPU and the GPU is what will really give you the best possible performance.
2 Likes
it seems to me that you can get away with a lot just uploading textures and moving them with the shader, which I didn’t realize that you could do, so this example is awesome
could a scene “tolerate” e.g. 10 different shaders like this without slowing down performance?
There’s always some degree to which it depends on the hardware, but 10 different materials (shaders) should be easy; the movement effectively costs nothing, so it’d be comparable to having 10 different colors of StandardMaterial in your scene. You can put multiple textures into the same shader – up to 16, I believe. You’d have to do the compositing/blending yourself, but it shouldn’t be too tricky. With a little fiddling, you can do some amazing things with shaders, and NME is particularly awesome at making that accessible. Best of luck!
1 Like
I think I made something cool with texture manipulation: Login • Instagram
couldn’t figure out how to save the sketch on the node material editor ¯_(ツ)_/¯
1 Like
is there a big repository of examples? are node shader things in the playground? I want to study as many texture manipulations as possible?
Node Materials Examples - #39 by dannybucksch ← found this thread looking for more