Rendering stops on mobile webkit browsers (like Chrome + Opera)

CesiumJS
1

Hello everyone,

I’m currently experiencing problems when trying to render scenes on mobile devices, more specifically with webkit-based browsers (most recent versions of Opera and Chrome, see attached screenshots).
Firefox seems to be the only browser that works for me.

The weird thing is, I do not use ‘distanceSquaredTo’ in my code, at all.

I thought it might have something to do with depth testing, so I set ‘viewer.scene.globe.depthTestAgainstTerrain’ and ‘enableLighting’ to false, but to no avail.

Tested on Samsung Galaxy A20e, Samsung Galaxy A52 and Samsung S21, using Cesium v1.89.

Could you please help me sort this out?

Best regards,

A.

Screenshot_Cesium_Error_Chrome
Screenshot_Cesium_Error_Chrome720×1560 127 KB

Screenshot_Cesium_Error_Opera
Screenshot_Cesium_Error_Opera720×1560 116 KB

2

HI @Arkaides,

it’s hard to tell, what could be the problem, if you don’t provide your code here.

Is the exact same code working with other Browsers?

For me at least, I normally get this error (TypeError: cannot read properties of undefined), if I declare a variable in a different scope, than I actually use it, or try to use a nonexistant value.

Do you try to do some things with cartesians in your app? Because distanceSquared is a method from Cartesian2/3/4.

Best, Lennart

3

Hi @lennart.imberg,

Thank you for your reply.
Basically, I’m just experimenting with code available in several sandcastles and examples like these ones: Build a Flight Tracker – Cesium, Cesium Sandcastle, Cesium Sandcastle

All of these examples use Cesium.Cartesian in one place or another:

Flight Tracker Demo

const pointEntity = viewer.entities.add({
  description: `First data point at (${dataPoint.longitude}, ${dataPoint.latitude})`,
  position: Cesium.Cartesian3.fromDegrees(dataPoint.longitude, dataPoint.latitude, dataPoint.height),
  point: { pixelSize: 10, color: Cesium.Color.RED }
});

Interpolation Demo

 const position = Cesium.Cartesian3.fromDegrees(
      lon + radius * 1.5 * Math.cos(radians),
      lat + radius * Math.sin(radians),
      Cesium.Math.nextRandomNumber() * 500 + 1750
    );
    property.addSample(time, position);

Clouds Demo

function createFrontLayerClouds() {
  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.666, 45.5126, 97),
    scale: new Cesium.Cartesian2(400, 150),
    maximumSize: new Cesium.Cartesian3(25, 12, 15),
    slice: 0.36,
  });

  clouds.add({
    position: Cesium.Cartesian3.fromDegrees(-122.6665, 45.5262, 76),
    scale: new Cesium.Cartesian2(450, 200),
    maximumSize: new Cesium.Cartesian3(25, 14, 12),
    slice: 0.3,
  });
}

Interestingly, not a single one of the sandcastles I just tested ran on the mobile version of Opera (didn’t check with Chrome, yet), so this might be a more general issue?

Best regards,

A.

4

@Arkaides

Maybe try to open the following pages with the “problematic” browser/device, just to exclude a WebGL-support problem:
WebGL1: https://webglreport.com/?v=1
WebGL2: https://webglreport.com/?v=2

Best, Lennart

5

Hi, I have the same problem, how can I fix it?

Thanks,
Michael musset.