UsceneDephMap is used by the shader but not available

Help & Support
, ,
1

I have a bokeh effect that behaves very very strangely on different devices. On one mac the view looks all blurry. And I got this error when I open the console.

A sample uSceneDepthMap is used by the shader but a scene depth texture is not available. Use CamperaComponent.requestSceneDepthMap to enable it.

So I indeed did it with couple of other things these are;

Changing the WebGl version => Didn’t worked.
Changed device pixel ratio => Didn’t worked.
Accessing the Depth Layer and incrementing the count => Didn’t worked.

Do anyone know what can I do about it?

this.shader = new pc.Shader(graphicsDevice, {
        attributes: {
            aPosition: pc.SEMANTIC_POSITION
        },
        vshader: [
            "attribute vec2 aPosition;",
            "",
            "varying vec2 vUv0;",
            "",
            "void main(void)",
            "{",
            "    gl_Position = vec4(aPosition, 0.0, 1.0);",
            "    vUv0 = (aPosition.xy + 1.0) * 0.5;",
            "}"
        ].join("\n"),
        fshader: [
            "precision " + graphicsDevice.precision + " float;",
            (graphicsDevice.webgl2) ? "#define GL2" : "",
            pc.shaderChunks.screenDepthPS,
            "",
            "varying vec2 vUv0;",
            "",
            "uniform sampler2D uColorBuffer;",
            "",
            "uniform float uMaxBlur;",  // max blur amount
            "uniform float uAperture;", // uAperture - bigger values for shallower depth of field
            "",
            "uniform float uFocus;",
            "uniform float uAspect;",
            "",
            "void main()",
            "{",
            "    vec2 aspectCorrect = vec2( 1.0, uAspect );",
            "",
            "    float factor = ((getLinearScreenDepth(vUv0) * -1.0) - uFocus) / camera_params.y;",
            "",
            "    vec2 dofblur = vec2 ( clamp( factor * uAperture, -uMaxBlur, uMaxBlur ) );",
            "",
            "    vec2 dofblur9 = dofblur * 0.9;",
            "    vec2 dofblur7 = dofblur * 0.7;",
            "    vec2 dofblur4 = dofblur * 0.4;",
            "",
            "    vec4 col;",
            "",
            "    col  = texture2D( uColorBuffer, vUv0 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.0,   0.4  ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.15,  0.37 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.29,  0.29 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37,  0.15 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.40,  0.0  ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.37, -0.15 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.29, -0.29 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15, -0.37 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.0,  -0.4  ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15,  0.37 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29,  0.29 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.37,  0.15 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.4,   0.0  ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37, -0.15 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, -0.29 ) * aspectCorrect ) * dofblur );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.15, -0.37 ) * aspectCorrect ) * dofblur );",
            "",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.15,  0.37 ) * aspectCorrect ) * dofblur9 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37,  0.15 ) * aspectCorrect ) * dofblur9 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.37, -0.15 ) * aspectCorrect ) * dofblur9 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15, -0.37 ) * aspectCorrect ) * dofblur9 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.15,  0.37 ) * aspectCorrect ) * dofblur9 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.37,  0.15 ) * aspectCorrect ) * dofblur9 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.37, -0.15 ) * aspectCorrect ) * dofblur9 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.15, -0.37 ) * aspectCorrect ) * dofblur9 );",
            "",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.29,  0.29 ) * aspectCorrect ) * dofblur7 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.40,  0.0  ) * aspectCorrect ) * dofblur7 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.29, -0.29 ) * aspectCorrect ) * dofblur7 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.0,  -0.4  ) * aspectCorrect ) * dofblur7 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29,  0.29 ) * aspectCorrect ) * dofblur7 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.4,   0.0  ) * aspectCorrect ) * dofblur7 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, -0.29 ) * aspectCorrect ) * dofblur7 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.0,   0.4  ) * aspectCorrect ) * dofblur7 );",
            "",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.29,  0.29 ) * aspectCorrect ) * dofblur4 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.4,   0.0  ) * aspectCorrect ) * dofblur4 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.29, -0.29 ) * aspectCorrect ) * dofblur4 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.0,  -0.4  ) * aspectCorrect ) * dofblur4 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29,  0.29 ) * aspectCorrect ) * dofblur4 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.4,   0.0  ) * aspectCorrect ) * dofblur4 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2( -0.29, -0.29 ) * aspectCorrect ) * dofblur4 );",
            "    col += texture2D( uColorBuffer, vUv0 + ( vec2(  0.0,   0.4  ) * aspectCorrect ) * dofblur4 );",
            "",
            "    gl_FragColor = col / 41.0;",
            "    gl_FragColor.a = 1.0;",
            "}"
        ].join("\n")
    });

    // Uniforms
    this.maxBlur = 0.02;
    this.aperture = 1;
    this.focus = 1;
}

