Allow to control intensity of SSR

[NoriyukiIchijo]

Description

SSR adds reality to rendering and despite I'm new to three.js, I feel its SSR post effect is fine.
But you can only control on or off of the "metalness" of each object by applying substitute material below depending on if it's in "selects" or not.

SSRPass.js:

// metalnessOn material

this.metalnessOnMaterial = new MeshBasicMaterial({
    color: 'white'
});

// metalnessOff material

this.metalnessOffMaterial = new MeshBasicMaterial({
    color: 'black'
});

And it is uses like switch as below.

SSRShader.js:

void main(){
    #ifdef SELECTIVE
        float metalness=texture2D(tMetalness,vUv).r;
        if(metalness==0.) return;
    #endif

So the scene tends to be shown too metallic.

Solution

The workaround I use is to make intermediate materials like

SSRPass.js:

// withMetalness material

this.withMetalnessMaterial = [];
for (let i = 0; i < 256; i++) {
    const rgb = i / 255.0;
    this.withMetalnessMaterial[i] = new MeshBasicMaterial({
        color: new Color(rgb, rgb, rgb),
    });
}

and use it instead of metalnessOnMaterial like

if (this._selects.includes(child)) {

     // child.material = this.metalnessOnMaterial;
    const metalness = child.material.metalness ?? 0;
    child.material = this.withMetalnessMaterial[Math.round(metalness * 255)];
    
} else {

    child.material = this.metalnessOffMaterial;

}

Then use it as below.

SSRShader.js:

gl_FragColor.a=op * metalness;

Alternatives

As I said, I'm new to three.js thus there might be better or even existing solution.

Additional context

No response

[Mugen87]

This is solved with the new SRRNode implementation, see #29597 and #29605.

A solution for the legacy SSRPass is not planned. So you have to switch to WebGPURenderer.