Around custom shaders

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:

Not so easly @Leonidas i don’t get a thing of what i should change :smiley:

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:

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