BokehEffect.prototype = Object.create(pc.PostEffect.prototype);
BokehEffect.prototype.constructor = BokehEffect;

Object.assign(BokehEffect.prototype, {
    render: function (inputTarget, outputTarget, rect) {
        var device = this.device;
        var scope = device.scope;

        scope.resolve("uMaxBlur").setValue(this.maxBlur);
        scope.resolve("uAperture").setValue(this.aperture);
        scope.resolve("uFocus").setValue(this.focus);
        scope.resolve("uAspect").setValue(device.width / device.height);
        scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);

        pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect);
    }
});

// ----------------- SCRIPT DEFINITION ------------------ //
var Bokeh = pc.createScript('bokeh');

Bokeh.attributes.add('maxBlur', {
    type: 'number',
    default: 0.02,
    min: 0,
    max: 1,
    title: 'Max Blur'
});

Bokeh.attributes.add('aperture', {
    type: 'number',
    default: 1,
    min: 0,
    max: 1,
    title: 'Aperture'
});

Bokeh.attributes.add('focus', {
    type: 'number',
    default: 1,
    title: 'Focus'
});

Bokeh.prototype.initialize = function () {

    this.effect = new BokehEffect(this.app.graphicsDevice);
    this.effect.maxBlur = this.maxBlur;
    this.effect.aperture = this.aperture;
    this.effect.focus = this.focus;


    this.on('attr', function (name, value) {
        this.effect[name] = value;
    }, this);

    var queue = this.entity.camera.postEffects;

    queue.addEffect(this.effect);

    this.on('state', function (enabled) {
        if (enabled) {
            queue.addEffect(this.effect);
        } else {
            queue.removeEffect(this.effect);
        }
    });

    this.on('destroy', function () {
        queue.removeEffect(this.effect);
    });
};
2

Hi @zach_elsm and welcome,

How are you checking that it doesn’t work?

Do check this PlayCanvas engine example on how to setup your post effects scene, depth and bokeh works there.

https://playcanvas.github.io/#/graphics/post-effects

3

May also be related to: Depth texture is not working correctly on some Macs · Issue #4266 · playcanvas/engine · GitHub

1 Like
4

I’ve seen the same issue recently on our postprocessing engine example when running on Webgl1 device. We get the warning and the scene is all blurry. Time to log a ticket I think.

5

created a tracking issue: uSceneDepthMap is not available on WebGl1 · Issue #4835 · playcanvas/engine · GitHub

6

The implementation on my end is correct.

7

Yes, they must have a relationship.

8

I mean the answers on here and there didn’t work. So you are saying that might be related to infrastructure of playcanvas?

9

If it works fine on WebGl2 devices, but not on Webgl1 devices, than this is most likely caused by the ticket I created, and’ll try to fix it in a week or two.

If the conditions are different, it might be something else, I’m not sure.

10

I’ve changed the WebGl versions and the result is the same. There must be another variable that causes this problem.

11

Just to check, can you run WebGL Report on your Mac please and post the results here?

12

We have two examples that use the depth map:

Please try those as well and see how those work on your devices.

13

You could also add these to your initialize of some script and look at the logs:

pc.Tracing.set(pc.TRACEID_RENDER_PASS, true);
pc.Tracing.set(pc.TRACEID_RENDER_PASS_DETAIL, true);

I think those can show if the depth capture is taking place if I remember correctly.

14

Ekran Resmi 2022-11-14 11.39.01
Ekran Resmi 2022-11-14 11.39.011638×612 73.4 KB

So I got these logs which honestly I didn’t get the message.

15

The browser is not supporting webgl2. I also realized that when I choose prefer using webgl1 on a device which I don’t get the blurry look, I get the same blurry effect. So can we come to the conclusion that this error may be related to the webgl version?

16

Yes, that’s what the ticket I created is about … and your issue fits right here.

Thanks for the logs … those show the depth grab pass is running … so the issue is elsewhere. I’d investigate hopefully this week.

17

In the mean time what do you think about this maybe this can help too.

18

I’m not sure I understand what you mean?

19

I have a fix for WebGL1 here: [Fix] Fixing grab depth texture on WebGL1 by mvaligursky · Pull Request #4845 · playcanvas/engine · GitHub
It should get released with the next engine release, either 1.58.1 or 1.59.0, whichever happens next.

3 Likes
20

Thanks a lot!