Three.js WebGL Context Loss on iOS 17

Based on the error logs you've shared, you're experiencing a WebGL context loss issue specifically on iOS 17 devices, while everything works fine on desktop browsers. This appears to be a significant issue since it affects even the minimal Three.js setup and the official examples.

Analysis of the Issue

The error trace shows that the WebGL context is being lost immediately during initialization, before Three.js can even properly set up the renderer. The specific error:

TypeError: null is not an object (evaluating 'gl.getShaderPrecisionFormat(gl.VERTEX_SHADER, gl.HIGH_FLOAT).precision')

This indicates that the WebGL context (gl) is null when Three.js tries to query shader precision formats, which is a critical step in the renderer initialization.

Potential Workarounds

Before filing a bug report, you might try these approaches:

1. Try different renderer parameters:

   JAVASCRIPTCopied
   const renderer = new THREE.WebGLRenderer({ 
     antialias: false,
     powerPreference: 'high-performance',
     failIfMajorPerformanceCaveat: false
   });

2. Explicitly request WebGL 1 instead of WebGL 2:

   JAVASCRIPTCopied
   const renderer = new THREE.WebGLRenderer({ 
     antialias: false,
     powerPreference: 'high-performance',
     context: canvas.getContext('webgl', { powerPreference: 'high-performance' })
   });

3. Add error handling for context loss:

   JAVASCRIPTCopied
   renderer.domElement.addEventListener('webglcontextlost', function(event) {
     event.preventDefault();
     console.log('WebGL context lost. Attempting to restore...');
     // Potentially try to restore context
   }, false);

4. Debug with the WebGLRenderer's debug options:

   JAVASCRIPTCopied
   renderer.debug.checkShaderErrors = true;
   renderer.debug.onShaderError = function(gl, program, vertexShader, fragmentShader) {
     console.error('Shader error detected:', gl, program, vertexShader, fragmentShader);
   };

Next Steps

Since this issue:

1. Affects even the minimal Three.js setup
2. Impacts all Three.js examples
3. Is specific to iOS 17 devices
4. Works correctly on desktop browsers

It's likely a compatibility issue between Three.js and iOS 17's WebGL implementation. Opening a bug report on the Three.js GitHub repository would be appropriate at this point, especially if the workarounds don't resolve the issue.

When filing the bug report, include:

• Your Three.js version (0.157.0)
• The exact iOS versions affected (17.0.3)
• The minimal reproduction code you've already created
• The detailed error logs you've collected

This appears to be a significant issue that the Three.js maintainers would want to address promptly.