[SOLVED] Cannot read properties of null (reading 'device')

Vahrenhol3D · January 4, 2023, 4:13pm

Hello everyone,

I have encountered a strange issue where if I click a button that tweens the camera, parts of the scene disappear and the PC console says “Error loading scripts” with the browser console telling me this:

Any help would be massively appreciated. I am left absolutely clueless as to why this happens because I have an almost identical script linked to the button below, yet it works just fine.

And finally, here are the scripts. The first one works just fine, the second one doesn’t apparently:

var ToBottomRight = pc.createScript('toBottomRight');

// initialize code called once per entity
ToBottomRight.prototype.initialize = function() {
    this.entity.element.on('click', this.onPress, this);
};

// update code called every frame
ToBottomRight.prototype.onPress = function(dt) {
    var Camera = this.app.root.findByName('Camera');

    this.app.root.findByName('Schriftzug_THWS').enabled=false;
    this.app.root.findByName('Ausstellungsstuecke').enabled=true;
    this.app.root.findByName('Gelaende').enabled=false;

    var screens = this.app.root.findByTag('InfoScreen');
    for(var i = 0; i < screens.length; i++) {
        var CurrentScreen = screens[i];

            this.tween = CurrentScreen.tween(CurrentScreen.getLocalPosition())
                .to(new pc.Vec3(-12877.759, -31000, 2986.441), 1, pc.QuadraticInOut)
                .delay(0.0)
                .loop(false)
                .yoyo(false);
            this.tween.start();
    }

    this.tween = Camera.tween(Camera.getLocalPosition())
        .to(new pc.Vec3(6.394, 2, -17.175), 2, pc.QuadraticInOut)
        .delay(0.0)
        .loop(false)
        .yoyo(false);
    this.tween.start();

    this.tween = Camera.tween(Camera.getEulerAngles())
        .rotate({x: 0, y: -90, z: 0}, 2, pc.QuadraticInOut)
        .delay(0.0)
        .loop(false)
        .yoyo(false);
    this.tween.start();
    
    setTimeout(function(){
        var Headset = this.app.root.findByName('HTC-Vive');
        var LaptopGeoVis = this.app.root.findByName('LaptopGeoVis');
        var SmartphoneGeoVis = this.app.root.findByName('SmartphoneGeoVis');
        var DrohneGeoVis = this.app.root.findByName('DrohneGeoVis');
        var DrohneVerm = this.app.root.findByName('DrohneVerm');
        var LaptopVerm = this.app.root.findByName('LaptopVerm');
        var Massband = this.app.root.findByName('Massband');
        var Sparks01 = this.app.root.findByName('sparks01');
        var Sparks02 = this.app.root.findByName('sparks02');
        var Sparks03 = this.app.root.findByName('sparks03');
        var Sparks04 = this.app.root.findByName('sparks04');
        var Sparks05 = this.app.root.findByName('sparks05');
        var Sparks06 = this.app.root.findByName('sparks06');
        var Sparks07 = this.app.root.findByName('sparks07');

        this.app.fire("floatOn");

        this.tween = Headset.tween(Headset.getLocalPosition())
                .to(new pc.Vec3(-1.313, 0.2, -1.037), 1, pc.QuadraticInOut)
                .delay(0.0)
                .loop(false)
                .yoyo(false);
        this.tween.start();

        this.tween = LaptopGeoVis.tween(LaptopGeoVis.getLocalPosition())
                .to(new pc.Vec3(-1.313, 0.2, -1.037), 1, pc.QuadraticInOut)
                .delay(0.0)
                .loop(false)
                .yoyo(false);
        this.tween.start();

        this.tween = SmartphoneGeoVis.tween(SmartphoneGeoVis.getLocalPosition())
                .to(new pc.Vec3(-1.313, 0.2, -1.037), 1, pc.QuadraticInOut)
                .delay(0.0)
                .loop(false)
                .yoyo(false);
        this.tween.start();

        this.tween = DrohneGeoVis.tween(DrohneGeoVis.getLocalPosition())
                .to(new pc.Vec3(-1.313, 0.2, -1.037), 1, pc.QuadraticInOut)
                .delay(0.0)
                .loop(false)
                .yoyo(false);
        this.tween.start();

        this.tween = DrohneVerm.tween(DrohneVerm.getLocalPosition())
                .to(new pc.Vec3(-1.313, 0.2, -1.037), 1, pc.QuadraticInOut)
                .delay(0.0)
                .loop(false)
                .yoyo(false);
        this.tween.start();

        this.tween = LaptopVerm.tween(LaptopVerm.getLocalPosition())
                .to(new pc.Vec3(-1.313, 0.2, -1.037), 1, pc.QuadraticInOut)
                .delay(0.0)
                .loop(false)
                .yoyo(false);
        this.tween.start();

        this.tween = Massband.tween(Massband.getLocalPosition())
                .to(new pc.Vec3(-1.313, 0.2, -1.037), 1, pc.QuadraticInOut)
                .delay(0.0)
                .loop(false)
                .yoyo(false);
        this.tween.start();

        setTimeout(function(){
                Sparks01.enabled=false;
                Sparks02.enabled=false;
                Sparks03.enabled=false;
                Sparks04.enabled=false;
                Sparks05.enabled=false;
                Sparks06.enabled=false;
                Sparks07.enabled=false;
        }.bind(this), 1000);
    }.bind(this), 1000);
};

