From 7a4cb7654deba544adcfe04e9c97a2baa163ceef Mon Sep 17 00:00:00 2001 From: netpro2k Date: Mon, 16 Aug 2021 19:07:06 -0700 Subject: [PATCH 1/7] Rework handling of refs in MOZ_hubs_components --- src/components/gltf-model-plus.js | 69 +++++++++++++++++++++++++++++++ src/gltf-component-mappings.js | 21 ++++++++-- 2 files changed, 87 insertions(+), 3 deletions(-) diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js index 86a410b802..5550ed6dd3 100644 --- a/src/components/gltf-model-plus.js +++ b/src/components/gltf-model-plus.js @@ -398,6 +398,21 @@ class GLTFHubsPlugin { node.extras.gltfIndex = i; } } + + function hookDef(defType, hookName) { + return Promise.all( + parser.json[defType].map((_def, idx) => { + return Promise.all( + parser._invokeAll(function(ext) { + return ext[hookName] && ext[hookName](idx); + }) + ); + }) + ); + } + + // TODO decide if thse should get put into the GLTF loader itself + return Promise.all([hookDef("scenes", "extendScene"), hookDef("nodes", "extendNode")]); } afterRoot(gltf) { @@ -431,6 +446,59 @@ class GLTFHubsPlugin { } } +class GLTFHubsComponentsExtension { + constructor(parser) { + this.parser = parser; + this.name = "MOZ_hubs_components"; + } + + _markDefs() { + // TODO hack to keep hubs component data in userData. Remove once we handle all component stuff in a plugin + delete this.parser.extensions.MOZ_hubs_components; + } + + extendScene(sceneIdx) { + const ext = this.parser.json.scenes[sceneIdx]?.extensions?.MOZ_hubs_components; + console.log("extendceneParams", ext, sceneIdx, this.parser.json.scenes[sceneIdx]); + if (ext) return this.resolveComponentLinks(ext); + } + + extendNode(nodeIdx) { + const ext = this.parser.json.nodes[nodeIdx]?.extensions?.MOZ_hubs_components; + if (ext) return this.resolveComponentLinks(ext); + } + + resolveComponentLinks(ext) { + console.log("resolveComponentLinks", ext); + + const deps = []; + + for (const componentName in ext) { + const props = ext[componentName]; + for (const propName in props) { + const value = props[propName]; + const type = value?.__mhc_link_type; + if (type && value.index !== undefined) { + console.log("Loading link", value); + deps.push( + this.parser.getDependency(type, value.index).then(loadedDep => { + console.log(`${type} loaded`, loadedDep); + props[propName] = loadedDep; + // TODO figure out if this is sane + if (type === "texture") { + loadedDep.flipY = true; + } + console.log(props); + }) + ); + } + } + } + + return Promise.all(deps); + } +} + class GLTFHubsLightMapExtension { constructor(parser) { this.parser = parser; @@ -514,6 +582,7 @@ export async function loadGLTF(src, contentType, onProgress, jsonPreprocessor) { loadingManager.setURLModifier(getCustomGLTFParserURLResolver(gltfUrl)); const gltfLoader = new THREE.GLTFLoader(loadingManager); gltfLoader + .register(parser => new GLTFHubsComponentsExtension(parser)) .register(parser => new GLTFHubsPlugin(parser, jsonPreprocessor)) .register(parser => new GLTFHubsLightMapExtension(parser)) .register(parser => new GLTFHubsTextureBasisExtension(parser)); diff --git a/src/gltf-component-mappings.js b/src/gltf-component-mappings.js index 4f1e98b980..09679dc4c7 100644 --- a/src/gltf-component-mappings.js +++ b/src/gltf-component-mappings.js @@ -373,7 +373,12 @@ AFRAME.GLTFModelPlus.registerComponent( enterComponentMapping = getSanitizedComponentMapping(enterComponent, enterProperty, publicComponents); leaveComponentMapping = getSanitizedComponentMapping(leaveComponent, leaveProperty, publicComponents); - targetEntity = indexToEntityMap[target]; + // indexToEntityMap should be considered depredcated. These references are now resovled by the GLTFHubsComponentExtension + if (typeof target === "number") { + targetEntity = indexToEntityMap[target]; + } else { + targetEntity = target?.el; + } if (!targetEntity) { throw new Error(`Couldn't find target entity with index: ${target}.`); @@ -434,7 +439,12 @@ AFRAME.GLTFModelPlus.registerComponent( let srcEl; if (srcNode !== undefined) { - srcEl = indexToEntityMap[srcNode]; + // indexToEntityMap should be considered depredcated. These references are now resovled by the GLTFHubsComponentExtension + if (typeof srcNode === "number") { + srcEl = indexToEntityMap[srcNode]; + } else { + srcEl = srcNode?.el; + } if (!srcEl) { console.warn( `Error inflating gltf component "video-texture-srcEl": Couldn't find srcEl entity with index ${srcNode}` @@ -462,7 +472,12 @@ AFRAME.GLTFModelPlus.registerComponent( let srcEl; if (srcNode !== undefined) { - srcEl = indexToEntityMap[srcNode]; + // indexToEntityMap should be considered depredcated. These references are now resovled by the GLTFHubsComponentExtension + if (typeof srcNode === "number") { + srcEl = indexToEntityMap[srcNode]; + } else { + srcEl = srcNode?.el; + } if (!srcEl) { console.warn( `Error inflating gltf component ${componentName}: Couldn't find srcEl entity with index ${srcNode}` From e45632ea362aba5d8aeea6f1e8b95c721665361b Mon Sep 17 00:00:00 2001 From: netpro2k Date: Tue, 17 Aug 2021 18:42:21 -0700 Subject: [PATCH 2/7] Add environment settings system --- src/assets/stylesheets/hub.scss | 8 ++ src/components/camera-tool.js | 5 - src/components/environment-map.js | 25 ---- src/components/gltf-model-plus.js | 6 - src/components/media-loader.js | 10 -- src/components/scene-components.js | 1 - src/components/skybox.js | 10 +- src/components/tools/networked-drawing.js | 5 - src/components/tools/pen-laser.js | 6 - src/components/tools/pen.js | 5 - src/gltf-component-mappings.js | 12 ++ src/hub.html | 1 - src/hub.js | 6 + src/scene.html | 1 - src/systems/environment-system.js | 145 ++++++++++++++++++++++ src/systems/hubs-systems.js | 2 + 16 files changed, 176 insertions(+), 72 deletions(-) create mode 100644 src/systems/environment-system.js diff --git a/src/assets/stylesheets/hub.scss b/src/assets/stylesheets/hub.scss index d55c3c79b2..3b508f448f 100644 --- a/src/assets/stylesheets/hub.scss +++ b/src/assets/stylesheets/hub.scss @@ -52,3 +52,11 @@ a-entity { vertical-align: -0.125em; height: 1em; } + +// Dat GUI +.dg select { + color: black; +} +.dg input { + line-height: normal; +} diff --git a/src/components/camera-tool.js b/src/components/camera-tool.js index a9178f36ee..2f5babd18b 100644 --- a/src/components/camera-tool.js +++ b/src/components/camera-tool.js @@ -184,11 +184,6 @@ AFRAME.registerComponent("camera-tool", { const width = 0.28; const geometry = new THREE.PlaneBufferGeometry(width, width / this.camera.aspect); - const environmentMapComponent = this.el.sceneEl.components["environment-map"]; - if (environmentMapComponent) { - environmentMapComponent.applyEnvironmentMap(this.el.object3D); - } - this.screen = new THREE.Mesh(geometry, material); this.screen.rotation.set(0, Math.PI, 0); this.screen.position.set(0, 0, -0.042); diff --git a/src/components/environment-map.js b/src/components/environment-map.js index 739c1f0b61..6d14271d08 100644 --- a/src/components/environment-map.js +++ b/src/components/environment-map.js @@ -1,4 +1,3 @@ -import { forEachMaterial } from "../utils/material-utils"; import cubeMapPosX from "../assets/images/cubemap/posx.jpg"; import cubeMapNegX from "../assets/images/cubemap/negx.jpg"; import cubeMapPosY from "../assets/images/cubemap/posy.jpg"; @@ -14,27 +13,3 @@ export async function createDefaultEnvironmentMap() { texture.format = THREE.RGBFormat; return texture; } - -AFRAME.registerComponent("environment-map", { - init() { - this.environmentMap = null; - - this.updateEnvironmentMap = this.updateEnvironmentMap.bind(this); - }, - - updateEnvironmentMap(environmentMap) { - this.environmentMap = environmentMap; - this.applyEnvironmentMap(this.el.object3D); - }, - - applyEnvironmentMap(object3D) { - object3D.traverse(object => { - forEachMaterial(object, material => { - if (material.isMeshStandardMaterial) { - material.envMap = this.environmentMap; - material.needsUpdate = true; - } - }); - }); - } -}); diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js index 5550ed6dd3..961fadd892 100644 --- a/src/components/gltf-model-plus.js +++ b/src/components/gltf-model-plus.js @@ -770,12 +770,6 @@ AFRAME.registerComponent("gltf-model-plus", { if (el) rewires.push(() => (o.el = el)); }); - const environmentMapComponent = this.el.sceneEl.components["environment-map"]; - - if (environmentMapComponent) { - environmentMapComponent.applyEnvironmentMap(object3DToSet); - } - if (lastSrc) { gltfCache.release(lastSrc); } diff --git a/src/components/media-loader.js b/src/components/media-loader.js index 9fa57c3f47..1491e39487 100644 --- a/src/components/media-loader.js +++ b/src/components/media-loader.js @@ -25,7 +25,6 @@ import { waitForDOMContentLoaded } from "../utils/async-utils"; import { SHAPE } from "three-ammo/constants"; -let loadingObjectEnvMap; let loadingObject; waitForDOMContentLoaded().then(() => { @@ -192,15 +191,6 @@ AFRAME.registerComponent("media-loader", { this.updateScale(true, false); if (useFancyLoader) { - const environmentMapComponent = this.el.sceneEl.components["environment-map"]; - if (environmentMapComponent) { - const currentEnivronmentMap = environmentMapComponent.environmentMap; - if (loadingObjectEnvMap !== currentEnivronmentMap) { - environmentMapComponent.applyEnvironmentMap(mesh); - loadingObjectEnvMap = currentEnivronmentMap; - } - } - this.loaderMixer = new THREE.AnimationMixer(mesh); this.loadingClip = this.loaderMixer.clipAction(mesh.animations[0]); diff --git a/src/components/scene-components.js b/src/components/scene-components.js index 983d6e347c..f2c81b7557 100644 --- a/src/components/scene-components.js +++ b/src/components/scene-components.js @@ -24,7 +24,6 @@ import "./floaty-object"; import "./super-spawner"; import "./water"; import "./simple-water"; -import "./environment-map"; import "./trigger-volume"; import "./video-pause-state"; import "./particle-emitter"; diff --git a/src/components/skybox.js b/src/components/skybox.js index 274e79fc5b..70dcc587f9 100644 --- a/src/components/skybox.js +++ b/src/components/skybox.js @@ -430,12 +430,6 @@ AFRAME.registerComponent("skybox", { init() { this.sky = new Sky(); this.el.setObject3D("mesh", this.sky); - - this.updateEnvironmentMap = this.updateEnvironmentMap.bind(this); - // HACK: Render environment map on next frame to avoid bug where the render target texture is black. - // This is likely due to the custom elements attached callback being synchronous on Chrome but not Firefox. - // Added timeout due to additional case where texture is black in Firefox. - requestAnimationFrame(() => setTimeout(this.updateEnvironmentMap)); }, update(oldData) { @@ -478,7 +472,8 @@ AFRAME.registerComponent("skybox", { this.sky.matrixNeedsUpdate = true; } - this.updateEnvironmentMap(); + // TODO do we care about updating enviornment map after scene load? + // this.updateEnvironmentMap(); }, updateEnvironmentMap() { @@ -491,6 +486,7 @@ AFRAME.registerComponent("skybox", { const envMap = this.sky.generateEnvironmentMap(renderer); environmentMapComponent.updateEnvironmentMap(envMap); } else if (quality === "medium") { + // TODO this still needs to be accounted for // This extra ambient light is here to normalize lighting with the MeshStandardMaterial. // Without it, objects are significantly darker in brighter environments. // It's kept to a low value to not wash out objects in very dark environments. diff --git a/src/components/tools/networked-drawing.js b/src/components/tools/networked-drawing.js index 462dd59dfe..32d3035376 100644 --- a/src/components/tools/networked-drawing.js +++ b/src/components/tools/networked-drawing.js @@ -90,11 +90,6 @@ AFRAME.registerComponent("networked-drawing", { this.el.setObject3D("mesh", this.drawing); - const environmentMapComponent = this.el.sceneEl.components["environment-map"]; - if (environmentMapComponent) { - environmentMapComponent.applyEnvironmentMap(this.drawing); - } - this.prevIdx = Object.assign({}, this.sharedBuffer.idx); this.idx = Object.assign({}, this.sharedBuffer.idx); this.vertexCount = 0; //number of vertices added for current line (used for line deletion). diff --git a/src/components/tools/pen-laser.js b/src/components/tools/pen-laser.js index 0d1b7eb35b..c6f5371e6a 100644 --- a/src/components/tools/pen-laser.js +++ b/src/components/tools/pen-laser.js @@ -30,12 +30,6 @@ AFRAME.registerComponent("pen-laser", { this.laserTip.scale.setScalar(0.01); this.laserTip.matrixNeedsUpdate = true; - const environmentMapComponent = this.el.sceneEl.components["environment-map"]; - if (environmentMapComponent) { - environmentMapComponent.applyEnvironmentMap(this.laser); - environmentMapComponent.applyEnvironmentMap(this.laserTip); - } - //prevents the line from being a raycast target for the cursor this.laser.raycast = function() {}; diff --git a/src/components/tools/pen.js b/src/components/tools/pen.js index 9e6e1aa760..67908f8e95 100644 --- a/src/components/tools/pen.js +++ b/src/components/tools/pen.js @@ -140,11 +140,6 @@ AFRAME.registerComponent("pen", { this.el.setObject3D("mesh", this.penTip); - const environmentMapComponent = this.el.sceneEl.components["environment-map"]; - if (environmentMapComponent) { - environmentMapComponent.applyEnvironmentMap(this.el.parentEl.object3D); - } - this.penLaserAttributesUpdated = false; this.penLaserAttributes = { color: "#FF0033", diff --git a/src/gltf-component-mappings.js b/src/gltf-component-mappings.js index 09679dc4c7..8edc111fe0 100644 --- a/src/gltf-component-mappings.js +++ b/src/gltf-component-mappings.js @@ -529,3 +529,15 @@ AFRAME.GLTFModelPlus.registerComponent( AFRAME.GLTFModelPlus.registerComponent("audio-zone", "audio-zone", (el, componentName, componentData) => { el.setAttribute(componentName, { ...componentData }); }); + +AFRAME.GLTFModelPlus.registerComponent( + "environment-settings", + "environment-settings", + (el, componentName, componentData) => { + // TODO a bit silly to be storing this as an aframe component. Use a glboal store of some sort + el.setAttribute(componentName, { + ...componentData, + backgroundColor: new THREE.Color(componentData.backgroundColor) + }); + } +); diff --git a/src/hub.html b/src/hub.html index f2f3fb4125..b16b6604f9 100644 --- a/src/hub.html +++ b/src/hub.html @@ -79,7 +79,6 @@ freeze-controller personal-space-bubble="debug: false;" rotate-selected-object - environment-map light="defaultLightsEnabled: false" > diff --git a/src/hub.js b/src/hub.js index c2106241ab..3f10b12417 100644 --- a/src/hub.js +++ b/src/hub.js @@ -398,6 +398,8 @@ export async function updateEnvironmentForHub(hub, entryManager) { const environmentScene = document.querySelector("#environment-scene"); const sceneEl = document.querySelector("a-scene"); + const envSystem = sceneEl.systems["hubs-systems"].environmentSystem; + console.log(`Scene URL: ${sceneUrl}`); let environmentEl = null; @@ -415,6 +417,8 @@ export async function updateEnvironmentForHub(hub, entryManager) { sceneEl.addState("visible"); + envSystem.updateEnvironment(environmentEl); + //TODO: check if the environment was made with spoke to determine if a shape should be added traverseMeshesAndAddShapes(environmentEl); }, @@ -441,6 +445,8 @@ export async function updateEnvironmentForHub(hub, entryManager) { "model-loaded", () => { environmentEl.removeEventListener("model-error", sceneErrorHandler); + + envSystem.updateEnvironment(environmentEl); traverseMeshesAndAddShapes(environmentEl); // We've already entered, so move to new spawn point once new environment is loaded diff --git a/src/scene.html b/src/scene.html index 97b28e7ea8..d4a251a126 100644 --- a/src/scene.html +++ b/src/scene.html @@ -37,7 +37,6 @@ alpha: false;" shadow="type: pcfsoft;autoUpdate: false" light="defaultLightsEnabled: false" - environment-map > { + this.applyEnvSettings(debugSettings); + }; + + const gui = new GUI(); + gui + .add(debugSettings, "toneMapping", Object.values(toneMappingOptions)) + .onChange(updateDebug) + .listen(); + gui + .add(debugSettings, "toneMappingExposure", 0, 4, 0.01) + .onChange(updateDebug) + .listen(); + gui + .add(debugSettings, "physicallyCorrectLights", true) + .onChange(updateDebug) + .listen(); + gui.open(); + + this.debugGui = gui; + this.debugSettings = debugSettings; + + window.$E = this; + } + + updateEnvironment(envEl) { + const envSettingsEl = envEl.querySelector("[environment-settings]"); + const skyboxEl = envEl.querySelector("[skybox]"); + console.log(skyboxEl); + const envSettings = { + ...defaultEnvSettings, + skybox: skyboxEl?.components["skybox"] + }; + + if (envSettingsEl) { + Object.assign(envSettings, envSettingsEl.components["environment-settings"].data); + } + + this.applyEnvSettings(envSettings); + } + + applyEnvSettings(settings) { + if (this.debugSettings) { + Object.assign(this.debugSettings, settings); + } + + let materialsNeedUpdate = false; + + console.log("Applying environment settings", settings); + + if (this.renderer.physicallyCorrectLights !== settings.physicallyCorrectLights) { + this.renderer.physicallyCorrectLights = settings.physicallyCorrectLights; + materialsNeedUpdate = true; + } + + const newToneMapping = THREE[settings.toneMapping]; + if (this.renderer.toneMapping !== newToneMapping) { + this.renderer.toneMapping = newToneMapping; + materialsNeedUpdate = true; + } + + this.renderer.toneMappingExposure = settings.toneMappingExposure; + + this.scene.remove(window.lp); + + if (settings.backgroundTexture) { + settings.backgroundTexture.mapping = THREE.EquirectangularReflectionMapping; + this.scene.background = settings.backgroundTexture; + } else { + this.scene.background = settings.backgroundColor; + } + + if (settings.envMapTexture) { + settings.envMapTexture.mapping = THREE.EquirectangularReflectionMapping; + // TODO don't regenerate this every time + const pmrem = this.pmremGenerator.fromEquirectangular(settings.envMapTexture); + this.scene.environment = pmrem.texture; + // this.scene.environment = null; + + // var cube = new THREE.WebGLCubeRenderTarget(512); + // cube.fromEquirectangularTexture(this.renderer, settings.envMapTexture); + // console.log("cube", cube); + // window.lp = LightProbeGenerator.fromCubeRenderTarget(this.renderer, cube); + // this.scene.add(window.lp); + // this.scene.background = cube.texture; + } else if (settings.skybox) { + const envMap = settings.skybox.sky.generateEnvironmentMap(this.renderer); + this.scene.environment = envMap; + } else { + this.scene.environment = null; + } + + if (materialsNeedUpdate) { + console.log("materials need updating"); + this.scene.traverse(o => { + if (o.material) o.material.needsUpdate = true; + }); + } + } +} + +AFRAME.registerComponent("environment-settings", { + schema: { + toneMapping: { default: defaultEnvSettings.toneMapping, oneOf: Object.values(toneMappingOptions) }, + toneMappingExposure: { default: defaultEnvSettings.toneMappingExposure }, + backgroundColor: { type: "color", default: defaultEnvSettings.background } + } +}); diff --git a/src/systems/hubs-systems.js b/src/systems/hubs-systems.js index c74f597cdc..ce39d8d696 100644 --- a/src/systems/hubs-systems.js +++ b/src/systems/hubs-systems.js @@ -32,6 +32,7 @@ import { InspectYourselfSystem } from "./inspect-yourself-system"; import { EmojiSystem } from "./emoji-system"; import { AudioZonesSystem } from "./audio-zones-system"; import { GainSystem } from "./audio-gain-system"; +import { EnvironmentSystem } from "./environment-system"; AFRAME.registerSystem("hubs-systems", { init() { @@ -73,6 +74,7 @@ AFRAME.registerSystem("hubs-systems", { this.emojiSystem = new EmojiSystem(this.el); this.audioZonesSystem = new AudioZonesSystem(); this.gainSystem = new GainSystem(); + this.environmentSystem = new EnvironmentSystem(this.el); }, tick(t, dt) { From 60c9d7ca492a313d3b4a9960a112ed1a268ce91e Mon Sep 17 00:00:00 2001 From: netpro2k Date: Tue, 17 Aug 2021 18:43:49 -0700 Subject: [PATCH 3/7] Support for RGBE HDR images in GLTF files --- src/components/gltf-model-plus.js | 34 ++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js index 961fadd892..c8432d501e 100644 --- a/src/components/gltf-model-plus.js +++ b/src/components/gltf-model-plus.js @@ -7,6 +7,7 @@ import { MeshBVH, acceleratedRaycast } from "three-mesh-bvh"; import { disposeNode, cloneObject3D } from "../utils/three-utils"; import HubsTextureLoader from "../loaders/HubsTextureLoader"; import { KTX2Loader } from "three/examples/jsm/loaders/KTX2Loader"; +import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; THREE.Mesh.prototype.raycast = acceleratedRaycast; @@ -569,6 +570,36 @@ class GLTFHubsTextureBasisExtension { } } +class GLTFMozTextureRGBE { + constructor(parser, loader) { + this.parser = parser; + this.loader = loader; + this.name = "MOZ_texture_rgbe"; + } + + loadTexture(textureIndex) { + const parser = this.parser; + const json = parser.json; + const textureDef = json.textures[textureIndex]; + + if (!textureDef.extensions || !textureDef.extensions[this.name]) { + return null; + } + + const extensionDef = textureDef.extensions[this.name]; + const source = json.images[extensionDef.source]; + return parser.loadTextureImage(textureIndex, source, this.loader).then(t => { + // TODO pretty severe artifacting when using mipmaps, disable for now + if (t.minFilter == THREE.NearestMipmapNearestFilter || t.minFilter == THREE.NearestMipmapLinearFilter) { + t.minFilter = THREE.NearestFilter; + } else if (t.minFilter == THREE.LinearMipmapNearestFilter || t.minFilter == THREE.LinearMipmapLinearFilter) { + t.minFilter = THREE.LinearFilter; + } + return t; + }); + } +} + export async function loadGLTF(src, contentType, onProgress, jsonPreprocessor) { let gltfUrl = src; let fileMap; @@ -585,7 +616,8 @@ export async function loadGLTF(src, contentType, onProgress, jsonPreprocessor) { .register(parser => new GLTFHubsComponentsExtension(parser)) .register(parser => new GLTFHubsPlugin(parser, jsonPreprocessor)) .register(parser => new GLTFHubsLightMapExtension(parser)) - .register(parser => new GLTFHubsTextureBasisExtension(parser)); + .register(parser => new GLTFHubsTextureBasisExtension(parser)) + .register(parser => new GLTFMozTextureRGBE(parser, new RGBELoader().setDataType(THREE.HalfFloatType))); // TODO some models are loaded before the renderer exists. This is likely things like the camera tool and loading cube. // They don't currently use KTX textures but if they did this would be an issue. Fixing this is hard but is part of From d33ee9530fa3e7e89fec7ab39e189738e80045d4 Mon Sep 17 00:00:00 2001 From: netpro2k Date: Tue, 17 Aug 2021 19:53:28 -0700 Subject: [PATCH 4/7] Disable diffuse nevmap light for lightmapped objs --- src/systems/environment-system.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/systems/environment-system.js b/src/systems/environment-system.js index d7c1e01637..315285821e 100644 --- a/src/systems/environment-system.js +++ b/src/systems/environment-system.js @@ -1,6 +1,15 @@ import { GUI } from "three/examples/jsm/libs/dat.gui.module.js"; import qsTruthy from "../utils/qs_truthy"; +// This disabled lighting contribution from the environment map for things that have a lightmap +// TODO do this in a less hacky way, maybe make it configurable +THREE.ShaderChunk.lights_fragment_maps = THREE.ShaderChunk.lights_fragment_maps.replace( + "iblIrradiance += getLightProbeIndirectIrradiance( geometry, maxMipLevel );", + `#ifndef USE_LIGHTMAP + iblIrradiance += getLightProbeIndirectIrradiance( geometry, maxMipLevel ); + #endif` +); + const toneMappingOptions = { None: "NoToneMapping", Linear: "LinearToneMapping", From 733eaebe61d44ddd12f3cef97e88229f10426879 Mon Sep 17 00:00:00 2001 From: netpro2k Date: Tue, 31 Aug 2021 18:27:29 -0700 Subject: [PATCH 5/7] Dont recreate envMap every update, cleanup logging --- src/components/gltf-model-plus.js | 10 ---------- src/gltf-component-mappings.js | 7 +++++++ src/systems/environment-system.js | 29 ++++++++++++----------------- 3 files changed, 19 insertions(+), 27 deletions(-) diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js index c8432d501e..4be8e765e5 100644 --- a/src/components/gltf-model-plus.js +++ b/src/components/gltf-model-plus.js @@ -460,7 +460,6 @@ class GLTFHubsComponentsExtension { extendScene(sceneIdx) { const ext = this.parser.json.scenes[sceneIdx]?.extensions?.MOZ_hubs_components; - console.log("extendceneParams", ext, sceneIdx, this.parser.json.scenes[sceneIdx]); if (ext) return this.resolveComponentLinks(ext); } @@ -470,8 +469,6 @@ class GLTFHubsComponentsExtension { } resolveComponentLinks(ext) { - console.log("resolveComponentLinks", ext); - const deps = []; for (const componentName in ext) { @@ -480,16 +477,9 @@ class GLTFHubsComponentsExtension { const value = props[propName]; const type = value?.__mhc_link_type; if (type && value.index !== undefined) { - console.log("Loading link", value); deps.push( this.parser.getDependency(type, value.index).then(loadedDep => { - console.log(`${type} loaded`, loadedDep); props[propName] = loadedDep; - // TODO figure out if this is sane - if (type === "texture") { - loadedDep.flipY = true; - } - console.log(props); }) ); } diff --git a/src/gltf-component-mappings.js b/src/gltf-component-mappings.js index 8edc111fe0..493d5e5119 100644 --- a/src/gltf-component-mappings.js +++ b/src/gltf-component-mappings.js @@ -534,6 +534,13 @@ AFRAME.GLTFModelPlus.registerComponent( "environment-settings", "environment-settings", (el, componentName, componentData) => { + if (componentData.envMapTexture) { + // assume equirect for now + componentData.envMapTexture.mapping = THREE.EquirectangularReflectionMapping; + // TODO do we always want to flip for enviornmetn map? + componentData.envMapTexture.flipY = true; + } + // TODO a bit silly to be storing this as an aframe component. Use a glboal store of some sort el.setAttribute(componentName, { ...componentData, diff --git a/src/systems/environment-system.js b/src/systems/environment-system.js index 315285821e..2b8a34d1e2 100644 --- a/src/systems/environment-system.js +++ b/src/systems/environment-system.js @@ -65,6 +65,7 @@ export class EnvironmentSystem { this.debugGui = gui; this.debugSettings = debugSettings; + this.debugMode = true; window.$E = this; } @@ -72,7 +73,6 @@ export class EnvironmentSystem { updateEnvironment(envEl) { const envSettingsEl = envEl.querySelector("[environment-settings]"); const skyboxEl = envEl.querySelector("[skybox]"); - console.log(skyboxEl); const envSettings = { ...defaultEnvSettings, skybox: skyboxEl?.components["skybox"] @@ -92,7 +92,7 @@ export class EnvironmentSystem { let materialsNeedUpdate = false; - console.log("Applying environment settings", settings); + if (this.debugMode) console.log("Applying environment settings", settings); if (this.renderer.physicallyCorrectLights !== settings.physicallyCorrectLights) { this.renderer.physicallyCorrectLights = settings.physicallyCorrectLights; @@ -117,27 +117,22 @@ export class EnvironmentSystem { } if (settings.envMapTexture) { - settings.envMapTexture.mapping = THREE.EquirectangularReflectionMapping; - // TODO don't regenerate this every time - const pmrem = this.pmremGenerator.fromEquirectangular(settings.envMapTexture); - this.scene.environment = pmrem.texture; - // this.scene.environment = null; - - // var cube = new THREE.WebGLCubeRenderTarget(512); - // cube.fromEquirectangularTexture(this.renderer, settings.envMapTexture); - // console.log("cube", cube); - // window.lp = LightProbeGenerator.fromCubeRenderTarget(this.renderer, cube); - // this.scene.add(window.lp); - // this.scene.background = cube.texture; + if (this.prevEnvMapTextureUUID !== settings.envMapTexture.uuid) { + this.prevEnvMapTextureUUID = settings.envMapTexture.uuid; + this.scene.environment = this.pmremGenerator.fromEquirectangular(settings.envMapTexture).texture; + } } else if (settings.skybox) { - const envMap = settings.skybox.sky.generateEnvironmentMap(this.renderer); - this.scene.environment = envMap; + if (this.prevEnvMapTextureUUID !== settings.skybox.uuid) { + this.prevEnvMapTextureUUID = settings.skybox.uuid; + this.scene.environment = settings.skybox.sky.generateEnvironmentMap(this.renderer); + } } else { this.scene.environment = null; + this.prevEnvMapTextureUUID = null; } if (materialsNeedUpdate) { - console.log("materials need updating"); + if (this.debugMode) console.log("materials need updating"); this.scene.traverse(o => { if (o.material) o.material.needsUpdate = true; }); From 40783157f9ff0d516c48e37674c41f8c7b8b98c2 Mon Sep 17 00:00:00 2001 From: netpro2k Date: Tue, 31 Aug 2021 19:23:22 -0700 Subject: [PATCH 6/7] Cleanup dead skybox code --- src/components/skybox.js | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/src/components/skybox.js b/src/components/skybox.js index 70dcc587f9..170313b7e4 100644 --- a/src/components/skybox.js +++ b/src/components/skybox.js @@ -472,21 +472,8 @@ AFRAME.registerComponent("skybox", { this.sky.matrixNeedsUpdate = true; } - // TODO do we care about updating enviornment map after scene load? - // this.updateEnvironmentMap(); - }, - - updateEnvironmentMap() { - const environmentMapComponent = this.el.sceneEl.components["environment-map"]; - const renderer = this.el.sceneEl.renderer; - - const quality = window.APP.store.materialQualitySetting; - - if (environmentMapComponent && !isBotMode && quality === "high") { - const envMap = this.sky.generateEnvironmentMap(renderer); - environmentMapComponent.updateEnvironmentMap(envMap); - } else if (quality === "medium") { - // TODO this still needs to be accounted for + // TODO Remove or rework medium quality mode + if (window.APP.store.materialQualitySetting === "medium") { // This extra ambient light is here to normalize lighting with the MeshStandardMaterial. // Without it, objects are significantly darker in brighter environments. // It's kept to a low value to not wash out objects in very dark environments. @@ -494,6 +481,9 @@ AFRAME.registerComponent("skybox", { this.el.setObject3D("ambient-light", new AmbientLight(0xffffff, 0.3)); this.el.setObject3D("light-probe", this.sky.generateLightProbe(renderer)); } + + // TODO if we care about dynamic skybox changes we should also update the enviornment map here + // }, remove() { From 6b2bcee0380ac9c8f2b2eb80aa75ddd9d2fcaabf Mon Sep 17 00:00:00 2001 From: netpro2k Date: Tue, 31 Aug 2021 19:27:21 -0700 Subject: [PATCH 7/7] Delint --- src/components/skybox.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/skybox.js b/src/components/skybox.js index 170313b7e4..7c5c085820 100644 --- a/src/components/skybox.js +++ b/src/components/skybox.js @@ -3,9 +3,6 @@ // in webpack production mode. require("three/examples/js/lights/LightProbeGenerator"); -import qsTruthy from "../utils/qs_truthy"; -const isBotMode = qsTruthy("bot"); - const { AmbientLight, BackSide, @@ -479,7 +476,7 @@ AFRAME.registerComponent("skybox", { // It's kept to a low value to not wash out objects in very dark environments. // This is a hack, but the results are much better than they are without it. this.el.setObject3D("ambient-light", new AmbientLight(0xffffff, 0.3)); - this.el.setObject3D("light-probe", this.sky.generateLightProbe(renderer)); + this.el.setObject3D("light-probe", this.sky.generateLightProbe(this.el.sceneEl.renderer)); } // TODO if we care about dynamic skybox changes we should also update the enviornment map here