[SOLVED] Depth buffer debug not working locally

Help & Support
1

Hi all, I’ve already combed the forums for an answer and came up with nothing.

First – I’ve successfully viewed the depth buffer debug at PlayCanvas Examples and I trimmed the project down to simply the terrain and the depth buffer, and it renders as expected: Imgur: The magic of the Internet

Next – I copied this code exactly, ensuring dependencies like “”/static/lib/glslang/glslang.js", and get no console errors, on my local playcanvas build, and the scene renders, but the depth buffer debug DOES NOT RENDER, as seen here: Imgur: The magic of the Internet

Seems like no matter what I try, I cannot get depth buffer information in my local playcanvas build. Using latest Chrome on Mac. Tried in Safari, same result.

Please help. Why is my depth buffer debug not rendering? Why can I not access the depth buffer in my local? I feel I am missing some hidden silent-fail dependency.

Thanks,
C

PS Here is a trimmed down version of the PlayCanvas Examples example code for those seeking to dig:

function example(canvas, deviceType, files, data) {
    const assets = {
        script: new pc.Asset("script", "script", {
            url: "/static/scripts/camera/orbit-camera.js",
        }),
        terrain: new pc.Asset("terrain", "container", {
            url: "/static/assets/models/terrain.glb",
        }),
    };

    const gfxOptions = {
        deviceTypes: [deviceType],
        glslangUrl: "/static/lib/glslang/glslang.js",
        twgslUrl: "/static/lib/twgsl/twgsl.js",
    };

    pc.createGraphicsDevice(canvas, gfxOptions).then((device) => {
        const createOptions = new pc.AppOptions();
        createOptions.graphicsDevice = device;
        createOptions.mouse = new pc.Mouse(document.body);
        createOptions.touch = new pc.TouchDevice(document.body);

        createOptions.componentSystems = [
            // @ts-ignore
            pc.RenderComponentSystem,
            // @ts-ignore
            pc.CameraComponentSystem,
            // @ts-ignore
            pc.LightComponentSystem,
            // @ts-ignore
            pc.ScriptComponentSystem,
        ];

        createOptions.resourceHandlers = [
            // @ts-ignore
            pc.TextureHandler,
            // @ts-ignore
            pc.ContainerHandler,
            // @ts-ignore
            pc.ScriptHandler,
        ];

        const app = new pc.AppBase(canvas);
        app.init(createOptions);

        // Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        const assetListLoader = new pc.AssetListLoader(
            Object.values(assets),
            app.assets
        );
        assetListLoader.load(() => {
            app.start();


            // instantiate the terrain
            const terrain = assets.terrain.resource.instantiateRenderEntity();
            terrain.setLocalScale(30, 30, 30);
            app.root.addChild(terrain);

           
            // create an Entity with a camera component
            const camera = new pc.Entity();
            camera.addComponent("camera", {
                clearColor: new pc.Color(150 / 255, 213 / 255, 63 / 255),
                farClip: 1000,
            });

            
            app.root.addChild(camera);

            // enable the camera to render the scene's depth map.
            camera.camera.requestSceneDepthMap(true);
           
            app.on("update", function (dt) {
                
                // debug rendering of the deptht texture in the corner
                app.drawDepthTexture(0.7, -0.7, 0.5, -0.5);
            });
        });
    });
}
2

Hi @Charlie_Van_Norman,

That’s quite strange indeed, I don’t see anything wrong in your code. But I may be missing something too :innocent:

@mvaligursky may know more but he is currently away, tagging so he takes a look when he’s back.

3

Hmm is there some repro of this?
The example code is fine (even the simplified version), but you said that runs ok.

5

@mvaligursky –

Here is my repo: GitHub - vannorman/playcanvas-depth-buffer: playcanvas-depth-buffer
It uses a minimal Flask app to serve the app, you’ll need to do the following to repro on your local.

git clone https://github.com/vannorman/playcanvas-depth-buffer
cd playcanvas-depth-buffer
python -m venv venv # create the virtual env
source venv/bin/activate # activate the venv
pip install -r requirements.txt 
./run_local_server.sh

I’ve done this in a fresh repo on my local, noting it includes bare dependencies just playcanvasIniitalizer, playcanavs-stable-min, and the twgsl.js and glslang.js. Same issue - depth map does not display when game is loaded. (see screenshot from my original post on imgur)

note the logic i’ve copied from the playcanvas github.io example is contained in /pdb/static/js/playcanvasInitializer.js

thanks for taking a look … not sure why it would work on the example page but not on my own :sob:

I can’t seem to query the depth buffer either; nothing I’ve tried in the console during the running application has been able to show me current camera depth information …
I do note that in my console:

pc.app.root.findComponent("camera")._sceneDepthMapRequested
// false
6

I solved it by copying the source at https://playcanvas.github.io/iframe/index.js instead of using the playcanvas.stable.min.js that I have saved locally.

I’m not sure where I got the stable playcanvas min, perhaps it is outdated.

Using the code from https://playcanvas.github.io/iframe/index.js instead it works fine.

2 Likes