Meaning of parameters of generateBlendedMaterial?
mattes3 opened this issue · 2 comments
Hi,
I am trying to understand the generateBlendedMaterial()
function and how it is being used in the demo.
The textures that are parameterized with a levels
property are easy to understand. They blend in at certain levels, and then they blend out at certain levels. Nice!
I cannot really understand the glsl
parameters, however.
In the docs, it says that the glsl property must contain a single GLSL expression evaluating to a float between 0.0 and 1.0. What does this result value mean? 0.0=blended out, 1.0=fully blended in? I cannot really understand why there is often 1.0 - smoothstep(...)
.
In the demo index.js
file, I find a magic expression:
1.0 - smoothstep(65.0 + smoothstep(-256.0, 256.0, vPosition.x) * 10.0, 80.0, vPosition.z)
What do the numbers 65, 256, 10, and 80 mean, respectively? And why does the formula depend on both x and z?
Lastly, the expression used for the stone
texture, how does it work?
slope > 0.7853981633974483 ? 0.2 : 1.0 - smoothstep(0.47123889803846897, 0.7853981633974483, slope) + 0.2
Best...
Matthias
In the docs, it says that the glsl property must contain a single GLSL expression evaluating to a float between 0.0 and 1.0. What does this result value mean?
From the source:
// The transparency of the new texture when it is layered on top of the existing color at this texel is
// (how far between the start-blending-in and fully-blended-in levels the current vertex is) +
// (how far between the start-blending-out and fully-blended-out levels the current vertex is)
// So the opacity is 1.0 minus that.
Basically, glsl
evaluates to the opacity of the texture at that particular vertex. 1.0
means fully opaque and 0.0
means fully transparent.
I cannot really understand why there is often
1.0 - smoothstep(...).
When you see something like 1.0 - smoothstep(' + v[0] + ', ' + v[1] + ', vPosition.z) + smoothstep(' + v[2] + ', ' + v[3] + ', vPosition.z)
it corresponds to the formula mentioned above for computing opacity by calculating the transparency and subtracting it from 1.0
(full opacity).
In the demo index.js file, I find a magic expression:
1.0 - smoothstep(65.0 + smoothstep(-256.0, 256.0, vPosition.x) * 10.0, 80.0, vPosition.z)
What do the numbers 65, 256, 10, and 80 mean, respectively? And why does the formula depend on both x and z?
smoothstep(lower, upper, input)
evaluates to a number between lower
and upper
based on how far between lower
and upper
the input
is.
So the first parameter to the outer smoothstep
call evaluates to something between 65 and 75 depending on the x-position of the target vertex. If the target vertex's x-position is zero, you'd get smoothstep(70.0, 80.0, vPosition.z)
- that is, the texture would fade out between a z-position of 70 and 80.
The particular numbers used here are not important, it's just a demo of how the glsl
property can be used to produce arbitrary blending strategies. In this case the effect is that snow appears on the terrain's peaks, with varying amounts of blending depending on where the peaks are.
Lastly, the expression used for the
stone
texture, how does it work?
slope > 0.7853981633974483 ? 0.2 : 1.0 - smoothstep(0.47123889803846897, 0.7853981633974483, slope) + 0.2
This says: if the slope of the calculated point is greater than 45 degrees (0.7853981633974483 radians), the opacity should be 20%. Otherwise, the opacity should blend smoothly from 100% to 20% between 27 degrees and 45 degrees. I am not sure why I chose that particular blending strategy but the effect is that the stone texture appears in the demo on steep areas.
Oh, opacity versus transparency, I see! Thanks for the good explanation!