Shader Talk - Conversations on GLSL

Hey Shader Pros,

I was wondering if anybody here has any recommendations for books or tutorials for people who want to get into shader programming. I’d like to create my own pixel shaders (of course for Babylon mainly), but apart from the GLSL syntax and data types, which are pretty clear to me, I don’t know where to get started. Is there any tutorial that shows by example how to build e.g. a water shader? Most tutorials are very heavy on the OpenGL API and very light on the actual shader code.

Thanks in advance!

Hi Pryme8, thank you.

the use of texture2D does not cause the graphical depth I had hoped for…
http://glslsandbox.com/e#62214.0

ups - I overwrote my example!

… I found this exmple to create a volumetric form: Shader - Shadertoy BETA

That is way way different then what you were initially showing and describing, and is raymarching through screen space.

Sorry for the missunderstanding.
My purpose was from the beginning to have a method to build up a 3D form layer for layer

image

PS: @earthendev this is the way I learn stuff. I set a destination point and try to find a way. In the beginning the target is small and envolve to more complexity. I suppose I am still on the startline of my journey. :slight_smile:

1 Like

hmm yeah maybe this is the best way. What do you think the easiest goal to achieve for a beginner is? Apart from just solid color fills or something like that of course

I found recommendation for the book of shaders somewhere on the internet and i find it very well written for beginners like me.

1 Like

https://playground.babylonjs.com/#WMIX6I#6

Might help with learning some shaping functions.

And I wrote this a while back some of the stuff might not work anymore but it’s a good base for some things.
http://pryme8.com/procedural-investigations-in-webgl-introduction/

1 Like

Quick question regarding using 2d texture arrays, is there any limit as to the size of the texture array, or performance impacts when compared to the standard 1 sample texture atlas method?

Does anybody by any chance have a babylon-compatible example of a fur shader at hand? For GLSL, I only found this through Google, but it looks rather low-quality. We can surely do better, right? Am I correct in assuming that for WebGL/Babylon you can use the exact same GLSL shaders as for OpenGL?

edit: Apparently at some point a Fur Material was introduced, that makes everything much easier! So no need for a custom shader right now, it’s all good!

If nothing turns up, then that will be my goal to strive for when learning shaders! :slight_smile: I will report my progress here of course, and maybe you will have to endure more of my stupid questions :wink:

1 Like

There were a lot of examples in shadertoy:
https://www.shadertoy.com/results?query=tag%3Dfur

1 Like

Thanks for that too! Maybe I’ll try out a couple of 'em, including the standard FurMaterial, and then ask some of my test victims which one they like best :wink:

1 Like

Hair has always been kinda tricky in webgl. I think once we have geometry shaders things like that will be much more robust. @Necips has the right idea for now though.

1 Like

OoOOOO ooo OOOoo! God I love IQ.

If anyone wants to follow along here is a setup for you:
https://www.babylonjs-playground.com/#ITUDQS#6

and here is a lil sneaky for you incase you want to have the rays be controlled by our BJS camera.
https://www.babylonjs-playground.com/#ITUDQS#7

2 Likes

Flux Shader using BABYLON
https://www.babylonjs-playground.com/#XH185X#9

4 Likes

Beautiful! Now, I want to see it :smiley:

Is it possible to use two or more shaders at once?

I would like use for instance this shader for one mesh:
https://www.babylonjs-playground.com/#BEJEB3#9

and this one for an other mesh
https://playground.babylonjs.com/#A9LUPS#10
in one and same scene.

Of course:

https://playground.babylonjs.com/#A9LUPS#12

Good idea by the way!

1 Like

https://www.babylonjs-playground.com/#XH185X#14

-> ray with ScreenSpace correction https://www.babylonjs-playground.com/#XH185X#15

If you wanna move around the scene on your own, I boot strapped in our camera.

If we really really wanted to be fancy, we could do a simplified version of the distance function on the CPU side and do collisions with the structure. I just aint got time for that.

I’m actually just scanning over this raymarch algo. That dithering/jitter is a thing of beauty wow. I am totally gonna have to gut my marching setups for something like this… some other day though, welp back to work!

1 Like

I have always dealt with the mandelbrot set and modified the formulas. Today i made an interesting breakthrough. Mr. spock would say “fascinating!” :slight_smile:

http://glslsandbox.com/e#66502.3

Set the resolution to 0.5 for the best result
image

With the left or right mouse click and move you can move or zoom into the Mandelbrot set
image

Enjoy!

5 Likes