@needle-tools/engine 2.32.0-pre → 2.34.0-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.32.0-pre",
+    "version": "2.34.0-pre",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.",
     "main": "dist/needle-engine.js",
     "module": "lib/needle-engine.js",
@@ -48,7 +48,7 @@
         "md5": "^2.3.0",
         "peerjs": "1.3.2",
         "stats.js": "^0.17.0",
-        "three": "github:needle-tools/three.js#needle-dev-6",
+        "three": "npm:@needle-tools/three@^0.145.0",
         "three-mesh-ui": "^6.4.5",
         "three.meshline": "^1.4.0",
         "uuid": "^9.0.0",

package/src/engine/codegen/register_types.js

@@ -18,7 +18,6 @@ import { Collider } from "../../engine-components/Collider.ts";
 import { SphereCollider } from "../../engine-components/Collider.ts";
 import { BoxCollider } from "../../engine-components/Collider.ts";
 import { InstantiateOptions } from "../../engine-components/Component.ts";
-import { UnityObject } from "../../engine-components/ComponentExtensions.ts";
 import { DeleteBox } from "../../engine-components/DeleteBox.ts";
 import { Deletable } from "../../engine-components/DeleteBox.ts";
 import { DeviceFlag } from "../../engine-components/DeviceFlag.ts";
@@ -57,7 +56,6 @@ import { FieldWithDefault } from "../../engine-components/Renderer.ts";
 import { Renderer } from "../../engine-components/Renderer.ts";
 import { MeshRenderer } from "../../engine-components/Renderer.ts";
 import { SkinnedMeshRenderer } from "../../engine-components/Renderer.ts";
-import { InstancingUtil } from "../../engine-components/Renderer.ts";
 import { RendererLightmap } from "../../engine-components/RendererLightmap.ts";
 import { Rigidbody } from "../../engine-components/RigidBody.ts";
 import { ScreenCapture } from "../../engine-components/ScreenCapture.ts";
@@ -105,6 +103,7 @@ import { Avatar_POI } from "../../engine-components/avatar/Avatar_Brain_LookAt.t
 import { Avatar_Brain_LookAt } from "../../engine-components/avatar/Avatar_Brain_LookAt.ts";
 import { Avatar_MouthShapes } from "../../engine-components/avatar/Avatar_MouthShapes.ts";
 import { Avatar_MustacheShake } from "../../engine-components/avatar/Avatar_MustacheShake.ts";
+import { __Ignore } from "../../engine-components/codegen/components.ts";
 import { LogStats } from "../../engine-components/debug/LogStats.ts";
 import { RGBAColor } from "../../engine-components/js-extensions/RGBAColor.ts";
 import { PlayableDirector } from "../../engine-components/timeline/PlayableDirector.ts";
@@ -165,7 +164,6 @@ TypeStore.add("Collider", Collider);
 TypeStore.add("SphereCollider", SphereCollider);
 TypeStore.add("BoxCollider", BoxCollider);
 TypeStore.add("InstantiateOptions", InstantiateOptions);
-TypeStore.add("UnityObject", UnityObject);
 TypeStore.add("DeleteBox", DeleteBox);
 TypeStore.add("Deletable", Deletable);
 TypeStore.add("DeviceFlag", DeviceFlag);
@@ -204,7 +202,6 @@ TypeStore.add("FieldWithDefault", FieldWithDefault);
 TypeStore.add("Renderer", Renderer);
 TypeStore.add("MeshRenderer", MeshRenderer);
 TypeStore.add("SkinnedMeshRenderer", SkinnedMeshRenderer);
-TypeStore.add("InstancingUtil", InstancingUtil);
 TypeStore.add("RendererLightmap", RendererLightmap);
 TypeStore.add("Rigidbody", Rigidbody);
 TypeStore.add("ScreenCapture", ScreenCapture);
