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

@@ -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)
       })
   }
 

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<HTMLElement>('#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()
 })
 

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<void>
+  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
 }

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,

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
+  }
+}

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

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<Box3> = new Array<Box3>()
-  public static readonly worldBox: Box3 = new Box3()
+  private readonly boxes: Array<Box3> = new Array<Box3>()
+  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
   }
 }

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 {

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)
 

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