Hiya everybody! I’ve just started learning GLSL and I find this to be very interesting and very puzzling at times. Here’s a puzzle I can’t quite figure out: there’s a particular glsl fractal brownian motion shader that I’m experimenting with and the problem is that it’s producing two completely different redenderings depending on where it’s being rendered. Here’s a Shadertody versus Cineshader example:

As you can see the exact same shader is producing a more “oily” version in the Shadertoy rendering but it’s producing a more "volumetric’ terrain-like rendering in Cineshader.

I’m going for the Cineshader look, but when I implement this shader in THREE.JS it gives me the oily rendering that’s the same as Shadertoy.

Would anybody be kind enough to explain why this is rendering differently? And could you please give me pointers that can help me reproduce the Cineshader look?

I’m working on creating a cube with that volumetric noise look like the one in Cineshader applied on its faces but so far I’m only getting the Shadertoy oily look. So what’s up with this?

Your help is highly appreciated!

It looks to me like the noise is used as a heightmap function, and what you’re looking for also uses parallax mapping or some other form of raymarching to achieve a depth effect.

Yes, exactly. Looking at the rendering alone I thought that the noise was being used as a heightmap to produce the volumetric effect. But here’s where it really gets interesting: the code is EXACTLY the same both in Cineshader and Shadertoy. So if the noise was being used as a heightmap then it makes sense that it would be so on both renderings because the code is exactly the same.

Why is the exact same code producing something so different in these two cases that’s really the puzzle I’m trying to untangle.

What’s causing the difference given the same exact code? Could it be some difference in compilation parameters? Some difference in versions of WebGL being used in the background to generate the renderings? Or some other obscure implementation detail? This is what’s got me scratching my head really hard.

Please send help. Supplies running low :sweat_smile:

Any more thoughts on this?

Cineshader doesn’t work for me (maybe due to Firefox or due to blocker extensions). But the Shadertoy version appears to be clipping (i.e. producing values greater than 1). It’s possible that Shadertoy clips while Cineshader rescales the output or applies some kind of tone-mapping function.

You might consider writing your own WebGL framework so that you can control the entire shader without having to guess about what’s happening between your function and main().

Thank you so much for your input. I truly appreciate the effort and the helpful pointers.
Yes, I will keep tinkering with this to try and reproduce the Cineshader rendering with my own modified code. It just seems so neat to me that Cineshader seems to be doing so much without adding anything extra to the shader code itself. That’s why I got so intrigued by its output.

If you’ve got any more thoughts on how to attain and perfect that look then please by all means share those goodies, I’m new to this so every little bit of insight really helps! :hugs:


This topic was automatically closed 183 days after the last reply. New replies are no longer allowed.