May 2022 - June 2022
XR Immersive Tech Internship

Textbox Shader

Overview

This shader is meant to work on a plane object and is driven through the shader without relying on Unity's Canvas. It can scale to any dimension to accomodate varying lengths of text and paragraphs.

Role

Created a shader that takes a HUD design texture and scales it, automatically keeping corners proportionate

Skills

Unity, Amplify Shader Editor

Masking Techniques

The shader works by using masks to display certain parts of the HUD texture, and then constraining them to the corners or edges. In my first iteration, I used separate textures for each of the corners. I was also taught a technique by Farbod Tabei, where I could to use a colors (where the image is split into 3x3, and each section is a different color) to mask out a single image rather than splitting the HUD texture into multiple images, saving resources.

Most of the shader is powered through calculations that use the Object Scale node to modify the Texture Coodinate Tiling and Offset. Below is a portion of the graph that shows the horizontal middle calculations.

The texbox image can be changed directly through the material. Although the final shader uses multiple textures for the masks, the user only has to change the first texture. The horizontal and vertical middle sections can also be adjusted if needed.

Reflection

This shader was an interesting exercise as it was more mathematically based. Although part of the process was experimentation, I thought through and observed what changes were happening as the plane was being scaled. The colour masking technique was also an interesting one as I had not known about it before.

Previous project Next project