Three.js broken on iOS 17 with "Context Lost"

Questions
1

I am developing an web app in ThreeJS (0.157.0), as part of a conversion from WebGL code, but while the scene renders in Chrome and Safari on my Mac it fails on both my iPhone and iPad, using iOS 17 (iPhone 12 Pro at 17.0.3 and iPad at iPadOS 17.03).

The failure is in the form of the console being overrun with the message:

[Error] WebGL: context lost.
[Log] THREE.WebGLRenderer: Context Lost. (chunk-HR4Q7LEE.js, line 17268)

This happens if before I add any objects (I removed them all to be sure).

Further investigation shows that this impacts AL the examples on the Three.js website, so it is not specific to my code.

I created this code which is sufficient to cause the issue:

import * as THREE from 'three';

const renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );

Is anyone else able to reproduce or has been able to dig to see what might be causing the issue? While we can blame iOS, I’d still prefer to see what it is in the Three.js code that is upsetting mobile Safari.

As I currently see it, it can’t be attributed to a scene using too much memory, since my example is using the bare minimum, with no objects added.

Edit: I was able to save the console log and jump to the start, where I see the following error:

[Error] WebGL: context lost.
	getContext
	getContext (chunk-HR4Q7LEE.js:17002)
	WebGLRenderer (chunk-HR4Q7LEE.js:17029)
	Module Code (mini-main.ts:2)
[Error] TypeError: null is not an object (evaluating 'gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT).precision')
	getMaxPrecision (chunk-HR4Q7LEE.js:9651)
	WebGLCapabilities (chunk-HR4Q7LEE.js:9665)
	initGLContext (chunk-HR4Q7LEE.js:17057)
	WebGLRenderer (chunk-HR4Q7LEE.js:17090)
	Module Code (mini-main.ts:2)

Should I be opening a bug report at this point?

2

This is not a three.js specific issue, it affects all WebGL applications. So please report the issue directly to Apple/WebKit.

https://bugs.webkit.org/

2 Likes
3

Before I can do that I’ll need to extract the exact code in Three.js where we see start seeing the issue, otherwise it doesn’t represent the most minimal test case.

4

It looks like you’ve already done that… Is the only thing you’re importing here renderer?

5

I went back to a pure WebGL project (StuffInSpace) I’ve been trying to convert to Three.js and confirm this is indeed a more fundamental issue, since this pure WebGL code is failing:

      function initWebGL () {
        const canvas = document.querySelector('#canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const glOptions = {
          // antialias: false,
          alpha: false,
          premultipliedAlpha: false
        };

       const gl = canvas.getContext('webgl2', glOptions)
          || canvas.getContext('webgl', glOptions)
          || canvas.getContext('experimental-webgl', glOptions);

      }

      initWebGL();

With this I’ll open a WebKit bug report. I’ll link the ticket here.

Update: Webkit ticket: 264684 – "context lost" when getting WebGL context

1 Like
6

Just noticed there was an OS update for iOS and iPadOS.

I confirm this is no longer an issue with iPadOS 17.1.1 or 17.1.1.

For anyone else running into this issue please check you have updated your device first (something I should have done).

3 Likes