IceCreamYou/THREE.Terrain

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!