@needle-tools/engine 2.56.2-pre → 2.58.0-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.56.2-pre",
+    "version": "2.58.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": "src/needle-engine.ts",
@@ -49,7 +49,6 @@
         "stats.js": "^0.17.0",
         "three": "npm:@needle-tools/three@^0.146.2",
         "three-mesh-ui": "^6.4.5",
-        "three.meshline": "^1.4.0",
         "three.quarks": "^0.7.3",
         "uuid": "^9.0.0",
         "websocket-ts": "^1.1.1"

package/src/engine/api.ts

@@ -3,7 +3,8 @@ export { InstancingUtil } from "./engine_instancing";
 export * from "./engine_gameobject";
 export * from "./engine_components"
 export { AssetReference } from "./engine_addressables";
-export { FrameEvent } from "./engine_setup";
+export { Context, FrameEvent } from "./engine_setup";
 export * from "./debug/debug";
 export { validate } from "./engine_util_decorator"
-export { Gizmos } from "./engine_gizmos"
+export { Gizmos } from "./engine_gizmos"
+export * from "./engine_scenetools";

package/src/engine/codegen/register_types.js

@@ -1,5 +1,5 @@
 import { TypeStore } from "./../engine_typestore"
-
+
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components.ts";
 import { AlignmentConstraint } from "../../engine-components/AlignmentConstraint.ts";
@@ -55,6 +55,7 @@ import { EventTrigger } from "../../engine-components/EventTrigger.ts";
 import { FieldWithDefault } from "../../engine-components/Renderer.ts";
 import { FixedJoint } from "../../engine-components/Joints.ts";
 import { FlyControls } from "../../engine-components/FlyControls.ts";
+import { Fog } from "../../engine-components/Fog.ts";
 import { GltfExport } from "../../engine-components/export/gltf/GltfExport.ts";
 import { GltfExportBox } from "../../engine-components/export/gltf/GltfExport.ts";
 import { Gradient } from "../../engine-components/ParticleSystemModules.ts";
@@ -73,9 +74,6 @@ import { Keyboard } from "../../engine-components/ui/Keyboard.ts";
 import { LayoutGroup } from "../../engine-components/ui/Layout.ts";
 import { Light } from "../../engine-components/Light.ts";
 import { LimitVelocityOverLifetimeModule } from "../../engine-components/ParticleSystemModules.ts";
-import { LineInstanceHandler } from "../../engine-components-experimental/annotation/LinesManager.ts";
-import { LinesDrawer } from "../../engine-components-experimental/annotation/LineDrawer.ts";
-import { LinesManager } from "../../engine-components-experimental/annotation/LinesManager.ts";
 import { LODGroup } from "../../engine-components/LODGroup.ts";
 import { LODModel } from "../../engine-components/LODGroup.ts";
 import { LogStats } from "../../engine-components/debug/LogStats.ts";
@@ -172,7 +170,7 @@ import { XRGrabModel } from "../../engine-components/WebXRGrabRendering.ts";
 import { XRGrabRendering } from "../../engine-components/WebXRGrabRendering.ts";
 import { XRRig } from "../../engine-components/WebXRRig.ts";
 import { XRState } from "../../engine-components/XRFlag.ts";
-
+
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("AlignmentConstraint", AlignmentConstraint);
@@ -228,6 +226,7 @@ TypeStore.add("EventTrigger", EventTrigger);
 TypeStore.add("FieldWithDefault", FieldWithDefault);
 TypeStore.add("FixedJoint", FixedJoint);
 TypeStore.add("FlyControls", FlyControls);
+TypeStore.add("Fog", Fog);
 TypeStore.add("GltfExport", GltfExport);
 TypeStore.add("GltfExportBox", GltfExportBox);
 TypeStore.add("Gradient", Gradient);
@@ -246,9 +245,6 @@ TypeStore.add("Keyboard", Keyboard);
 TypeStore.add("LayoutGroup", LayoutGroup);
 TypeStore.add("Light", Light);
 TypeStore.add("LimitVelocityOverLifetimeModule", LimitVelocityOverLifetimeModule);
