Graphics
UX Tools contains a handful of graphics and rendering techniques to implement Fluent Design System principles, and remain performant on Mixed Reality devices.
Materials
Many mobile stereo headsets are fill rate bound, to reduce fill rate materials should be as simple, or inexpensive as possible. A handful of inexpensive material instances are included with the toolkit which derive from M_SimpleLit_Color.
M_SimpleLit_Color uses the Unreal unlit lighting model to avoid extra computations, but uses the MF_SimpleLit material function to perform basic realtime Blinn-Phong lighting on a single (virtual) directional light. The virtual directional light's properties are passed in via the MPC_UXSettings material parameter collection.
Note
Unreal's built in light types are not included within MF_SimpleLit calculations.
MPC_UXSettings contains global shader constants that are used to drive lighting effects as well as UI effects. For example, the left and right pointer positions are updated each frame within MPC_UXSettings to drive lighting effects emitted from the hand interaction pointers.
Shaders
To achieve visual parity with the HoloLens 2 shell, a couple of shaders exist in the "UX Tools plugin root"/Shaders/Public/ directory. A shader source directory mapping is created by the UX Tools plugin to allow any UE4 material to reference shaders within that directory as /Plugin/UXTools/Public/Shader_Name.ush.
Note
Note, many of the shaders within this directory are generated from an external tool, and are not formatted for user readability.
A couple of shaders are described below in more detail, as well as any special considerations which must be made when using the shader.
Button Box
The M_ButtonBox material and Bounding_Box.ush shader generate glowing edges on a cube with optional circular blob. The blob appears only on the active face set with the Blob_Active_Face parameter. The shader must be used with the correct corresponding cube model. The special model enables the shader to render only the visible areas of the surfaces. The last two letters of the SM_FrontPlate_xx model name indicates which face is active. For example, SM_FrontPlate_PY indicates the positive y-axis.
Rounded Edge Thick
The M_RoundedEdgeThick material and Rounded_Edge_Thick.ush shader are designed to render a quad as an outlined rounded rectangle with depth. The shader works with a special mesh that approximates the round corners using triangles and includes additional information for anti-aliased silhouette edges. UX Tools includes several models named SM_BackPlateRoundedThick_# where # is the number of triangles per rounded corner. Use the model with the fewest triangles that works for your scenario.
Note
Note, the SM_BackPlateRoundedThick_# mesh and Rounded_Edge_Thick.ush shader assume the local y-axis is up, and not Unreal's traditional z-axis up. These assumptions were made when the Rounded_Edge_Thick.ush shader was authored in a separate content creation tool. To resolve these assumptions the UxtBackPlateComponent and Rounded_Edge_Thick.ush perform an additional rotation. This rotation is transparent to the end user and should not effect anything but advanced use cases.
Thick Finger Ring
The M_FingerTipRing material and Thick_Finger_Ring.ush shader with the M_FingerTipRing model are used to create a volumetric finger tip affordance.
Bounding Box
The M_BoundsControl material and Bounding_Box.ush shader generate glowing edges on a cube with optional glowing blob and on/off transition effect. The shader must be used with the SM_BoundsControl model. The special models enable the shader to render only the visible areas of the box surfaces.
The above shader uses additive blending; if alpha blending is preferred a second method of creating the Bounding Box effects exists which works by splitting the box affordance into parts:
- The finger tip blob visuals are rendered using the
SM_BoundsControlFacemodel with theM_BoundsControlFacematerial. - Six copies of the
SM_BoundsControlEdgemodel are scaled and offset to create the bound edges and rendered with theM_BoundsControlEdgeshader.