Problems running the project in mobile browser, the scene is not loaded

I have a project that shows a factory with several interactions, when doing the build and testing it in a web browser the scene is shown without problems but when I test it on the mobile the scene does not load, the console shows many errors in loading assets and one of the information boards, which should be hidden, appears on the screen while the rest of the scene is black.

Link to editor
https://playcanvas.com/editor/scene/1139060

Build

Hello everyone,

I’ve been experiencing something similar, but the error persists in google chrome on mobile.
As soon as the preloader finishes loading, the scene shows up for a fraction of second and then everything turns black. The console throws lots of errors saying assets failed to load, but seems odd since the scene was rendered for at least one frame.
This only happens on mobile.

Here is a link for the project : https://playcanvas.com/editor/project/789146

Here is the link for the build: https://playcanv.as/p/a32mFYdn/

@5seis Thank you for making the project public, it made it a lot easier to debug.

It looks like the issue on mobile is due to orientation.js. Commenting out line 113 where the rotation was being set fixed the issue on mobile:

My guess is that q0 quat is invalid and screwed up the transform of the entity (camera?) so it appeared/looking at something completely different.

@Francisco_Bozzo Sorry, I can’t repro those errors you got with the build on my Android device. I don’t know what could cause those SSL errors off hand

Thanks for your answer @yaustar this solved the problem when loading the scene but I really need the camera to rotate according to the orientation of the mobile device, is there an alternative to do it?

There may be a logic/math issue on that orientation code that just needs to be fixed. You can use the orientation of the mobile device event/sensor.

There are a few forum posts that do a camera look with device orientation that may help. eg : https://playcanvas.com/editor/scene/775656

I’ve had another look at this @5seis @Francisco_Bozzo

In orientation.js, it has the following code:

    function updateOrientation (event) {
        console.log(event);
        if (event !== undefined) {
            this.app.fire("orientationInit");
            this.absolute = event.absolute;
            var x = pc.math.DEG_TO_RAD * event.beta;
            var y = pc.math.DEG_TO_RAD * event.alpha + this.entity.getEulerAngles.y;
            var z = pc.math.DEG_TO_RAD * -event.gamma;
            var w = pc.math.DEG_TO_RAD * 10;

The key line is

            var y = pc.math.DEG_TO_RAD * event.alpha + this.entity.getEulerAngles.y;

getEulerAngles is a function, not a property so getEulerAngles.y is null/undefined and it screws over the rest of the calculation and results in a quat full of NaNs.

Changing it to

            var y = pc.math.DEG_TO_RAD * event.alpha + this.entity.getEulerAngles().y;

Fixes the issue.

The camera is spinning like crazy but at least it is looking at the scene with the fork lifts.

I’ve also just experienced the 500 and 504 errors on mobile so investigating this.

1 Like