Implement proper scene cloning

.vscode/launch.json

@@ -5,48 +5,23 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "(Chrome):Launch main demo",
+      "name": "(Chrome): Launch examples",
       "type": "chrome",
       "request": "launch",
-      "url": "http://127.0.0.1:8082/demos/index.html",
+      "url": "http://127.0.0.1:8082/examples/index.html",
       "webRoot": "${workspaceFolder}"
     },
-    {
-      "name": "(Chrome):Launch WebGL demo",
-      "request": "launch",
-      "type": "chrome",
-      "url": "http://127.0.0.1:8082/demos/webgl.html",
-      "webRoot": "${workspaceFolder}"
-    },
-    {
-      "type": "firefox",
-      "request": "launch",
-      "reAttach": true,
-      "name": "(FireFox):Launch main demo",
-      "url": "http://127.0.0.1:8082/demos/index.html",
-      "webRoot": "${workspaceFolder}",
-      "pathMappings": [
-        {
-          "url": "http://127.0.0.1:8082/demos",
-          "path": "${workspaceFolder}/demos"
-        },
-        {
-          "url": "http://127.0.0.1:8082/src",
-          "path": "${workspaceFolder}/src"
-        }
-      ]
-    },
     {
       "type": "firefox",
       "request": "launch",
       "reAttach": true,
-      "name": "(FireFox):Launch WebGL demo",
-      "url": "http://127.0.0.1:8082/demos/webgl.html",
+      "name": "(FireFox): Launch examples",
+      "url": "http://127.0.0.1:8082/examples/index.html",
       "webRoot": "${workspaceFolder}",
       "pathMappings": [
         {
-          "url": "http://127.0.0.1:8082/demos",
-          "path": "${workspaceFolder}/demos"
+          "url": "http://127.0.0.1:8082/examples",
+          "path": "${workspaceFolder}/examples"
         },
         {
           "url": "http://127.0.0.1:8082/src",
@@ -59,6 +34,6 @@
       "name": "Run tests",
       "command": "npm run test",
       "request": "launch"
-    },
+    }
   ]
 }

examples/samples/scene/basic2d.js → examples/samples/scene/2d/basic.js

@@ -22,7 +22,7 @@ import {
   FPSDebugger,
   App
 } from 'wima'
-import { HackPlugin, setupViewport } from '../utils.js'
+import { HackPlugin, setupViewport } from '../../utils.js'
 
 const itemWidth = 50
 const itemHeight = 50

examples/samples/scene/2d/index.js

@@ -0,0 +1,7 @@
+const basic = new URL('./basic.js', import.meta.url)
+const multipleInstances = new URL('./multiple_instances.js', import.meta.url)
+
+export default {
+  'basic': basic,
+  'multiple_instances': multipleInstances
+}

examples/samples/scene/2d/multiple_instances.js