var ToTopRight = pc.createScript('toTopRight');

// initialize code called once per entity
ToTopRight.prototype.initialize = function() {
    this.entity.element.on('click', this.onPress, this);
};

// update code called every frame
ToTopRight.prototype.onPress = function(dt) {
    var Camera = this.app.root.findByName('Camera');

    this.app.root.findByName('Schriftzug_THWS').enabled=false;
    this.app.root.findByName('Ausstellungsstuecke').enabled=false;
    this.app.root.findByName('Gelaende').enabled=false;

    this.tween = Camera.tween(Camera.getLocalPosition())
        .to(new pc.Vec3(6.394, 8, -17.175), 2, pc.QuadraticInOut)
        .delay(0.0)
        .loop(false)
        .yoyo(false);
    this.tween.start();

    this.tween = Camera.tween(Camera.getEulerAngles())
        .rotate({x: 0, y: -90, z: 0}, 2, pc.QuadraticInOut)
        .delay(0.0)
        .loop(false)
        .yoyo(false);
    this.tween.start();
    
    setTimeout(function(){
        this.app.fire("floatOn");
    }.bind(this), 1000);
};

Thanks in advance for any help and finally, here’s a published build:

yaustar · January 4, 2023, 4:42pm

This is where I would start removing parts of code/entities until something changes and can narrow down the cause or isolate what steps and setup is needed to reproduce the issue.

Vahrenhol3D · January 4, 2023, 5:34pm

Hey yaustar,

thanks for your reply! I tried removing all of the more costly assets in the “Ausstellungsstuecke” entity and this fixed it.
Unfortunately that isn’t a solution for me .

Also I have discovered this in the editor:

Still no clue what this could be?

yaustar · January 4, 2023, 5:45pm

Now that it’s narrowed down that is is the cause, you can move it to a separate project and try to reproduce the issue in isolation.

Is it related to the material it is using? What if you replaced with a default material?
Is it related to the settings on the render component? Anything there that looks out of place?

etc

Vahrenhol3D · January 4, 2023, 5:49pm

Alright, well I have narrowed it down to when I enable the entities via code, the error will occur.
If they are disabled and not enabled by code, the error won’t occur. I’ll check on materials and settings now

yaustar · January 4, 2023, 5:58pm

That looks like it is quite easy to reproduce in a new project that you can share for other people to investigate. Trying to reproduce it in a fresh project can help identify related areas to the issue.

Vahrenhol3D · January 4, 2023, 6:21pm

Hey there, managed to create a demo for you and others to look into.

Just follow the instructions on the buttons (Click this, Click this first) and you’ll experience what I mean.
Maybe it has to do with the models that disappear when the error occurs, trying to figure that out now

Vahrenhol3D · January 4, 2023, 8:48pm

