Effect Asset

Effect creation

To create a new effect asset, click the + button on the upper left corner of the Assets panel and select Effect. Or just right-click on the Assets panel and choose Create -> Effect.

Engine will create an effect asset in the Assets named effect by default:

In Effect Inspector you can see that the shader is mainly composed of the following parts:

Shaders

If the current shader has multiple rendering passes, you can select a different rendering pass through the drop-down box to the right of Shaders. After selecting a render pass, the currently compiled shader code can be viewed through the GLSL Output window.

Precompile Combinations

Under normal circumstances, the material will be compiled when the corresponding macro definition is used. When more macro definitions are used, the compilation maybe slow. Therefore, the precompiled macro definition combination can be configured in this option, which is used to compile the required macro definition combination in advance. For example, the configuration in the following figure:

This indicates that the following 4 combined shaders will be precompiled at initialization:

USE_INSTANCING = 0, USE_BATCHING = 0

USE_INSTANCING = 0, USE_BATCHING = 0

USE_INSTANCING = 1, USE_BATCHING = 0

USE_INSTANCING = 1, USE_BATCHING = 1

GLSL Output

Currently the engine provides GLSL 300 ES and GLSL 100 output.

The compiled vertex and fragment shaders can be toggled between display by selecting different tabs:

Use shaders procedurally

When using the engine's built-in shader, it can be accessed directly without the shader's path and extension. The code example is as follows:

// Get built-in unlit effect: ‘builtin-unlit.effect’
const effect = EffectAsset.get('unlit');

const mat = new Material();

// Initialize material with built-in physically based lighting shader (PBR) 'builtin-standard.effect'
mat.initialize({ effectName: "standard" });

If it is a custom shader, you need to find the corresponding shader name in the Shaders property of the effect in the Inspector panel, and then load and use it by its unique string name.

Take the custom shader in the above figure as an example, the code example is as follows:

resources.load("custom-effect", EffectAsset, ()=>{
    const effectAsset = EffectAsset.get("../resources/custom-effect");
    const material = new Material();
    material.initialize({ effectName: "../resources/custom-effect" });
})