@@ -252,6 +249,7 @@ TypeStore.add("Avatar_POI", Avatar_POI);
 TypeStore.add("Avatar_Brain_LookAt", Avatar_Brain_LookAt);
 TypeStore.add("Avatar_MouthShapes", Avatar_MouthShapes);
 TypeStore.add("Avatar_MustacheShake", Avatar_MustacheShake);
+TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("LogStats", LogStats);
 TypeStore.add("RGBAColor", RGBAColor);
 TypeStore.add("PlayableDirector", PlayableDirector);

package/src/engine/engine_create_objects.ts

@@ -0,0 +1,27 @@
+import { PlaneGeometry, MeshBasicMaterial, DoubleSide, Mesh, Material } from "three"
+
+
+export enum PrimitiveType {
+    Quad = 0
+}
+
+export type ObjectOptions = {
+    name?: string,
+    material?: Material,
+}
+
+export class ObjectUtils {
+
+    static createPrimitive(type: PrimitiveType, opts?: ObjectOptions): Mesh {
+        let obj: Mesh;
+        switch (type) {
+            case PrimitiveType.Quad:
+                const geometry = new PlaneGeometry(1, 1, 1, 1);
+                const material = opts?.material ?? new MeshBasicMaterial({ color: 0xffffff });
+                obj = new Mesh(geometry, material);
+        }
+        if (opts?.name)
+            obj.name = opts.name;
+        return obj;
+    }
+} 

package/src/engine/engine_instancing.ts

@@ -0,0 +1,25 @@
+export const NEED_UPDATE_INSTANCE_KEY = Symbol("NEEDLE_NEED_UPDATE_INSTANCE");
+
+
+
+export class InstancingUtil {
+    
+    static isUsingInstancing(instance: THREE.Object3D): boolean { return instance["__isUsingInstancing"] === true; }
+
+    // TODO: change this so it does not set matrix world directly but some flag that is only used by instancing
+    static markDirty(go: THREE.Object3D | null, recursive: boolean = true) {
+        if (!go) return;
+        // potential optimization:
+        // if(go.matrixWorldNeedsUpdate) return;
+        // console.trace(go, GameObject.isUsingInstancing(go));
+        if (this.isUsingInstancing(go)) {
+            go[NEED_UPDATE_INSTANCE_KEY] = true;
+            go.matrixWorldNeedsUpdate = true;
+        }
+        if (recursive) {
+            for (const child of go.children) {
+                InstancingUtil.markDirty(child, true);
+            }
+        }
+    }
+}

package/src/engine/engine_physics.ts

@@ -5,11 +5,11 @@ import cannonDebugger from 'cannon-es-debugger'
 import { Rigidbody } from '../engine-components/Rigidbody';
 import * as utils from "./engine_utils"
 import * as threeutils from "./engine_three_utils"
-import { InstancingUtil } from '../engine-components/Renderer';
 import { Behaviour, Component, GameObject } from '../engine-components/Component';
 import { Body, RigidVehicle, Shape, Vec3 } from 'cannon-es';
 import { Matrix4, Object3D, RGBA_BPTC_Format, Vector3, Wrapping } from 'three';
 import { Collider } from '../engine-components/Collider';
+import { InstancingUtil } from './engine_instancing';
 
 const debugPhysics = utils.getParam("debugphysics");
 const debugCollisions = utils.getParam("debugcollisions");
@@ -686,6 +686,14 @@ export class Physics {
 
 export class Collision {
 
+    get __internalCollision(): CannonCollision {
+        return this.collision;
+    }
+
+    get __internalInvertedSourceReceiver(): boolean {
+        return this.invert;
+    }
+
     private readonly invert: boolean;
     private readonly collision: CannonCollision;
     private readonly targetBody: CANNON.Body;

package/src/engine/extensions/NEEDLE_components.ts

@@ -5,6 +5,7 @@ import { writeBuiltinComponentData } from "../engine_gltf_builtin_components";
 import { debugExtension } from "../engine_default_parameters";
 import { builtinComponentKeyName } from "../engine_constants";
 import { resolveReferences } from "./extension_utils";
+import { apply } from "../../engine-components/js-extensions/Object3D";
 
 export const debug = debugExtension
 const componentsArrayExportKey = "$___Export_Components";
@@ -185,6 +186,8 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
                     continue;
                 }
 
+                apply(obj);
+
                 loadComponents.push(this.createComponents(obj, data));
             }
         }

