Three.js Version Update Compatibility Issues

After reviewing your code, I've identified several issues that need to be addressed when updating from Three.js r88 to the latest version:

Main Issues

1. Color Management: In newer versions of Three.js, color management is enabled by default, which can affect how your shaders render.

2. Shader Uniform Updates: The way uniforms are handled has changed in newer versions.

3. Renderer Configuration: Some renderer parameters have changed or been deprecated.

Recommended Fixes

1. Disable Color Management (if your shaders were written without it in mind):

   JAVASCRIPTCopied
   THREE.ColorManagement.enabled = false;

2. Update Shader Material Configuration:

   • Make sure all uniforms are properly defined in the material
   • Check that texture loading and assignment is working correctly

3. Update Renderer Configuration:

   JAVASCRIPTCopied
   renderer = new THREE.WebGLRenderer({
     antialias: true,
     alpha: true
   });
   // Use this instead of the deprecated preserveDrawingBuffer
   renderer.outputColorSpace = THREE.SRGBColorSpace;

4. Check Animation Loop:

   • Make sure your animation loop is correctly updating uniforms
   • Verify that requestAnimationFrame is working properly

5. Texture Loading:

   • Ensure textures are properly loaded before being used
   • Consider using THREE.TextureLoader().loadAsync() with proper error handling

Since you've already updated the PlaneBufferGeometry (which is now just PlaneGeometry) and fixed the shader variable name, these additional changes should help resolve your gray screen issue.

If you continue to have issues, you might want to check the browser console for any warnings that might not be showing as errors, and verify that all your assets (especially textures) are loading correctly.