Last year I had to do some triplanar texture mapping for a project. For that I had to go off of Unity guides on how to accomplish it. I finally got around to putting together a PlayCanvas demo project of that functionality for anyone looking to do that kind of thing.
Demo project: PlayCanvas | HTML5 Game Engine
Demo preview: [WIP] Tri-Planar Tex Projection - PLAYCANVAS
Screenshot:
Use-cases
- In my case I had a model that would morph in size, it was important that textures did not stretch across the model. While adjusting the “tiling” on the material was an option, tweaking the tiling numbers at the same time the model morphed, proved to be very finicky. Which is why triplanar texture mapping was chosen since that is a non-issue.
- A very popular use-case is for terrain. You can have the walls of a canyon be a cliffy/rocky texture that blends perfectly into a sandy texture on the non-cliff parts. An example of that is below:
To accomplish the canyon-like trick, you’ll need to use different textures for the Y and XZ axis. This demo project doesn’t use different textures for different XYZ axis. But, that can probably be added without too much additional work.
Downsides
- Cannot use UV mapping.
- Since this approach uses 3 texture lookups instead of just 1, this operation is a little more expensive.
Additional Reading
Here’s a Unity tutorial that explains it pretty well (the terrain screenshot comes from it): Martin Palko - Triplanar Mapping
Leonidas has a great tutorial about using shader chunks and masking with shaders: Texture masks using a shader | Playing in Canvas