Hello, was messing around with the custom shaders tutorial, what i want to achieve is to assign textures based on heigh map. The tutorial make dissolve the texture assigning a value to the heigh, how can i change the invisible texture with another texture to achieve my goal?
Hi @ayrin,
Here is a great GLSL shader on how to do terrain texture splatting based on height. It’s for Three.js but you can easily adapt it to Playcanvas:
You will have to learn how to work with shaders in Playcanvas, to be able to do that, there isn’t a ready made solution (yet).
Check the examples projects here:
https://developer.playcanvas.com/en/tutorials/?tags=shaders
And here is how I’d use that three.js shader code in Playcanvas (override albedo and add a few new shader uniforms):
uniform sampler2D texture_colorMap;
uniform float tile;
uniform sampler2D texture_channel0;
uniform sampler2D texture_channel1;
uniform sampler2D texture_channel2;
uniform sampler2D texture_channel3;
void getAlbedo() {
vec4 colormap = texture2D(texture_colorMap, vUv0);
vec3 texel0 = texture2D(texture_channel0, vUv0 * tile).rgb;
vec3 texel1 = texture2D(texture_channel1, vUv0 * tile).rgb;
vec3 texel2 = texture2D(texture_channel2, vUv0 * tile).rgb;
vec3 texel3 = texture2D(texture_channel3, vUv0 * tile).rgb;
dAlbedo = gammaCorrectInput(colormap.r * texel0 + colormap.g * texel1 + colormap.b * texel2 colormap.a * texel3);
}
1 Like
hi @Leonidas, in your example you use a colormap where for each color you assign a materilal, i guess i can do that too, but the three.js sample use the heightmap directly to change the material based on altitude. Anyway i can use your method too coz it’s not very expensive in terms of resources and time. I will show you the result. Thanks.
1 Like