Merge pull request #37 from wle-cd/morphtargets

morphtargets: Add example

morphtargets/js/animate-weights.js

@@ -0,0 +1,31 @@
+import {Component, MeshComponent, Property} from '@wonderlandengine/api';
+
+export class AnimateWeights extends Component {
+    static TypeName = 'animate-weights';
+    static Properties = {
+        strength: Property.float(1.0),
+        speed: Property.float(1.0),
+    };
+
+    start() {
+        this.meshComponent = this.object.getComponents(MeshComponent).find((c) => c.morphTargets !== null);
+        const targetCount = this.meshComponent.morphTargets.count;
+        this.weights = (new Array(targetCount)).fill(0.0).map((_, i) => 1.0/targetCount*i);
+        this.directions = (new Array(targetCount)).fill(true);
+    }
+
+    update(dt) {
+        for(let i = 0; i < this.weights.length; ++i) {
+            const direction = this.directions[i] ? 1.0 : -1.0;
+            this.weights[i] = (this.weights[i] + this.speed*direction*dt);
+            if (this.weights[i] > this.strength) {
+                this.directions[i] = !this.directions[i];
+                this.weights[i] -= 2.0*(this.weights[i] % this.strength);
+            } else if (this.weights[i] < 0.0) {
+                this.directions[i] = !this.directions[i];
+                this.weights[i] *= -1.0;
+            }
+        }
+        this.meshComponent.setMorphTargetWeights(this.weights);
+    }
+}

morphtargets/js/index.js

@@ -0,0 +1,94 @@
+/**
+ * /!\ This file is auto-generated.
+ *
+ * This is the entry point of your standalone application.
+ *
+ * There are multiple tags used by the editor to inject code automatically:
+ *     - `wle:auto-imports:start` and `wle:auto-imports:end`: The list of import statements
+ *     - `wle:auto-register:start` and `wle:auto-register:end`: The list of component to register
+ *     - `wle:auto-constants:start` and `wle:auto-constants:end`: The project's constants,
+ *        such as the project's name, whether it should use the physx runtime, etc...
+ *     - `wle:auto-benchmark:start` and `wle:auto-benchmark:end`: Append the benchmarking code
+ */
+
+/* wle:auto-imports:start */
+import {MouseLookComponent} from '@wonderlandengine/components';
+import {WasdControlsComponent} from '@wonderlandengine/components';
+import {AnimateWeights} from './animate-weights.js';
+/* wle:auto-imports:end */
+
+import {loadRuntime} from '@wonderlandengine/api';
+import * as API from '@wonderlandengine/api'; // Deprecated: Backward compatibility.
+
+/* wle:auto-constants:start */
+const Constants = {
+    ProjectName: 'Morphtargets',
+    RuntimeBaseName: 'WonderlandRuntime',
+    WebXRRequiredFeatures: ['local',],
+    WebXROptionalFeatures: ['local','hand-tracking','hit-test',],
+};
+const RuntimeOptions = {
+    physx: false,
+    loader: false,
+    xrFramebufferScaleFactor: 1,
+    xrOfferSession: {
+        mode: 'auto',
+        features: Constants.WebXRRequiredFeatures,
+        optionalFeatures: Constants.WebXROptionalFeatures,
+    },
+    canvas: 'canvas',
+};
+/* wle:auto-constants:end */
+
+const engine = await loadRuntime(Constants.RuntimeBaseName, RuntimeOptions);
+Object.assign(engine, API); // Deprecated: Backward compatibility.
+window.WL = engine; // Deprecated: Backward compatibility.
+
+engine.onSceneLoaded.once(() => {
+    const el = document.getElementById('version');
+    if (el) setTimeout(() => el.remove(), 2000);
+});
+
+/* WebXR setup. */
+
+function requestSession(mode) {
+    engine
+        .requestXRSession(mode, Constants.WebXRRequiredFeatures, Constants.WebXROptionalFeatures)
+        .catch((e) => console.error(e));
+}
+
+function setupButtonsXR() {
+    /* Setup AR / VR buttons */
+    const arButton = document.getElementById('ar-button');
+    if (arButton) {
+        arButton.dataset.supported = engine.arSupported;
+        arButton.addEventListener('click', () => requestSession('immersive-ar'));
+    }
+    const vrButton = document.getElementById('vr-button');
+    if (vrButton) {
+        vrButton.dataset.supported = engine.vrSupported;
+        vrButton.addEventListener('click', () => requestSession('immersive-vr'));
+    }
+}
+
+if (document.readyState === 'loading') {
+    window.addEventListener('load', setupButtonsXR);
+} else {
+    setupButtonsXR();
+}
+
+/* wle:auto-register:start */
+engine.registerComponent(MouseLookComponent);
+engine.registerComponent(WasdControlsComponent);
+engine.registerComponent(AnimateWeights);
+/* wle:auto-register:end */
+
+try {
+    await engine.loadMainScene(`${Constants.ProjectName}.bin`);
+} catch (e) {
+    console.error(e);
+    window.alert(`Failed to load ${Constants.ProjectName}.bin:`, e);
+}
+
+/* wle:auto-benchmark:start */
+/* wle:auto-benchmark:end */

morphtargets/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "Morphtargets",
+  "version": "1.0.0",
+  "description": "My Wonderland project",
+  "main": "js/index.js",
+  "type": "module",
+  "module": "js/index.js",
+  "scripts": {
+    "build": "echo \"The 'build' script is run by the editor and should produce your application bundle\""
+  },
+  "keywords": [
+    "wonderland-engine"
+  ],
+  "overrides": {
+    "@wonderlandengine/api": "$@wonderlandengine/api"
+  },
+  "dependencies": {
+    "@wonderlandengine/api": "^1.2.0",
+    "@wonderlandengine/components": "^1.1.3",
+    "gl-matrix": "^3.4.3"
+  }
+}