Use background to set the default environment map (#4797)

* Use background to set the default environment map

* pr feedback

* move object generation into init

* don't try to override existing environment maps

* clean up init

Author: AdaRoseCannon

docs/components/background.md

@@ -13,6 +13,10 @@ frustum culling issues when `a-sky` is further than the far plane of the
 camera. There are no unexpected occlusions either with far objects that might
 be behind of the sphere geometry of `a-sky`.
 
+The background component can also generate a default environment cube map for all
+materials, if you find GLB models end up too dark or reflective materials don't
+reflect the environment this will provide a default reflective environment.
+
 ## Example
 
 The example below sets the background color to red.
@@ -23,7 +27,8 @@ The example below sets the background color to red.
 
 ## Properties
 
-| Property    | Description                                               | Default Value |
-|-------------|-----------------------------------------------------------|---------------|
-| color       | Color of the scene background.                            | black         |
-| transparent | Background is transparent. The color property is ignored. | false         |
+| Property            | Description                                               | Default Value |
+|---------------------|-----------------------------------------------------------|---------------|
+| color               | Color of the scene background.                            | black         |
+| transparent         | Background is transparent. The color property is ignored. | false         |
+| generateEnvironment | Whether to generate a default environment                 | true          |

src/components/scene/background.js

@@ -5,16 +5,46 @@ var COMPONENTS = require('../../core/component').components;
 module.exports.Component = register('background', {
   schema: {
     color: {type: 'color', default: 'black'},
-    transparent: {default: false}
+    transparent: {default: false},
+    generateEnvironment: {default: true}
+  },
+  init: function () {
+    this.cubeRenderTarget = new THREE.WebGLCubeRenderTarget(128, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter });
+    this.cubeCamera = new THREE.CubeCamera(1, 100000, this.cubeRenderTarget);
+    this.needsEnvironmentUpdate = true;
   },
   update: function () {
+    var scene = this.el.sceneEl.object3D;
     var data = this.data;
     var object3D = this.el.object3D;
     if (data.transparent) {
       object3D.background = null;
+    } else {
+      object3D.background = new THREE.Color(data.color);
+    }
+
+    if (scene.environment && scene.environment !== this.cubeRenderTarget.texture) {
+      console.warn('Background will not overide predefined environment maps');
       return;
     }
-    object3D.background = new THREE.Color(data.color);
+
+    if (data.generateEnvironment) {
+      scene.environment = this.cubeRenderTarget.texture;
+    } else {
+      scene.environment = null;
+    }
+  },
+
+  tick: function () {
+    if (!this.needsEnvironmentUpdate) return;
+    var scene = this.el.object3D;
+    var renderer = this.el.renderer;
+    var camera = this.el.camera;
+
+    this.el.object3D.add(this.cubeCamera);
+    this.cubeCamera.position.copy(camera.position);
+    this.cubeCamera.update(renderer, scene);
+    this.needsEnvironmentUpdate = false;
   },
 
   remove: function () {
@@ -24,6 +54,9 @@ module.exports.Component = register('background', {
       object3D.background = null;
       return;
     }
+    if (object3D.environment === this.cubeRenderTarget.texture) {
+      object3D.environment = null;
+    }
     object3D.background = COMPONENTS[this.name].schema.color.default;
   }
 });