Tech/1877/update three js (#1899)

* Update three.js 0.124 to 0.126.1

* Update Changelog

* EffectComposer location change

* fix: add three types to the package.json

Three.js moved their types to definitely typed. This adds the
required module.

* refactor: change async code to sync code

The API changed and should be handled accordingly.

* fix: add a debounce time to improve e2e test stability

* chore: fix BufferGeometry building highlight

* Migrate line Geometry implementation to r127 #1877

CHANGELOG.md

@@ -7,9 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/)
 
 ## [unreleased] (Added 🚀 | Changed | Removed 🗑 | Fixed 🐞 | Chore 👨‍💻 👩‍💻)
 
-### Fixed 🐞
+### Chore 👨‍💻 👩‍💻
 
--   Fix labels and lines missing a connection in some cases([#1716](https://github.com/MaibornWolff/codecharta/issues/1716))
+-   Fix breaking changes with newest three-js version([#1877](https://github.com/MaibornWolff/codecharta/issues/1877))
 
 ## [1.72.0] - 2021-04-22
 

visualization/app/codeCharta/ui/codeMap/codeMap.label.service.spec.ts

@@ -252,7 +252,10 @@ describe("CodeMapLabelService", () => {
 			codeMapLabelService.addLabel(sampleLeaf, { showNodeName: true, showNodeMetric: true })
 
 			const originalSpritePositionsA = codeMapLabelService["labels"][0].sprite.position.clone()
-			const originalLineGeometryStartVertices = codeMapLabelService["labels"][0].line.geometry["vertices"][0].clone()
+
+			const lineGeometry = codeMapLabelService["labels"][0].line.geometry as BufferGeometry
+
+			const originalLineGeometryStartVertices = lineGeometry.attributes.position.clone()
 
 			const scaledLabelA = codeMapLabelService["labels"][0]
 			const scaledLabelB = codeMapLabelService["labels"][1]
@@ -266,9 +269,9 @@ describe("CodeMapLabelService", () => {
 			)
 
 			const expectedScaledLineGeometryStart = new Vector3(
-				originalLineGeometryStartVertices.x * SX,
-				originalLineGeometryStartVertices.y * SY,
-				originalLineGeometryStartVertices.z * SZ
+				originalLineGeometryStartVertices.getX(0) * SX,
+				originalLineGeometryStartVertices.getY(0) * SY,
+				originalLineGeometryStartVertices.getZ(0) * SZ
 			)
 
 			codeMapLabelService.scale()
@@ -296,13 +299,16 @@ describe("CodeMapLabelService", () => {
 			expect(scaledLabel.sprite.position.y).toBe(expectedSpritePositions.y)
 			expect(scaledLabel.sprite.position.z).toBe(expectedSpritePositions.z)
 
-			expect(scaledLabel.line.geometry.vertices[0].x).toBe(expectedScaledLineGeometryStart.x)
-			expect(scaledLabel.line.geometry.vertices[0].y).toBe(expectedScaledLineGeometryStart.y)
-			expect(scaledLabel.line.geometry.vertices[0].z).toBe(expectedScaledLineGeometryStart.z)
+			const lineGeometry = scaledLabel.line.geometry as BufferGeometry
+			const scaledLabelPos = lineGeometry.attributes.position
+
+			expect(scaledLabelPos.getX(0)).toBe(expectedScaledLineGeometryStart.x)
+			expect(scaledLabelPos.getY(0)).toBe(expectedScaledLineGeometryStart.y)
+			expect(scaledLabelPos.getZ(0)).toBe(expectedScaledLineGeometryStart.z)
 
-			expect(scaledLabel.line.geometry.vertices[1].x).toBe(expectedSpritePositions.x)
-			expect(scaledLabel.line.geometry.vertices[1].y).toBe(expectedSpritePositions.y)
-			expect(scaledLabel.line.geometry.vertices[1].z).toBe(expectedSpritePositions.z)
+			expect(scaledLabelPos.getX(1)).toBe(expectedSpritePositions.x)
+			expect(scaledLabelPos.getY(1)).toBe(expectedSpritePositions.y)
+			expect(scaledLabelPos.getZ(1)).toBe(expectedSpritePositions.z)
 		}
 	})
 

visualization/app/codeCharta/ui/codeMap/codeMap.label.service.ts

@@ -1,4 +1,4 @@
-import { Sprite, Vector3, Box3, Sphere, LineBasicMaterial, Line, Geometry, LinearFilter, Texture, SpriteMaterial, Color } from "three"
+import { Sprite, Vector3, Box3, Sphere, LineBasicMaterial, Line, BufferGeometry, LinearFilter, Texture, SpriteMaterial, Color } from "three"
 import { LayoutAlgorithm, Node } from "../../codeCharta.model"
 import { CameraChangeSubscriber, ThreeOrbitControlsService } from "./threeViewer/threeOrbitControlsService"
 import { ThreeCameraService } from "./threeViewer/threeCameraService"
@@ -170,9 +170,18 @@ export class CodeMapLabelService implements CameraChangeSubscriber {
 			label.sprite.position.sub(labelHeightDifference).multiply(multiplier).add(labelHeightDifference)
 
 			// Attribute vertices does exist on geometry but it is missing in the mapping file for TypeScript.
-			label.line.geometry["vertices"][0].multiply(multiplier)
-			label.line.geometry["vertices"][1] = label.sprite.position
-			label.line.geometry.translate(0, 0, 0)
+			const lineGeometry = label.line.geometry as BufferGeometry
+			const lineGeometryPosition = lineGeometry.attributes.position
+
+			lineGeometryPosition.setX(0, lineGeometryPosition.getX(0) * multiplier.x)
+			lineGeometryPosition.setY(0, lineGeometryPosition.getY(0) * multiplier.y)
+			lineGeometryPosition.setZ(0, lineGeometryPosition.getZ(0) * multiplier.z)
+
+			lineGeometryPosition.setX(1, label.sprite.position.x)
+			lineGeometryPosition.setY(1, label.sprite.position.y)
+			lineGeometryPosition.setZ(1, label.sprite.position.z)
+
+			lineGeometryPosition.needsUpdate = true
 		}
 
 		this.previousScaling.copy(scaling)
@@ -275,9 +284,11 @@ export class CodeMapLabelService implements CameraChangeSubscriber {
 			linewidth: 2
 		})
 
-		const geometry = new Geometry()
-		geometry.vertices.push(new Vector3(x, yOrigin, z), new Vector3(x, y + this.LABEL_HEIGHT_POSITION, z))
+		const bufferGeometry = new BufferGeometry().setFromPoints([
+			new Vector3(x, yOrigin, z),
+			new Vector3(x, y + this.LABEL_HEIGHT_POSITION, z)
+		])
 
-		return new Line(geometry, material)
+		return new Line(bufferGeometry, material)
 	}
 }

visualization/app/codeCharta/ui/codeMap/codeMap.mouseEvent.service.spec.ts

@@ -30,7 +30,7 @@ import { setIdToNode } from "../../state/store/lookUp/idToNode/idToNode.actions"
 import { klona } from "klona"
 import { CodeMapLabelService } from "./codeMap.label.service"
 import { CodeMapMesh } from "./rendering/codeMapMesh"
-import { Geometry, Material, Object3D, Raycaster, Vector3 } from "three"
+import { BufferGeometry, Material, Object3D, Raycaster, Vector3 } from "three"
 import { CodeMapPreRenderService } from "./codeMap.preRender.service"
 import { LazyLoader } from "../../util/lazyLoader"
 
@@ -360,8 +360,9 @@ describe("codeMapMouseEventService", () => {
 			labelNode.translateX(-4)
 			labelNode.translateY(5)
 
-			const lineGeometry = new Geometry()
-			lineGeometry.vertices.push(new Vector3(2, 2, 2), new Vector3(1, 1, 1))
+			const points = [new Vector3(2, 2, 2), new Vector3(1, 1, 1)]
+
+			const lineGeometry = new BufferGeometry().setFromPoints(points)
 			placeholderLine["geometry"] = lineGeometry
 
 			labels.push(label, placeholderLine, labelNode, placeholderLine)

visualization/app/codeCharta/ui/codeMap/rendering/codeMapMesh.ts

@@ -3,7 +3,7 @@ import { GeometryGenerator } from "./geometryGenerator"
 import { CodeMapGeometricDescription } from "./codeMapGeometricDescription"
 import { CodeMapBuilding } from "./codeMapBuilding"
 import { Node, State } from "../../../codeCharta.model"
-import { Camera, Mesh, Ray, ShaderMaterial, UniformsLib, UniformsUtils, Vector3 } from "three"
+import { BufferAttribute, Camera, Mesh, Ray, ShaderMaterial, UniformsLib, UniformsUtils, Vector3 } from "three"
 import { TreeMapHelper } from "../../../util/algorithm/treeMapLayout/treeMapHelper"
 
 export interface MousePos {
@@ -168,26 +168,32 @@ export class CodeMapMesh {
 	}
 
 	private setVertexColor(id: number, newColorVector: Vector3, newDeltaColorVector) {
-		const numberOfColorFieldsPerBuilding = CodeMapMesh.NUM_OF_COLOR_VECTOR_FIELDS * CodeMapMesh.NUM_OF_VERTICES
+		//!Note  this function is called a lot of times see highlightBuilding , maybe bulk update the color and delta colors
+		const numberOfColorFieldsPerBuilding = CodeMapMesh.NUM_OF_VERTICES
 		const positionOfFirstColorEntry = id * numberOfColorFieldsPerBuilding
-		for (
-			let index = positionOfFirstColorEntry;
-			index < positionOfFirstColorEntry + numberOfColorFieldsPerBuilding;
-			index += CodeMapMesh.NUM_OF_COLOR_VECTOR_FIELDS
-		) {
-			this.threeMesh.geometry["attributes"].color.array[index] = newColorVector.x
-			this.threeMesh.geometry["attributes"].color.array[index + 1] = newColorVector.y
-			this.threeMesh.geometry["attributes"].color.array[index + 2] = newColorVector.z
-
-			this.threeMesh.geometry["attributes"].deltaColor.array[index] = newDeltaColorVector.x
-			this.threeMesh.geometry["attributes"].deltaColor.array[index + 1] = newDeltaColorVector.y
-			this.threeMesh.geometry["attributes"].deltaColor.array[index + 2] = newDeltaColorVector.z
+
+		const colorAttribute = this.threeMesh.geometry.getAttribute("color") as BufferAttribute
+		const deltaAttribute = this.threeMesh.geometry.getAttribute("deltaColor") as BufferAttribute
+
+		for (let index = positionOfFirstColorEntry; index < positionOfFirstColorEntry + numberOfColorFieldsPerBuilding; index += 1) {
+			colorAttribute.setXYZ(index, newColorVector.x, newColorVector.y, newColorVector.z)
+			deltaAttribute.setXYZ(index, newDeltaColorVector.x, newDeltaColorVector.y, newDeltaColorVector.z)
 		}
+
+		//!Note this can be used to update only the needed range => faster rendering
+		//!     maybe return the offset and count, build the union of the result, and
+		//!     use next lines inside updateVertices ?
+
+		/*colorAttribute.updateRange.offset = positionOfFirstColorEntry
+		colorAttribute.updateRange.count = numberOfColorFieldsPerBuilding
+
+		deltaAttribute.updateRange.offset = positionOfFirstColorEntry
+		deltaAttribute.updateRange.count = numberOfColorFieldsPerBuilding*/
 	}
 
 	private updateVertices() {
-		this.threeMesh.geometry["attributes"].color.needsUpdate = true
-		this.threeMesh.geometry["attributes"].deltaColor.needsUpdate = true
+		this.threeMesh.geometry.getAttribute("color").needsUpdate = true
+		this.threeMesh.geometry.getAttribute("deltaColor").needsUpdate = true
 	}
 
 	dispose() {

visualization/app/codeCharta/ui/codeMap/threeViewer/threeSceneService.spec.ts

@@ -19,7 +19,7 @@ import { CodeMapNode } from "../../../codeCharta.model"
 import { setIdToBuilding } from "../../../state/store/lookUp/idToBuilding/idToBuilding.actions"
 import { setIdToNode } from "../../../state/store/lookUp/idToNode/idToNode.actions"
 import { setScaling } from "../../../state/store/appSettings/scaling/scaling.actions"
-import { Box3, Geometry, Group, Material, Matrix4, Object3D, Raycaster, Vector3 } from "three"
+import { Box3, BufferGeometry, Group, Material, Matrix4, Object3D, Raycaster, Vector3 } from "three"
 
 describe("ThreeSceneService", () => {
 	let threeSceneService: ThreeSceneService
@@ -271,10 +271,12 @@ describe("ThreeSceneService", () => {
 			otherNode = new Object3D()
 			label = new Object3D()
 			placeholderLine = new Object3D()
-			lineGeometry = new Geometry()
+			lineGeometry = new BufferGeometry()
 
 			rayCaster = new Raycaster(new Vector3(10, 10, 0), new Vector3(1, 1, 1))
-			lineGeometry.vertices.push(new Vector3(2, 2, 2), new Vector3(1, 1, 1))
+			const points = [new Vector3(3, 3, 3), new Vector3(3, 3, 3)]
+
+			lineGeometry = new BufferGeometry().setFromPoints(points)
 			placeholderLine["geometry"] = lineGeometry
 		})
 
@@ -352,8 +354,9 @@ describe("ThreeSceneService", () => {
 
 		beforeEach(() => {
 			highlightedLine = new Object3D()
-			lineGeometry = new Geometry()
-			lineGeometry.vertices.push(new Vector3(3, 3, 3), new Vector3(3, 3, 3))
+			const points = [new Vector3(3, 3, 3), new Vector3(3, 3, 3)]
+
+			lineGeometry = new BufferGeometry().setFromPoints(points)
 			highlightedLine["geometry"] = lineGeometry
 			highlightedLine.material = new Material()
 
@@ -380,15 +383,21 @@ describe("ThreeSceneService", () => {
 		it("should set endpoint to given hoveredLabel coordinates if not in reset mode", () => {
 			threeSceneService.toggleLineAnimation(hoveredLabel)
 
-			expect(threeSceneService.labels.children[1]["geometry"].vertices[0]).toEqual(new Vector3(3, 3, 3))
-			expect(threeSceneService.labels.children[1]["geometry"].vertices[1]).toEqual(new Vector3(2, 2, 2))
+			const pointsBufferGeometry = threeSceneService.labels.children[1]["geometry"] as BufferGeometry
+			const pointsArray = pointsBufferGeometry.attributes.position.array as Array<number>
+
+			expect(new Vector3(pointsArray[0], pointsArray[1], pointsArray[2])).toEqual(new Vector3(3, 3, 3))
+			expect(new Vector3(pointsArray[3], pointsArray[4], pointsArray[5])).toEqual(new Vector3(2, 2, 2))
 		})
 
 		it("should set endpoint to highlightedLabel if in reset mode", () => {
 			threeSceneService.resetLabel()
 
-			expect(threeSceneService.labels.children[1]["geometry"].vertices[0]).toEqual(new Vector3(3, 3, 3))
-			expect(threeSceneService.labels.children[1]["geometry"].vertices[1]).toEqual(new Vector3(1, 1, 1))
+			const pointsBufferGeometry = threeSceneService.labels.children[1]["geometry"] as BufferGeometry
+			const pointsArray = pointsBufferGeometry.attributes.position.array as Array<number>
+
+			expect(new Vector3(pointsArray[0], pointsArray[1], pointsArray[2])).toEqual(new Vector3(3, 3, 3))
+			expect(new Vector3(pointsArray[3], pointsArray[4], pointsArray[5])).toEqual(new Vector3(1, 1, 1))
 			expect(threeSceneService["highlightedLabel"]).toEqual(null)
 		})
 	})

visualization/app/codeCharta/ui/codeMap/threeViewer/threeSceneService.ts

@@ -1,4 +1,4 @@
-import { AmbientLight, DirectionalLight, Scene, Group, Material, Raycaster, Vector3, Object3D, Box3, Line, Geometry } from "three"
+import { AmbientLight, DirectionalLight, Scene, Group, Material, Raycaster, Vector3, Object3D, Box3, Line, BufferGeometry } from "three"
 import { CodeMapMesh } from "../rendering/codeMapMesh"
 import { CodeMapBuilding } from "../rendering/codeMapBuilding"
 import { CodeMapPreRenderServiceSubscriber, CodeMapPreRenderService } from "../codeMap.preRender.service"
@@ -223,10 +223,12 @@ export class ThreeSceneService implements CodeMapPreRenderServiceSubscriber, Map
 	}
 
 	toggleLineAnimation(hoveredLabel: Object3D) {
-		const geometry = new Geometry()
 		const endPoint = new Vector3(hoveredLabel.position.x, hoveredLabel.position.y, hoveredLabel.position.z)
 
-		geometry.vertices.push(this.highlightedLine.geometry.vertices[0], endPoint)
+		const pointsBufferGeometry = this.highlightedLine.geometry as BufferGeometry
+		const pointsArray = pointsBufferGeometry.attributes.position.array as Array<number>
+
+		const geometry = new BufferGeometry().setFromPoints([new Vector3(pointsArray[0], pointsArray[1], pointsArray[2]), endPoint])
 
 		const newLineForHighlightedLabel = new Line(geometry, this.highlightedLine.material)
 

visualization/app/codeCharta/ui/dialog/dialog.globalSettings.po.ts

@@ -18,6 +18,9 @@ export class DialogGlobalSettingsPageObject {
 		await page.click("div.md-dialog-content layout-selection-component div md-input-container md-select")
 		await page.waitForSelector(".md-select-menu-container.md-active", { visible: true })
 		await page.click('md-select-menu md-content [value="TreeMapStreet"]')
+		// Switching a layout has a debounce time of at least one millisecond.
+		// Delay the execution by a few milliseconds.
+		await new Promise(resolve => setTimeout(resolve, 5))
 	}
 
 	async getLayout() {
@@ -33,6 +36,9 @@ export class DialogGlobalSettingsPageObject {
 		await page.click("div.md-dialog-content sharpness-mode-selector-component div md-input-container md-select")
 		await page.waitForSelector(".md-select-menu-container.md-active", { visible: true })
 		await page.click('md-select-menu md-content [value="Pixel Ratio without Antialiasing"]')
+		// Switching settings that have influence on the rendered map has a
+		// debounce time of at least one millisecond.
+		await new Promise(resolve => setTimeout(resolve, 5))
 	}
 
 	async getDisplayQuality() {

visualization/app/codeCharta/ui/fileChooser/fileChooser.po.ts

@@ -19,6 +19,6 @@ export class FileChooserPageObject {
 			clickButtonOnPageElement("file-chooser-directive .toolbar-button")
 		])
 
-		await fileChooser.cancel()
+		fileChooser.cancel()
 	}
 }

visualization/package.json

@@ -114,7 +114,7 @@
 		"open": "^8.0.6",
 		"redux": "^4.0.5",
 		"shelljs": "^0.8.4",
-		"three": "^0.124.0",
+		"three": "^0.126.1",
 		"three-orbit-controls": "^82.1.0",
 		"typescript-json-schema": "^0.50.0"
 	},
@@ -133,6 +133,7 @@
 		"@types/lodash": "^4.14.168",
 		"@types/node": "^15.0.0",
 		"@types/puppeteer": "^5.4.3",
+		"@types/three": "^0.126.0",
 		"@typescript-eslint/eslint-plugin": "^4.22.0",
 		"@typescript-eslint/parser": "^4.22.0",
 		"angularjs-color-picker": "^3.4.8",