@@ -0,0 +1,123 @@
+import {
+  Mesh,
+  createMovable2D,
+  World,
+  EntityCommands,
+  BasicMaterial,
+  Meshed,
+  Scene,
+  SceneInstance,
+  SceneAssets,
+  Assets,
+  Entity,
+  Query,
+  MeshAssets,
+  BasicMaterialAssets,
+  Color,
+  BasicMaterial2D,
+  AppSchedule,
+  Rotation2D,
+  rand,
+  RelationshipQuery,
+  Children,
+  Parent,
+  Canvas2DRendererPlugin,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  App,
+  Angular2DDamping,
+  Torque2D,
+  createTransform2D
+} from 'wima'
+import { addDefaultCamera2D, HackPlugin, setupViewport } from '../../utils.js'
+
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerPlugin(new Canvas2DRendererPlugin())
+  .registerSystem(AppSchedule.Update, applyRandomDescendantTorque)
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera2D)
+  .registerSystem(AppSchedule.Update, setupViewport)
+  .registerDebugger(new FPSDebugger())
+  .run()
+
+/**
+ * @param {World} world
+ */
+function init(world) {
+  const commands = new EntityCommands(world)
+  const angularDamping = world.getResource(Angular2DDamping)
+  const scenes = world.getResource(SceneAssets)
+  const meshes = world.getResource(MeshAssets)
+  const materials = world.getResource(BasicMaterialAssets)
+
+  const scene = scenes.add(createScene(meshes, materials))
+  const instances = [
+    { x: -0.5, y: -0.5 },
+    { x: 0.5, y: -0.5 },
+    { x: 0, y: 0.5 }
+  ]
+
+  for (let i = 0; i < instances.length; i++) {
+    const { x, y } = instances[i]
+
+    commands
+      .spawn()
+      .insertPrefab([...createMovable2D(x, y), new SceneInstance(scene)])
+      .build()
+  }
+
+  angularDamping.value = 0
+}
+
+/**
+ * @param {World} world
+ */
+function applyRandomDescendantTorque(world) {
+  const roots = new Query(world, [Entity, SceneInstance])
+  const descendants = new RelationshipQuery(world, Children, Parent, [Torque2D])
+
+  roots.each(([entity]) => {
+    descendants.treebfs(entity, ([torque]) => {
+      torque.value = rand(-1.2, 1.2)
+    })
+  })
+}
+
+/**
+ * @param {Assets<Mesh>} meshes
+ * @param {Assets<BasicMaterial>} materials
+ */
+function createScene(meshes, materials) {
+  const scene = new Scene()
+  const mesh = meshes.add(Mesh.quad2D(0.05, 0.05))
+  const material = materials.add(new BasicMaterial({
+    color: new Color(1, 1, 1)
+  }))
+
+  const offsets = [
+    { x: -0.05, y: -0.05 },
+    { x: 0.05, y: -0.05 },
+    { x: 0, y: 0.05 }
+  ]
+
+  for (let i = 0; i < offsets.length; i++) {
+    scene.set(new Entity(i, 1), [
+      ...createTransform2D(offsets[i].x, offsets[i].y),
+      new Meshed(mesh.clone()),
+      new BasicMaterial2D(material.clone()),
+      new Rotation2D(),
+      new Torque2D()
+    ])
+  }
+
+  mesh.drop()
+  material.drop()
+
+  return scene
+}

examples/samples/scene/basic3d.js → examples/samples/scene/3d/basic.js

@@ -22,7 +22,7 @@ import {
   FPSDebugger,
   WebglRendererPlugin
 } from 'wima'
-import { HackPlugin, setupViewportWebgl } from '../utils.js'
+import { HackPlugin, setupViewportWebgl } from '../../utils.js'
 
 const itemWidth = 0.5
 const itemHeight = 0.5

examples/samples/scene/3d/index.js

@@ -0,0 +1,7 @@
+const basic = new URL('./basic.js', import.meta.url)
+const multipleInstances = new URL('./multiple_instances.js', import.meta.url)
+
+export default {
+  'basic': basic,
+  'multiple_instances': multipleInstances
+}

examples/samples/scene/3d/multiple_instances.js

