Upgrade three.js from r152 to r183

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

A new `hwEmitVersionDirective` option has been added to GenOptions, allowing the Web Viewer to skip the `#version` directive in generated shaders, as three.js now manages this detail on its own.

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.0"
   },
   "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;
     }
 
@@ -964,6 +962,7 @@ export class Material
             uniforms: uniforms,
             vertexShader: vShader,
             fragmentShader: fShader,
+            glslVersion: THREE.GLSL3,
             transparent: isTransparent,
             blendEquation: THREE.AddEquation,
             blendSrc: THREE.OneMinusSrcAlphaFactor,
@@ -1526,7 +1525,7 @@ export class Viewer
         this.materials.push(new Material());
 
         this.fileLoader = new THREE.FileLoader();
-        this.hdrLoader = new RGBELoader();
+        this.hdrLoader = new HDRLoader();
     }
 
     //
@@ -1540,6 +1539,7 @@ export class Viewer
         // Initialize base document
         this.generator = this.mx.EsslShaderGenerator.create();
         this.genContext = new this.mx.GenContext(this.generator);
+        this.genContext.getOptions().hwEmitVersionDirective = false;
 
         this.document = this.mx.createDocument();
         this.stdlib = this.mx.loadStandardLibraries(this.genContext);

javascript/package-lock.json

@@ -52,5 +52,6 @@ EMSCRIPTEN_BINDINGS(GenOptions)
         .property("hwWriteAlbedoTable", &mx::GenOptions::hwWriteAlbedoTable)
         .property("hwWriteEnvPrefilter", &mx::GenOptions::hwWriteEnvPrefilter)
         .property("hwImplicitBitangents", &mx::GenOptions::hwImplicitBitangents)
+        .property("hwEmitVersionDirective", &mx::GenOptions::hwEmitVersionDirective)
         ;
 }

source/JsMaterialX/JsMaterialXGenShader/JsGenOptions.cpp

@@ -23,10 +23,14 @@ EsslShaderGenerator::EsslShaderGenerator(TypeSystemPtr typeSystem) :
     _syntax->registerReservedWords(reservedWords);
 }
 
-void EsslShaderGenerator::emitDirectives(GenContext&, ShaderStage& stage) const
+void EsslShaderGenerator::emitDirectives(GenContext& context, ShaderStage& stage) const
 {
-    emitLine("#version " + getVersion(), stage, false);
-    emitLineBreak(stage);
+    if (context.getOptions().hwEmitVersionDirective)
+    {
+        emitLine("#version " + getVersion(), stage, false);
+        emitLineBreak(stage);
+    }
+
     // ESSL 3.0+ is used where highp float is considered mandatory.
     // (See https://registry.khronos.org/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf)
     emitLine("precision highp float", stage);

source/MaterialXGenGlsl/EsslShaderGenerator.cpp

@@ -243,10 +243,13 @@ void GlslShaderGenerator::emitTransmissionRender(GenContext& context, ShaderStag
     emitLineBreak(stage);
 }
 
-void GlslShaderGenerator::emitDirectives(GenContext&, ShaderStage& stage) const
+void GlslShaderGenerator::emitDirectives(GenContext& context, ShaderStage& stage) const
 {
-    emitLine("#version " + getVersion(), stage, false);
-    emitLineBreak(stage);
+    if (context.getOptions().hwEmitVersionDirective)
+    {
+        emitLine("#version " + getVersion(), stage, false);
+        emitLineBreak(stage);
+    }
 }
 
 void GlslShaderGenerator::emitConstants(GenContext& context, ShaderStage& stage) const

source/MaterialXGenGlsl/GlslShaderGenerator.cpp

@@ -24,10 +24,13 @@ VkShaderGenerator::VkShaderGenerator(TypeSystemPtr typeSystem) :
     _resourceBindingCtx = std::make_shared<MaterialX::VkResourceBindingContext>(0);
 }
 
-void VkShaderGenerator::emitDirectives(GenContext&, ShaderStage& stage) const
+void VkShaderGenerator::emitDirectives(GenContext& context, ShaderStage& stage) const
 {
-    emitLine("#version " + getVersion(), stage, false);
-    emitLineBreak(stage);
+    if (context.getOptions().hwEmitVersionDirective)
+    {
+        emitLine("#version " + getVersion(), stage, false);
+        emitLineBreak(stage);
+    }
 }
 
 void VkShaderGenerator::emitInputs(GenContext& context, ShaderStage& stage) const