WEB-695 Batching Maintenance (#2182)

* Starting to tackle WBX-397 by taking a different approach on computing draw ranges * WIP * Range computation is more or less done. Material indices still need a more robust approach * Range material indices figured out mostly by trating them as edges in a graph. Also some profiling to max out pergf * Added forward and backwards material index edges in order to be able to directly look them up rather than searching for them in an array * Extended the new draw range integration approach to instanced batches * Added vitest and wrote a first test for the DrawRange integration approach. Fixed some cicular dependencie which were messing up vitest runtime. * A bunch of more tests * Removed unused dep * ci(viewer): test the viewer in CircleCI * Include test-viewer as a dependency of later jobs * Small updates * Removed old range integration from all three batches * Working on making the range update integration work on an array at a time * Update range integration now works on entire arrays at a time. Almost twice as fast this way. Updates tests * DrawRanges now also flattens the computed draw ranges, so we got rid of the old ugly way of flattening the ranges. Update MeshBatch, PointBatch and InstancedMeshBatch * More adjustment to point batch * Implemented a common PrimitiveBatch which can be used for any typical primitive based rendering (triangles, lines, points) as abstract. Our Mesh and Point batch will use most of the common implementation. Updated MeshBatch to extend PrimitiveBatch * Updated PointBatch to extend PrimitiveBatch * Tried making the instaned mesh batch extend the primitive batch but there was no point, they too different to make sense. Got rid of the pointless circular dependency between the instaned batch and mesh * fixed viewer build * Removed unused code and execution time measurements --------- Co-authored-by: Iain Sproat <[email protected]> Co-authored-by: Kristaps Fabians Geikins <[email protected]>
specklesystems · Apr 2, 2024 · 9c481a2 · 9c481a2
1 parent 752a919
commit 9c481a2
Show file tree

Hide file tree

Showing 31 changed files with 1,804 additions and 1,726 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -25,6 +25,9 @@ workflows:
       - test-frontend-2:
           filters: *filters-allow-all
 
+      - test-viewer:
+          filters: *filters-allow-all
+
       - test-ui-components:
           filters: *filters-allow-all
 
@@ -54,6 +57,7 @@ workflows:
             - pre-commit
             - deployment-testing-approval
             - test-frontend-2
+            - test-viewer
             - test-server
             - docker-build-server
             - docker-build-frontend
@@ -72,6 +76,7 @@ workflows:
             - pre-commit
             - deployment-testing-approval
             - test-frontend-2
+            - test-viewer
             - test-server
             - docker-build-server
             - docker-build-frontend
@@ -163,6 +168,7 @@ workflows:
             - pre-commit
             - publish-approval
             - test-frontend-2
+            - test-viewer
             - test-server
 
       - docker-publish-frontend:
@@ -174,6 +180,7 @@ workflows:
             - pre-commit
             - publish-approval
             - test-frontend-2
+            - test-viewer
             - test-server
 
       - docker-publish-frontend-2:
@@ -185,6 +192,7 @@ workflows:
             - pre-commit
             - publish-approval
             - test-frontend-2
+            - test-viewer
             - test-server
 
       - docker-publish-webhooks:
@@ -196,6 +204,7 @@ workflows:
             - pre-commit
             - publish-approval
             - test-frontend-2
+            - test-viewer
             - test-server
 
       - docker-publish-file-imports:
@@ -207,6 +216,7 @@ workflows:
             - pre-commit
             - publish-approval
             - test-frontend-2
+            - test-viewer
             - test-server
 
       - docker-publish-previews:
@@ -218,6 +228,7 @@ workflows:
             - pre-commit
             - publish-approval
             - test-frontend-2
+            - test-viewer
             - test-server
 
       - docker-publish-test-container:
@@ -229,6 +240,7 @@ workflows:
             - pre-commit
             - publish-approval
             - test-frontend-2
+            - test-viewer
             - test-server
 
       - docker-publish-monitor-container:
@@ -240,6 +252,7 @@ workflows:
             - pre-commit
             - publish-approval
             - test-frontend-2
+            - test-viewer
             - test-server
 
       - docker-publish-docker-compose-ingress:
@@ -290,6 +303,7 @@ workflows:
             - test-server
             - test-ui-components
             - test-frontend-2
+            - test-viewer
 
 jobs:
   get-version:
@@ -496,6 +510,45 @@ jobs:
           command: yarn lint
           working_directory: 'packages/frontend-2'
 
+  test-viewer:
+    docker: &docker-node-browsers-image
+      - image: cimg/node:18.19.0-browsers
+    resource_class: large
+    steps:
+      - checkout
+      - restore_cache:
+          name: Restore Yarn Package Cache
+          keys:
+            - yarn-packages-server-{{ checksum "yarn.lock" }}
+      - run:
+          name: Install Dependencies
+          command: yarn
+
+      - run:
+          name: Install Dependencies v2 (.node files missing bug)
+          command: yarn
+
+      - save_cache:
+          name: Save Yarn Package Cache
+          key: yarn-packages-server-{{ checksum "yarn.lock" }}
+          paths:
+            - .yarn/cache
+            - .yarn/unplugged
+
+      - run:
+          name: Build public packages
+          command: yarn build:public
+
+      - run:
+          name: Lint everything
+          command: yarn lint
+          working_directory: 'packages/viewer'
+
+      - run:
+          name: Run tests
+          command: yarn test
+          working_directory: 'packages/viewer'
+
   test-ui-components:
     docker: *docker-node-browsers-image
     resource_class: xlarge

diff --git a/packages/viewer-sandbox/src/main.ts b/packages/viewer-sandbox/src/main.ts
@@ -5,7 +5,10 @@ import {
   SelectionEvent,
   ViewerEvent,
   DebugViewer,
-  Viewer
+  Viewer,
+  Batch,
+  DrawRanges,
+  SpeckleBasicMaterial
 } from '@speckle/viewer'
 
 import './style.css'
@@ -20,6 +23,10 @@ import {
 } from '@speckle/viewer'
 import { SectionTool } from '@speckle/viewer'
 import { SectionOutlines } from '@speckle/viewer'
+import { BoxSelection } from './Extensions/BoxSelection'
+import { GeometryType } from '@speckle/viewer'
+import { SpeckleStandardMaterial } from '@speckle/viewer'
+import { Color, FrontSide } from 'three'
 
 const createViewer = async (containerName: string, stream: string) => {
   const container = document.querySelector<HTMLElement>(containerName)
@@ -51,7 +58,7 @@ const createViewer = async (containerName: string, stream: string) => {
   const filtering = viewer.createExtension(FilteringExtension)
   const explode = viewer.createExtension(ExplodeExtension)
   const diff = viewer.createExtension(DiffExtension)
-  // const boxSelect = viewer.createExtension(BoxSelection)
+  const boxSelect = viewer.createExtension(BoxSelection)
   // const rotateCamera = viewer.createExtension(RotateCamera)
   cameraController // use it
   selection // use it
@@ -91,6 +98,97 @@ const createViewer = async (containerName: string, stream: string) => {
     Object.assign(sandbox.sceneParams.worldSize, viewer.World.worldSize)
     Object.assign(sandbox.sceneParams.worldOrigin, viewer.World.worldOrigin)
     sandbox.refresh()
+
+    const meshBatch = viewer
+      .getRenderer()
+      .batcher.getBatches(undefined, GeometryType.MESH)
+      .find((batch: Batch) => batch.renderViews.length > 2)
+    // const geom = meshBatch.mesh.geometry
+    // geom.groups.length = 0
+    // geom.addGroup(0, 216, 0)
+    // geom.addGroup(216, 1323, 0)
+    // geom.addGroup(1539, 540, 0)
+    // geom.addGroup(2079, 32268, 0)
+
+    // const material = new SpeckleStandardMaterial(
+    //   {
+    //     color: new Color('#00ff00'),
+    //     emissive: 0x0,
+    //     roughness: 1,
+    //     metalness: 0,
+    //     opacity: 1,
+    //     side: FrontSide
+    //   },
+    //   ['USE_RTE']
+    // )
+    // meshBatch.setDrawRanges(
+    //   {
+    //     offset: 36,
+    //     count: 36,
+    //     material
+    //   }
+    //   {
+    //     offset: 180,
+    //     count: 1395,
+    //     material
+    //   },
+    //   {
+    //     offset: 1581,
+    //     count: 32766,
+    //     material
+    //   }
+    // )
+    // const material = new SpeckleStandardMaterial(
+    //   {
+    //     color: new Color('#00ff00'),
+    //     emissive: 0x0,
+    //     roughness: 1,
+    //     metalness: 0,
+    //     opacity: 1,
+    //     side: FrontSide
+    //   },
+    //   ['USE_RTE']
+    // )
+    // meshBatch.setDrawRanges(
+    //   {
+    //     offset: 9018,
+    //     count: 36,
+    //     material
+    //   },
+    //   {
+    //     offset: 13878,
+    //     count: 36,
+    //     material
+    //   }
+    // )
+    // const material0 = new SpeckleBasicMaterial({ color: 0xff0000 })
+    // const material1 = new SpeckleBasicMaterial({ color: 0x00ff00 })
+    // let groups = [
+    //   {
+    //     start: 0,
+    //     count: 1350,
+    //     materialIndex: 0
+    //   }
+    // ]
+
+    // const drawRange = new DrawRanges()
+
+    // groups = drawRange.integrateRanges(
+    //   groups,
+    //   [material0, material1],
+    //   [
+    //     {
+    //       offset: 0,
+    //       count: 258,
+    //       material: material1
+    //     },
+    //     {
+    //       offset: 258,
+    //       count: 1032,
+    //       material: material1
+    //     }
+    //   ]
+    // )
   })
 
   viewer.on(ViewerEvent.UnloadComplete, () => {
@@ -249,7 +347,7 @@ const getStream = () => {
     // 'https://latest.speckle.dev/streams/f92e060177/commits/038a587267'
     // 'https://latest.speckle.dev/streams/3f895e614f/commits/8a3e424997'
     // 'https://latest.speckle.dev/streams/f92e060177/commits/f51ee777d5'
-    // 'https://latest.speckle.dev/streams/f92e060177/commits/bbd821e3a1'
+    'https://latest.speckle.dev/streams/f92e060177/commits/bbd821e3a1'
     // Big curves
     // 'https://latest.speckle.dev/streams/c1faab5c62/commits/49dad07ae2'
     // 'https://speckle.xyz/streams/7ce9010d71/commits/afda4ffdf8'
@@ -296,6 +394,7 @@ const getStream = () => {
     // 'https://speckle.xyz/streams/88307505eb/objects/a232d760059046b81ff97e6c4530c985'
     // Airport
     // 'https://latest.speckle.dev/streams/92b620fb17/commits/dfb9ca025d'
+    // 'https://latest.speckle.dev/streams/92b620fb17/objects/cf8838025d9963b342b09da8de0f8b6b'
     // 'Blocks with elements
     // 'https://latest.speckle.dev/streams/e258b0e8db/commits/00e165cc1c'
     // 'https://latest.speckle.dev/streams/e258b0e8db/commits/e48cf53add'
@@ -372,7 +471,18 @@ const getStream = () => {
 
     // Rebar
     // 'https://speckle.xyz/streams/b4086833f8/commits/94df4c6d16?overlay=c5b9c260ea,e3dc287d61,eaedd7d0a5,7f126ce0dd,02fee34ce3,9bda31611f,110282c4db,533c311e29,bf6814d779,1ba52affcf,cc4e75125e,3fd628e4e3'
-    'http://127.0.0.1:3000/streams/30b75f0dea/objects/db765ed44ae10176c0bf8ba60d1ce67d'
+    // Nice towers
+    // 'https://latest.speckle.dev/streams/f4efe4bd7f/objects/5083dffc2ce54ce64c1fc4fab48ca877'
+    // 'http://127.0.0.1:3000/streams/30b75f0dea/objects/db765ed44ae10176c0bf8ba60d1ce67d'
+
+    // 'https://speckle.xyz/streams/7b253e5c4c/commits/025fcbb9cf'
+    // BIG railway
+    // 'https://latest.speckle.dev/streams/a64b432b34/commits/cf7725e404'
+    // 'https://latest.speckle.dev/streams/a64b432b34/objects/1806cb8082a4202b01d97601b6e19af8'
+    // 'https://latest.speckle.dev/streams/a64b432b34/objects/a7ab2388948594e89f838f3026b89839'
+    // 'https://latest.speckle.dev/streams/a64b432b34/commits/99d809460a'
+    // Bunch a doors
+    // 'https://latest.speckle.dev/streams/a64b432b34/commits/c184ba7d88'
   )
 }
 

diff --git a/packages/viewer/package.json b/packages/viewer/package.json
@@ -37,7 +37,10 @@
     "build:dev": "rollup --config",
     "dev": "rollup --config --watch",
     "prepack": "yarn build",
-    "lint": "eslint . --ext .js,.ts"
+    "lint": "eslint . --ext .js,.ts",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
   },
   "author": "AEC Systems",
   "license": "Apache-2.0",
@@ -74,16 +77,19 @@
     "@types/three": "^0.136.0",
     "@typescript-eslint/eslint-plugin": "^5.39.0",
     "@typescript-eslint/parser": "^5.39.0",
+    "@vitest/ui": "^1.4.0",
     "core-js": "^3.21.1",
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
+    "jsdom": "^24.0.0",
     "prettier": "^2.5.1",
     "regenerator-runtime": "^0.13.7",
     "rollup": "^2.70.1",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "typescript": "^4.5.4"
+    "typescript": "^4.5.4",
+    "vitest": "^1.4.0"
   },
   "gitHead": "5627e490f9a3ecadf19cc4686ad15f344d9ad2d3"
 }
diff --git a/packages/viewer/rollup.config.js b/packages/viewer/rollup.config.js
@@ -30,7 +30,8 @@ const config = {
     typescript2({
       tsconfigOverride: {
         sourceMap: sourcemap
-      }
+      },
+      tsconfig: './tsconfig.build.json'
     }),
     babel({
       extensions: [...DEFAULT_EXTENSIONS, '.ts', '.tsx'],

diff --git a/packages/viewer/src/IViewer.ts b/packages/viewer/src/IViewer.ts
@@ -125,6 +125,17 @@ export enum UpdateFlags {
   CLIPPING_PLANES = 0b100
 }
 
+export interface MaterialOptions {
+  stencilOutlines?: StencilOutlineType
+  pointSize?: number
+  depthWrite?: number
+}
+export enum StencilOutlineType {
+  NONE,
+  OVERLAY,
+  OUTLINE_ONLY
+}
+
 export interface IViewer {
   get input(): Input
   get Utils(): Utils

diff --git a/packages/viewer/src/index.ts b/packages/viewer/src/index.ts
@@ -64,7 +64,7 @@ import { LegacyViewer } from './modules/LegacyViewer'
 import { SpeckleType } from './modules/loaders/GeometryConverter'
 import Input, { InputEvent } from './modules/input/Input'
 import { GeometryType } from './modules/batching/Batch'
-import MeshBatch from './modules/batching/MeshBatch'
+import { MeshBatch } from './modules/batching/MeshBatch'
 import SpeckleStandardMaterial from './modules/materials/SpeckleStandardMaterial'
 import SpeckleTextMaterial from './modules/materials/SpeckleTextMaterial'
 import { SpeckleText } from './modules/objects/SpeckleText'