Resolving WebGL1 Compatibility Issues in Three.js

Based on the error shown in your screenshot and the code provided, the issue appears to be related to shadow mapping in WebGL1 contexts. The error occurs because WebGL1 has different capabilities and limitations compared to WebGL2, particularly regarding shadow rendering.

Main Issue

The error message indicates a problem with shadow mapping in WebGL1. This is likely related to the DirectionalLight's shadow settings in your addLight() method.

Solution Approaches

Here are several ways to address this issue:

1. Detect WebGL Version and Adjust Shadow Settings

Modify your code to detect the WebGL version and adjust shadow settings accordingly:

JAVASCRIPTCopied
addLight() {
  var light;
  this.scene.add(new THREE.AmbientLight(0x666666));
  
  var lightobjgeo = new THREE.SphereGeometry(0.3, 4, 2);
  var material = new THREE.MeshPhongMaterial({
      color: new THREE.Color().setHSL(Math.random(), 1, 0.75),
      flatShading: true,
      specular: 0x111111,
      shininess: 0
  });
  
  this.lightobj = new THREE.Mesh(lightobjgeo, material);
  this.lightobj.position.set(2, 8, 4);
  this.lightobj.name = 'light';
  
  light = new THREE.DirectionalLight(0xdfebff, Math.PI * 2);
  light.position.copy(this.lightobj.position);
  
  // Check if WebGL2 is available before enabling shadows
  const isWebGL2 = this.renderer.capabilities.isWebGL2;
  
  if (isWebGL2) {
    light.castShadow = true;
    light.shadow.mapSize.width = 1500;
    light.shadow.mapSize.height = 1500;
    light.shadow.camera.near = 0.5;
    light.shadow.camera.far = 500;
  } else {
    // For WebGL1, either disable shadows or use simpler shadow settings
    light.castShadow = false;
    // Alternatively, use more conservative shadow settings
    // light.castShadow = true;
    // light.shadow.mapSize.width = 512;
    // light.shadow.mapSize.height = 512;
  }
  
  this.lightobj.add(light);
  this.scene.add(this.lightobj);
  this.updateObjectList();
}

2. Modify Renderer Settings for WebGL1

In your addRenderer() method, add specific settings for WebGL1:

JAVASCRIPTCopied
// Fallback to WebGL1 if WebGL2 is unavailable
if (!this.renderer) {
    try {
        this.renderer = new THREE.WebGLRenderer({
            canvas: this.canvas,
            antialias: true,
            alpha: true,
            // Add these for better WebGL1 compatibility
            precision: 'mediump',
            powerPreference: 'default'
        });
        
        // Set shadow type to PCFSoftShadowMap which is more compatible with WebGL1
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        
        console.log('WebGL 1 context created successfully.');
    } catch (e) {
        console.error('WebGL not supported in this browser.', e);
        this.utils.showError('Your browser does not support WebGL, which is required for 3D rendering.', true, 5000);
        return;
    }
}

3. Implement a Feature Detection System

Create a comprehensive feature detection system that adjusts all relevant settings based on WebGL capabilities:

JAVASCRIPTCopied
// Add this after creating the renderer
setupRendererCapabilities() {
  const capabilities = this.renderer.capabilities;
  
  // Store capabilities for use throughout the application
  this.webglCapabilities = {
    isWebGL2: capabilities.isWebGL2,
    maxTextures: capabilities.maxTextures,
    maxAttributes: capabilities.maxAttributes,
    maxTextureSize: capabilities.maxTextureSize,
    maxCubemapSize: capabilities.maxCubemapSize,
    maxVertexUniforms: capabilities.maxVertexUniforms,
    maxVaryings: capabilities.maxVaryings,
    maxFragmentUniforms: capabilities.maxFragmentUniforms,
    vertexTextures: capabilities.vertexTextures,
    floatFragmentTextures: capabilities.floatFragmentTextures,
    floatVertexTextures: capabilities.floatVertexTextures
  };
  
  // Configure renderer based on capabilities
  if (!this.webglCapabilities.isWebGL2) {
    // Adjust shadow settings for WebGL1
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    
    // You might want to disable certain features or use alternatives
    this.useSimplifiedMaterials = true;
    this.useSimplifiedLighting = true;
  }
}

