Merge pull request #11 from diarmidmackenzie/extend-examples

Extend examples
c-frame · Nov 5, 2022 · eccbe03 · eccbe03
2 parents 1f53db5 + 52b44ea
commit eccbe03
Show file tree

Hide file tree

Showing 36 changed files with 1,557 additions and 407 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -4,7 +4,7 @@ jobs:
   test:
     strategy:
       matrix:
-        os: [ubuntu-18.04, macos-10.15, windows-2019]
+        os: [ubuntu-18.04, macos-12, windows-2019]
         browser: [ChromeHeadless, FirefoxHeadless]
     runs-on: ${{ matrix.os }}
     steps:

diff --git a/AmmoDriver.md b/AmmoDriver.md
@@ -127,6 +127,7 @@ An `ammo-body` component may be added to any entity in a scene. While having onl
 | collisionFilterGroup     | `1`        | 32-bit bitmask to determine what collision "group" this object belongs to. See: [Collision Filtering](#collision-filtering).                            |
 | collisionFilterMask      | `1`        | 32-bit bitmask to determine what collision "groups" this object should collide with. See: [Collision Filtering](#collision-filtering).                 |
 | scaleAutoUpdate          | `true`     | Should the shapes of the objecct be automatically scaled to match the scale of the entity.                                                              |
+| restitution              | 0          | Coefficient of restitution (bounciness).  Note that this must be set to a non-zero value on *both* objects to get bounce from a collision.<br/>This value cannot be changed after initialization of the `ammo-body`.   |
 
 #### `ammo-body` type
 

diff --git a/CannonDriver.md b/CannonDriver.md
diff --git a/README.md b/README.md
diff --git a/dist/aframe-physics-system.js b/dist/aframe-physics-system.js
@@ -15780,7 +15780,11 @@ module.exports = AFRAME.registerComponent("ammo-constraint", {
 
     // An axis that each body can rotate around, defined locally to that body. Used for hinge constraints.
     axis: { type: "vec3", default: { x: 0, y: 0, z: 1 } },
-    targetAxis: { type: "vec3", default: { x: 0, y: 0, z: 1 } }
+    targetAxis: { type: "vec3", default: { x: 0, y: 0, z: 1 } },
+
+    // damping & stuffness - used for spring contraints only
+    damping: { type: "number", default: 1 },
+    stiffness: { type: "number", default: 100 },
   },
 
   init: function() {
@@ -15848,7 +15852,20 @@ module.exports = AFRAME.registerComponent("ammo-constraint", {
       }
       case CONSTRAINT.SPRING: {
         constraint = new Ammo.btGeneric6DofSpringConstraint(body, targetBody, bodyTransform, targetTransform, true);
-        //TODO: enableSpring, setStiffness and setDamping
+
+        // Very limited initial implementation of spring constraint.
+        // See: https://github.com/n5ro/aframe-physics-system/issues/171
+        for (var i in [0,1,2,3,4,5]) {
+          constraint.enableSpring(1, true)
+          constraint.setStiffness(1, this.data.stiffness)
+          constraint.setDamping(1, this.data.damping)
+        }
+        const upper = new Ammo.btVector3(-1, -1, -1);
+        const lower = new Ammo.btVector3(1, 1, 1);
+        constraint.setLinearUpperLimit(upper);
+        constraint.setLinearLowerLimit(lower)
+        Ammo.destroy(upper);
+        Ammo.destroy(lower);
         break;
       }
       case CONSTRAINT.SLIDER: {
@@ -15972,7 +15989,8 @@ let AmmoBody = {
     disableCollision: { default: false },
     collisionFilterGroup: { default: 1 }, //32-bit mask,
     collisionFilterMask: { default: 1 }, //32-bit mask
-    scaleAutoUpdate: { default: true }
+    scaleAutoUpdate: { default: true },
+    restitution: {default: 0} // does not support updates
   },
 
   /**
@@ -16012,6 +16030,7 @@ let AmmoBody = {
     return function() {
       const el = this.el,
         data = this.data;
+      const clamp = (num, min, max) => Math.min(Math.max(num, min), max)
 
       this.localScaling = new Ammo.btVector3();
 
@@ -16041,6 +16060,7 @@ let AmmoBody = {
         this.compoundShape,
         this.localInertia
       );
+      this.rbInfo.m_restitution = clamp(this.data.restitution, 0, 1);
       this.body = new Ammo.btRigidBody(this.rbInfo);
       this.body.setActivationState(ACTIVATION_STATES.indexOf(data.activationState) + 1);
       this.body.setSleepingThresholds(data.linearSleepingThreshold, data.angularSleepingThreshold);
@@ -16236,6 +16256,10 @@ let AmmoBody = {
         Ammo.destroy(angularFactor);
       }
 
+      if (prevData.restitution != data.restitution ) {
+        console.warn("ammo-body restitution cannot be updated from its initial value.")
+      }
+
       //TODO: support dynamic update for other properties
     }
   },

diff --git a/dist/aframe-physics-system.min.js b/dist/aframe-physics-system.min.js
diff --git a/examples/README.md b/examples/README.md
@@ -3,45 +3,17 @@
 To help demonstrate the features and capabilities of `aframe-physics-system`
 the following collection of examples have been prepared.
 
-- [**Ammo sandbox**](ammo.html)  
-  Demonstration of many [Ammo driver](../AmmoDriver.md) features in a single
-  example.
+Examples marked "Broken" do not currently function as expected, due to open bugs.
+Examples marked "Limited" have limitations in terms of what function can be exercised (e.g. due to constraints on mouse interaction, or limitations with particular driver implementations)
+
+| Example                                                      | Cannon                                 | Cannon Worker                                          | Ammo                                     |
+| ------------------------------------------------------------ | -------------------------------------- | ------------------------------------------------------ | ---------------------------------------- |
+| Demonstration of many features in a single example.          | [**OK**](cannon/sandbox.html)     | [**Broken**](cannon-worker/sandbox.html)           | [**OK**](ammo/sandbox.html)         |
+| Construct a [compound shape](../README.md#shape) and simulate collision with a ground plane. | [**OK**](cannon/compound.html)    | [**Broken**](cannon-worker/compound.html)          | [**OK**](ammo/compound.html) |
+| Demonstration of many constraints including cone twist, hinge, lock, point to point, slider (Ammo only) and distance (Cannon only) constraints. | [**OK**](cannon/constraints.html) | [**Broken**](cannon-worker/constraints.html) | [**OK**](ammo/constraints.html) |
+| Bounce simulation with [restitution (bounciness)](../README.md#system-configuration) of 1. | [**OK**](cannon/materials.html)   | [**Limited**](cannon-worker/materials.html)   | [**OK**](ammo/materials.html) |
+| Four vertical [springs](../README.md#spring) each between two boxes with an assortment of damping and stiffness values | [**OK**](cannon/spring.html)     | [**OK**](cannon-worker/spring.html)              | [**Limited**](ammo/spring.html) |
+| Apply [strong impulse](../README.md#using-the-cannonjs-api) to a cube when the user clicks with a mouse. Cubes are arranged in four 4x3 walls. | [**OK**](cannon/stress.html)      | [**Limited**](cannon-worker/stress.html)      | [**OK**](ammo/stress.html) |
+| Animate a long wall moving along the z-axis along the initial view direction. | [**OK**](cannon/sweeper.html)     | [**Broken**](cannon-worker/sweeper.html)           | [**OK**](ammo/sweeper.html) |
+| Remove a [dynamic body](../README.md#dynamic-body-and-static-body) from the scene after 100 frames | [**OK**](cannon/ttl.html)         | [**Broken**](cannon-worker/ttl.html)               | [**OK**](ammo/ttl.html) |
 
-- [**Cannon.js sandbox**](cannon.html)  
-  Demonstration of many Cannon driver features in a single example.
-
-- [**Compound**](compound.html)  
-  Construct a [compound shape](../README.md#shape) and simulate collision with
-  a ground plane using the Cannon driver.
-
-- [**Constraints with Ammo**](constraints-ammo.html)  
-  Demonstration of many
-  [Ammo driver constraints](../AmmoDriver.md#ammo-constraint) including cone
-  twist, hinge, lock, point to point, and slider constraints.
-
-- [**Constraints with Cannon**](constraints.html)  
-  Demonstration of many
-  [Cannon driver constraints](../README.md#constraint) including cone twist,
-  hinge, lock, point to point, and distance constraints.
-
-- [**Materials**](materials.html)  
-  Bounce simulation with
-  [restitution (bounciness)](../README.md#system-configuration) of 1 using the
-  Cannon driver.
-
-- [**Spring**](spring.html)  
-  Four vertical [springs](../README.md#spring) each between two boxes with an
-  assortment of damping and stiffness values using the Cannon driver.
-
-- [**Stress**](stress.html)  
-  Apply [strong impulse](../README.md#using-the-cannonjs-api) to a cube when the
-  user clicks with a mouse using the Cannon driver. Cubes are arranged in four
-  4x3 walls.
-
-- [**Sweeper**](sweeper.html)  
-  Animate a long wall moving along the z-axis along the initial view direction
-  using the velocity component and the Cannon driver.
-
-- [**Time to live**](ttl.html)  
-  Remove a [dynamic body](../README.md#dynamic-body-and-static-body) from the
-  scene after 100 frames using the Cannon driver.
diff --git a/examples/ammo/compound.html b/examples/ammo/compound.html
@@ -0,0 +1,57 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
+    <title>Examples • Compound AMMO</title>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script>
+    <script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
+    <script src="../../dist/aframe-physics-system.js"></script>
+    <script src="../components/force-pushable.js"></script>
+    <script src="../components/grab.js"></script>
+    <link rel="stylesheet" href="../styles.css">
+  </head>
+  <body>
+    <div class="text-overlay">
+      <p>Compound shape, using the Ammo driver.</p>
+      <p>Click when the red reticle is over the sphere to apply a force to it.</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/ammo/compound.html">
+        view code
+    </a>
+    <a-scene environment physics="driver: ammo; debug: true;">
+      <!-- Player -->
+      <a-entity camera look-controls wasd-controls position="0 1.6 0">
+        <a-entity cursor
+                  raycaster="objects:[force-pushable]"
+                  position="0 0 -0.5"
+                  geometry="primitive: circle; radius: 0.01; segments: 4;"
+                  material="color: #FF4444; shader: flat"></a-entity>
+      </a-entity>
+      <a-entity id="left-hand" ammo-body="type: kinematic; emitCollisionEvents: true" ammo-shape="type: sphere; fit: manual; sphereRadius: 0.02;" 
+                hand-controls="hand: left" grab></a-entity>
+      <a-entity id="right-hand" ammo-body="type: kinematic; emitCollisionEvents: true" ammo-shape="type: sphere; fit: manual; sphereRadius: 0.02;"
+                hand-controls="hand: right" grab></a-entity>      
+
+      <!-- Terrain -->
+      <a-box width="75" height="0.1" depth="75" ammo-body="type: static" ammo-shape visible="false"></a-box>
+
+      <!-- Blocks -->
+      <a-sphere radius="0.25" position="0 4 -2" color="red"
+                ammo-body="type: dynamic; shape: none; mass: 5;"
+                ammo-shape__main="type: cylinder;
+                            fit: manual;
+                            halfExtents: 0.24 0.18 0.24;
+                            cylinderAxis: y"
+                ammo-shape__handle="type: box;
+                              fit: manual;
+                              halfExtents: 0.15 0.18 0.04;
+                              offset: 0.4 0 0;"
+                force-pushable
+      ></a-sphere>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/constraints-ammo.html → examples/ammo/constraints.html b/examples/constraints-ammo.html → examples/ammo/constraints.html
@@ -4,27 +4,36 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
-    <title>Examples • Constraints • AmmoDriver</title>
+    <title>Examples • Constraints • AMMO</title>
     <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
     <script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/fernandojsg/aframe-teleport-controls@master/dist/aframe-teleport-controls.min.js"></script>
-    <script src="../dist/aframe-physics-system.js"></script>
-    <link rel="stylesheet" href="styles.css">
+    <script src="../../dist/aframe-physics-system.js"></script>
+    <script src="../components/force-pushable.js"></script>
+    <link rel="stylesheet" href="../styles.css">
   </head>
   <body>
     <div class="text-overlay">
       <p>Demonstration of many Ammo driver constraints including cone
         twist, hinge, lock, point to point, and slider constraints.</p>
+      <p>Click when the red reticle is over a red object to apply a force to it.</p>
+      <p>There seem to be problems with the slider constraint - to be investigated.</p>
     </div>
         <a class="code-link"
         target="_blank"
-        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/consraints-ammo.html">
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/ammo/constraints.html">
         view code
     </a>
     <a-scene environment physics="driver: ammo; debug: true">
       <a-entity id="cameraRig">
-        <a-camera></a-camera>
+        <a-entity camera look-controls wasd-controls position="0 1.6 0">
+          <a-entity cursor
+            raycaster="objects:[force-pushable]"
+            position="0 0 -0.5"
+            geometry="primitive: circle; radius: 0.01; segments: 4;"
+            material="color: #FF4444; shader: flat"></a-entity>
+        </a-entity>
         <a-entity teleport-controls="cameraRig: #cameraRig; button: trigger; type: line"
           ammo-body="type: kinematic"
           ammo-shape="type: box; halfExtents: 0.05 0.1 0.1; fit: manual;"
@@ -45,6 +54,7 @@
         </a-sphere>
         <a-box width="0.25" height="0.25" depth="0.25" color="#F00"
                ammo-body ammo-shape
+               force-pushable
                ammo-constraint="type: coneTwist;
                                 target: #conetwist-target;
                                 pivot: 0.13 0 0.0;
@@ -62,6 +72,7 @@
                color="#F00"
                scale="0.25 0.25 0.25"
                ammo-body ammo-shape
+               force-pushable
                ammo-constraint="type: hinge;
                            target: #hinge-target;
                            axis: 0 1 0;
@@ -85,6 +96,7 @@
                position="0 1.25 0"
                scale="0.25 0.25 0.25"
                ammo-body ammo-shape
+               force-pushable
                ammo-constraint="type: lock; target: #lock-target">
         </a-box>
       </a-entity>
@@ -101,6 +113,7 @@
         <a-box color="#F00"
                scale="0.25 0.25 0.25"
                ammo-body ammo-shape
+               force-pushable
                ammo-constraint="type: pointToPoint;
                                 target: #pointtopoint-target;
                                 pivot: -0.125 -0.125 0.125;
@@ -121,6 +134,7 @@
                radius="0.125"
                position="0 1 0"
                ammo-body ammo-shape
+               force-pushable
                ammo-constraint="type: slider; target: #slider-target">
         </a-sphere>
         <a-cylinder radius="0.05" height="2" position="0 1 0" rotation="0 0 90"></a-cylinder>

diff --git a/examples/ammo/materials.html b/examples/ammo/materials.html
@@ -0,0 +1,47 @@
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
+    <title>Examples • Materials AMMO</title>
+    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script>
+    <script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
+    <script src="../../dist/aframe-physics-system.js"></script>
+    <script src="../components/force-pushable.js"></script>
+    <script src="../components/grab.js"></script>
+    <link rel="stylesheet" href="../styles.css">
+  </head>
+  <body>
+    <div class="text-overlay">
+      <p>Bounce simulation with restitution (bounciness) of 1 using the Ammo driver.</p>
+      <p>Ball seems to bounce off to the left after a couple of bounces.  Not understood why - inaccuracy in physics simulation, perhaps?</p>
+    </div>
+        <a class="code-link"
+        target="_blank"
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/ammo/materials.html">
+        view code
+    </a>
+    <a-scene stats="true"
+             environment
+             physics="driver: ammo; restitution: 1">
+      <a-entity camera look-controls wasd-controls position="0 1.6 0">
+        <a-entity cursor
+                  raycaster="objects:[force-pushable]"
+                  position="0 0 -0.5"
+                  geometry="primitive: circle; radius: 0.01; segments: 4;"
+                  material="color: #FF4444; shader: flat"></a-entity>
+      </a-entity>
+      <a-entity id="left-hand" ammo-body="type: kinematic; emitCollisionEvents: true" ammo-shape="type: sphere; fit: manual; sphereRadius: 0.02;" 
+                hand-controls="hand: left" grab></a-entity>
+      <a-entity id="right-hand" ammo-body="type: kinematic; emitCollisionEvents: true" ammo-shape="type: sphere; fit: manual; sphereRadius: 0.02;"
+                hand-controls="hand: right" grab></a-entity>    
+
+      <!-- Terrain -->
+      <a-box width="75" height="0.1" depth="75" ammo-body="type: static; restitution:1" ammo-shape visible="false"></a-box>
+
+      <!-- Blocks -->
+      <a-sphere radius="0.25" position="0 4 -2" color="red" ammo-body="restitution:1" ammo-shape force-pushable></a-sphere>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/ammo.html → examples/ammo/sandbox.html b/examples/ammo.html → examples/ammo/sandbox.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Examples • AmmoDriver</title>
+    <title>Examples • AMMO</title>
     <meta name="description" content="Hello, WebVR! - A-Frame" />
     <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
     <script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
-    <script src="../dist/aframe-physics-system.js"></script>
-    <link rel="stylesheet" href="styles.css">
+    <script src="../../dist/aframe-physics-system.js"></script>
+    <link rel="stylesheet" href="../styles.css">
     <script>
       AFRAME.registerComponent("bounce", {
         init: function() {
@@ -61,7 +61,7 @@
     </div>
         <a class="code-link"
         target="_blank"
-        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/ammo.html">
+        href="https://github.com/c-frame/aframe-physics-system/blob/master/examples/ammo/sandbox.html">
         view code
     </a>
     <a-scene physics="driver: ammo; debug: true; gravity: -9.8; debugDrawMode: 1">
@@ -92,7 +92,7 @@
         ammo-shape="type: sphere;"
       ></a-sphere>
       <a-cone
-        position="0 3.75 -4"
+        position="-1 3.75 -4"
         radius-bottom="1.25"
         color="green"
         shadow