@base2datadesign/viewer-kit 0.1.2 → 0.2.0

package/dist/systems/lightingSystem.d.ts

@@ -8,5 +8,6 @@ export declare class LightingSystem {
     dispose(): void;
     private add;
     private clear;
+    private configureShadow;
 }
 //# sourceMappingURL=lightingSystem.d.ts.map

package/dist/systems/lightingSystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lightingSystem.d.ts","sourceRoot":"","sources":["../../src/systems/lightingSystem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAqB,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAUjF,qBAAa,cAAc;IACzB,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAAqB;gBAEvB,KAAK,EAAE,KAAK,CAAC,KAAK;IAI9B,KAAK,CAAC,MAAM,EAAE,sBAAsB,GAAG,IAAI;IAqC3C,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,GAAG;IAKX,OAAO,CAAC,KAAK;CAMd"}
+{"version":3,"file":"lightingSystem.d.ts","sourceRoot":"","sources":["../../src/systems/lightingSystem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAqB,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAUjF,qBAAa,cAAc;IACzB,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAAqB;gBAEvB,KAAK,EAAE,KAAK,CAAC,KAAK;IAI9B,KAAK,CAAC,MAAM,EAAE,sBAAsB,GAAG,IAAI;IAkD3C,OAAO,IAAI,IAAI;IAIf,OAAO,CAAC,GAAG;IAKX,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,eAAe;CAcxB"}

package/dist/systems/lightingSystem.js

@@ -32,6 +32,9 @@ export class LightingSystem {
             const light = new THREE.DirectionalLight(new THREE.Color(key.color), key.intensity);
             light.position.set(...key.position);
             light.castShadow = key.castShadow ?? false;
+            if (light.castShadow) {
+                this.configureShadow(light, config.shadow);
+            }
             this.add(light);
         }
         const fill = config.fill ?? DEFAULT_LIGHTING.fill;
@@ -40,6 +43,15 @@ export class LightingSystem {
             light.position.set(...fill.position);
             this.add(light);
         }
+        if (preset.interiorLights?.length) {
+            preset.interiorLights.forEach((interior) => {
+                const color = interior.color ? new THREE.Color(interior.color) : new THREE.Color("#ffffff");
+                const distance = typeof interior.distance === "number" ? interior.distance : 40;
+                const point = new THREE.PointLight(color, interior.intensity, distance);
+                point.position.set(...interior.position);
+                this.add(point);
+            });
+        }
     }
     dispose() {
         this.clear();
@@ -55,4 +67,19 @@ export class LightingSystem {
         });
         this.lights = [];
     }
+    configureShadow(light, config) {
+        if (!light.shadow)
+            return;
+        const cameraSize = config?.cameraSize ?? 25;
+        light.shadow.camera.left = -cameraSize;
+        light.shadow.camera.right = cameraSize;
+        light.shadow.camera.top = cameraSize;
+        light.shadow.camera.bottom = -cameraSize;
+        light.shadow.camera.near = config?.near ?? 0.1;
+        light.shadow.camera.far = config?.far ?? 60;
+        const mapSize = config?.mapSize ?? 2048;
+        light.shadow.mapSize.set(mapSize, mapSize);
+        light.shadow.bias = config?.bias ?? -0.0001;
+        light.shadow.radius = config?.radius ?? 3;
+    }
 }

package/dist/systems/postfxSystem.d.ts

