Tutorial: Texture masks using a shader

Showcase
#1

In this tutorial we will learn how to use shaders to mask and animate textures in real time. Shaders are a powerful feature that allow low level access of the rendering pipeline. Knowledge of writing shaders to program the output of the GPU allows the developer to easily extend a graphics engine.

You can study the complete tutorial here.

Let me know if there are any suggestions on how to improve and make these tutorials helpful.

7 Likes
#2

Great tutorial. I wish I’d had it when I had to start thinking about Shaders and chunks. Great news for everyone who hasn’t tried it yet!!!

1 Like
#3

The link for your project at the end of the tutorial doesn’t work anymore. Could you reupload this?

#4

Here you go:
https://playcanvas.com/project/510023/

#5

Thank you very much!

#6

Quick questions,

Is it possible for a texture used this way to be applied on a different UV than the diffuse?

Let’s say the diffuse use the UV0 but the pattern use the UV1 of that mesh?

And also, I noticed the pattern seems to be multiplied over the diffuse. Could it be a flat overlay?
This way I won’t see the underlying texture at all?

Thank you

#7

Yeah, I think that is doable, though I’ve never used it myself. I imagine you will just use the vUv1 variant to access the UV1 of the mesh.

Yes, sure, play with mix() and multiplication (*) and assign your diffuse color directly to the land mask.

Something like this:

land = mix(land, texture2DSRGB(uGrassPattern, 25.0 * $UV).$CH, texture2DSRGB(uIceMap, $UV).$CH);

#8

It seems the guide doesn’t work anymore. Is there a new guide on this topic? I am trying to apply another texture on already existing one using black and white or RGB mask texture (exactly as shown in the guide)
image
How do I achieve the same effect nowadays?

#9

If you just want to do a simple mask, you can use a standard material and the opacity channel to do the masking

1 Like