package/src/engine/extensions/NEEDLE_techniques_webgl.ts

@@ -62,6 +62,12 @@ export class CustomShader extends RawShaderMaterial {
     private identifier: SourceIdentifier;
     private onBeforeRenderSceneCallback = this.onBeforeRenderScene.bind(this);
 
+    clone() {
+        const clone = super.clone();
+        createUniformProperties(clone);
+        return clone;
+    }
+
     constructor(identifier: SourceIdentifier, ...args) {
         super(...args);
 
@@ -179,12 +185,12 @@ export class CustomShader extends RawShaderMaterial {
                     CustomShader.viewProjection.copy(camera.projectionMatrix).multiply(camera.matrixWorldInverse);
                     ToUnityMatrixArray(CustomShader.viewProjection, CustomShader._viewProjectionValues)
                 }
-    
+
                 if (CustomShader.viewMatrix && this.uniforms[this._viewMatrixName]) {
                     CustomShader.viewMatrix.copy(camera.matrixWorldInverse);
                     ToUnityMatrixArray(CustomShader.viewMatrix, CustomShader._viewMatrixValues)
                 }
-    
+
                 if (this.uniforms[CustomShader._worldSpaceCameraPosName]) {
                     CustomShader._worldSpaceCameraPos.setFromMatrixPosition(camera.matrixWorld);
                 }
@@ -475,8 +481,34 @@ export class NEEDLE_techniques_webgl implements GLTFLoaderPlugin {
             }
             if (debug)
                 console.log(material.uuid, uniforms);
+
+
+            createUniformProperties(material);
+
             resolve(material);
         });
     }
 
 }
+
+
+// when animating custom material properties (uniforms) the path resolver tries to access them via material._MyProperty. 
+// That doesnt exist by default for custom properties
+// We could re-write the path in the khr path resolver but that would require it to know beforehand
+// if the material uses as custom shader or not
+// this way all properties of custom shaders are also accessible via material._MyProperty
+function createUniformProperties(material: CustomShader) {
+    if (material.uniforms) {
+        for (const key in material.uniforms) {
+            if (!Object.getOwnPropertyDescriptor(material, key)) {
+                Object.defineProperty(material, key, {
+                    get: () => material.uniforms[key].value,
+                    set: (value) => {
+                        material.uniforms[key].value = value
+                        material.needsUpdate = true;
+                    }
+                });
+            }
+        }
+    }
+}

package/src/engine-components/Animation.ts

@@ -2,8 +2,8 @@ import { Behaviour } from "./Component";
 import * as THREE from 'three'
 import { AnimationAction, AnimationClip } from "three";
 import { MixerEvent } from "./Animator";
-import { InstancingUtil } from "./Renderer";
 import { serializeable } from "../engine/engine_serialization_decorator";