Unfortunately none of the steps I tried led to success. I even remodeled the assets that disappeared when the error occured.
There’s also no material I could pinpoint the error to. Could this be a performance problem with too many draw calls or too much geometry?

Apparently it all has something to do with these lines of code in mesh-instances.js

/**
     * Obtain a shader variant required to render the mesh instance within specified pass.
     *
     * @param {Scene} scene - The scene.
     * @param {number} pass - The render pass.
     * @param {any} staticLightList - List of static lights.
     * @param {any} sortedLights - Array of arrays of lights.
     * @param {UniformBufferFormat} viewUniformFormat - THe format of the view uniform buffer.
     * @param {BindGroupFormat} viewBindGroupFormat - The format of the view bind group.
     * @ignore
     */
    updatePassShader(scene, pass, staticLightList, sortedLights, viewUniformFormat, viewBindGroupFormat) {
        this._shader[pass] = this.material.getShaderVariant(this.mesh.device, scene, this._shaderDefs, staticLightList, pass, sortedLights,
                                                            viewUniformFormat, viewBindGroupFormat);
    }

this.mesh.device is underlined in the dev tools

mvaligursky · January 5, 2023, 9:08am

For some reason there is a mesh instance there which does not have a mesh.
Put a breakpoint on that line of the code in Chrome dev tools, and set condition (when the breakpoint triggers) using Edit of the breakpoint to !this.mesh - this should stop on the mesh instance without mesh. Then inspect this.node to see what Entity it is attached to … it should have a name.

yaustar · January 5, 2023, 9:25am

Are you able to share the project itself publicly? (Share the URL for the project dashboard)

Vahrenhol3D · January 5, 2023, 2:36pm

Sorry for the late response, been busy trying to figure stuff out on my own

I noticed that enoabling and disabling certain entities with code (All the models showcased in the lower floor of the room on the right), triggered the error.
Well - my solution was to just leave them there and not enable/disable them via code.

Seems to have done the trick as everything appears to be running smooth now, without any hiccups.

I will still try to figure out what @mvaligursky tried to tell me and hope I can come up with a solution to that.

@yaustar I have cloned the current project and will publish that version for you to take a look at.
https://playcanvas.com/project/1025245/settings there you go. I also added you as Admin so you can work with stuff! These are the models that caused issues when enabled/disabled via code:

yaustar · January 5, 2023, 2:48pm

How do I reproduce the issue in the project that you’ve linked?

Vahrenhol3D · January 5, 2023, 2:49pm

Oh sorry, bear with me, I’ll reproduce it for you and let you know how I did things!

Vahrenhol3D · January 5, 2023, 2:58pm

Okay @yaustar , So once you are in the editor, hit “Launch”, click the buttons that say “Click here” and see what happens.

It is caused by the script located in “/ - Skripte - Teleportskripte - RoomTeleporter.js”. I added comments saying “Added for error reproduction” so you can see which part of the script I left out in order for it to work flawlessly.

Vahrenhol3D · January 5, 2023, 3:12pm

Alright, also did what @mvaligursky asked me to do and here’s what came out:

this.node appears to have the name of “Untitled” which I assume shouldn’t be the case.

Also under children it says that “root” is a child of “Untitled”.

Does this help you?

mvaligursky · January 5, 2023, 3:19pm

Not really. I hoped there would be a name pointing to something that has a problem. Also, I see that the entity does not have model nor render component, so it does not make sense that some mesh instance points to it.

Vahrenhol3D · January 5, 2023, 3:21pm

Alright, no worries, appreciate you help anyways!

Maybe yaustar can find something while investigating

yaustar · January 5, 2023, 3:21pm

It looks like the meshInstance node is the app.root Entity which is weird

mvaligursky · January 5, 2023, 3:32pm

I guess you can set a breakpoint to trigger in the constructor of MeshInstance when the node is the root perhaps.

yaustar · January 5, 2023, 3:36pm

I’ve tracked down the issue to be related to batch groups (the entities shown in this list all have a render component in a batch group) and when they would be in view of the camera.

If I remove the batch group, the error doesn’t occur anymore.

I did notice that the batch group didn’t have any layers referenced so investigating a bit more: