From a85f76f5ca41ecbffd00c1ee1a3f135cf013ff5b Mon Sep 17 00:00:00 2001 From: AlexandruPopovici Date: Thu, 25 Aug 2022 12:20:05 +0300 Subject: [PATCH] Added DebugViewer which the sandbox uses so it can access stuff normally not available in the API, for testing and developement --- packages/viewer-sandbox/src/Sandbox.ts | 50 +++++++++---------- packages/viewer-sandbox/src/main.ts | 16 +++--- packages/viewer/src/IViewer.ts | 3 +- packages/viewer/src/index.ts | 10 +++- packages/viewer/src/modules/DebugViewer.ts | 10 ++++ packages/viewer/src/modules/Viewer.ts | 16 +++--- packages/viewer/src/modules/World.ts | 39 +++++++-------- .../viewer/src/modules/batching/LineBatch.ts | 4 +- .../viewer/src/modules/batching/MeshBatch.ts | 4 +- .../viewer/src/modules/batching/PointBatch.ts | 4 +- 10 files changed, 86 insertions(+), 70 deletions(-) create mode 100644 packages/viewer/src/modules/DebugViewer.ts diff --git a/packages/viewer-sandbox/src/Sandbox.ts b/packages/viewer-sandbox/src/Sandbox.ts index 5a3169a9a..7017e6f46 100644 --- a/packages/viewer-sandbox/src/Sandbox.ts +++ b/packages/viewer-sandbox/src/Sandbox.ts @@ -1,15 +1,15 @@ import { CanonicalView, + DebugViewer, PropertyInfo, SunLightConfiguration, ViewerEvent } from '@speckle/viewer' -import { Viewer } from '@speckle/viewer' import { FolderApi, Pane } from 'tweakpane' import UrlHelper from './UrlHelper' export default class Sandbox { - private viewer: Viewer + private viewer: DebugViewer private pane: Pane private tabs private viewsFolder!: FolderApi @@ -33,20 +33,17 @@ export default class Sandbox { castShadow: true, intensity: 5, color: 0xffffff, - elevation: 0.47, - azimuth: 0, - radius: 0 - } - - public static indirectLightParams = { - intensity: 1 + elevation: 1.33, + azimuth: 0.75, + radius: 0, + indirectLightIntensity: 1.85 } public static filterParams = { filterBy: 'Volume' } - public constructor(viewer: Viewer) { + public constructor(viewer: DebugViewer) { this.viewer = viewer this.pane = new Pane({ title: 'Speckle Sandbox', expanded: true }) this.pane['containerElem_'].style = @@ -91,11 +88,13 @@ export default class Sandbox { }) const position = { value: { x: 0, y: 0, z: 0 } } folder.addInput(position, 'value', { label: 'Position' }).on('change', () => { - this.viewer.speckleRenderer + this.viewer + .getRenderer() .subtree(url) .position.set(position.value.x, position.value.y, position.value.z) - this.viewer.speckleRenderer.updateDirectLights() - this.viewer.speckleRenderer.updateHelpers() + this.viewer.getRenderer().updateDirectLights() + this.viewer.getRenderer().updateHelpers() + this.viewer.requestRender() }) folder @@ -184,12 +183,13 @@ export default class Sandbox { this.tabs.pages[0].addSeparator() this.tabs.pages[0].addSeparator() - // const showBatches = this.tabs.pages[0].addButton({ - // title: 'ShowBatches' - // }) - // showBatches.on('click', () => { - // this.viewer.speckleRenderer.debugShowBatches() - // }) + const showBatches = this.tabs.pages[0].addButton({ + title: 'ShowBatches' + }) + showBatches.on('click', () => { + this.viewer.getRenderer().debugShowBatches() + this.viewer.requestRender() + }) const darkModeToggle = this.tabs.pages[0].addButton({ title: '🌞 / 🌛' @@ -276,8 +276,9 @@ export default class Sandbox { max: 1 }) .on('change', () => { - this.viewer.speckleRenderer.renderer.toneMappingExposure = + this.viewer.getRenderer().renderer.toneMappingExposure = Sandbox.sceneParams.exposure + this.viewer.requestRender() }) postFolder @@ -288,8 +289,8 @@ export default class Sandbox { } }) .on('change', () => { - this.viewer.speckleRenderer.renderer.toneMapping = - Sandbox.sceneParams.tonemapping + this.viewer.getRenderer().renderer.toneMapping = Sandbox.sceneParams.tonemapping + this.viewer.requestRender() }) const lightsFolder = this.tabs.pages[1].addFolder({ @@ -365,15 +366,14 @@ export default class Sandbox { }) indirectLightsFolder - .addInput(Sandbox.indirectLightParams, 'intensity', { + .addInput(Sandbox.lightParams, 'indirectLightIntensity', { label: 'Probe Intensity', min: 0, max: 10 }) .on('change', (value) => { value - this.viewer.speckleRenderer.indirectIBLIntensity = - Sandbox.indirectLightParams.intensity + this.viewer.setLightConfiguration(Sandbox.lightParams) }) } diff --git a/packages/viewer-sandbox/src/main.ts b/packages/viewer-sandbox/src/main.ts index e1770aad8..9ea5e5b6b 100644 --- a/packages/viewer-sandbox/src/main.ts +++ b/packages/viewer-sandbox/src/main.ts @@ -1,13 +1,13 @@ import { - Viewer, DefaultViewerParams, SelectionEvent, - ViewerEvent + ViewerEvent, + DebugViewer, + Viewer } from '@speckle/viewer' import './style.css' import Sandbox from './Sandbox' -import { IViewer } from '@speckle/viewer' const container = document.querySelector('#renderer') if (!container) { @@ -21,27 +21,27 @@ params.showStats = true // 'https://speckle-xyz-assets.ams3.digitaloceanspaces.com/studio010.hdr' // 'http://localhost:3033/sample-hdri.exr' -const viewer: IViewer = new Viewer(container, params) +const viewer: Viewer = new DebugViewer(container, params) await viewer.init() const sandbox = new Sandbox(viewer) window.addEventListener('load', () => { - viewer.onWindowResize() + viewer.resize() }) viewer.on( ViewerEvent.LoadProgress, (a: { progress: number; id: string; url: string }) => { if (a.progress >= 1) { - viewer.onWindowResize() + viewer.resize() } } ) viewer.on(ViewerEvent.LoadComplete, () => { - Object.assign(Sandbox.sceneParams.worldSize, viewer.World.worldSize) - Object.assign(Sandbox.sceneParams.worldOrigin, viewer.World.worldOrigin) + Object.assign(Sandbox.sceneParams.worldSize, Viewer.World.worldSize) + Object.assign(Sandbox.sceneParams.worldOrigin, Viewer.World.worldOrigin) sandbox.refresh() }) diff --git a/packages/viewer/src/IViewer.ts b/packages/viewer/src/IViewer.ts index 83fde1ada..ead4876a8 100644 --- a/packages/viewer/src/IViewer.ts +++ b/packages/viewer/src/IViewer.ts @@ -3,7 +3,6 @@ import sampleHdri from './assets/sample-hdri.png' import { FilteringState } from './modules/filtering/FilteringManager' import { PropertyInfo } from './modules/filtering/PropertyManager' import { DataTree } from './modules/tree/DataTree' -import { World } from './modules/World' export interface ViewerParams { postprocessing: boolean @@ -114,6 +113,7 @@ export type InlineView = { */ export interface IViewer { init(): Promise + resize(): void on(eventType: ViewerEvent, handler: (arg) => void) toggleSectionBox(): void @@ -176,7 +176,6 @@ export interface IViewer { /** Data ops */ getDataTree(): DataTree - get World(): World dispose(): void } diff --git a/packages/viewer/src/index.ts b/packages/viewer/src/index.ts index 92e0fa947..9b2175b85 100644 --- a/packages/viewer/src/index.ts +++ b/packages/viewer/src/index.ts @@ -19,8 +19,16 @@ import { import { SunLightConfiguration } from './IViewer' import { DataTree, ObjectPredicate, SpeckleObject } from './modules/tree/DataTree' import { World } from './modules/World' +import { DebugViewer } from './modules/DebugViewer' -export { Viewer, DefaultViewerParams, ViewerEvent, DefaultLightConfiguration, World } +export { + Viewer, + DebugViewer, + DefaultViewerParams, + ViewerEvent, + DefaultLightConfiguration, + World +} export type { IViewer, diff --git a/packages/viewer/src/modules/DebugViewer.ts b/packages/viewer/src/modules/DebugViewer.ts new file mode 100644 index 000000000..a5cd60cf4 --- /dev/null +++ b/packages/viewer/src/modules/DebugViewer.ts @@ -0,0 +1,10 @@ +import { Viewer } from './Viewer' + +export class DebugViewer extends Viewer { + getRenderer() { + return this.speckleRenderer + } + requestRender() { + this.needsRender = true + } +} diff --git a/packages/viewer/src/modules/Viewer.ts b/packages/viewer/src/modules/Viewer.ts index 64470641b..adcb752ae 100644 --- a/packages/viewer/src/modules/Viewer.ts +++ b/packages/viewer/src/modules/Viewer.ts @@ -14,7 +14,6 @@ import { DefaultViewerParams, InlineView, IViewer, - LightConfiguration, SpeckleView, SunLightConfiguration, ViewerEvent, @@ -37,8 +36,9 @@ export class Viewer extends EventEmitter implements IViewer { private startupParams: ViewerParams /** Viewer components */ + private static world: World = new World() public static Assets: Assets - private speckleRenderer: SpeckleRenderer + protected speckleRenderer: SpeckleRenderer private filteringManager: FilteringManager /** Legacy viewer components (will revisit soon) */ public sectionBox: SectionBox @@ -60,9 +60,9 @@ export class Viewer extends EventEmitter implements IViewer { this._needsRender = value || this._needsRender } - /** Gets the World object. Currently it's used for statistics mostly */ - public get World(): World { - return World + /** Gets the World object. Currently it's used for info mostly */ + public static get World(): World { + return this.world } public constructor( @@ -83,7 +83,7 @@ export class Viewer extends EventEmitter implements IViewer { this.speckleRenderer = new SpeckleRenderer(this) this.speckleRenderer.create(this.container) - window.addEventListener('resize', this.onWindowResize.bind(this), false) + window.addEventListener('resize', this.resize.bind(this), false) new Assets(this.speckleRenderer.renderer) this.filteringManager = new FilteringManager(this.speckleRenderer) @@ -101,7 +101,7 @@ export class Viewer extends EventEmitter implements IViewer { }) this.frame() - this.onWindowResize() + this.resize() this.needsRender = true this.on(ViewerEvent.LoadComplete, (url) => { @@ -111,7 +111,7 @@ export class Viewer extends EventEmitter implements IViewer { }) } - private onWindowResize() { + public resize() { this.speckleRenderer.renderer.setSize( this.container.offsetWidth, this.container.offsetHeight diff --git a/packages/viewer/src/modules/World.ts b/packages/viewer/src/modules/World.ts index 4ccdfba56..b2312a97e 100644 --- a/packages/viewer/src/modules/World.ts +++ b/packages/viewer/src/modules/World.ts @@ -1,14 +1,13 @@ import { Box3, Vector3 } from 'three' export class World { - /* This will no longer exist when we have a scene tree */ - private static readonly boxes: Array = new Array() - public static readonly worldBox: Box3 = new Box3() + private readonly boxes: Array = new Array() + public readonly worldBox: Box3 = new Box3() - private static _worldOrigin: Vector3 = new Vector3() - public static get worldSize() { - World.worldBox.getCenter(this._worldOrigin) - const size = new Vector3().subVectors(World.worldBox.max, World.worldBox.min) + private _worldOrigin: Vector3 = new Vector3() + public get worldSize() { + this.worldBox.getCenter(this._worldOrigin) + const size = new Vector3().subVectors(this.worldBox.max, this.worldBox.min) return { x: size.x, y: size.y, @@ -16,29 +15,29 @@ export class World { } } - public static get worldOrigin() { - return World._worldOrigin + public get worldOrigin() { + return this._worldOrigin } - public static expandWorld(box: Box3) { - World.boxes.push(box) - World.updateWorld() + public expandWorld(box: Box3) { + this.boxes.push(box) + this.updateWorld() } - public static reduceWorld(box: Box3) { - World.boxes.splice(World.boxes.indexOf(box), 1) - World.updateWorld() + public reduceWorld(box: Box3) { + this.boxes.splice(this.boxes.indexOf(box), 1) + this.updateWorld() } - public static updateWorld() { - World.worldBox.makeEmpty() + public updateWorld() { + this.worldBox.makeEmpty() for (let k = 0; k < this.boxes.length; k++) { - World.worldBox.union(World.boxes[k]) + this.worldBox.union(this.boxes[k]) } } - public static resetWorld() { - World.worldBox.makeEmpty() + public resetWorld() { + this.worldBox.makeEmpty() this.boxes.length = 0 } } diff --git a/packages/viewer/src/modules/batching/LineBatch.ts b/packages/viewer/src/modules/batching/LineBatch.ts index afdd11b15..94bf38b30 100644 --- a/packages/viewer/src/modules/batching/LineBatch.ts +++ b/packages/viewer/src/modules/batching/LineBatch.ts @@ -14,7 +14,7 @@ import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeome import { Geometry } from '../converter/Geometry' import SpeckleLineMaterial from '../materials/SpeckleLineMaterial' import { NodeRenderView } from '../tree/NodeRenderView' -import { World } from '../World' +import { Viewer } from '../Viewer' import { Batch, BatchUpdateRange, GeometryType } from './Batch' export default class LineBatch implements Batch { @@ -186,7 +186,7 @@ export default class LineBatch implements Batch { private makeLineGeometry(position: Float64Array) { this.geometry = this.makeLineGeometryTriangle(new Float32Array(position)) Geometry.updateRTEGeometry(this.geometry, position) - World.expandWorld(this.geometry.boundingBox) + Viewer.World.expandWorld(this.geometry.boundingBox) } private makeLineGeometryTriangle(position: Float32Array): LineSegmentsGeometry { diff --git a/packages/viewer/src/modules/batching/MeshBatch.ts b/packages/viewer/src/modules/batching/MeshBatch.ts index 0df245fbb..d1eff75c2 100644 --- a/packages/viewer/src/modules/batching/MeshBatch.ts +++ b/packages/viewer/src/modules/batching/MeshBatch.ts @@ -13,7 +13,7 @@ import { Geometry } from '../converter/Geometry' import SpeckleStandardColoredMaterial from '../materials/SpeckleStandardColoredMaterial' import SpeckleMesh from '../objects/SpeckleMesh' import { NodeRenderView } from '../tree/NodeRenderView' -import { World } from '../World' +import { Viewer } from '../Viewer' import { Batch, BatchUpdateRange, GeometryType, HideAllBatchUpdateRange } from './Batch' export default class MeshBatch implements Batch { @@ -447,7 +447,7 @@ export default class MeshBatch implements Batch { this.geometry.computeBoundingSphere() this.geometry.computeBoundingBox() - World.expandWorld(this.geometry.boundingBox) + Viewer.World.expandWorld(this.geometry.boundingBox) Geometry.updateRTEGeometry(this.geometry, position) diff --git a/packages/viewer/src/modules/batching/PointBatch.ts b/packages/viewer/src/modules/batching/PointBatch.ts index 2d38aa8c2..002e36459 100644 --- a/packages/viewer/src/modules/batching/PointBatch.ts +++ b/packages/viewer/src/modules/batching/PointBatch.ts @@ -8,7 +8,7 @@ import { } from 'three' import { Geometry } from '../converter/Geometry' import { NodeRenderView } from '../tree/NodeRenderView' -import { World } from '../World' +import { Viewer } from '../Viewer' import { Batch, BatchUpdateRange, GeometryType, HideAllBatchUpdateRange } from './Batch' export default class PointBatch implements Batch { @@ -239,7 +239,7 @@ export default class PointBatch implements Batch { this.geometry.computeBoundingSphere() this.geometry.computeBoundingBox() - World.expandWorld(this.geometry.boundingBox) + Viewer.World.expandWorld(this.geometry.boundingBox) Geometry.updateRTEGeometry(this.geometry, position) return this.geometry