Custom Shaders

Guides on how to write your own shaders in Wonderland Engine.

Vertex vs Fragment Shaders

In Wonderland Engine, we currently expose APIs for writing custom fragment shaders.

Material Struct

The material struct defines the material properties to input to your shader and generate UI for.

This struct definition allows us to efficiently pack material inputs and generate unpacking code automatically in the {{ decoder }} placeholder of your shader.

An example material struct may look like this:

1struct Material {
2    lowp vec4 ambientColor;
3    mediump uint diffuseTexture;
4    lowp uint shininess;
5    lowp float ambientFactor;
6    mediump float amplifier;
7};

Property Types

The following property types are supported in combination with the lowp and mediump precision specifiers:

float, uint, int: Scalar values
vec2, vec3, vec4: Floating-point vectors
ivec2, ivec3, ivec4: Integer vectors

Precision

In Wonderland Engine lowp will always result in an 8-bit per component encoded type, mediump in a 16-bit encoded type (e.g., a half float) and highp, where supported, will be a 32-bit encoded type.

Suffixes

The following suffices have special meaning:

*Color: Will generate a color picker. Use lowp for LDR colors.
*Texture: Will generate a texture resource dropdown. Always use mediump.

Memory Alignment

Due to how Wonderland Engine’s material packing works, most vector types require alignment to 32-bits. See precision for how to count bits per component.

Preprocessor Symbols

To compile out pieces of a shader for performance, we allow have an extended preprocessor implementation.

Features

You can define “Feature Symbols” in shaders to enable and disable pieces of your shader:

1#define FEATURE_ALPHA_MASKED
2#define FEATURE_NORMAL_MAPPING
3#define FEATURE_VERTEX_COLORS
4#define FEATURE_WITH_EMISSIVE

FEATURE_<name> is used to define a feature called <name>. These will be exposed in the Views > Resources > Pipelines settings in the “Features” list. If a feature is enabled, a symbol will be defined to match your feature name, e.g. ALPHA_MASKED in the above example (not FEATURE_ALPHA_MASKED).

Fragment Inputs

Symbols prefixed with USE_<input> are used to enable shader inputs. You have the following options:

Symbol	Type	Name
`USE_POSITION_WORLD`	`highp vec3`	`fragPositionWorld`
`USE_POSITION_VIEW`	`highp vec3`	`fragPositionView`
`USE_TEXTURE_COORDS`	`highp vec2`	`fragTextureCoords`
`USE_TEXTURE_COORDS_1`	`highp vec2`	`fragTextureCoords1`
`USE_COLOR`	`mediump vec4`	`fragColor`
`USE_TANGENT`	`mediump vec4`	`fragTangent`
`USE_OBJECT_ID`	`mediump uint`	`fragObjectId`
`USE_MATERIAL_ID`	`mediump uint`	`fragMaterialId`
`USE_NORMAL`	`mediump vec3`	`fragNormal`
`USE_BARYCENTRIC`	`mediump vec3`	`fragBarycentric`

Includes

Wonderland Engine comes with a GLSL shader include system. Please reference existing shaders for which includes are commonly required.

Uniforms

Some special uniforms that are always available:

Uniform	Type	Description
`viewIndex`	`uint`	Index of current view being rendered.

For others, please use the shaders shipped with the editor as reference. Some of them are only available when enabled via a preprocessor symbol.