+import { InstancingUtil } from "../engine/engine_instancing";
 
 export declare class PlayOptions {
     fadeDuration?: number;

package/src/engine-components/Collider.ts

@@ -17,6 +17,11 @@ export class Collider extends Behaviour {
         this._shape = null;
     }
 
+    start(){
+        if (!this.attachedRigidbody)
+            this.attachedRigidbody = this.gameObject.getComponentInParent(Rigidbody);
+    }
+
     onEnable() {
         // a rigidbody is not assigned if we export an asset
         if (!this.attachedRigidbody)
@@ -54,9 +59,9 @@ export class SphereCollider extends Collider {
 export class BoxCollider extends Collider {
 
     @serializeable(Vector3)
-    size!: THREE.Vector3;
+    size: THREE.Vector3 = new Vector3(1, 1, 1);
     @serializeable(Vector3)
-    center!: THREE.Vector3;
+    center: THREE.Vector3 = new Vector3(0, 0, 0);
 
     onEnable() {
         super.onEnable();

package/src/engine-components/Component.ts

@@ -10,6 +10,8 @@ import { Object3D } from "three";
 import { InstantiateIdProvider, syncDestroy, syncInstantiate } from "../engine/engine_networking_instantiate";
 import { SourceIdentifier } from "../engine/engine_gltf";
 import { Collision } from "../engine/engine_physics";
+import * as Object3DExtensions from "./js-extensions/Object3D";
+import { InstancingUtil } from "../engine/engine_instancing";
 
 export interface UIDProvider {
     seed: number;
@@ -70,10 +72,6 @@ declare class NewGameObjectReferenceInfo {
     clone: THREE.Object3D;
 }
 
-THREE.Object3D.prototype["SetActive"] = function (active: boolean) {
-    this.visible = active;
-}
-
 
 abstract class GameObject extends THREE.Object3D implements THREE.Object3D {
 
@@ -99,7 +97,7 @@ abstract class GameObject extends THREE.Object3D implements THREE.Object3D {
         go["__isUsingInstancing"] = instanced;
     }
 
-    public static isUsingInstancing(instance: THREE.Object3D): boolean { return instance["__isUsingInstancing"] === true; }
+    public static isUsingInstancing(instance: THREE.Object3D): boolean { return InstancingUtil.isUsingInstancing(instance); }
 
     public static foreachComponent(instance: THREE.Object3D, cb: (comp: Component) => any, recursive: boolean = true): any {
         if (!instance) return;
@@ -217,6 +215,7 @@ abstract class GameObject extends THREE.Object3D implements THREE.Object3D {
         instance.children = [];
         let clone: THREE.Object3D | GameObject;
         clone = instance.clone(false);
+        Object3DExtensions.apply(clone);
         instance.userData = userData;
         instance.children = children;
 
@@ -684,65 +683,6 @@ abstract class GameObject extends THREE.Object3D implements THREE.Object3D {
 }
 
 
-// this is a fix to allow gameObject active animation be applied to a three object
-Object.defineProperty(THREE.Object3D.prototype, "activeSelf", {
-    get: function () {
-        return this.visible;
-    },
-    set: function (val: boolean | number) {
-        const state = typeof val === "number" ? val > 0.5 : val;
-        this.visible = state;
-    }
-});
-
-
-THREE.Object3D.prototype["addNewComponent"] = function <T extends Behaviour>(type: ConstructorConcrete<T>) {
-    return GameObject.addNewComponent(this, type);
-}
-
-THREE.Object3D.prototype["removeComponent"] = function (inst: Component) {
-    return GameObject.removeComponent(inst);
-}
-
-THREE.Object3D.prototype["getOrAddComponent"] = function <T>(typeName: Constructor<T> | null): T {
-    return GameObject.getOrAddComponent(this, typeName);
-}
-
-THREE.Object3D.prototype["getComponent"] = function <T>(type: Constructor<T>) {
-    return GameObject.getComponent(this, type);
-}
-
-THREE.Object3D.prototype["getComponents"] = function <T>(type: Constructor<T>, arr?: []) {
-    return GameObject.getComponents(this, type, arr);
-}
-
-THREE.Object3D.prototype["getComponentInChildren"] = function <T>(type: Constructor<T>) {
-    return GameObject.getComponentInChildren(this, type);
-}
-
-THREE.Object3D.prototype["getComponentsInChildren"] = function <T>(type: Constructor<T>, arr?: []) {
-    return GameObject.getComponentsInChildren(this, type, arr);
-}
-
-THREE.Object3D.prototype["getComponentInParent"] = function <T>(type: Constructor<T>) {
-    return GameObject.getComponentInParent(this, type);
-}
-
-THREE.Object3D.prototype["getComponentsInParent"] = function <T>(type: Constructor<T>, arr?: []) {
-    return GameObject.getComponentsInParent(this, type, arr);
-}
-
-// function patch_THREEObject3D() {
-//     const props = Object.getOwnPropertyNames(GameObject.prototype);
-//     for (const propName in props) {
-//         const prop = props[propName];
-//         if (prop === "constructor") continue;
-//         const fn = GameObject.prototype[prop];
-//         THREE.Object3D.prototype[prop] = fn;
-//     }
-// }
-// patch_THREEObject3D();
-
 
 class Component implements EventTarget {
 

package/src/engine-components/DragControls.ts

@@ -7,12 +7,12 @@ import { Context } from "../engine/engine_setup";
 import { Interactable, UsageMarker } from "./Interactable";
 import { Rigidbody } from "./RigidBody";
 import { WebXR } from "./WebXR";
-import { InstancingUtil } from "./Renderer";
 import { Avatar_POI } from "./avatar/Avatar_Brain_LookAt";
 import { RaycastOptions } from "../engine/engine_physics";
 import { getWorldPosition, getWorldQuaternion, setWorldPosition } from "../engine/engine_three_utils";
 import { KeyCode } from "../engine/engine_input";
 import { nameofFactory } from "../engine/engine_utils";
+import { InstancingUtil } from "../engine/engine_instancing";
 
 const debug = false;
 

package/src/engine-components/Renderer.ts

@@ -8,6 +8,7 @@ import { serializeable } from "../engine/engine_serialization_decorator";
 import { Material, Texture, Vector4 } from "three";
 import { NEEDLE_render_objects } from "../engine/extensions/NEEDLE_render_objects";
 import { NEEDLE_deferred_texture } from "../engine/extensions/NEEDLE_deferred_texture";
+import { NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing";
 
 const suppressInstancing = getParam("noInstancing");
 const debugLightmap = getParam("debuglightmaps") ? true : false;
@@ -491,26 +492,7 @@ export enum ShadowCastingMode {
     ShadowsOnly,
 }
 
-const NEED_UPDATE_INSTANCE_KEY = "NEEDLE_NEED_UPDATE_INSTANCE";
-
-export class InstancingUtil {
-    // TODO: change this so it does not set matrix world directly but some flag that is only used by instancing
-    static markDirty(go: THREE.Object3D | null, recursive: boolean = true) {
-        if (!go) return;
-        // potential optimization:
-        // if(go.matrixWorldNeedsUpdate) return;
-        // console.trace(go, GameObject.isUsingInstancing(go));
-        if (GameObject.isUsingInstancing(go)) {
-            go[NEED_UPDATE_INSTANCE_KEY] = true;
-            go.matrixWorldNeedsUpdate = true;
-        }
-        if (recursive) {
-            for (const child of go.children) {
-                InstancingUtil.markDirty(child, true);
-            }
-        }
-    }
-}
+
 
 declare class InstancingSetupArgs { rend: Renderer; foundMeshes: number };
 

package/src/engine-components/ScreenCapture.ts

@@ -9,12 +9,14 @@ import { IModel } from "../engine/engine_networking";
 import { IPointerClickHandler } from "./ui/PointerEvents";
 import { EventDispatcher } from "three";
 import { AudioSource } from "./AudioSource";
-import { getWorldScale, setWorldScale } from "../engine/engine_three_utils";
+import { getParam } from "../engine/engine_utils";
 
+const debug = getParam("debugscreenshare");
 
 export enum ScreenCaptureDevice {
     Screen = 0,
-    Camera = 1
+    Camera = 1,
+    Canvas = 2
 }
 
 export enum ScreenCaptureMode {
@@ -23,12 +25,6 @@ export enum ScreenCaptureMode {
     Receiving = 2
 }
 
-export enum AspectMode {
-    None = 0,
-    AdjustHeight = 1,
-    AdjustWidth = 2,
-}
-
 function disposeStream(str: MediaStream | null | undefined) {
     if (!str) return;
     for (const cap of str.getTracks())
@@ -38,6 +34,11 @@ function disposeStream(str: MediaStream | null | undefined) {
 export class ScreenCapture extends Behaviour implements IPointerClickHandler {
 
     onPointerClick() {
+        if (this.isReceiving) {
+            if (this.videoPlayer)
+                this.videoPlayer.screenspace = !this.videoPlayer.screenspace;
+            return;
+        }
         if (this.isSending) {
             this.close();
             return;
@@ -46,40 +47,55 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
     }
 
 
-
+    @serializeable(VideoPlayer)
+    videoPlayer?: VideoPlayer;
 
     @serializeable()
     device: ScreenCaptureDevice = ScreenCaptureDevice.Screen;
 
-    @serializeable()
-    aspectMode: AspectMode = AspectMode.AdjustHeight;
+    get currentScream(): MediaStream | null {
+        return this._currentStream;
+    }
 
+    get currentMode(): ScreenCaptureMode {
+        return this._currentMode;
+    }
 
     get isSending() {
-        return this._currentStream && this._currentMode === ScreenCaptureMode.Sending;
+        return this._currentStream?.active && this._currentMode === ScreenCaptureMode.Sending;
     }
     get isReceiving() {
-        return this._currentStream && this._currentMode === ScreenCaptureMode.Receiving;
+        if (this._currentMode === ScreenCaptureMode.Receiving) {
+            if (!this._currentStream || this._currentStream.active === false) return false;
+            // if any track is still live consider it active
+            const tracks = this._currentStream.getTracks();
+            for (const track of tracks) {
+                if (track.readyState === "live") return true;
+            }
+        }
+        return false;
     }
 
     private _net?: NetworkedVideo;
-    private _video?: VideoPlayer;
     private _requestOpen: boolean = false;
     private _currentStream: MediaStream | null = null;
     private _currentMode: ScreenCaptureMode = ScreenCaptureMode.Idle;
 
     awake() {
+        console.log(this);
         AudioSource.registerWaitForAllowAudio(() => {
-            if (this._video && this._currentStream && this._currentMode === ScreenCaptureMode.Receiving) {
-                this._video.setVideo(this._currentStream);
+            if (this.videoPlayer && this._currentStream && this._currentMode === ScreenCaptureMode.Receiving) {
+                this.videoPlayer.setVideo(this._currentStream);
             }
         });
     }
 
     start() {
-        this._video = GameObject.getComponentInChildren(this.gameObject, VideoPlayer) ?? undefined;
-        if (!this._video) {
-            console.error("Missing VideoPlayer component");
+        if (!this.videoPlayer) {
+            this.videoPlayer = GameObject.getComponent(this.gameObject, VideoPlayer) ?? undefined;
+        }
+        if (!this.videoPlayer) {
+            console.error("Screencapture did not find a VideoPlayer component");
             return;
         }
         const handle = PeerHandle.getOrCreate(this.context, this.guid);
@@ -92,7 +108,7 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
     async share() {
         this._requestOpen = true;
         try {
-            if (this._video) {
+            if (this.videoPlayer) {
 
                 const settings: MediaTrackConstraints = {
                     echoCancellation: true,
@@ -104,10 +120,12 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
                 };
 
                 switch (this.device) {
+                    // Capture a connected camera
                     case ScreenCaptureDevice.Camera:
                         this.tryShareUserCamera(displayMediaOptions);
                         break;
 
+                    // capture any screen, will show a popup
                     case ScreenCaptureDevice.Screen:
                         if (!navigator.mediaDevices.getDisplayMedia) {
                             console.error("No getDisplayMedia support");
@@ -119,6 +137,16 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
                         }
                         else disposeStream(myVideo);
                         break;
+
+                    // capture the canvas meaning the threejs view
+                    case ScreenCaptureDevice.Canvas:
+                        // looks like this doesnt work reliably on chrome https://stackoverflow.com/a/66848674
+                        // firefox updates fine
+                        // https://bugs.chromium.org/p/chromium/issues/detail?id=1156408
+                        const fps = 0;
+                        const stream = this.context.renderer.domElement.captureStream(fps);
+                        this.setVideo(stream, ScreenCaptureMode.Sending);
+                        break;
                 }
             }
         } catch (err: any) {
@@ -136,8 +164,8 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
         this._requestOpen = false;
         if (this._currentStream) {
             console.warn("Close current stream / disposing resources");
-            disposeStream(this._currentStream);
             this._net?.stopSendingVideo(this._currentStream);
+            disposeStream(this._currentStream);
             this._currentMode = ScreenCaptureMode.Idle;
             this._currentStream = null;
         }
@@ -146,16 +174,21 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
     private setVideo(stream: MediaStream, mode: ScreenCaptureMode) {
         if (stream === this._currentStream) return;
         this.close();
-        if (!stream || !this._video) return;
+        if (!stream || !this.videoPlayer) return;
         this._currentStream = stream;
         this._requestOpen = true;
         this._currentMode = mode;
-        this._video.setVideo(stream);
-        if (mode === ScreenCaptureMode.Sending)
+        this.videoPlayer.setVideo(stream);
+
+        const isSending = mode === ScreenCaptureMode.Sending;
+        if (isSending) {
             this._net?.startSendingVideo(stream);
 
-        this._targetObjects = undefined;
-        this.updateAspect();
+        }
+
+        stream.addEventListener("ended", () => {
+            this.close();
+        });
     }
 
     private onReceiveVideo(evt: ReceiveVideoEvent) {
@@ -164,7 +197,6 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
 
 
 
-
     private async tryShareUserCamera(opts: DisplayMediaStreamConstraints) {
 
         // let newWindow = open('', 'example', 'width=300,height=300');
@@ -203,53 +235,6 @@ export class ScreenCapture extends Behaviour implements IPointerClickHandler {
     // private openWindowToSelectCamera(){
 
     // }
-
-    
-
-
-    private _targetObjects?: Array<THREE.Object3D>;
-
-    private updateAspect() {
-        this.startCoroutine(this.updateAspectImpl());
-    }
-
-    private _updateAspectRoutineId: number = -1;
-    private *updateAspectImpl() {
-        const id = ++this._updateAspectRoutineId;
-        while (this.aspectMode !== AspectMode.None && this._currentStream && id === this._updateAspectRoutineId) {
-            const video = this._video;
-            const stream = this._currentStream;
-            if (!video) return;
-            if (!stream) return;
-            let aspect: number | undefined = undefined;
-            for (const track of stream.getVideoTracks()) {
-                const settings = track.getSettings();
-                if (settings.width && settings.height) {
-                    aspect = settings.width / settings.height;
-                    break;
-                }
-            }
-            if (aspect === undefined) return;
-            if (!this._targetObjects)
-                this._targetObjects = video.getTargetObjects();
-            for (const obj of this._targetObjects) {
-                let worldAspect = 1;
-                if (obj.parent) {
-                    const parentScale = getWorldScale(obj.parent);
-                    worldAspect = parentScale.x / parentScale.y;
-                }
-                switch (this.aspectMode) {
-                    case AspectMode.AdjustHeight:
-                        obj.scale.y = 1 / aspect * obj.scale.x * worldAspect;
-                        break;
-                    case AspectMode.AdjustWidth:
-                        obj.scale.x = aspect * obj.scale.y * worldAspect;
-                        break;
-                }
-            }
-            yield;
-        }
-    }
 }
 
 
@@ -444,7 +429,8 @@ class PeerHandle extends EventDispatcher {
     }
 
     private onPeerConnect(id): void {
-        console.log("Peer connected as", id);
+        if (debug)
+            console.log("Peer connected as", id);
         this.context.connection.send(PeerEvent.Connected, new PeerUserConnectedModel(this, id));
     }
 
@@ -539,6 +525,7 @@ class NetworkedVideo extends EventDispatcher {
         if (_steam) {
             const calls = this._sendingVideoStreams.get(_steam);
             if (calls) {
+                console.log("Closing calls", calls);
                 for (const call of calls) {
                     call.close();
                 }