Tutorial: Texture masks using a shader


#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.


#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!!!


#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);