Then call this method after creating the renderer in your addRenderer() method.

4. Disable Shadows in WebGL1

The simplest solution is to completely disable shadows when running in WebGL1:

JAVASCRIPTCopied
addRenderer() {
  // ... existing code ...
  
  // Configure renderer
  this.renderer.setPixelRatio(window.devicePixelRatio);
  this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
  
  // Check WebGL version and configure shadows accordingly
  if (this.renderer.capabilities.isWebGL2) {
    this.renderer.shadowMap.enabled = true;
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  } else {
    // Disable shadows completely in WebGL1
    this.renderer.shadowMap.enabled = false;
  }
}

Additional Recommendations

1. Avoid using async/await unnecessarily: Your initialization methods don't appear to be performing asynchronous operations, so using async/await may be unnecessary and could complicate your code.

2. Implement graceful degradation: Create a system that gracefully reduces visual quality based on the browser's capabilities.

3. Reset WebGL state when switching contexts: If you're dynamically switching between WebGL contexts, make sure to call resetGLState() to ensure proper state management.

4. Consider using a feature detection library: Libraries like Modernizr can help with more comprehensive feature detection.

By implementing these changes, your application should be able to run on both WebGL1 and WebGL2 browsers, with appropriate feature adjustments based on the available capabilities.

Resolving WebGL1 Compatibility Issues in Three.js

Looking at your code and the error you're encountering in WebGL1 browsers, I can see the issue is related to shadow rendering. The error occurs because WebGL1 has different capabilities and limitations compared to WebGL2, particularly with shadow mapping.

The Problem

The error message indicates that your code is trying to use shadow mapping features that aren't fully supported in WebGL1. Specifically, the error occurs because:

1. You're enabling shadow casting with light.castShadow = true
2. You're setting high-resolution shadow maps (1500×1500)
3. WebGL1 has more limited shadow mapping capabilities

Solution

Here's how to modify your code to handle both WebGL1 and WebGL2 environments:

1. Detect WebGL Version and Adjust Shadow Settings

JAVASCRIPTCopied
addLight() {
  var light;
  this.scene.add(new THREE.AmbientLight(0x666666));
  
  var lightobjgeo = new THREE.SphereGeometry(0.3, 4, 2);
  var material = new THREE.MeshPhongMaterial({
      color: new THREE.Color().setHSL(Math.random(), 1, 0.75),
      flatShading: true,
      specular: 0x111111,
      shininess: 0
  });
  
  this.lightobj = new THREE.Mesh(lightobjgeo, material);
  this.lightobj.position.set(2, 8, 4);
  this.lightobj.name = 'light';
  
  light = new THREE.DirectionalLight(0xdfebff, Math.PI * 2);
  light.position.copy(this.lightobj.position);
  
  // Check if we're using WebGL2 before enabling shadows
  const isWebGL2 = this.renderer.capabilities.isWebGL2;
  
  if (isWebGL2) {
    // Full shadow settings for WebGL2
    light.castShadow = true;
    light.shadow.mapSize.width = 1500;
    light.shadow.mapSize.height = 1500;
    light.shadow.camera.near = 0.5;
    light.shadow.camera.far = 500;
  } else {
    // Reduced shadow settings for WebGL1 or disable shadows
    light.castShadow = true; // You can set to false to disable shadows completely
    light.shadow.mapSize.width = 512; // Lower resolution
    light.shadow.mapSize.height = 512; // Lower resolution
    light.shadow.camera.near = 0.5;
    light.shadow.camera.far = 500;
  }
  
  this.lightobj.add(light);
  this.scene.add(this.lightobj);
  this.updateObjectList();
}

2. Modify Your Renderer Setup

Update your renderer initialization to properly handle WebGL1 and store the WebGL version information:

