Difference between revisions of "Shader Family"

From PowerUI
Jump to: navigation, search
(Created page with "If you would like to use custom shading - particularly important for text-extrude - then you can setup a shader family. This is a group of 4 shaders: * Extru...")
 
(Creating a family)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
If you would like to use custom shading - particularly important for [[Text Extrude|text-extrude]] - then you can setup a shader family. This is a group of 4 shaders:
+
If you would like to use custom shading - particularly important for [[Text Extrude|text-extrude]] - then you can setup a shader family. They are used with the shader-family CSS property:
  
* Extruded (PowerUI/FamilyName/Extruded)
+
<syntaxhighlight lang="css">
Applies when text-extrude is in use.
+
 
 +
shader-family: <string>
  
* Isolated (PowerUI/FamilyName/Isolated)
+
</syntaxhighlight>
This usually means videos and any other off atlas images. Part of the UI is "isolated" when it is a completely separate mesh and material from everything else.
 
  
* Normal (PowerUI/FamilyName/Normal)
+
{| class="wikitable"
The normal shader applies when the other ones don't. It's the one you'll most commonly see.
+
|-
 +
! Inherited?
 +
! Initial value
 +
|-
 +
| Yes
 +
| none (implies "StandardUI")
 +
|}
  
* SFX (PowerUI/FamilyName/SFX)
 
A more advanced version of the normal shader. It obtains the text anti-aliasing settings from the tangents of the mesh, allowing each letter to have individual styling. It's used by, for example, text-shadow.
 
  
The group of four shaders typically goes into a folder called FamilyName which is then placed within any Resources folder in your project. Examples of built in shader families can be found in PowerUI\Shaders\Resources.
+
<syntaxhighlight lang="css">
  
 +
shader-family:"StandardUI Lit";
  
== Using a family ==
+
</syntaxhighlight>
  
Just like font-family, you'll want to use the shader-family CSS property:
+
== Creating a family ==
  
<syntaxhighlight lang="css">
+
They're a group of 3 shaders:
 +
 
 +
* Extruded (PowerUI/FamilyName/Extruded)
 +
Applies when text-extrude is in use.
 +
 
 +
* Isolated (PowerUI/FamilyName/Isolated)
 +
This usually means videos and any other off atlas images. Part of the UI is "isolated" when it is a completely separate mesh and material from everything else.
  
shader-family:"StandardUI Lit";
+
* Normal (PowerUI/FamilyName/Normal)
 +
The normal shader applies when the other ones don't. It's the one you'll most commonly see.
  
</syntaxhighlight>
+
The group of three shaders typically goes into a folder called FamilyName which is then placed within any Resources folder in your project. Examples of built in shader families can be found in PowerUI\Shaders\Resources.

Latest revision as of 22:58, 3 February 2017

If you would like to use custom shading - particularly important for text-extrude - then you can setup a shader family. They are used with the shader-family CSS property:

shader-family: <string>
Inherited? Initial value
Yes none (implies "StandardUI")


shader-family:"StandardUI Lit";

Creating a family

They're a group of 3 shaders:

  • Extruded (PowerUI/FamilyName/Extruded)

Applies when text-extrude is in use.

  • Isolated (PowerUI/FamilyName/Isolated)

This usually means videos and any other off atlas images. Part of the UI is "isolated" when it is a completely separate mesh and material from everything else.

  • Normal (PowerUI/FamilyName/Normal)

The normal shader applies when the other ones don't. It's the one you'll most commonly see.

The group of three shaders typically goes into a folder called FamilyName which is then placed within any Resources folder in your project. Examples of built in shader families can be found in PowerUI\Shaders\Resources.