Remove BasicMaterial and allow better ways to create custom shaders using ShaderMaterial

[mvaligursky]

Current status

BasicMaterial is a simple engine-provided material with the following key aspects:

• it generates low cost shader which supports skinning, morphing, vertex colors and a single texture with fog and picker compatibility
• it does not support lighting and does not provide a way to add a simple lighting, nor it provides a way for users to customize the generated shader
• does not support VSM shadows BasicMaterial does not render to shadow map in some cases #3298
• internally the engine and the Editor only use it to render lines, which is trivial to replace: Custom line shader & handle gamma #6834

Plan for engine 2.0.0

The plan is to remove BasicMaterial from the engine. There are two replacement paths, one existing and one which will require some further work.

StandardMaterial

StandardMaterial can be used as a complete replacement, when using emissive texture slot with vertex format. It handles all features of the BasicMaterial (and many more), and generates code with very similar / same performance.
It is exposed in the Editor inspector / Editor workflow.
This should be the main replacement path for users not requiring custom modification.

ShaderMaterial

This is an under development material / shader system allowing users to use custom shaders, by providing a custom shader source code, which the engine implements or helps user to implement additional features. Main features / unfinished work:

• internally, the shader code processing in the engine now supports #include pragma, allowing an existing shader chunks to be included in the custom shaders. Currently this is used to allow user to easily handle gamma / tone-mapping and fog.
• support for handling of render passes was added here [BREAKING] Implementation of ShaderMaterial - Material to be used with custom shaders #6831
• support for (semi)automatic shader support with skinning and morphing should be added Skinning / morphing support for ShaderMaterial #6855
• shader defines Material can specify defines for the shader #6865
• easier support to handle shadow pass needs to be added, using #include
• easier support to handle picker pass needs to be added, using #include ShaderMaterial supports PICK shader pass #6856
• support by the batching
• write an engine example demonstrating most the these features

When this is done, it will give users an option to create a custom look shader, which can be skinned, which will handle tone-mapping and fog and many other features, opening a way for custom looking applications (targeting mostly non-photorealistic games here)

I look forward to a feedback here.

[willeastcott]

@mvaligursky Is this complete now?

[mvaligursky]

There are still those two remaining improvements I would not mind to get to at some point.

[kungfooman]

LLM's still use pc.BasicMaterial all the time, how can we polyfill for still having simple unlit geometry and same performance?

Currently I have:

// Polyfill for simple unlit geometry in PlayCanvas v2
class BasicMaterial extends pc.StandardMaterial {
    set color(value) {
        this.emissive = value;
    }

    get color() {
        return this.emissive;
    }

    set map(value) {
        this.emissiveMap = value;
    }

    get map() {
        return this.emissiveMap;
    }
}

Is this enough?

[mvaligursky]

You probably want this as well in the constructor

this.useLighting = false;
this.diffuse = new pc.Color(0, 0, 0);

and maybe something along this, if vertex color is needed:

this.emissiveVertexColor = useVertexColor;

[kungfooman]

and maybe something along this, if vertex color is needed:

this.emissiveVertexColor = useVertexColor;

Thank you, exactly what I needed!

Now I got this:

// Polyfill for simple unlit geometry in PlayCanvas v2
// See https://github.com/playcanvas/engine/issues/6835
const BasicMaterial = pc.BasicMaterial ?? class BasicMaterial extends pc.StandardMaterial {
    constructor() {
        super();
        this.ambient = new pc.Color(0, 0, 0);
        this.diffuse = new pc.Color(0, 0, 0);
        this.useLighting = false;
    }

    set color(value) {
        this.emissive = value;
    }

    get color() {
        return this.emissive;
    }

    set map(value) {
        this.emissiveMap = value;
    }

    get map() {
        return this.emissiveMap;
    }

    set vertexColors(value) {
        this.emissiveVertexColor = value;
    }
    
    get vertexColors() {
        return this.emissiveVertexColor;
    }
}

// Create material
const material = new BasicMaterial();
material.color = new pc.Color(1, 1, 1); // White to allow vertex colors
material.vertexColors = true;
material.update();

I didn't add this.diffuse = new pc.Color(0, 0, 0); in the constructor because it seems to be the default emissive color anyway?

Now I can switch between 1.77.0 and v2 and it just works 👍

[mvaligursky]

Diffuse defaults to (1, 1, 1). If not black, your material will likely pickup the ambient color.

[kungfooman]

Oh right, I just mixed that diffuse up with color which I then thought was emissive which defaults to (0, 0, 0) (I guess)

Didn't notice the ambient color, just working on a little math viz tool:

fixed example