rename property

aframevr · Mar 22, 2022 · 8351215 · 8351215
1 parent 17ea7b1
commit 8351215
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 2 deletions.
diff --git a/docs/components/light.md b/docs/components/light.md
@@ -91,7 +91,13 @@ creating a child entity it targets. For example, pointing down its -Z axis:
 </a-light>
 ```
 
-Directional lights are the most efficient type for adding realtime shadows to a scene.
+Directional lights are the most efficient type for adding realtime shadows to a scene. You can use shadows like so:
+
+```html
+<a-light type="directional" light="castShadow:true;" position="1 1 1" intensity="0.5" shdadow-camera-auto="#objects"></a-light>
+```
+
+The `shdadow-camera-auto` configuration maps to `light.shadowCameraAuto` which tells the light to automatically update the shadow camera to be the minimum size and position to encompass the target elements. 
 
 ### Hemisphere
 
@@ -189,6 +195,7 @@ additional properties:
 |---------------------|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------|---------------|
 | castShadow          |                 | Whether this light casts shadows on the scene.                                                                                             | false         |
 | shadowBias          |                 | Offset depth when deciding whether a surface is in shadow. Tiny adjustments here (in the order of +/-0.0001) may reduce artifacts in shadows. | 0             |
+| shadowCameraAuto    | `directional`   | Automatically configure the Bottom, Top, Left, Right, Near and Far of a directional light's shadow map, from an element                    |               |
 | shadowCameraBottom  | `directional`   | Bottom plane of shadow camera frustum.                                                                                                     | -5            |
 | shadowCameraFar     |                 | Far plane of shadow camera frustum.                                                                                                        | 500           |
 | shadowCameraFov     | `point`, `spot` | Shadow camera's FOV.                                                                                                                       | 50            |

diff --git a/examples/boilerplate/ar-hello-world/index.html b/examples/boilerplate/ar-hello-world/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Hello, World! • A-Frame</title>
+    <meta name="description" content="Hello, World! • A-Frame">
+    <script src="../../../dist/aframe-master.js"></script>
+    <script>
+      AFRAME.registerComponent('follow-shadow', {
+        schema: {type: 'selector'},
+        init() {this.el.object3D.renderOrder = -1;},
+        tick() { 
+          if (this.data) {
+            this.el.object3D.position.copy(this.data.object3D.position); 
+            this.el.object3D.position.y-=0.001; // stop z-fighting
+          }
+        }
+      });
+    </script>
+  </head>
+  <body>
+    <a-scene
+      reflection="directionalLight:a-light[type=directional]"
+      ar-hit-test="target:#objects;"
+      renderer="physicallyCorrectLights:true;colorManagement:true;exposure:1;toneMapping:ACESFilmic;"
+    >
+      <a-light type="directional" light="castShadow:true;" position="1 1 1" intensity="0.5" auto-shadow-cam="#objects"></a-light>
+      <a-camera position="0 0.4 0" wasd-controls="acceleration:10;"></a-camera>
+      <a-entity id="objects" scale="0.2 0.2 0.2" position="0 0 -1" shadow>
+        <a-box position="-1 0.5 1" rotation="0 45 0" color="#4CC3D9"></a-box>
+        <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
+        <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
+      </a-entity>
+      <a-plane follow-shadow="#objects" material="shader:shadow" shadow="cast:false;" rotation="-90 0 0" width="2" height="2"></a-plane>
+      <a-sky color="#ECECEC" hide-on-enter-ar></a-sky>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -148,6 +148,7 @@ <h2>Examples</h2>
       <li><a href="showcase/spheres-and-fog/">Spheres and Fog</a></li>
       <li><a href="showcase/wikipedia/">Wikipedia</a></li>
       <li><a href="boilerplate/hello-world/">Hello World</a></li>
+      <li><a href="boilerplate/ar-hello-world/">AR Hello World</a></li>
       <li><a href="boilerplate/panorama/">360&deg; Image</a></li>
       <li><a href="boilerplate/360-video/">360&deg; Video</a></li>
       <li><a href="boilerplate/3d-model/">3D Model (glTF)</a></li>

diff --git a/src/components/light.js b/src/components/light.js
@@ -11,6 +11,23 @@ var CubeLoader = new THREE.CubeTextureLoader();
 
 var probeCache = {};
 
+function distanceOfPointFromPlane (positionOnPlane, planeNormal, p1) {
+  // the d value in the plane equation a*x + b*y + c*z=d
+  var d = planeNormal.dot(positionOnPlane);
+
+  // distance of point from plane
+  return (d - planeNormal.dot(p1)) / planeNormal.length();
+}
+
+function nearestPointInPlane (positionOnPlane, planeNormal, p1, out) {
+  var t = distanceOfPointFromPlane(positionOnPlane, planeNormal, p1);
+  // closest point on the plane
+  out.copy(planeNormal);
+  out.multiplyScalar(t);
+  out.add(p1);
+  return out;
+}
+
 /**
  * Light component.
  */
@@ -42,6 +59,7 @@ module.exports.Component = registerComponent('light', {
     shadowCameraBottom: {default: -5, if: {castShadow: true}},
     shadowCameraLeft: {default: -5, if: {castShadow: true}},
     shadowCameraVisible: {default: false, if: {castShadow: true}},
+    shadowCameraAuto: {default: '', if: {type: ['directional']}},
     shadowMapHeight: {default: 512, if: {castShadow: true}},
     shadowMapWidth: {default: 512, if: {castShadow: true}},
     shadowRadius: {default: 1, if: {castShadow: true}}
@@ -141,11 +159,59 @@ module.exports.Component = registerComponent('light', {
       return;
     }
 
+    if (data.shadowCameraAutoTarget) {
+      this.shadowCameraAutoTargetEls = Array.from(document.querySelectorAll(data.shadowCameraAutoTarget));
+    }
+
     // No light yet or light type has changed. Create and add light.
     this.setLight(this.data);
     this.updateShadow();
   },
 
+  tick: (function tickSetup () {
+    var bbox = new THREE.Box3();
+    var normal = new THREE.Vector3();
+    var cameraWorldPosition = new THREE.Vector3();
+    var tempMat = new THREE.Matrix4();
+    var sphere = new THREE.Sphere();
+    var tempVector = new THREE.Vector3();
+
+    return function tick () {
+      if (
+        this.data.type === 'directional' &&
+        this.light.shadow &&
+        this.light.shadow.camera instanceof THREE.OrthographicCamera &&
+        this.shadowCameraAutoTargetEls.length
+      ) {
+        var camera = this.light.shadow.camera;
+        camera.getWorldDirection(normal);
+        camera.getWorldPosition(cameraWorldPosition);
+        tempMat.copy(camera.matrixWorld);
+        tempMat.invert();
+
+        camera.near = 1;
+        camera.left = 100000;
+        camera.right = -100000;
+        camera.top = -100000;
+        camera.bottom = 100000;
+        this.shadowCameraAutoTargetEls.forEach(function (el) {
+          bbox.setFromObject(el.object3D);
+          bbox.getBoundingSphere(sphere);
+          var distanceToPlane = distanceOfPointFromPlane(cameraWorldPosition, normal, sphere.center);
+          var pointOnCameraPlane = nearestPointInPlane(cameraWorldPosition, normal, sphere.center, tempVector);
+
+          var pointInXYPlane = pointOnCameraPlane.applyMatrix4(tempMat);
+          camera.near = Math.min(-distanceToPlane - sphere.radius - 1, camera.near);
+          camera.left = Math.min(-sphere.radius + pointInXYPlane.x, camera.left);
+          camera.right = Math.max(sphere.radius + pointInXYPlane.x, camera.right);
+          camera.top = Math.max(sphere.radius + pointInXYPlane.y, camera.top);
+          camera.bottom = Math.min(-sphere.radius + pointInXYPlane.y, camera.bottom);
+        });
+        camera.updateProjectionMatrix();
+      }
+    };
+  }()),
+
   setLight: function (data) {
     var el = this.el;
     var newLight = this.getLight(data);

diff --git a/src/extras/primitives/primitives/a-light.js b/src/extras/primitives/primitives/a-light.js
@@ -15,6 +15,7 @@ registerPrimitive('a-light', {
     penumbra: 'light.penumbra',
     type: 'light.type',
     target: 'light.target',
-    envmap: 'light.envMap'
+    envmap: 'light.envMap',
+    'shadow-camera-auto': 'light.shadowCameraAuto'
   }
 });