JAVASCRIPTCopied
addRenderer() {
  // Dispose existing renderer if it exists
  if (this.renderer) {
    this.renderer.dispose();
    this.renderer.forceContextLoss();
    this.renderer.context = null;
    this.renderer.domElement = null;
  }

  let context;
  this.isWebGL2 = false; // Store this as a class property

  // Try WebGL2 first
  try {
    context = this.canvas.getContext('webgl2', { antialias: true, alpha: true });
    if (context) {
      this.renderer = new THREE.WebGLRenderer({
        canvas: this.canvas,
        context: context
      });
      this.isWebGL2 = true;
      console.log('WebGL 2 context created successfully.');
    } else {
      throw new Error('WebGL 2 not supported.');
    }
  } catch (e) {
    console.warn('WebGL 2 not supported, falling back to WebGL 1.', e);
  }

  // Fallback to WebGL1 if WebGL2 is unavailable
  if (!this.renderer) {
    try {
      this.renderer = new THREE.WebGLRenderer({
        canvas: this.canvas,
        antialias: true,
        alpha: true,
        precision: 'mediump' // Lower precision for better WebGL1 compatibility
      });
      console.log('WebGL 1 context created successfully.');
    } catch (e) {
      console.error('WebGL not supported in this browser.', e);
      this.utils.showError('Your browser does not support WebGL, which is required for 3D rendering.', true, 5000);
      return;
    }
  }

  // Configure renderer
  this.renderer.setPixelRatio(window.devicePixelRatio);
  this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
  
  // For WebGL1, you might want to limit some features
  if (!this.isWebGL2) {
    this.renderer.shadowMap.type = THREE.BasicShadowMap; // Use simpler shadow map type
    // You could also disable shadows entirely if they cause problems
    // this.renderer.shadowMap.enabled = false;
  } else {
    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Better shadows for WebGL2
    this.renderer.shadowMap.enabled = true;
  }
}

3. Consider Conditional Feature Enabling

You might need to conditionally enable or disable certain features based on WebGL version:

JAVASCRIPTCopied
// Add this method to your class
adjustFeaturesForWebGLVersion() {
  if (!this.isWebGL2) {
    // Disable or modify features that don't work well in WebGL1
    
    // Example: Reduce complexity of materials
    this.scene.traverse((object) => {
      if (object.isMesh && object.material) {
        // Simplify materials if needed
        if (Array.isArray(object.material)) {
          object.material.forEach(mat => {
            mat.envMap = null; // Remove environment maps if used
            mat.aoMap = null; // Remove ambient occlusion maps
          });
        } else {
          object.material.envMap = null;
          object.material.aoMap = null;
        }
      }
    });
    
    // Adjust post-processing if you're using it
    // Disable certain effects, etc.
  }
}

Call this method after your scene is fully set up:

JAVASCRIPTCopied
async init() {
  await this.addScene();
  await this.addRenderer();
  await this.addCamera();
  await this.addLight();
  await this.addGridHelper();
  await this.addControl();
  await this.addTransformControl();
  await this.addDragControl();
  
  // Adjust features based on WebGL version
  this.adjustFeaturesForWebGLVersion();
  
  this.renderCanvas();
}

Additional Considerations

1. Shadow Map Type: For WebGL1, use THREE.BasicShadowMap which is less demanding.

2. Shadow Map Resolution: Keep shadow map sizes to powers of 2 (512, 1024) and smaller for WebGL1.

3. Feature Detection: Instead of just checking WebGL version, you might want to check for specific capabilities:

JAVASCRIPTCopied
const capabilities = this.renderer.capabilities;
if (!capabilities.floatFragmentTextures) {
  // Adjust features that depend on floating point textures
}

4. Graceful Degradation: Consider providing a simpler visual experience for WebGL1 users rather than trying to match WebGL2 features exactly.

By implementing these changes, your application should work more reliably across both WebGL1 and WebGL2 browsers, with appropriate feature adjustments based on the available capabilities.