feat: implement culler

Author: agviegas

temp/core/ScreenCuller/example.html …components/src/core/Cullers/example.htmltemp/core/ScreenCuller/example.html renamed to packages/components/src/core/Cullers/example.html temp/core/ScreenCuller/example.html renamed to packages/components/src/core/Cullers/example.html

@@ -1,33 +1,33 @@
-// Set up scene (see SimpleScene tutorial)
-
 import * as THREE from "three";
+// eslint-disable-next-line import/no-extraneous-dependencies
 import Stats from "stats.js";
 import * as OBC from "../..";
 
 const container = document.getElementById("container")!;
 
 const components = new OBC.Components();
 
-const sceneComponent = new OBC.SimpleScene(components);
-sceneComponent.setup();
-components.scene = sceneComponent;
-
-const rendererComponent = new OBC.PostproductionRenderer(components, container);
-components.renderer = rendererComponent;
+const worlds = components.get(OBC.Worlds);
+const world = new OBC.SimpleWorld<
+  OBC.SimpleScene,
+  OBC.SimpleCamera,
+  OBC.SimpleRenderer
+>(components);
 
-const cameraComponent = new OBC.SimpleCamera(components);
-components.camera = cameraComponent;
+world.scene = new OBC.SimpleScene(components);
+world.renderer = new OBC.SimpleRenderer(components, container);
+world.camera = new OBC.SimpleCamera(components);
 
-components.raycaster = new OBC.SimpleRaycaster(components);
+worlds.add(world);
 
 components.init();
 
-const scene = components.scene.get();
+world.camera.controls.setLookAt(13, 13, 13, 0, 0, 0);
 
-cameraComponent.controls.setLookAt(13, 13, 13, 0, 0, 0);
+world.scene.setup();
 
-// @ts-ignore
-const grid = new OBC.SimpleGrid(components);
+const grids = components.get(OBC.Grids);
+grids.create(world);
 
 /* MD
 
@@ -53,8 +53,8 @@ const grid = new OBC.SimpleGrid(components);
 
   */
 
-const culler = new OBC.ScreenCuller(components);
-await culler.setup();
+const cullers = new OBC.Cullers(components);
+const culler = cullers.create(world);
 
 /* MD
 
@@ -63,18 +63,18 @@ await culler.setup();
 
   */
 
-culler.elements.threshold = 200;
+culler.threshold = 200;
 
 /* MD
 
-  Additionally, we will activate the `culler.elements.renderDebugFrame`
+  Additionally, we will activate the `culler.renderDebugFrame`
   so that we can see the 2D screen of the elements that are not occluded.💻
   Also, we will get the **domElement** and attach it to the body so that we can see this frame in real-time.📊
 
   */
 
-culler.elements.renderDebugFrame = true;
-const debugFrame = culler.elements.get().domElement;
+culler.renderDebugFrame = true;
+const debugFrame = culler.renderer.domElement;
 document.body.appendChild(debugFrame);
 debugFrame.style.position = "fixed";
 debugFrame.style.left = "0";
@@ -117,7 +117,7 @@ const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
   and randomly position them. We'll add the cube to the scene and adjust its position between 0 and 10.
 
   Additionally, we will add meshes to the `culler` object, which will help **SimpleCuller** to recognize and
-  draw the elements that are visible to the camera. To do this, **`culler.elements.add(cube)`** will be used.
+  draw the elements that are visible to the camera. To do this, **`culler.add(cube)`** will be used.
 
   Also, now that we can create multiple cubes, we will write a function to remove the cubes from scene on demand.
   `resetCubes()` iteratively removes the **cubes** using [**`cube.removeFromParent`**](https://threejs.org/docs/index.html?q=obje#api/en/core/Object3D.removeFromParent).
@@ -139,8 +139,8 @@ function regenerateCubes() {
     cube.position.y = getRandomNumber(10);
     cube.position.z = getRandomNumber(10);
     cube.updateMatrix();
-    scene.add(cube);
-    culler.elements.add(cube);
+    world.scene.three.add(cube);
+    culler.add(cube);
     cubes.push(cube);
   }
 }
