UX Tools contains a handful of graphics and rendering techniques to implement Fluent Design System principles, and remain performant on Mixed Reality devices.
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 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.
Unreal's built in light types are not included within
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.
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, 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.
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
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.
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
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
M_FingerTipRing material and
Thick_Finger_Ring.ush shader with the
M_FingerTipRing model are used to create a volumetric finger tip affordance.
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 the
- Six copies of the
SM_BoundsControlEdgemodel are scaled and offset to create the bound edges and rendered with the