Overview

Animaze items such as avatars, props, and environments, are rendered using a complex shader (material), called The Animaze Shader. It is built modular, such that it can be customized to the needs of the rendered item. Every mesh has its own material that holds the configuration for the Animaze Shader and references to all textures bound to the mesh. Currently, a mesh Material can configure the Animaze Shader and it is the only way one can change the way an item is rendered.

Open

The Animaze Shader lighting model is Blinn-Phong and has custom methods to compute specular, environment reflections, refractions, etc. So all texture maps will have to be adjusted having this shading model in mind. The Animaze Shader does not follow the Physically-Based Shading equations currently.

For better performance, you can group all the components that have the same material. In the picture above, grouped components share the same color.

Feature breakdown

Material Components

Animaze uses a component system for the  Animaze Shader, each component adds a feature to the item shading, e.g. Environment Mapping component adds the skybox reflection to the surface rendering. Some of the material components need extra info in the form of float values (e.g. fur length for the Fur component), geometric info (e.g. normals) or texture maps (RGB/RGBA/Grayscale textures).

Furthermore, texture maps encode per texel information in their RGB (and Alpha in some cases) channels that require careful tuning and are compliant to specific Animaze shading rules. Texture channel rules are described for each component in particular, although some of the texture maps are shared among them, the rules apply the same.

Some components are solely unique and they exclude each other out when one tries to add them together. For example, the fur and skin dot mapping components cannot coexist on a single mesh material. The reason behind this, is that the Animaze Shader model is built this way in order to reduce the performance expense of the models.

Material Components can be customized by the data fed to the Animaze Editor (e.g. the geometry, the textures) and can also be customized within the Editor's Material Editor (e.g. changing the diffuse texture, setting a tint color etc.). All components that can be changed only from the Animaze Editor are marked accordingly by (*).

List of Material Components

Render Queues

Animaze materials can control the rendered surfaces' render queues. The basic concept is that we need to have a distinction between opaque surfaces and transparent ones, as the transparent ones need to modulate the color of the previously rendered surfaces (the opaque ones). Having render queues brings more control to how the meshes are displayed.

Queues are sorted as follows:

• Environment – drawn first. Commonly used for the skybox.

• Opaque – opaque meshes are drawn front to back so we can leverage depth testing and have less overdraw.

• Fur – fur meshes are very peculiar, they have instanced meshes, where the first layer is opaque and the rest are transparent or blended. Meshes rendered through this queue are sorted back to front.

• Alpha Test – rendered back to front, pixels under a certain alpha value are discarded. This is a more efficient way of adding transparent surfaces.

• Blended – transparent meshes, rendered back to front.

• Overlay – reserved for UI

Shadows

Animaze rendered surface can cast and receive shadows, both processes being independent from each other.

Casting shadows makes the rendered surface be rendered through a shadow pass, building up a shadow map. Receiving shadows makes the Animaze Shader map the already rendered shadow map.

All three numerical values are used to get rid of the shadow mapping artifacts.

Slope bias factor - scale factor that is used to create a variable depth offset for each polygon when rendering the shadow map

Slope bias units - constant depth offset when rendering the shadow map;

Depth bias - screen space value that is used to offset the object depth before comparing it to the shadow map value.

Open

Additional components can be added to a selected mesh within the Animaze Editor:

Specular Normal Mapping – an extra normal map to be used instead of the regular one when computing reflection and specular, usually used for eyes meshes.

Static Color – a color component which overrides any other color texture on that mesh; usually useful for particle systems.

Texture Alterator – basically a gradient color mask used for dilation of the pupil which can be fed by animation data. In order to attain this, you must have a unique mapping for the eye, placed in its center. The mask with full intensity (white) must have the size of the pupil, while the gradient from white to black must have the size of the iris.

Color Customization Maps

Animaze supports 2 types of color customizations, and we are detailing them below:

Classic color customization

Allows full-color control. Uses two textures: a Customization mask and a Desaturated Diffuse (grayscale) texture.

For example, for customizing the Crown King prop pictured below , that has the respective Diffuse texture, you will need to create:

• a desaturated Diffuse texture - lighter in color because the colors from customization mask will be overlayed on this texture 

• a Custom mask RGBA texture with info on all channels - break the parts you want to color separately. The green part represents the green channel, red for the red channel, and blue for the blue channel.

The next step is to add these customization maps on your item. Do so by following this tutorial.

Hue Shifter color customization -

Obtain more details and color variation, with less control over individual colors.

• uses only an RGBA texture

  • the texture must contain a black alpha channel

The hue shifter makes method use of a color average that you need to calculate from the diffuse texture. Here is how:

• open the diffuse texture in Photoshop 

• make a selection of each part from the customization mask on the RGB channels (in our case, the prop has the gold part and the jewels part)

• go to FILTER > BLUR > AVERAGE

Select the color with color picker, afterwhich you need to copy the color code you obtain and add it in the Editor with prefix FF. See example below:

The code above is used further in Animaze Editor, to be set in the Customization Options, for Color & Average Color:

In the example above, we selected the golden part of the crown to show how it needs to be done. The same procedure must be ran for the parts of the diffuse texture that contain the jewels.

Add the Hue Shifter customization through Animaze Editor, as shown here.