@@ -0,0 +1,130 @@
+import {
+  Mesh,
+  createRawMovable3D,
+  createTransform3D,
+  World,
+  EntityCommands,
+  BasicMaterial,
+  Meshed,
+  Scene,
+  SceneInstance,
+  SceneAssets,
+  Assets,
+  BasicMaterial3D,
+  Entity,
+  Query,
+  MeshAssets,
+  BasicMaterialAssets,
+  Color,
+  App,
+  AppSchedule,
+  Angular3DDamping,
+  Rotation3D,
+  rand,
+  Torque3D,
+  RelationshipQuery,
+  Children,
+  Parent,
+  DefaultPlugin,
+  DOMWindowPlugin,
+  FPSDebugger,
+  WebglRendererPlugin
+} from 'wima'
+import { addDefaultCamera3D, HackPlugin, setupViewportWebgl } from '../../utils.js'
+
+const instanceConfigs = [
+  { offsetX: -1.7, offsetY: -0.35, offsetZ: -2 },
+  { offsetX: 1.7, offsetY: 0.15, offsetZ: -1.35 },
+  { offsetX: 0, offsetY: 0.5, offsetZ: -2.85 }
+]
+
+const app = new App()
+
+app
+  .registerPlugin(new HackPlugin())
+  .registerPlugin(new WebglRendererPlugin())
+  .registerPlugin(new DefaultPlugin())
+  .registerPlugin(new DOMWindowPlugin())
+  .registerSystem(AppSchedule.Update, applyRandomDescendantTorque)
+  .registerDebugger(new FPSDebugger())
+  .registerSystem(AppSchedule.Startup, init)
+  .registerSystem(AppSchedule.Startup, addDefaultCamera3D)
+  .registerSystem(AppSchedule.Update, setupViewportWebgl)
+  .run()
+
+/**
+ * @param {World} world
+ */
+function init(world) {
+  const commands = new EntityCommands(world)
+  const angularDamping = world.getResource(Angular3DDamping)
+  const scenes = world.getResource(SceneAssets)
+  const meshes = world.getResource(MeshAssets)
+  const materials = world.getResource(BasicMaterialAssets)
+
+  const scene = scenes.add(createScene(meshes, materials))
+
+  for (let i = 0; i < instanceConfigs.length; i++) {
+    const { offsetX, offsetY, offsetZ } = instanceConfigs[i]
+
+    commands
+      .spawn()
+      .insertPrefab([
+        ...createTransform3D(offsetX, offsetY, offsetZ),
+        ...createRawMovable3D(),
+        new SceneInstance(scene)
+      ])
+      .build()
+  }
+
+  angularDamping.value = 0
+}
+
+/**
+ * @param {World} world
+ */
+function applyRandomDescendantTorque(world) {
+  const roots = new Query(world, [Entity, SceneInstance])
+  const descendants = new RelationshipQuery(world, Children, Parent, [Torque3D])
+
+  roots.each(([entity]) => {
+    descendants.treebfs(entity, ([torque]) => {
+      torque.x = rand(-1.2, 1.2)
+      torque.y = rand(-1.2, 1.2)
+      torque.z = rand(-1.2, 1.2)
+    })
+  })
+}
+
+/**
+ * @param {Assets<Mesh>} meshes
+ * @param {Assets<BasicMaterial>} materials
+ */
+function createScene(meshes, materials) {
+  const scene = new Scene()
+  const mesh = meshes.add(Mesh.cube(0.8, 0.8, 0.8))
+  const material = materials.add(new BasicMaterial({
+    color: new Color(1, 1, 1)
+  }))
+
+  const offsets = [
+    { x: -0.6, y: -0.6, z: -0.6 },
+    { x: 0.6, y: -0.6, z: -0.6 },
+    { x: 0, y: 0.6, z: 0.6 }
+  ]
+
+  for (let i = 0; i < offsets.length; i++) {
+    scene.set(new Entity(i, 1), [
+      ...createTransform3D(offsets[i].x, offsets[i].y, offsets[i].z),
+      new Meshed(mesh.clone()),
+      new BasicMaterial3D(material.clone()),
+      new Rotation3D(),
+      new Torque3D()
+    ])
+  }
+
+  mesh.drop()
+  material.drop()
+
+  return scene
+}

examples/samples/scene/index.js

@@ -1,7 +1,7 @@
-const basic2d = new URL('./basic2d.js', import.meta.url)
-const basic3d = new URL('./basic3d.js', import.meta.url)
+import { default as d2 } from './2d/index.js'
+import { default as d3 } from './3d/index.js'
 
 export default {
-  'basic 2d': basic2d,
-  'basic3d': basic3d
+  '2d': d2,
+  '3d': d3
 }

src/animation/components/player.js

@@ -37,7 +37,7 @@ export class AnimationPlayer {
    * @param {AnimationPlayer} target
    */
   static clone(target) {
-    return this.copy(target)
+    return AnimationPlayer.copy(target)
   }
 
   /**

src/animation/components/target.js

@@ -36,6 +36,6 @@ export class AnimationTarget {
    * @param {AnimationTarget} target
    */
   static clone(target) {
-    return this.copy(target)
+    return AnimationTarget.copy(target)
   }
 }

src/animation/core/playback.js

@@ -58,7 +58,7 @@ export class Playback {
    * @param {Playback} target
    */
   static clone(target) {
-    return this.copy(target)
+    return Playback.copy(target)
   }
 
   start() {

src/audio/components/audiooscillator.js

@@ -62,7 +62,7 @@ export class AudioOscillator {
    * @param {AudioOscillator} target
    */
   static clone(target) {
-    return this.copy(target)
+    return AudioOscillator.copy(target)
   }
 }