@@ -7,6 +7,9 @@ export declare class PostFxSystem {
     private composer;
     private renderPass;
     private aoPass;
+    private effectPass;
+    private bloomEffect;
+    private vignetteEffect;
     private enabled;
     constructor(renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera);
     apply(config?: PostFxConfig): void;
@@ -15,6 +18,8 @@ export declare class PostFxSystem {
     dispose(): void;
     getState(): {
         aoEnabled: boolean;
+        bloomEnabled: boolean;
+        vignetteEnabled: boolean;
     };
 }
 //# sourceMappingURL=postfxSystem.d.ts.map

package/dist/systems/postfxSystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"postfxSystem.d.ts","sourceRoot":"","sources":["../../src/systems/postfxSystem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,qBAAa,YAAY;IACvB,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,MAAM,CAA6B;IAC3C,OAAO,CAAC,OAAO,CAAS;gBAEZ,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,iBAAiB;IAM9F,KAAK,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI;IA6BlC,MAAM,IAAI,IAAI;IAQd,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAS3C,OAAO,IAAI,IAAI;IAUf,QAAQ,IAAI;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE;CAGnC"}
+{"version":3,"file":"postfxSystem.d.ts","sourceRoot":"","sources":["../../src/systems/postfxSystem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,qBAAa,YAAY;IACvB,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,KAAK,CAAc;IAC3B,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,MAAM,CAA6B;IAC3C,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,OAAO,CAAS;gBAEZ,QAAQ,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,iBAAiB;IAM9F,KAAK,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI;IA6ElC,MAAM,IAAI,IAAI;IAQd,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAS3C,OAAO,IAAI,IAAI;IAaf,QAAQ,IAAI;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,YAAY,EAAE,OAAO,CAAC;QAAC,eAAe,EAAE,OAAO,CAAA;KAAE;CAOpF"}

package/dist/systems/postfxSystem.js

@@ -1,4 +1,4 @@
-import { EffectComposer, RenderPass } from "postprocessing";
+import { BloomEffect, EffectComposer, EffectPass, RenderPass, VignetteEffect } from "postprocessing";
 import { N8AOPostPass } from "n8ao";
 export class PostFxSystem {
     renderer;
@@ -7,6 +7,9 @@ export class PostFxSystem {
     composer = null;
     renderPass = null;
     aoPass = null;
+    effectPass = null;
+    bloomEffect = null;
+    vignetteEffect = null;
     enabled = false;
     constructor(renderer, scene, camera) {
         this.renderer = renderer;
@@ -15,23 +18,47 @@ export class PostFxSystem {
     }
     apply(config) {
         const ao = config?.ao;
-        const shouldEnable = Boolean(ao?.enabled);
+        const bloom = config?.bloom;
+        const vignette = config?.vignette;
+        const shouldEnable = Boolean(ao?.enabled || bloom?.enabled || vignette?.enabled);
         if (!shouldEnable) {
             this.enabled = false;
             if (this.aoPass)
                 this.aoPass.enabled = false;
+            if (this.effectPass)
+                this.effectPass.enabled = false;
             return;
         }
         if (!this.composer) {
             this.composer = new EffectComposer(this.renderer);
             this.renderPass = new RenderPass(this.scene, this.camera);
             this.composer.addPass(this.renderPass);
+        }
+        if (!this.aoPass) {
             this.aoPass = new N8AOPostPass(this.scene, this.camera, this.renderer.domElement.width, this.renderer.domElement.height);
             this.composer.addPass(this.aoPass);
         }
+        if (!this.bloomEffect) {
+            this.bloomEffect = new BloomEffect({
+                intensity: bloom?.intensity ?? 0.0,
+                radius: bloom?.radius ?? 0.85,
+                luminanceThreshold: bloom?.threshold ?? 1.0,
+                luminanceSmoothing: bloom?.smoothing ?? 0.03,
+            });
+        }
+        if (!this.vignetteEffect) {
+            this.vignetteEffect = new VignetteEffect({
+                offset: vignette?.offset ?? 0.5,
+                darkness: vignette?.darkness ?? 0.5,
+            });
+        }
+        if (!this.effectPass) {
+            this.effectPass = new EffectPass(this.camera, this.bloomEffect, this.vignetteEffect);
+            this.composer.addPass(this.effectPass);
+        }
         this.enabled = true;
         if (this.aoPass) {
-            this.aoPass.enabled = true;
+            this.aoPass.enabled = Boolean(ao?.enabled);
             if (ao?.intensity !== undefined)
                 this.aoPass.configuration.intensity = ao.intensity;
             if (ao?.radius !== undefined)
@@ -42,6 +69,25 @@ export class PostFxSystem {
                 this.aoPass.configuration.halfRes = ao.halfRes;
             this.aoPass.firstFrame?.();
         }
+        if (this.bloomEffect) {
+            this.bloomEffect.intensity = bloom?.enabled ? bloom?.intensity ?? 1.0 : 0.0;
+            if (bloom?.radius !== undefined) {
+                this.bloomEffect.mipmapBlurPass.radius = bloom.radius;
+            }
+            if (bloom?.threshold !== undefined)
+                this.bloomEffect.luminanceMaterial.threshold = bloom.threshold;
+            if (bloom?.smoothing !== undefined)
+                this.bloomEffect.luminanceMaterial.smoothing = bloom.smoothing;
+        }
+        if (this.vignetteEffect) {
+            const offset = vignette?.offset ?? 0.5;
+            const darkness = vignette?.enabled ? vignette.darkness ?? 0.5 : 0.0;
+            this.vignetteEffect.offset = offset;
+            this.vignetteEffect.darkness = darkness;
+        }
+        if (this.effectPass) {
+            this.effectPass.enabled = Boolean(bloom?.enabled || vignette?.enabled);
+        }
     }
     render() {
         if (this.enabled && this.composer) {
@@ -64,10 +110,17 @@ export class PostFxSystem {
         }
         this.renderPass = null;
         this.aoPass = null;
+        this.effectPass = null;
+        this.bloomEffect = null;
+        this.vignetteEffect = null;
         this.composer = null;
         this.enabled = false;
     }
     getState() {
-        return { aoEnabled: Boolean(this.aoPass?.enabled) };
+        return {
+            aoEnabled: Boolean(this.aoPass?.enabled),
+            bloomEnabled: Boolean(this.effectPass?.enabled && this.bloomEffect && this.bloomEffect.intensity > 0),
+            vignetteEnabled: Boolean(this.effectPass?.enabled && this.vignetteEffect && this.vignetteEffect.darkness > 0),
+        };
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base2datadesign/viewer-kit",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "license": "UNLICENSED",
   "main": "./dist/index.js",