Upgrade three.js from r152 to r183 (AcademySoftwareFoundation#2858)

This changelist upgrades the three.js dependency in the MaterialX Web Viewer from r152 to r183, adapting to API changes across the intervening releases.

Author: jstone-lucasfilm

javascript/MaterialXView/package.json

@@ -10,8 +10,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "fflate": "^0.8.2",
     "lil-gui": "^0.19.2",
-    "three": "^0.152.2"
+    "three": "^0.183.2"
   },
   "devDependencies": {
     "copy-webpack-plugin": "^14.0.0",

javascript/MaterialXView/source/dropHandling.js

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import * as fflate from 'three/examples/jsm/libs/fflate.module.js';
+import * as fflate from 'fflate';
 
 const debugFileHandling = false;
 let loadingCallback = null;

javascript/MaterialXView/source/helper.js

@@ -212,10 +212,10 @@ function getWrapping(mode)
  */
 function getMinFilter(type, generateMipmaps)
 {
-    const filterType = generateMipmaps ? THREE.LinearMipMapLinearFilter : THREE.LinearFilter;
+    let filterType = generateMipmaps ? THREE.LinearMipmapLinearFilter : THREE.LinearFilter;
     if (type === 0)
     {
-        filterType = generateMipmaps ? THREE.NearestMipMapNearestFilter : THREE.NearestFilter;
+        filterType = generateMipmaps ? THREE.NearestMipmapNearestFilter : THREE.NearestFilter;
     }
     return filterType;
 }

javascript/MaterialXView/source/index.js

@@ -97,6 +97,7 @@ function init()
     // Set up renderer
     renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
     renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
     renderer.debug.checkShaderErrors = false;
 
     window.addEventListener('resize', onWindowResize);

javascript/MaterialXView/source/viewer.js

@@ -4,8 +4,8 @@
 //
 
 import * as THREE from 'three';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { HDRLoader } from 'three/examples/jsm/loaders/HDRLoader.js';
 
 import { prepareEnvTexture, getLightRotation, findLights, registerLights, getUniformValues } from './helper.js'
 import { Group } from 'three';
@@ -36,7 +36,6 @@ export class Scene
     {
         this._scene = new THREE.Scene();
         this._scene.background = new THREE.Color(this.#_backgroundColor);
-        this._scene.background.convertSRGBToLinear();
 
         const aspectRatio = window.innerWidth / window.innerHeight;
         const cameraNearDist = 0.05;
@@ -416,7 +415,6 @@ export class Scene
             return this.#_backgroundTexture;
         }
         var color = new THREE.Color(this.#_backgroundColor);
-        color.convertSRGBToLinear();
         return color;
     }
 
@@ -937,9 +935,10 @@ export class Material
 
         var startUniformUpdate = performance.now();
 
-        // Get shaders and uniform values
-        let vShader = shader.getSourceCode("vertex");
-        let fShader = shader.getSourceCode("pixel");
+        // Get shaders and uniform values, removing version directives
+        // that are already managed by the Three.js runtime.
+        let vShader = shader.getSourceCode("vertex").replace(/^#version\s+.*\n/, '');
+        let fShader = shader.getSourceCode("pixel").replace(/^#version\s+.*\n/, '');
 
         let theScene = viewer.getScene();
         let flipV = theScene.getFlipGeometryV();
@@ -964,6 +963,7 @@ export class Material
             uniforms: uniforms,
             vertexShader: vShader,
             fragmentShader: fShader,
+            glslVersion: THREE.GLSL3,
             transparent: isTransparent,
             blendEquation: THREE.AddEquation,
             blendSrc: THREE.OneMinusSrcAlphaFactor,
@@ -1526,7 +1526,7 @@ export class Viewer
         this.materials.push(new Material());
 
         this.fileLoader = new THREE.FileLoader();
-        this.hdrLoader = new RGBELoader();
+        this.hdrLoader = new HDRLoader();
     }
 
     //