Merge pull request #5438 from mozilla/fix-fog

Move fog handling to environment system

src/gltf-component-mappings.js

@@ -6,24 +6,6 @@ const COLLISION_LAYERS = require("./constants").COLLISION_LAYERS;
 import { AudioType, DistanceModelType, SourceType } from "./components/audio-params";
 import { updateAudioSettings } from "./update-audio-settings";
 
-function registerRootSceneComponent(componentName) {
-  AFRAME.GLTFModelPlus.registerComponent(componentName, componentName, (el, componentName, componentData) => {
-    const sceneEl = AFRAME.scenes[0];
-
-    sceneEl.setAttribute(componentName, componentData);
-
-    sceneEl.addEventListener(
-      "reset_scene",
-      () => {
-        sceneEl.removeAttribute(componentName);
-      },
-      { once: true }
-    );
-  });
-}
-
-registerRootSceneComponent("fog");
-
 AFRAME.GLTFModelPlus.registerComponent("duck", "duck", el => {
   el.setAttribute("duck", "");
   el.setAttribute("quack", { quackPercentage: 0.1 });
@@ -597,6 +579,21 @@ AFRAME.GLTFModelPlus.registerComponent("background", "background", (el, _compone
   el.setAttribute("environment-settings", { backgroundColor: new THREE.Color(componentData.color) });
 });
 
+AFRAME.GLTFModelPlus.registerComponent("fog", "fog", (el, _componentName, componentData) => {
+  // TODO need to actually implement this in blender exporter before showing this warning
+  // console.warn(
+  //   "The `fog` component is deprecated, use the fog properties on the `environment-settings` component instead."
+  // );
+  // This assumes the fog component is on the root entitycoco
+  el.setAttribute("environment-settings", {
+    fogType: componentData.type,
+    fogColor: new THREE.Color(componentData.color),
+    fogNear: componentData.near,
+    fogFar: componentData.far,
+    fogDensity: componentData.density
+  });
+});
+
 AFRAME.GLTFModelPlus.registerComponent(
   "environment-settings",
   "environment-settings",

src/systems/environment-system.js

@@ -34,7 +34,13 @@ const defaultEnvSettings = {
   physicallyCorrectLights: true,
   envMapTexture: null,
   backgroundTexture: null,
-  backgroundColor: new THREE.Color("#000000")
+  backgroundColor: new THREE.Color("#000000"),
+
+  fogType: null,
+  fogColor: new THREE.Color("#ffffff"),
+  fogDensity: 0.00025,
+  fogFar: 1000,
+  fogNear: 1
 };
 
 let blenderLUTPromise; // lazy loaded
@@ -192,6 +198,25 @@ export class EnvironmentSystem {
       this.prevEnvMapTextureUUID = null;
     }
 
+    if (this.scene.fog?.name !== settings.fogType) {
+      if (settings.fogType === "linear") {
+        this.scene.fog = new THREE.Fog(settings.fogColor, settings.fogNear, settings.fogFar);
+      } else if (settings.fogType === "exponential") {
+        this.scene.fog = new THREE.FogExp2(settings.fogColor, settings.fogDensity);
+      } else {
+        this.scene.fog = null;
+      }
+      materialsNeedUpdate = true;
+    } else if (settings.fogType) {
+      this.scene.fog.color.copy(settings.fogColor);
+      if (settings.fogType === "linear") {
+        this.scene.fog.near = settings.fogNear;
+        this.scene.fog.far = settings.fogFar;
+      } else if (settings.fogType === "exponential") {
+        this.scene.fog.density = settings.fogDensity;
+      }
+    }
+
     if (materialsNeedUpdate) {
       if (this.debugMode) console.log("materials need updating");
       this.scene.traverse(o => {
@@ -211,7 +236,13 @@ AFRAME.registerComponent("environment-settings", {
   schema: {
     toneMapping: { default: defaultEnvSettings.toneMapping, oneOf: Object.values(toneMappingOptions) },
     toneMappingExposure: { default: defaultEnvSettings.toneMappingExposure },
-    backgroundColor: { type: "color", default: defaultEnvSettings.background }
+    backgroundColor: { type: "color", default: defaultEnvSettings.background },
+
+    fogType: { type: "string", default: defaultEnvSettings.fogType },
+    fogColor: { type: "color", default: defaultEnvSettings.fogColor },
+    fogDensity: { type: "number", default: defaultEnvSettings.fogDensity },
+    fogNear: { type: "number", default: defaultEnvSettings.forNear },
+    fogFar: { type: "number", default: defaultEnvSettings.fogFar }
   }
 });