Allocate textures holding color and visibility to be big enough to hold the correct number of tree indices.

viewer/src/__tests__/utils/determinePowerOfTwoDimensions.test.ts

@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2020 Cognite AS
+ */
+
+import { determinePowerOfTwoDimensions } from '../../utils/determinePowerOfTwoDimensions';
+
+test('determinePowerOfTwoDimensions', () => {
+  expect(determinePowerOfTwoDimensions(0)).toEqual({ width: 1, height: 1 });
+  expect(determinePowerOfTwoDimensions(1)).toEqual({ width: 1, height: 1 });
+  expect(determinePowerOfTwoDimensions(2)).toEqual({ width: 2, height: 1 });
+  expect(determinePowerOfTwoDimensions(3)).toEqual({ width: 2, height: 2 });
+  expect(determinePowerOfTwoDimensions(1025)).toEqual({ width: 64, height: 32 });
+  expect(determinePowerOfTwoDimensions(2048)).toEqual({ width: 64, height: 32 });
+  expect(determinePowerOfTwoDimensions(2049)).toEqual({ width: 64, height: 64 });
+  expect(determinePowerOfTwoDimensions(4096 * 4096 - 1)).toEqual({ width: 4096, height: 4096 });
+});

viewer/src/__tests__/views/threejs/sector/consumeSectorSimple.test.ts

@@ -9,7 +9,7 @@ import { consumeSectorSimple } from '../../../../views/threejs/cad/consumeSector
 import { createMaterials } from '../../../../views/threejs/cad/materials';
 import 'jest-extended';
 
-const materials = createMaterials();
+const materials = createMaterials(64);
 
 describe('consumeSectorDetailed', () => {
   const metadata: SectorMetadata = {

viewer/src/__tests__/views/threejs/sector/materials.test.ts

@@ -0,0 +1,14 @@
+/*!
+ * Copyright 2020 Cognite AS
+ */
+
+import { createMaterials } from '../../../../views/threejs/cad/materials';
+
+describe('createMaterials', () => {
+  test('Positive treeIndexCount, creates materials', () => {
+    const materials = createMaterials(32);
+    for (const entry of Object.entries(materials)) {
+      expect(entry[1]).not.toBeNull();
+    }
+  });
+});

viewer/src/__tests__/views/threejs/sector/primitives.test.ts

@@ -8,9 +8,8 @@ import { PrimitiveAttributes } from '../../../../workers/types/parser.types';
 import { createEmptySector } from '../../../models/cad/emptySector';
 import { createMaterials } from '../../../../views/threejs/cad/materials';
 
-const materials = createMaterials();
-
 describe('createPrimitives', () => {
+  const materials = createMaterials(64);
   let emptySector: Sector;
 
   beforeEach(() => {

viewer/src/utils/determinePowerOfTwoDimensions.ts

@@ -0,0 +1,18 @@
+/*!
+ * Copyright 2020 Cognite AS
+ */
+
+/**
+ * Computes minimal power-of-two width and height that holds at least the number of elements provided.
+ * This is useful to compute texture sizes.
+ */
+export function determinePowerOfTwoDimensions(elementCount: number): { width: number; height: number } {
+  const width = Math.max(1, ceilToPowerOfTwo(Math.sqrt(elementCount)));
+  const height = Math.max(1, ceilToPowerOfTwo(elementCount / width));
+  return { width, height };
+}
+
+const log2 = Math.log(2);
+function ceilToPowerOfTwo(v: number): number {
+  return Math.pow(2, Math.ceil(Math.log(v) / log2));
+}

viewer/src/views/threejs/cad/CadNode.ts

@@ -67,7 +67,8 @@ export class CadNode extends THREE.Object3D {
     super();
     this.type = 'CadNode';
     this.name = 'Sector model';
-    this._materialManager = new MaterialManager(options ? options.nodeAppearance : undefined);
+    const treeIndexCount = model.scene.maxTreeIndex + 1;
+    this._materialManager = new MaterialManager(treeIndexCount, options ? options.nodeAppearance : undefined);
 
     const rootSector = new RootSectorNode(model, this._materialManager.materials);
     this._repository = new CachedRepository(model);

viewer/src/views/threejs/cad/MaterialManager.ts

@@ -3,11 +3,7 @@
  */
 
 import { createMaterials, Materials } from './materials';
-import {
-  VisibilityDelegate,
-  ColorDelegate,
-  NodeAppearance
-} from '../../common/cad/NodeAppearance';
+import { VisibilityDelegate, ColorDelegate, NodeAppearance } from '../../common/cad/NodeAppearance';
 
 function updateColors(getColor: ColorDelegate, materials: Materials, treeIndices: number[]) {
   for (const treeIndex of treeIndices) {
@@ -29,8 +25,8 @@ export class MaterialManager {
   public readonly materials: Materials;
   private readonly _options?: NodeAppearance;
 
-  constructor(options?: NodeAppearance) {
-    this.materials = createMaterials();
+  constructor(treeIndexCount: number, options?: NodeAppearance) {
+    this.materials = createMaterials(treeIndexCount);
     this._options = options;
   }
 

viewer/src/views/threejs/cad/materials.ts

@@ -5,6 +5,7 @@
 import * as THREE from 'three';
 import { sectorShaders, shaderDefines } from './shaders';
 import { RenderMode } from '../materials';
+import { determinePowerOfTwoDimensions } from '../../../utils/determinePowerOfTwoDimensions';
 
 export interface Materials {
   // Materials
@@ -28,18 +29,15 @@ export interface Materials {
   overrideVisibilityPerTreeIndex: THREE.DataTexture;
 }
 
-export function createMaterials(): Materials {
-  const pixelCount = 2048;
-  const colorCount = pixelCount * pixelCount;
-  const visibilityCount = pixelCount * pixelCount;
+export function createMaterials(treeIndexCount: number): Materials {
+  const textureDims = determinePowerOfTwoDimensions(treeIndexCount);
+  const textureElementCount = textureDims.width * textureDims.height;
 
-  const colors = new Uint8Array(4 * colorCount);
-  const visibility = new Uint8Array(4 * visibilityCount);
-  for (let i = 0; i < 4 * visibilityCount; i++) {
-    visibility[i] = 255;
-  }
-  const overrideColorPerTreeIndex = new THREE.DataTexture(colors, pixelCount, pixelCount);
-  const overrideVisibilityPerTreeIndex = new THREE.DataTexture(visibility, pixelCount, pixelCount);
+  const colors = new Uint8Array(4 * textureElementCount);
+  const visibility = new Uint8Array(4 * textureElementCount);
+  visibility.fill(255);
+  const overrideColorPerTreeIndex = new THREE.DataTexture(colors, textureDims.width, textureDims.height);
+  const overrideVisibilityPerTreeIndex = new THREE.DataTexture(visibility, textureDims.width, textureDims.height);
 
   const boxMaterial = new THREE.ShaderMaterial({
     name: 'Primitives (Box)',