-TypeStore.add("LineInstanceHandler", LineInstanceHandler);
-TypeStore.add("LinesDrawer", LinesDrawer);
-TypeStore.add("LinesManager", LinesManager);
 TypeStore.add("LODGroup", LODGroup);
 TypeStore.add("LODModel", LODModel);
 TypeStore.add("LogStats", LogStats);

package/src/engine/engine.ts

@@ -1,3 +1,5 @@
+import "./engine_hot_reload"
+
 import * as layers from "./js-extensions/Layers";
 layers.patchLayers();
 
@@ -7,7 +9,7 @@ import "./tests/test_utils";
 import { RGBAColor } from "../engine-components/js-extensions/RGBAColor";
 
 
-const engine = {
+const engine : any = {
     ...engine_setup,
     ...engine_scenetools,
     RGBAColor,

package/src/engine/engine_hot_reload.ts

@@ -0,0 +1,186 @@
+import { IComponent } from "./engine_types";
+import { TypeStore } from "./engine_typestore";
+import { addScriptToArrays, removeScriptFromContext } from "./engine_mainloop_utils"
+import { showBalloonWarning } from "./debug/debug";
+import { getParam } from "./engine_utils";
+
+const debug = getParam("debughotreload");
+
+declare type BeforeUpdateArgs = {
+    type: string,
+    updates: Array<{ path: string, timestamp: number, acceptedPath: string, explicitImportRequired: boolean, type: string }>,
+}
+
+//@ts-ignore
+if (import.meta.hot) {
+    //@ts-ignore
+    import.meta.hot.on('vite:beforeUpdate', (cb: BeforeUpdateArgs) => {
+        if (debug) console.log(cb);
+        for (const update of cb.updates) {
+            console.log("[Needle Engine] Hot reloading " + update.path);
+        }
+    });
+}
+
+
+let isApplyingChanges = false;
+
+const instances: Map<string, object[]> = new Map();
+
+export function register(instance: object) {
+    if (isApplyingChanges) return;
+    const type = instance.constructor;
+    const name = type.name;
+    if (!instances.has(name)) {
+        instances.set(name, [instance]);
+    }
+    else {
+        instances.get(name)?.push(instance);
+    }
+}
+
+export function unregister(instance: object) {
+    if (isApplyingChanges) return;
+    const type = instance.constructor;
+    const name = type.name;
+    const instancesOfType = instances.get(name);
+    if (!instancesOfType) return;
+    const idx = instancesOfType.indexOf(instance);
+    if (idx === -1) return;
+    instancesOfType.splice(idx, 1);
+}
+
+
+let didRegisterUnhandledExceptionListener = false;
+function reloadPageOnHotReloadError() {
+    if (debug) return;
+    if (didRegisterUnhandledExceptionListener) return;
+    didRegisterUnhandledExceptionListener = true;
+
+    const error = console.error;
+    console.error = (...args: any[]) => {
+        if (args.length) {
+            const arg: string = args[0];
+            // When making changes in e.g. the engine package and then making changes in project scripts again that import the engine package: hot reload fails and reports redefinitions of types, we just reload the page in those cases for now
+            // editing a script in one package seems to work for now so it should be good enough for a start
+            if (typeof arg === "string" && arg.includes("[hmr] Failed to reload ")) {
+                console.log("[Needle Engine] Hot reloading failed")
+                window.location.reload();
+                return;
+            }
+
+        }
+        error.apply(console, args);
+    };
+}
+
+
+export function applyChanges(newModule): boolean {
+
+    reloadPageOnHotReloadError();
+
+    // showBalloonMessage("Hot reloading");
+
+    // console.dir(newModule);
+
+    for (const key of Object.keys(newModule)) {
+        try {
+            isApplyingChanges = true;
+
+            const typeToUpdate = TypeStore.get(key);
+            if (!typeToUpdate) 
+            {
+                continue;
+            }
+            const newType = newModule[key];
+
+            console.log("[Needle Engine] Updating type: " + key);
+
+            // Update prototype (methods and properties)
+            const previousMethods = Object.getOwnPropertyNames(typeToUpdate.prototype);
+            const methodsAndProperties = Object.getOwnPropertyDescriptors(newType.prototype);
+            for (const typeKey in methodsAndProperties) {
+                const desc = methodsAndProperties[typeKey];
+                if (!desc.writable) continue;
+                typeToUpdate.prototype[typeKey] = newModule[key].prototype[typeKey];
+            }
+            // Remove methods that are no longer present
+            for (const typeKey of previousMethods) {
+                if (!methodsAndProperties[typeKey]) {
+                    delete typeToUpdate.prototype[typeKey];
+                }
+            }
+
+            // Update fields (we only add new fields if they are undefined)
+            // we create a instance to get access to the fields
+            const instancesOfType = instances.get(newType.name);
+            if (instancesOfType) {
+                const newTypeInstance = new newType();
+                const keys = Object.getOwnPropertyDescriptors(newTypeInstance);
+                for (const inst of instancesOfType) {
+                    const componentInstance = inst as unknown as IComponent;
+                    const isComponent = componentInstance.isComponent === true;
+                    const active = isComponent ? componentInstance.activeAndEnabled : true;
+                    const context = isComponent ? componentInstance.context : undefined;
+                    try {
+                        if (isComponent) {
+                            removeScriptFromContext(componentInstance, context);
+                        }
+                        if (isComponent && active) {
+                            componentInstance.enabled = false;
+                        }
+
+                        if (inst["onBeforeHotReloadFields"]) {
+                            const res = inst["onBeforeHotReloadFields"]();
+                            if (res === false) continue;
+                        }
+                        for (const key in keys) {
+                            const desc = keys[key];
+                            if (!desc.writable) continue;
+                            if (inst[key] === undefined) {
+                                inst[key] = newTypeInstance[key];
+                            }
+                            // if its a function but not on the prototype
+                            // then its a bound method that needs to be rebound
+                            else if (typeof inst[key] === "function" && !inst[key].prototype) {
+                                const boundMethod = inst[key];
+                                // try to get the target method name
+                                const targetMethodName = boundMethod.name;
+                                const prefix = "bound "; // < magic prefix
+                                if (targetMethodName === prefix) continue;
+                                const name = boundMethod.name.substring(prefix.length);
+                                // if the target method name still exists on the new prototype
+                                // we want to rebind it and assign it to the field
+                                // Beware that this will not work if the method is added to some event listener etc
+                                const newTarget = newType.prototype[name];
+                                if (newTarget)
+                                    inst[key] = newTarget.bind(inst);
+                            }
+                        }
+                        if (inst["onAfterHotReloadFields"]) inst["onAfterHotReloadFields"]();
+                    }
+                    finally {
+                        if (isComponent) {
+                            addScriptToArrays(componentInstance, context);
+                        }
+                        if (isComponent && active) {
+                            componentInstance.enabled = true;
+                        }
+                    }
+                }
+            }
+        }
+        catch (err) {
+            if (debug) console.error(err);
+            // we only want to invalidate changes if we debug hot reload
+            else return false;
+        }
+        finally {
+            isApplyingChanges = false;
+        }
+    }
+
+    return true;
+}
+
+

package/src/engine/engine_input.ts

@@ -170,7 +170,7 @@ export class Input extends EventTarget {
     *foreachPointerId(pointerType?: string | PointerType | string[] | PointerType[]): Generator<number> {
         for (let i = 0; i < this._pointerTypes.length; i++) {
             // check if the pointer is active
-            if (this._pointerIsActive[i]) {
+            if (this._pointerIsActive(i)) {
                 // if specific pointer types are requested
                 if (pointerType !== undefined) {
                     const type = this._pointerTypes[i];

package/src/engine/engine_scenetools.ts

@@ -95,13 +95,18 @@ async function handleLoadedGltf(context: Context, gltfId: string, gltf, seed: nu
     // findAnimationsLate(context, gltf, context.new_scripts_pre_setup_callbacks, false);
 }
 
+export function createGLTFLoader(url: string, context: Context) {
+    const loader = new GLTFLoader();
+    const sourceId: SourceIdentifier = url;
+    registerExtensions(loader, context, sourceId);
+    return loader;
+}
+
 export function parseSync(context: Context, data, path: string, seed: number | UIDProvider | null): Promise<GLTF | undefined> {
     if (typeof path !== "string") {
         console.warn("Parse gltf binary without path, this might lead to errors in resolving extensions. Please provide the source path of the gltf/glb file", path, typeof path);
     }
-    const loader = new GLTFLoader();
-    const sourceId: SourceIdentifier = path;
-    registerExtensions(loader, context, sourceId);
+    const loader = createGLTFLoader(path, context);
     const componentsExtension = registerComponentExtension(loader);
     return new Promise((resolve, reject) => {
         try {
@@ -131,9 +136,7 @@ export function loadSync(context: Context, url: string, seed: number | UIDProvid
     // but due to the async nature and potentially triggering multiple loads at the same time
     // we need to make sure the extensions dont override each other
     // creating new loaders should not be expensive as well
-    const loader = new GLTFLoader();
-    const sourceId: SourceIdentifier = url;
-    registerExtensions(loader, context, sourceId);
+    const loader = createGLTFLoader(url, context);
     const componentsExtension = registerComponentExtension(loader);
     return new Promise((resolve, reject) => {
         try {

package/src/engine/engine_setup.ts

@@ -1,4 +1,4 @@
-import { DepthTexture, PerspectiveCamera, WebGLRenderer, WebGLRenderTarget } from 'three'
+import { Camera, DepthTexture, PerspectiveCamera, WebGLRenderer, WebGLRenderTarget } from 'three'
 import * as THREE from 'three'
 import { Input } from './engine_input';
 import { Physics } from './engine_physics';
@@ -300,7 +300,7 @@ export class Context {
 
 	// private _requestSizeUpdate : boolean = false;
 
-	private updateSize() {
+	updateSize() {
 		if (!this.isManagedExternally && !this.renderer.xr.isPresenting) {
 			this._sizeChanged = false;
 			const scaleFactor = this.resolutionScaleFactor;
@@ -322,10 +322,12 @@ export class Context {
 		}
 	}
 
-	updateAspect(camera: THREE.PerspectiveCamera) {
+	updateAspect(camera: THREE.PerspectiveCamera, width?: number, height?: number) {
 		if (!camera) return;
-		const width = this.domWidth;
-		const height = this.domHeight;
+		if (width === undefined)
+			width = this.domWidth;
+		if (height === undefined)
+			height = this.domHeight;
 		const pa = camera.aspect;
 		camera.aspect = width / height;
 		if (pa !== camera.aspect)
@@ -697,21 +699,13 @@ export class Context {
 				}
 			}
 
-			this._currentFrameEvent = -10;
 
-			this._isRendering = true;
-			this.renderRequiredTextures();
 			if (!this.isManagedExternally) {
-				if (this.composer && !this.isInXR) {
-					this.composer.render();
-				}
-				else if (this.mainCamera) {
-					this.renderer.render(this.scene, this.mainCamera);
-				}
+				this._currentFrameEvent = -10;
+				this.renderNow();
+				this._currentFrameEvent = FrameEvent.OnAfterRender;
 			}
-			this._isRendering = false;
 
-			this._currentFrameEvent = FrameEvent.OnAfterRender;
 
 			for (let i = 0; i < this.scripts_onAfterRender.length; i++) {
 				const script = this.scripts_onAfterRender[i];
@@ -738,6 +732,23 @@ export class Context {
 		this._stats?.end();
 	}
 
+	renderNow(camera?: Camera) {
+		if (!camera) {
+			camera = this.mainCamera as Camera;
+			if (!camera) return false;
+		}
+		this._isRendering = true;
+		this.renderRequiredTextures();
+		if (this.composer && !this.isInXR) {
+			this.composer.render();
+		}
+		else if (this.mainCamera) {
+			this.renderer.render(this.scene, camera);
+		}
+		this._isRendering = false;
+		return true;
+	}
+
 	/** returns true if we should return out of the frame loop */
 	private _wasPaused: boolean = false;
 	private onHandlePaused(): boolean {
@@ -798,47 +809,50 @@ export class Context {
 		if (this.coroutines[evt]) {
 			const evts = this.coroutines[evt];
 			for (let i = 0; i < evts.length; i++) {
-				const evt = evts[i];
-				// TODO we might want to keep coroutines playing even if the component is disabled or inactive
-				const remove = !evt.comp || evt.comp.destroyed || !evt.main || evt.comp["enabled"] === false;
-				if (remove) {
-					evts.splice(i, 1);
-					--i;
-					continue;
-				}
-				const iter = evt.chained;
-				if (iter && iter.length > 0) {
-					const last: Generator = iter[iter.length - 1];
-					const res = last.next();
-					if (res.done) {
-						iter.pop();
+				try {
+					const evt = evts[i];
+					// TODO we might want to keep coroutines playing even if the component is disabled or inactive
+					const remove = !evt.comp || evt.comp.destroyed || !evt.main || evt.comp["enabled"] === false;
+					if (remove) {
+						evts.splice(i, 1);
+						--i;
+						continue;
 					}
-					if (isGenerator(res)) {
-						if (!evt.chained) evt.chained = [];
-						evt.chained.push(res.value);
+					const iter = evt.chained;
+					if (iter && iter.length > 0) {
+						const last: Generator = iter[iter.length - 1];
+						const res = last.next();
+						if (res.done) {
+							iter.pop();
+						}
+						if (isGenerator(res)) {
+							if (!evt.chained) evt.chained = [];
+							evt.chained.push(res.value);
+						}
+						if (!res.done) continue;
 					}
-					if (!res.done) continue;
-				}
 
-				const res = evt.main.next();
-				if (res.done === true) {
-					evts.splice(i, 1);
-					--i;
-					continue;
+					const res = evt.main.next();
+					if (res.done === true) {
+						evts.splice(i, 1);
+						--i;
+						continue;
+					}
+					const val = res.value;
+					if (isGenerator(val)) {
+						// invoke once if its a generator
+						// this means e.g. WaitForFrame(1) works and will capture
+						// the frame it was created
+						const gen = val as Generator;
+						const res = gen.next();
+						if (res.done) continue;
+						if (!evt.chained) evt.chained = [];
+						evt.chained.push(val as Generator);
+					}
 				}
-				const val = res.value;
-				if (isGenerator(val)) {
-					// invoke once if its a generator
-					// this means e.g. WaitForFrame(1) works and will capture
-					// the frame it was created
-					const gen = val as Generator;
-					const res = gen.next();
-					if (res.done) continue;
-					if (!evt.chained) evt.chained = [];
-					evt.chained.push(val as Generator);
+				catch (e) {
+					console.error(e);
 				}
-
-
 			}
 		}
 

package/src/engine/engine_three_utils.ts

@@ -1,6 +1,6 @@
 import * as THREE from "three";
 import { Mathf } from "./engine_math"
-import { WebGLRenderTarget, WebGLRenderer, Vector3, Quaternion, Uniform, Texture, Material, ShaderMaterial, CanvasTexture, AnimationAction } from "three";
+import { WebGLRenderer, Vector3, Quaternion, Uniform, Texture, Material, ShaderMaterial, CanvasTexture, AnimationAction, Camera, PerspectiveCamera } from "three";
 import { CircularBuffer } from "./engine_utils";
 
 
@@ -183,8 +183,8 @@ export function logHierarchy(root: THREE.Object3D | null | undefined, collapsibl
 }
 
 
-export function isAnimationAction(obj:object){
-    if(obj){
+export function isAnimationAction(obj: object) {
+    if (obj) {
         // this doesnt work :(
         // return obj instanceof AnimationAction;
         // instead we do this:
@@ -308,4 +308,4 @@ function isImageBitmap(image) {
         (typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement) ||
         (typeof OffscreenCanvas !== 'undefined' && image instanceof OffscreenCanvas) ||
         (typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap);
-}
+}

package/src/engine/engine_utils_screenshot.ts

@@ -0,0 +1,41 @@
+import { Context } from "./engine_setup";
+import { PerspectiveCamera, Camera } from "three";
+
+declare type ImageMimeType = "image/webp" | "image/png";
+
+export function screenshot(context: Context, width: number, height: number, mimeType: ImageMimeType = "image/webp", camera?: Camera | null) {
+
+    if (!camera) {
+        camera = context.mainCamera;
+        if (!camera) {
+            console.error("No camera found");
+            return null;
+        }
+    }
+    const prevWidth = context.renderer.domElement.width;
+    const prevHeight = context.renderer.domElement.height;
+
+    try {
+        const canvas = context.renderer.domElement;
+
+        // set the desired output size
+        context.renderer.setSize(width, height);
+        // update the camera apsect and matrix
+        if (camera instanceof PerspectiveCamera)
+            context.updateAspect(camera, width, height);
+
+        // render now
+        context.renderNow();
+
+        // const webPMimeType = "image/webp";
+        // const pngMimeType = "image/png";
+        const dataUrl = canvas.toDataURL(mimeType);
+        return dataUrl;
+    }
+    finally {
+        context.renderer.setSize(prevWidth, prevHeight);
+        context.updateSize();
+    }
+
+    return null;
+}

package/src/engine-components/Fog.ts

@@ -0,0 +1,60 @@
+import { Behaviour } from "./Component";
+import { Color, Fog as Fog3 } from "three";
+import { serializable } from "../engine/engine_serialization";
+
+
+export enum FogMode {
+
+    Linear = 1,
+    Exponential = 2,
+    ExponentialSquared = 3,
+}
+
+export class Fog extends Behaviour {
+
+    get fog() {
+        if (!this._fog) this._fog = new Fog3(0x000000, 0, 50);
+        return this._fog;
+    }
+
+    get mode() {
+        return FogMode.Linear;
+    }
+
+    @serializable()
+    set near(value: number) {
+        this.fog.near = value;
+    }
+    get near() {
+        return this.fog.near;
+    }
+
+    @serializable()
+    set far(value: number) {
+        this.fog.far = value;
+    }
+    get far() {
+        return this.fog.far;
+    }
+
+    @serializable(Color)
+    set color(value: Color) {
+        this.fog.color.copy(value);
+    }
+    get color() {
+        return this.fog.color;
+    }
+
+    private _fog?: Fog3;
+
+    onEnable() {
+        this.scene.fog = this.fog;
+    }
+
+    onDisable() {
+        if (this.scene.fog === this._fog)
+            this.scene.fog = null;
+    }
+
+
+}

package/src/engine-components/Skybox.ts

@@ -51,7 +51,8 @@ export class RemoteSkybox extends Behaviour {
             console.warn("Potentially invalid skybox url", this.url, "on", this.name);
         }
 
-        if (!this._loader) {
+        // if (!this._loader) 
+        {
             const isEXR = url.endsWith(".exr");
             const isHdr = url.endsWith(".hdr");
             if (isEXR) {
@@ -64,6 +65,7 @@ export class RemoteSkybox extends Behaviour {
                 this._loader = new TextureLoader();
             }
         }
+        console.log("Loading skybox: " + url);
         const envMap = await this._loader.loadAsync(url);
         if (!envMap) return;
         if (!this.enabled) return;

package/src/engine-components/TestRunner.ts

@@ -3,7 +3,7 @@ import * as tests from "../engine/tests/test_utils";
 import { createTransformModel, SyncedTransform, SyncedTransformIdentifier } from "./SyncedTransform";
 import * as flatbuffers from 'flatbuffers';
 import { SyncedTransformModel } from "../engine-schemes/synced-transform-model";
-import { Rigidbody } from "./Rigidbody";
+import { Rigidbody } from "./RigidBody";
 import { Vector3 } from "three";
 import { IModel } from "../engine/engine_networking_types";
 

package/src/engine-components/WebXR.ts

@@ -221,14 +221,14 @@ export class WebXR extends Behaviour {
         this.context.domElement.append(buttonsContainer);
 
         // AR support
-        if (this.enableAR && this.createARButton) {
+        if (this.enableAR && this.createARButton && arSupported) {
             arButton = WebXR.createARButton(this);
             this._arButton = arButton;
             buttonsContainer.appendChild(arButton);
         }
 
         // VR support
-        if (this.createVRButton && this.enableVR) {
+        if (this.createVRButton && this.enableVR && vrSupported) {
             vrButton = WebXR.createVRButton(this);
             this._vrButton = vrButton;
             buttonsContainer.appendChild(vrButton);

package/src/engine-components/codegen/components.ts

@@ -53,6 +53,7 @@ export { EventTrigger } from "../EventTrigger";
 export { FieldWithDefault } from "../Renderer";
 export { FixedJoint } from "../Joints";
 export { FlyControls } from "../FlyControls";
+export { Fog } from "../Fog";
 export { GltfExport } from "../export/gltf/GltfExport";
 export { GltfExportBox } from "../export/gltf/GltfExport";
 export { Gradient } from "../ParticleSystemModules";