Error when using use OrderIndependent Transparency

Questions
1

We’re getting an error when simply turning on useOrderIndependentTransparency eg:
const scene = new Scene(engine);
scene.useOrderIndependentTransparency = true;

obviously we cant repro this in a PG example so it may be something further in our setup. We’ve tried to disable post processing. We are using PBRCustomMaterials I dont know if thats causing issues. We are not using any node materials or doing any other custom post process or shader setup that might interfere.

Any thoughts would be helpful?

TypeError: Cannot read properties of undefined (reading 'render')
    at RenderingGroup.render (renderingGroup.ts:173:74)
    at RenderingManager.render (renderingManager.ts:212:28)
    at Scene._renderForCamera (scene.ts:3629:32)
    at Scene._processSubCameras (scene.ts:3654:18)
    at Scene.render (scene.ts:3918:18)
    at SpectrumRenderer.js:170:38
    at Engine._renderFrame (engine.ts:1279:13)
    at Engine._renderLoop (engine.ts:1297:26)
2

It will be hard to help without a repro somewhere…

It would seem that the depth peeling renderer is not initialized: can you check that scene.depthPeelingRenderer is not null/empty (console.log(scene.depthPeelingRenderer))?

1 Like
3

depthPeelingRenderer is infact null. (undefined)
reading the docs it seems im am not suppose to manually instantiate it as its taken care of by the scene.

what conditions would cause this to occur? could it be optimization params im passing in when i instantiate the engine?

engineOptions = {
disableWebGL2Support: false,
antialias: true,
enableOfflineSupport:true,
doNotHandleContextLost:true,
clearCachedVertexData:true,
cleanCachedTextureBuffer:false,
xrCompatible:false,
autoEnableWebVR:false,
doNotHandleTouchAction:true
}

engine = new Engine(canvas, engineOptions.antialias, engineOptions);

4

I can’t understand how it can happen, because the code of the depthPeelingRenderer getter is:

Object.defineProperty(Scene.prototype, "depthPeelingRenderer", {
    get: function (this: Scene) {
        if (!this._depthPeelingRenderer) {
            let component = this._getComponent(SceneComponentConstants.NAME_DEPTHPEELINGRENDERER) as DepthPeelingSceneComponent;
            if (!component) {
                component = new DepthPeelingSceneComponent(this);
                this._addComponent(component);
            }
        }

        return this._depthPeelingRenderer;
    },

So, if the pointer is null or undefined we get the depth peeling component from the scene. If we don’t find it (which will happen the first time we access depthPeelingRenderer), we instantiate it, and the constructor of this object is setting scene.depthPeelingRenderer:

    constructor(scene: Scene) {
        this.scene = scene;
        scene.depthPeelingRenderer = new DepthPeelingRenderer(scene);
    }

So, it should not be possible to have a null/undefined depthPeelingRenderer property, except if at some point you override it by something like scene.depthPeelingRenderer = null.

No, you should not do it, just use scene.depthPeelingRenderer, the depth peeling renderer will be created the first time you access the property.

1 Like
5

Hello, @Anupam_Das just checking in if your issue was resolved?

6

I never got around to trying this solution but when I do I will report back.