feat: Add ability to style objects in point clouds (#2104)

* chore(deps): update dependency @cognite/sdk to v7.4.0 (#2160)

Co-authored-by: Renovate Bot <bot@renovateapp.com>

* improvement: remove unused 'headers' for custom data sources and update docs (#2164)

* fix: clearing wrong render target (#2166)

* example: add UI for setting point size type (#2157)

* improvement: Make typescript strict (#2163)

* fix: fix all strict typechecking errors

* improvement: don't return primitive collections if empty

* chore: lint fix

* improvement: make byteOffset 0 if undefined

* improvement: unhackify helper function

* fix: fix that byteOffset fix

* fix: fix type errors for tests

* fix: correct BinaryHeap bevaviour

Co-authored-by: Christopher J. Tannum <christopher.tannum@cognite.com>
Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>

* chore(deps): update dependency @cognite/sdk to v7.5.0 (#2165)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>

* feat: simple styling in the works

* feat: working visualization of pipe system

Pipe data not included

* feat: add simple styling interface for point clouds

Also temporarily add data.ts to allow for testing for people who are not me

* refac: make object style LUT 2D

* refactor: let EPT loader take non-hardcoded object list

* feat: automatically fetch annotations from server on point cloud load

* chore: update Migration example for annotation fetching

* fix: remove unused import

* fix: remove not-yet-available feature

* feat: add arbitrarily oriented boxes as stylable objects

* refactor: some cleanup among stylable shapes

* fix: don't import anything externally to worker

* chore: lint fix

* feat: blend style color with original RGB

* chore: lint fix

* chore: fix LGTM warnings

* chore: update yarn lock

* test: fix constructor in test

* chore: remove unused member variable

* chore: remove unused import

Fixes LGTM error

* fix: make @cognite/sdk-playground a peer dependency

* fix: fix that pesky visual test error

* refactor: factor out default EPT metadata file name

* improvement: make "then" into an "await"

* refactor: refactor annotation translation

* chore: make public variable private-gettable

* fix: correct import path

* fix: refer to private field, not public getter

* refactor: rewrite point cloud buffer parsing

* improvement: be stricter in specifying optional types

* improvement: make use of color constants

* improvement: rewrite 0-vector check

* fix: correct paratheses in shader

* improvement: mappify array transformation

* improvement: make ShapeType an enum

* improvement: remove out-commented import

* chore: lint fix

* fix: make CogniteClientPlayground optionality annotation stricter

* test: add trivial test for CognitePointCloudModel

* fix: add missing creation function file

* refactor: move some responsibility from PointCloudManager to -Factory

* improvement: then -> await

* fix: make indices be of type Uint32

* feat: add fromThreeVector3 utility function

* refactor: parser-worker logic

* improvement: make parse(data) actually return parsed data

* improvement: improve readability

* refactor: simplify primitive translation

* improvement: renamed/simplify objectId assignment

* refactor: change terminology from  "StyledObject" to "StylableObject"

* refactor: simplify Box constructor

* chore: minor cleanup

* improvement: simplify composite bounding box computation

* fix: correct Box constructor call

* fix: repair, please type checker, and lint after merge

* improvement: remove computeBoundingBox for shapes for now

They'll be back for the acceleration structure

* chore: another lint fix

* chore: add warning regarding point-object matching

* refactor: remove "StylableObjectInfo" abstraction

* chore: lint fix

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: Lars Moastuen <lars.moastuen@cognite.com>
Co-authored-by: Christopher J. Tannum <christopher.tannum@cognite.com>
Co-authored-by: cognite-bulldozer[bot] <51074376+cognite-bulldozer[bot]@users.noreply.github.com>

examples/package.json

@@ -28,6 +28,7 @@
     "@azure/msal-browser": "^2.21.0",
     "@cognite/reveal": "link:../viewer/dist",
     "@cognite/sdk": "link:../viewer/node_modules/@cognite/sdk",
+    "@cognite/sdk-playground": "link:../viewer/node_modules/@cognite/sdk-playground",
     "camera-controls": "^1.25.1",
     "dat.gui": "^0.7.7",
     "geo-three": "^0.0.16",

examples/src/pages/Migration.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef } from 'react';
 import { CanvasWrapper } from '../components/styled';
 import { THREE } from '@cognite/reveal';
 import { CogniteClient } from '@cognite/sdk';
+import { CogniteClientPlayground } from '@cognite/sdk-playground';
 import dat from 'dat.gui';
 import {
   Cognite3DViewer,
@@ -27,8 +28,9 @@ import { InspectNodeUI } from '../utils/InspectNodeUi';
 import { CameraUI } from '../utils/CameraUI';
 import { PointCloudUi } from '../utils/PointCloudUi';
 import { ModelUi } from '../utils/ModelUi';
-import { createSDKFromEnvironment } from '../utils/example-helpers';
+import { createPlaygroundSDKFromEnvironment, createSDKFromEnvironment } from '../utils/example-helpers';
 import { PointCloudClassificationFilterUI } from '../utils/PointCloudClassificationFilterUI';
+import { PointCloudObjectStylingUI } from '../utils/PointCloudObjectStylingUI';
 
 
 window.THREE = THREE;
@@ -63,16 +65,22 @@ export function Migration() {
       };
 
       let client: CogniteClient;
+      let clientPlayground: CogniteClientPlayground;
       if (project && environmentParam) {
         client = await createSDKFromEnvironment('reveal.example.example', project, environmentParam);
+        clientPlayground = await createPlaygroundSDKFromEnvironment('reveal.example.example', project, environmentParam);
       } else {
         client = new CogniteClient({ appId: 'reveal.example.example',
                                      project: 'dummy',
                                      getToken: async () => 'dummy' });
+        clientPlayground = new CogniteClientPlayground({ appId: 'reveal.example.example',
+                                                         project: 'dummy',
+                                                         getToken: async () => 'dummy' });
       }
 
       let viewerOptions: Cognite3DViewerOptions = {
         sdk: client,
+        sdkPlayground: clientPlayground,
         domElement: canvasWrapperRef.current!,
         onLoading: progress,
         logMetrics: false,
@@ -182,6 +190,7 @@ export function Migration() {
         } else if (model instanceof CognitePointCloudModel) {
           new PointCloudClassificationFilterUI(gui.addFolder(`Class filter #${modelUi.pointCloudModels.length}`), model);
           pointCloudUi.applyToAllModels();
+          new PointCloudObjectStylingUI(gui.addFolder(`Object styling (${PointCloudObjectStylingUI.MAX_OBJECTS} first objects) #${modelUi.pointCloudModels.length}`), model);
         }
       }
       const modelUi = new ModelUi(gui.addFolder('Models'), viewer, handleModelAdded);
@@ -361,7 +370,7 @@ export function Migration() {
       const inspectNodeUi = new InspectNodeUI(gui.addFolder('Last clicked node'), client, viewer);
 
       viewer.on('click', async (event) => {
-        const { offsetX, offsetY } = event; 
+        const { offsetX, offsetY } = event;
         console.log('2D coordinates', event);
         const intersection = await viewer.getIntersectionFromPixel(offsetX, offsetY);
         if (intersection !== null) {

examples/src/utils/PointCloudObjectStylingUI.ts

@@ -0,0 +1,40 @@
+/*!
+ * Copyright 2022 Cognite AS
+ */
+
+import { CognitePointCloudModel } from '@cognite/reveal';
+import * as THREE from 'three';
+
+export class PointCloudObjectStylingUI {
+
+  static readonly MAX_OBJECTS = 10;
+
+  private readonly _model: CognitePointCloudModel;
+
+  constructor(uiFolder: dat.GUI, model: CognitePointCloudModel) {
+    this._model = model;
+
+    const objects = model.stylableObjects;
+
+    objects.slice(0, PointCloudObjectStylingUI.MAX_OBJECTS).map(obj => this.createObjectUi(uiFolder.addFolder('Object #' + obj.objectId), obj.objectId));
+  }
+
+  createObjectUi(uiFolder: dat.GUI, objectId: number): void {
+    const state = {
+      color: '#ffffff',
+    };
+
+    uiFolder.addColor(state, 'color').name('Color').onFinishChange(color => {
+      this._model.setObjectStyle(objectId, { color: hexStringToColor(color) });
+    });
+  }
+};
+
+
+function hexStringToColor(hexColor: string): [number, number, number] {
+  const threeColor = new THREE.Color(hexColor);
+  return [
+    Math.floor(threeColor.r * 255),
+    Math.floor(threeColor.g * 255),
+    Math.floor(threeColor.b * 255)];
+}

examples/src/utils/example-helpers.ts

@@ -3,6 +3,7 @@
  */
 
 import { CogniteClient } from '@cognite/sdk';
+import { CogniteClientPlayground } from '@cognite/sdk-playground';
 
 import { EventType, PublicClientApplication } from '@azure/msal-browser';
 
@@ -100,15 +101,9 @@ export function getCredentialEnvironment(): CredentialEnvironment | undefined {
   return credentialEnvironmentList.environments[environmentParam];
 }
 
-export async function createSDKFromEnvironment(
-  appId: string,
-  project: string,
-  environmentParam: string): Promise<CogniteClient> {
-
-  const credentialEnvironmentList = JSON.parse(process.env.REACT_APP_CREDENTIAL_ENVIRONMENTS!) as CredentialEnvironmentList;
-  const credentialEnvironment = credentialEnvironmentList.environments[environmentParam];
-
-  const baseUrl = `https://${credentialEnvironment.cluster}.cognitedata.com`;
+async function getTokenSupplier(credentialEnvironment: CredentialEnvironment,
+                                baseUrl: string)
+: Promise<() => Promise<string>> {
   const cdfScopes = [
     `${baseUrl}/user_impersonation`,
     `${baseUrl}/IDENTITY`
@@ -172,10 +167,46 @@ export async function createSDKFromEnvironment(
     return accessToken;
   }
 
+  return getToken;
+}
+
+export async function createSDKFromEnvironment(
+  appId: string,
+  project: string,
+  environmentParam: string): Promise<CogniteClient> {
+
+  const credentialEnvironmentList = JSON.parse(process.env.REACT_APP_CREDENTIAL_ENVIRONMENTS!) as CredentialEnvironmentList;
+  const credentialEnvironment = credentialEnvironmentList.environments[environmentParam];
+
+  const baseUrl = `https://${credentialEnvironment.cluster}.cognitedata.com`;
+
+  const getToken = await getTokenSupplier(credentialEnvironment, baseUrl);
+
   const client = new CogniteClient({ appId,
                                      project,
                                      getToken,
-                                     baseUrl});
+                                     baseUrl });
+  await client.authenticate();
+  return client;
+}
+
+export async function createPlaygroundSDKFromEnvironment(
+  appId: string,
+  project: string,
+  environmentParam: string): Promise<CogniteClientPlayground> {
+
+
+  const credentialEnvironmentList = JSON.parse(process.env.REACT_APP_CREDENTIAL_ENVIRONMENTS!) as CredentialEnvironmentList;
+  const credentialEnvironment = credentialEnvironmentList.environments[environmentParam];
+
+  const baseUrl = `https://${credentialEnvironment.cluster}.cognitedata.com`;
+
+  const getToken = await getTokenSupplier(credentialEnvironment, baseUrl);
+
+  const client = new CogniteClientPlayground({ appId,
+                                               project,
+                                               getToken,
+                                               baseUrl });
   await client.authenticate();
   return client;
 }

viewer/core/src/public/createRevealManager.ts

@@ -28,6 +28,7 @@ import {
 
 import { CogniteClient } from '@cognite/sdk';
 import { SceneHandler } from '@reveal/utilities';
+import { CogniteClientPlayground } from '@cognite/sdk-playground';
 
 /**
  * Used to create an instance of reveal manager that works with localhost.
@@ -60,12 +61,14 @@ export function createLocalRevealManager(
  * @param renderer
  * @param sceneHandler
  * @param revealOptions
+ * @param sdkClientPlayground
  */
 export function createCdfRevealManager(
   client: CogniteClient,
   renderer: THREE.WebGLRenderer,
   sceneHandler: SceneHandler,
-  revealOptions: RevealOptions = {}
+  revealOptions: RevealOptions = {},
+  sdkClientPlayground?: CogniteClientPlayground | undefined
 ): RevealManager {
   const applicationId = getSdkApplicationId(client);
   const modelMetadataProvider = new CdfModelMetadataProvider(client);
@@ -77,7 +80,8 @@ export function createCdfRevealManager(
     modelDataProvider,
     renderer,
     sceneHandler,
-    revealOptions
+    revealOptions,
+    sdkClientPlayground
   );
 }
 
@@ -91,6 +95,7 @@ export function createCdfRevealManager(
  * @param renderer
  * @param sceneHandler
  * @param revealOptions
+ * @param sdkPlayground
  */
 export function createRevealManager(
   project: string,
@@ -99,7 +104,8 @@ export function createRevealManager(
   modelDataProvider: ModelDataProvider,
   renderer: THREE.WebGLRenderer,
   sceneHandler: SceneHandler,
-  revealOptions: RevealOptions = {}
+  revealOptions: RevealOptions = {},
+  sdkPlayground?: CogniteClientPlayground | undefined
 ): RevealManager {
   MetricsLogger.init(revealOptions.logMetrics !== false, project, applicationId, {
     constructorOptions: revealOptions
@@ -123,7 +129,8 @@ export function createRevealManager(
     modelMetadataProvider,
     modelDataProvider,
     sceneHandler.scene,
-    renderer
+    renderer,
+    sdkPlayground
   );
   sceneHandler.customObjects.push(pointCloudManager.pointCloudGroupWrapper);
   const cadManager = createCadManager(

viewer/core/src/public/migration/Cognite3DViewer.ts

@@ -248,7 +248,8 @@ export class Cognite3DViewer {
         this._renderer,
         this._sceneHandler,
         revealOptions,
-        options.sdk
+        options.sdk,
+        options.sdkPlayground
       );
     }
 

viewer/core/src/public/migration/types.ts

@@ -3,6 +3,7 @@
  */
 
 import { CogniteClient } from '@cognite/sdk';
+import { CogniteClientPlayground } from '@cognite/sdk-playground';
 
 import { CadModelBudget, SectorCuller } from '@reveal/cad-geometry-loaders';
 import { PointCloudBudget, PointCloudIntersection } from '@reveal/pointclouds';
@@ -38,6 +39,8 @@ export interface Cognite3DViewerOptions {
   /** Initialized connection to CDF used to load data. */
   sdk: CogniteClient;
 
+  sdkPlayground?: CogniteClientPlayground;
+
   /** An existing DOM element that we will render canvas into. */
   domElement?: HTMLElement;
 

viewer/core/src/storage/RevealManagerHelper.ts

@@ -15,6 +15,7 @@ import { assertNever, SceneHandler } from '@reveal/utilities';
 import { CadNode } from '@reveal/rendering';
 
 import { CogniteClient } from '@cognite/sdk';
+import { CogniteClientPlayground } from '@cognite/sdk-playground';
 
 /**
  * Helper for {@link RevealManager} for creating a uniform interface for
@@ -76,9 +77,10 @@ export class RevealManagerHelper {
     renderer: THREE.WebGLRenderer,
     sceneHandler: SceneHandler,
     revealOptions: RevealOptions,
-    sdkClient: CogniteClient
+    sdkClient: CogniteClient,
+    sdkClientPlayground?: CogniteClientPlayground
   ): RevealManagerHelper {
-    const revealManager = createCdfRevealManager(sdkClient, renderer, sceneHandler, revealOptions);
+    const revealManager = createCdfRevealManager(sdkClient, renderer, sceneHandler, revealOptions, sdkClientPlayground);
     return new RevealManagerHelper('cdf', revealManager);
   }
 

viewer/index.ts

@@ -55,4 +55,4 @@ export {
 } from './packages/utilities';
 
 export { Cognite3DModel, BoundingBoxClipper, GeometryFilter, WellKnownUnit } from './packages/cad-model';
-export { CognitePointCloudModel } from './packages/pointclouds';
+export { CognitePointCloudModel, PointCloudAppearance } from './packages/pointclouds';

viewer/package.json

@@ -66,6 +66,7 @@
     "@azure/msal-browser": "2.24.0",
     "@cognite/sdk": "7.5.0",
     "@cognite/sdk-core": "^4.1.1",
+    "@cognite/sdk-playground": "^5.1.3",
     "@types/dat.gui": "0.7.7",
     "@types/jest": "27.5.1",
     "@types/jsdom": "16.2.14",
@@ -124,7 +125,8 @@
   },
   "peerDependencies": {
     "@cognite/sdk": "^5.0.0 || ^6.0.0 || ^7.0.0",
-    "@cognite/sdk-core": "^4.1.0"
+    "@cognite/sdk-core": "^4.1.0",
+    "@cognite/sdk-playground": "^5.0.0"
   },
   "glslify": {
     "transform": [

viewer/packages/pointclouds/index.ts

@@ -20,3 +20,5 @@ export { PotreeNodeWrapper } from './src/PotreeNodeWrapper';
 export { PotreeGroupWrapper } from './src/PotreeGroupWrapper';
 
 export { Potree, PointCloudOctree } from './src/PotreePnextLoader';
+
+export { PointCloudAppearance } from './src/styling/PointCloudAppearance';

viewer/packages/pointclouds/src/CognitePointCloudModel.test.ts

@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2022 Cognite AS
+ */
+
+import { createPointCloudModel } from '../../../test-utilities/src/createPointCloudModel';
+import { CognitePointCloudModel } from './CognitePointCloudModel';
+
+describe(CognitePointCloudModel.name, () => {
+  let model: CognitePointCloudModel;
+
+  beforeEach(() => {
+    model = createPointCloudModel(1, 2);
+  });
+
+  test('Default CognitePointCloudModel does not contain annotations', () => {
+    expect(model.stylableObjects).toHaveLength(0);
+  });
+});