@@ -158,16 +158,16 @@ regenerateCubes();
   Here comes the most crucial part! The core aim of **ScreenCuller** is to output just those components that are
   visible to the camera.
 
-  `culler.elements.needsUpdate = true` instructs the ScreenCuller to render the updated view.
+  `culler.needsUpdate = true` instructs the ScreenCuller to render the updated view.
 
   ** Remember to update culler every time the camera is updated ❕ **
 
   In this tutorial we are updating it each time the camera stops moving.
   */
 
-culler.elements.needsUpdate = true;
-cameraComponent.controls.addEventListener("controlend", () => {
-  culler.elements.needsUpdate = true;
+culler.needsUpdate = true;
+world.camera.controls.addEventListener("controlend", () => {
+  culler.needsUpdate = true;
 });
 
 /* MD
@@ -182,30 +182,5 @@ const stats = new Stats();
 stats.showPanel(2);
 document.body.append(stats.dom);
 stats.dom.style.left = "0px";
-rendererComponent.onBeforeUpdate.add(() => stats.begin());
-rendererComponent.onAfterUpdate.add(() => stats.end());
-
-// Set up GUI
-
-const optionsDrawer = new OBC.Drawer(components);
-optionsDrawer.size = "15rem";
-components.ui.add(optionsDrawer);
-optionsDrawer.visible = true;
-optionsDrawer.alignment = "right";
-
-const regenerateButton = new OBC.Button(components);
-regenerateButton.domElement.classList.add("shadow-md");
-regenerateButton.domElement.classList.add("backdrop-blur-xl");
-optionsDrawer.addChild(regenerateButton);
-regenerateButton.label = "Regenerate";
-regenerateButton.materialIcon = "cached";
-regenerateButton.onClick.add(() => {
-  culler.elements.needsUpdate = true;
-});
-
-const visibleCheckbox = new OBC.CheckboxInput(components);
-optionsDrawer.addChild(visibleCheckbox);
-visibleCheckbox.label = "Debug frame visible";
-visibleCheckbox.onChange.add((value: boolean) => {
-  debugFrame.style.visibility = value ? "visible" : "collapse";
-});
+world.renderer.onBeforeUpdate.add(() => stats.begin());
+world.renderer.onAfterUpdate.add(() => stats.end());

temp/core/ScreenCuller/example.ts …s/components/src/core/Cullers/example.tstemp/core/ScreenCuller/example.ts renamed to packages/components/src/core/Cullers/example.ts temp/core/ScreenCuller/example.ts renamed to packages/components/src/core/Cullers/example.ts

@@ -0,0 +1,63 @@
+import { Components } from "../Components";
+import { MeshCullerRenderer, CullerRendererSettings } from "./src";
+import { Component, Event, Disposable, World } from "../Types";
+
+/**
+ * A tool to handle big scenes efficiently by automatically hiding the objects
+ * that are not visible to the camera.
+ */
+export class Cullers extends Component implements Disposable {
+  static readonly uuid = "69f2a50d-c266-44fc-b1bd-fa4d34be89e6" as const;
+
+  private _enabled = true;
+
+  list = new Map<string, MeshCullerRenderer>();
+
+  /** {@link Disposable.onDisposed} */
+  readonly onDisposed = new Event();
+
+  /** {@link Component.enabled} */
+  get enabled() {
+    return this._enabled;
+  }
+
+  set enabled(value: boolean) {
+    this._enabled = value;
+    for (const [_id, renderer] of this.list) {
+      renderer.enabled = value;
+    }
+  }
+
+  constructor(components: Components) {
+    super(components);
+    components.add(Cullers.uuid, this);
+  }
+
+  create(world: World, config?: Partial<CullerRendererSettings>) {
+    if (this.list.has(world.uuid)) {
+      return this.list.get(world.uuid) as MeshCullerRenderer;
+    }
+    const culler = new MeshCullerRenderer(this.components, world, config);
+    this.list.set(world.uuid, culler);
+    return culler;
+  }
+
+  remove(world: World) {
+    const culler = this.list.get(world.uuid);
+    if (culler) {
+      culler.dispose();
+    }
+    this.list.delete(world.uuid);
+  }
+
+  /** {@link Disposable.dispose} */
+  dispose() {
+    this.enabled = false;
+    this.onDisposed.trigger(Cullers.uuid);
+    this.onDisposed.reset();
+    for (const [_id, culler] of this.list) {
+      culler.dispose();
+    }
+    this.list.clear();
+  }
+}

packages/components/src/core/Cullers/index.ts

@@ -1,7 +1,7 @@
 import * as THREE from "three";
-import { Component, Disposable, Event } from "../../../base-types";
 import { Components } from "../../Components";
 import { readPixelsAsync } from "./screen-culler-helper";
+import { Event, World } from "../../Types";
 
 export interface CullerRendererSettings {
   updateInterval?: number;
@@ -13,7 +13,7 @@ export interface CullerRendererSettings {
 /**
  * A base renderer to determine visibility on screen
  */
-export class CullerRenderer extends Component<THREE.WebGLRenderer> {
+export class CullerRenderer {
   /** {@link Disposable.onDisposed} */
   readonly onDisposed = new Event<string>();
 
@@ -39,35 +39,53 @@ export class CullerRenderer extends Component<THREE.WebGLRenderer> {
    */
   renderDebugFrame = false;
 
-  private _width = 512;
-  private _height = 512;
+  components: Components;
+
+  readonly world: World;
+
+  readonly renderer: THREE.WebGLRenderer;
 
   protected autoUpdate = true;
+
   protected updateInterval = 1000;
 
   protected readonly worker: Worker;
 
-  protected readonly renderer: THREE.WebGLRenderer;
-  private readonly renderTarget: THREE.WebGLRenderTarget;
   protected readonly scene = new THREE.Scene();
 
-  private readonly bufferSize: number;
+  private _width = 512;
+
+  private _height = 512;
 
   private _availableColor = 1;
 
+  private readonly renderTarget: THREE.WebGLRenderTarget;
+
+  private readonly bufferSize: number;
+
   private readonly _buffer: Uint8Array;
 
-  constructor(components: Components, settings?: CullerRendererSettings) {
-    super(components);
+  constructor(
+    components: Components,
+    world: World,
+    settings?: CullerRendererSettings,
+  ) {
+    if (!world.renderer) {
+      throw new Error("The given world must have a renderer!");
+    }
+
+    this.components = components;
     this.applySettings(settings);
 
+    this.world = world;
     this.renderer = new THREE.WebGLRenderer();
-    const planes = this.components.renderer.clippingPlanes;
-    this.renderer.clippingPlanes = planes;
+
     this.renderTarget = new THREE.WebGLRenderTarget(this._width, this._height);
     this.bufferSize = this._width * this._height * 4;
     this._buffer = new Uint8Array(this.bufferSize);
 
+    this.renderer.clippingPlanes = world.renderer.clippingPlanes;
+
     const code = `
       addEventListener("message", (event) => {
         const { buffer } = event.data;
@@ -91,15 +109,8 @@ export class CullerRenderer extends Component<THREE.WebGLRenderer> {
     this.worker = new Worker(URL.createObjectURL(blob));
   }
 
-  /**
-   * {@link Component.get}.
-   */
-  get() {
-    return this.renderer;
-  }
-
   /** {@link Disposable.dispose} */
-  async dispose() {
+  dispose() {
     this.enabled = false;
     for (const child of this.scene.children) {
       child.removeFromParent();
@@ -122,7 +133,7 @@ export class CullerRenderer extends Component<THREE.WebGLRenderer> {
     if (!this.enabled) return;
     if (!this.needsUpdate && !force) return;
 
-    const camera = this.components.camera.get();
+    const camera = this.world.camera.three;
     camera.updateMatrix();
 
     this.renderer.setSize(this._width, this._height);
@@ -138,7 +149,7 @@ export class CullerRenderer extends Component<THREE.WebGLRenderer> {
       this._height,
       context.RGBA,
       context.UNSIGNED_BYTE,
-      this._buffer
+      this._buffer,
     );
 
     this.renderer.setRenderTarget(null);