@sapui5/sap.ui.vk 1.138.0 → 1.139.0

package/src/sap/ui/vk/threejs/ViewStateManager.js

@@ -7,6 +7,7 @@
 
 // Provides the ViewStateManager class.
 sap.ui.define([
+	"sap/base/assert",
 	"../Core",
 	"../ViewStateManagerBase",
 	"../thirdparty/three",
@@ -17,7 +18,6 @@ sap.ui.define([
 	"./Scene",
 	"../ObjectType",
 	"../RotationType",
-	"./OutlineRenderer",
 	"./HighlightPlayer",
 	"../HighlightDisplayState",
 	"../Highlight",
@@ -30,6 +30,7 @@ sap.ui.define([
 	"../TransformationMatrix",
 	"sap/ui/core/Element"
 ], function(
+	assert,
 	vkCore,
 	ViewStateManagerBase,
 	THREE,
@@ -40,7 +41,6 @@ sap.ui.define([
 	Scene,
 	ObjectType,
 	RotationType,
-	OutlineRenderer,
 	HighlightPlayer,
 	HighlightDisplayState,
 	Highlight,
@@ -57,17 +57,32 @@ sap.ui.define([
 
 	var VisibilityTracker;
 
+	class MaterialCache {
+		cloneMaterial(material, nodeState) {
+			// TODO: a proper implementation required.
+			const materialClone = material.clone();
+			materialClone.userData.prototypeMaterial = material;
+			return materialClone;
+		}
+
+		releaseMaterial(material) {
+			// TODO: a proper implementation required.
+			ThreeUtils.disposeMaterial(material);
+			return this;
+		}
+	}
+
 	/**
 	 * Constructor for a new ViewStateManager.
 	 *
 	 * @class
-	 * Manages the visibility and selection states of nodes in the scene.
+	 * Manages the visibility, selection, opacity and tint color states of nodes in the scene.
 	 *
 	 * @param {string} [sId] ID for the new ViewStateManager object. Generated automatically if no ID is given.
 	 * @param {object} [mSettings] Initial settings for the new ViewStateManager object.
 	 * @public
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.139.0
 	 * @extends sap.ui.vk.ViewStateManagerBase
 	 * @alias sap.ui.vk.threejs.ViewStateManager
 	 * @since 1.32.0
@@ -81,26 +96,62 @@ sap.ui.define([
 	var basePrototype = ViewStateManager.getMetadata().getParent().getClass().prototype;
 
 	ViewStateManager.prototype.init = function() {
-		if (basePrototype.init) {
-			basePrototype.init.call(this);
-		}
+		basePrototype.init?.call(this);
 
 		this._nodeHierarchy = null;
+
+		// A map where `key` is `nodeRef` and `value` is a structure:
+		//
+		// type NodeState {
+		//   visible?: bool
+		//   selected: bool
+		//   ancestorSelected: bool
+		//   opacity?: number                       // floating number in range [0, 1]
+		//   ancestorOverridesOpacity: bool
+		//   tintColor?: int                        // tint color in ABGR format
+		//   ancestorTintColor?: int                // tint color of ancestor in ABGR format
+		//   highlightColor?: float[]               // highlight color in [r, g, b, a] format (this is an animated highlight, do not confuse it with selection highlight)
+		//   ancestorHighlightColor?: float[]       // highlight color of ancestor in [r, g, b, a] format
+		//   boundingBoxNode?: THREE.Box3Helper     // assigned if selected; ancestorSelected does not affect this property
+		//   material?: THREE.MeshPhongMaterial     // if selected or ancestorSelected or opacity != null or
+		//                                          // tintColor != null or ancestorTintColor != null or
+		//                                          // highlightColor != null or ancestorHighlightColor != null
+		//   material2?: THREE.MeshPhongMaterial    // if opacity != null or tintColor != null or ancestorTintColor != null or
+		//                                          // highlightColor != null or ancestorHighlightColor != null
+		// }
+		//
+		// If a NodeState property is `null`, `undefined` or missing then the property original
+		// value is taken from the node itself.
+		//
+		// The `selected` cannot have value `null` as it is a non-persistent runtime property.
 		this._nodeStates = new Map();
-		this._selectedNodes = new Set(); // a collection of selected nodes for quick access,
+
+		// A collection of selected nodes for quick access, usually there are not many selected objects, so it is OK to
+		// store them in a collection.
+		this._selectedNodes = new Set();
+
+		// A set of nodes which needs to update material
+		this._needsMaterialUpdate = new Set();
+
 		// usually there are not many selected objects,
 		// so it is OK to store them in a collection.
-		this._outlineRenderer = new OutlineRenderer(1.0);
 		this._outlinedNodes = new Set();
 		this.setOutlineColor("rgba(255, 0, 255, 1.0)");
 		this.setOutlineWidth(1.0);
 
-		this._visibilityTracker = new VisibilityTracker();
+		this._materialCache = new MaterialCache();
 
 		this._showSelectionBoundingBox = true;
+
+		this._visibilityTracker = new VisibilityTracker();
+
+		// This scene owns and renders boxHelper objects for selected objects. Though the scene owns
+		// boxHelpers, the `parent` properties of the boxHelpers are set to the corresponding nodes
+		// rather than to this scene as those nodes are used to calculate the world matrices of theOpa
+		// boxHelpers.
 		this._boundingBoxesScene = new THREE.Scene();
 		this._selectedNodesBoundingBox = new THREE.Box3();
-		this._selectionColor = new THREE.Color(0xC0C000);
+		this._boundingBoxColor = new THREE.Color(0xC0C000);
 
 		this.setHighlightColor("rgba(255, 0, 0, 1.0)");
 
@@ -121,26 +172,53 @@ sap.ui.define([
 		ThreeUtils.getAllTHREENodes([this._boundingBoxesScene], all3DNodes, allGroupNodes);
 		all3DNodes.forEach(function(n3d) {
 			ThreeUtils.disposeObject(n3d);
+			// TODO: does not seem to be necessary as bounding boxes are owned by
+			// `_boundingBoxesScene` and they are not in `n3d.parent.children` arrays.
 			n3d.parent.remove(n3d);
 		});
 
 		allGroupNodes.forEach(function(g3d) {
+			// TODO: see the comment above.
 			g3d.parent.remove(g3d);
 		});
 	};
 
+	ViewStateManager.prototype._clearNodeStates = function() {
+		var nodeStates = this._nodeStates;
+
+		nodeStates.forEach(function(state, nodeRef) {
+			if (state.material != null) {
+				ThreeUtils.disposeMaterial(state.material);
+			}
+
+			if (state.material2 != null) {
+				ThreeUtils.disposeMaterial(state.material2);
+			}
+
+			if (state.boundingBoxNode) {
+				ThreeUtils.disposeObject(state.boundingBoxNode);
+			}
+		}, this);
+
+		nodeStates.clear();
+	};
+
 	ViewStateManager.prototype.exit = function() {
 		vkCore.getEventBus().unsubscribe("sap.ui.vk", "activateView", this._onActivateView, this);
 
-		if (this._outlineRenderer) {
-			this._outlineRenderer.dispose();
-			this._outlineRenderer = null;
-		}
+		this._clearNodeStates();
+		this._selectedNodes.clear();
+
+		this._outlinedNodes.clear();
 
 		if (this._boundingBoxesScene) {
 			this._clearBoundingBoxScene();
 			this._boundingBoxesScene = null;
 		}
+
+		this._nodeHierarchy = null;
+
+		basePrototype.exit?.call(this);
 	};
 
 	////////////////////////////////////////////////////////////////////////
@@ -176,11 +254,17 @@ sap.ui.define([
 	// Node hierarchy handling begins.
 
 	ViewStateManager.prototype._setScene = function(scene) {
+		this._clearNodeStates();
+
+		// TODO(VSM): Move this to _clearNodeStates.
 		if (this._boundingBoxesScene) {
 			this._clearBoundingBoxScene();
 		}
+		// TODO(VSM): Move this to _setNodeHierarchy?
 		this._boundingBoxesScene = new THREE.Scene();
 		this._setNodeHierarchy(scene ? scene.getDefaultNodeHierarchy() : null);
+
+		// TODO(VSM): WTF?! Remove this!
 		if (scene) {
 			scene.setViewStateManager(this);
 		}
@@ -195,12 +279,16 @@ sap.ui.define([
 		return this;
 	};
 
+	// TODO(VSM): Move the body to _setScene?
 	ViewStateManager.prototype._setNodeHierarchy = function(nodeHierarchy) {
 		var oldNodeHierarchy = this._nodeHierarchy;
 
 		if (this._nodeHierarchy) {
+			this._nodeHierarchy.detachNodeReplaced(this._handleNodeReplaced, this);
+			this._nodeHierarchy.detachNodeUpdated(this._handleNodeUpdated, this);
+			this._nodeHierarchy.detachNodeRemoving(this._handleNodeRemoving, this);
 			this._nodeHierarchy = null;
-			this._nodeStates.clear();
+			this._clearNodeStates();
 			this._selectedNodes.clear();
 			this._outlinedNodes.clear();
 			this._visibilityTracker.clear();
@@ -213,17 +301,15 @@ sap.ui.define([
 			this._nodeHierarchy.attachNodeUpdated(this._handleNodeUpdated, this);
 			this._nodeHierarchy.attachNodeRemoving(this._handleNodeRemoving, this);
 
-			this._initialState = { visible: [], hidden: [] };
-			var that = this;
-
-			var allNodeRefs = nodeHierarchy.findNodesByName();
-			allNodeRefs.forEach(function(nodeRef) {
-				that._initialState[nodeRef.visible ? "visible" : "hidden"].push(nodeRef);
+			const visible = [];
+			const hidden = [];
+			nodeHierarchy.getSceneRef().traverse(function(nodeRef) {
+				(nodeRef.visible ? visible : hidden).push(nodeRef);
 			});
 
 			this.fireVisibilityChanged({
-				visible: this._initialState.visible,
-				hidden: this._initialState.hidden
+				visible: visible,
+				hidden: hidden
 			});
 		}
 
@@ -292,12 +378,6 @@ sap.ui.define([
 		}
 	};
 
-	ViewStateManager.prototype._renderOutline = function(renderer, scene, camera) {
-		var c = abgrToColor(this._outlineColorABGR);
-		var color = new THREE.Color(c.red / 255.0, c.green / 255.0, c.blue / 255.0);
-		this._outlineRenderer.render(renderer, scene, camera, Array.from(this._outlinedNodes), color, this._jointCollection);
-	};
-
 	// Node hierarchy handling ends.
 	////////////////////////////////////////////////////////////////////////
 
@@ -337,12 +417,7 @@ sap.ui.define([
 	 * @public
 	 */
 	ViewStateManager.prototype.resetNodeProperty = function(nodeRef, property) {
-		var currentView = this.getCurrentView();
-		if (!currentView) {
-			return;
-		}
-
-		var nodeInfo = currentView.getNodeInfos();
+		const nodeInfo = this.getCurrentView()?.getNodeInfos();
 
 		if (nodeInfo) {
 
@@ -406,7 +481,7 @@ sap.ui.define([
 						this.setTransformation(transforms.nodeRefs, transforms.positions);
 					}
 				} else {
-					nodeRef._vkSetOpacity(node.opacity, this._jointCollection);
+					this.setOpacity(nodeRef, node.opacity);
 					var eventParameters = {
 						changed: nodeRef,
 						opacity: nodeInfo.opacity
@@ -414,7 +489,7 @@ sap.ui.define([
 
 					this.fireOpacityChanged(eventParameters);
 				}
-			}.bind(this));
+			}, this);
 		}
 	};
 
@@ -440,16 +515,28 @@ sap.ui.define([
 			}
 		}, this);
 
-		return {
-			visible: visible,
-			hidden: hidden
-		};
+		return { visible, hidden };
 	};
 
 	ViewStateManager.prototype.resetVisibility = function() {
-		this.setVisibilityState(this._initialState.visible, true, false);
-		this.setVisibilityState(this._initialState.hidden, false, false);
+		const toShow = [];
+		const toHide = [];
+		this._nodeStates.forEach(function(state, nodeRef) {
+			const visible = state.visible;
+			if (visible === true) {
+				toHide.push(nodeRef);
+			} else if (visible === false) {
+				toShow.push(nodeRef);
+			}
+			state.visible = null;
+		});
+		this._deleteUnusedNodeStates();
+
 		this._visibilityTracker.clear();
+		this.fireVisibilityChanged({
+			visible: toShow,
+			hidden: toHide
+		});
 		return this;
 	};
 
@@ -465,21 +552,21 @@ sap.ui.define([
 	 */
 	ViewStateManager.prototype.getVisibilityState = function(nodeRefs) {
 		if (Array.isArray(nodeRefs)) {
-			return nodeRefs.map(function(nodeRef) {
-				return nodeRef ? nodeRef.visible : false;
-			});
+			return nodeRefs.map(nodeRef => effectiveVisibility(nodeRef, this._nodeStates.get(nodeRef)));
+		} else {
+			return effectiveVisibility(nodeRefs, this._nodeStates.get(nodeRefs));
 		}
-
-		return nodeRefs ? nodeRefs.visible : false; // NB: The nodeRefs argument is a single nodeRef.
 	};
 
 	/**
 	 * Sets the visibility state of the nodes.
-	 * @param {any|any[]} nodeRefs The node reference or the array of node references.
-	 * @param {boolean|boolean[]} visible The new visibility state or array of states of the nodes.
-	 * @param {boolean} recursive The flags indicates if the change needs to propagate recursively to child nodes.
-	 * @param {boolean} force If a node is made visible but its parent is hidden then it will still be hidden in Viewport. This flag will force node to be visible regardless of parent's state.
-	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @param {any|any[]}         nodeRefs  The node reference or the array of node references.
+	 * @param {boolean|boolean[]} visible   The new visibility state or array of states of the nodes.
+	 * @param {boolean}           recursive The flags indicates if the change needs to propagate recursively to child nodes.
+	 * @param {boolean}           force     If a node is made visible but its parent is hidden then it will still be
+	 *                                      hidden in Viewport. This flag will force node to be visible regardless of
+	 *                                      parent's state.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
 	 * @public
 	 */
 	ViewStateManager.prototype.setVisibilityState = function(nodeRefs, visible, recursive, force) {
@@ -487,82 +574,89 @@ sap.ui.define([
 		if (!Array.isArray(nodeRefs)) {
 			nodeRefs = [nodeRefs];
 		}
+		// console.log("setVisibilityState", nodeRefs.map(n => n.id + ":" + (n.name || ("<" + n.parent?.name))), visible, recursive, force);
 
 		// check if we have got an array of booleans as visibility change
 		var isBulkChange = Array.isArray(visible);
 
-		var recursiveVisibility = [];
+		var recursiveVisibilities = [];
 		var allNodeRefs = nodeRefs;
 
 		if (recursive) {
 			allNodeRefs = [];
-			nodeRefs.forEach(function(nodeRef, idx) {
+			nodeRefs.forEach(function(nodeRef, index) {
 				var collected = this._collectNodesRecursively(nodeRef);
 				allNodeRefs = allNodeRefs.concat(collected);
 
-				var length = recursiveVisibility.length;
-				recursiveVisibility.length = length + collected.length;
-				recursiveVisibility.fill(isBulkChange ? visible[idx] : visible, length);
+				var length = recursiveVisibilities.length;
+				recursiveVisibilities.length += collected.length;
+				recursiveVisibilities.fill(isBulkChange ? visible[index] : visible, length);
 			}, this);
 		} else if (!isBulkChange) {
 			// not recursive, visible is a scalar
-			recursiveVisibility.length = allNodeRefs.length;
-			recursiveVisibility.fill(visible);
+			recursiveVisibilities.length = allNodeRefs.length;
+			recursiveVisibilities.fill(visible);
 		} else {
 			// not recursive, visible is an array
-			recursiveVisibility = visible;
+			recursiveVisibilities = visible;
+		}
+
+		if (force) {
+			// We use `force` when we un-hide the parents of the un-hidden node recursively up the tree. Extend the
+			// array of changed nodes with these ancestors. If they are already visible or there are duplicates they
+			// will be filtered out below.
+			var additionalNodeRefs = [];
+			allNodeRefs.forEach(function(nodeRef, index) {
+				var newVisibility = recursiveVisibilities[index];
+				if (newVisibility) {
+					for (var node = nodeRef; node && !node.isScene; node = node.parent) {
+						additionalNodeRefs.push(node);
+					}
+				}
+			});
+			allNodeRefs = allNodeRefs.concat(additionalNodeRefs);
+			var length = recursiveVisibilities.length;
+			recursiveVisibilities.length += additionalNodeRefs.length;
+			recursiveVisibilities.fill(true, length);
 		}
 
 		// filter out unchanged visibility and duplicate nodes
 		var changedVisibility = [];
 		var usedNodeRefs = new Set();
-		var changed = allNodeRefs.filter(function(nodeRef, index) {
-			if (nodeRef == null || (nodeRef.userData.skipIt && nodeRef.visible) || usedNodeRefs.has(nodeRef)) {
+		var changedNodeRefs = allNodeRefs.filter(function(nodeRef, index) {
+			if (nodeRef == null || nodeRef.userData.skipIt || usedNodeRefs.has(nodeRef)) {
 				return false;
 			}
 
 			usedNodeRefs.add(nodeRef);
 
-			var changed = nodeRef ? nodeRef.visible != recursiveVisibility[index] : false;
+			const state = this._nodeStates.get(nodeRef);
+			var oldVisibility = effectiveVisibility(nodeRef, state);
+			var newVisibility = recursiveVisibilities[index];
+
+			var changed = oldVisibility !== newVisibility;
 			if (changed) {
-				changedVisibility.push(recursiveVisibility[index]);
+				changedVisibility.push(newVisibility);
 			}
 
 			return changed;
 		}, this);
 
-		if (changed.length > 0) {
+		if (changedNodeRefs.length > 0) {
+			this._applyVisibilityNodeState(changedNodeRefs, changedVisibility);
+			this._deleteUnusedNodeStates();
 
 			var eventParameters = {
 				visible: [],
 				hidden: []
 			};
 
-			changed.forEach(function(nodeRef, idx) {
-				nodeRef.visible = changedVisibility[idx];
-				var children = nodeRef.children;
-				if (children.length === 1 && children[0].userData.skipIt) {
-					// This node is marked as non-visualisable. See comments in method
-					// SceneContext.prototype.getPartialTreeNodes.
-					//
-					// Copy the state from the parent node.
-					children[0].visible = nodeRef.visible;
-				}
-
-				eventParameters[nodeRef.visible ? "visible" : "hidden"].push(nodeRef);
-
-				if (force && nodeRef.visible) {
-					// Force visibility by traversing ancestor nodes and make them visible
-					var node = nodeRef.parent;
-					while (node) {
-						node.visible = true;
-						node = node.parent;
-					}
-				}
-			}, this);
+			changedNodeRefs.forEach(function(nodeRef, index) {
+				eventParameters[changedVisibility[index] ? "visible" : "hidden"].push(nodeRef);
+			});
 
 			if (this.getShouldTrackVisibilityChanges()) {
-				changed.forEach(this._visibilityTracker.trackNodeRef, this._visibilityTracker);
+				changedNodeRefs.forEach(this._visibilityTracker.trackNodeRef, this._visibilityTracker);
 			}
 
 			this.fireVisibilityChanged(eventParameters);
@@ -570,12 +664,11 @@ sap.ui.define([
 		return this;
 	};
 
-
 	/**
 	 * Enumerates IDs of the selected nodes.
 	 *
 	 * @param {function} callback A function to call when the selected nodes are enumerated. The function takes one parameter of type <code>string</code>.
-	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
 	 * @public
 	 */
 	ViewStateManager.prototype.enumerateSelection = function(callback) {
@@ -587,7 +680,7 @@ sap.ui.define([
 	 * Enumerates IDs of the outlined nodes.
 	 *
 	 * @param {function} callback A function to call when the outlined nodes are enumerated. The function takes one parameter of type <code>string</code>.
-	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
 	 * @public
 	 */
 	ViewStateManager.prototype.enumerateOutlinedNodes = function(callback) {
@@ -606,13 +699,9 @@ sap.ui.define([
 	 * @public
 	 */
 	ViewStateManager.prototype.getSelectionState = function(nodeRefs) {
-		var selectionSet = this._selectedNodes;
-		function isSelected(nodeRef) {
-			return selectionSet.has(nodeRef);
-		}
+		const selected = this._selectedNodes.has.bind(this._selectedNodes);
 
-		return Array.isArray(nodeRefs) ?
-			nodeRefs.map(isSelected) : isSelected(nodeRefs); // NB: The nodeRefs argument is a single nodeRef.
+		return Array.isArray(nodeRefs) ? nodeRefs.map(selected) : selected(nodeRefs); // NB: The nodeRefs argument is a single nodeRef.
 	};
 
 	ViewStateManager.prototype._getSelectionComplete = function() {
@@ -647,22 +736,11 @@ sap.ui.define([
 		};
 	};
 
-	ViewStateManager.prototype._isAChild = function(childNodeRef, nodeRefs) {
-		var ancestor = childNodeRef.parent;
-		while (ancestor) {
-			if (nodeRefs.has(ancestor)) {
-				return true;
-			}
-			ancestor = ancestor.parent;
-		}
-		return false;
-	};
-
-	ViewStateManager.prototype._AddBoundingBox = function(nodeRef) {
+	ViewStateManager.prototype._addBoundingBox = function(nodeRef) {
 		nodeRef._vkCalculateObjectOrientedBoundingBox();
 	};
 
-	ViewStateManager.prototype._RemoveBoundingBox = function(nodeRef) {
+	ViewStateManager.prototype._removeBoundingBox = function(nodeRef) {
 		delete nodeRef.userData.boundingBox;
 	};
 
@@ -763,7 +841,7 @@ sap.ui.define([
 		if (createObject) {
 			if (!mtl) {
 				mtl = new THREE.LineBasicMaterial({
-					color: this._selectionColor,
+					color: this._boundingBoxColor,
 					onBeforeCompile: function(shader) {
 						shader.vertexShader = ("attribute mat4 itm;\n" + shader.vertexShader).replace(
 							"#include <begin_vertex>",
@@ -791,16 +869,7 @@ sap.ui.define([
 	 */
 	ViewStateManager.prototype.setShowSelectionBoundingBox = function(val) {
 		this._showSelectionBoundingBox = val;
-		if (this._showSelectionBoundingBox) {
-			this._selectedNodes.forEach(function(node) { this._AddBoundingBox(node); }.bind(this));
-		} else {
-			this._selectedNodes.forEach(function(node) { this._RemoveBoundingBox(node); }.bind(this));
-		}
-
-		this.fireSelectionChanged({
-			selected: this._selectedNodes,
-			unselected: []
-		});
+		this._selectedNodes.forEach(val ? this._addBoundingBox : this._removeBoundingBox, this);
 	};
 
 	/**
@@ -813,86 +882,58 @@ sap.ui.define([
 		return this._showSelectionBoundingBox;
 	};
 
-	ViewStateManager.prototype._isAncestorSelected = function(nodeRef) {
-		nodeRef = nodeRef.parent;
-		while (nodeRef) {
-			if (this._selectedNodes.has(nodeRef)) {
-				return true;
-			}
-
-			nodeRef = nodeRef.parent;
-		}
-
-		return false;
-	};
-
-	ViewStateManager.prototype._updateHighlightColor = function(nodeRef, parentSelected) {
-		var selected = parentSelected || this._selectedNodes.has(nodeRef);
-		var nodeContentType = nodeRef._vkGetNodeContentType();
-		if (nodeContentType === NodeContentType.Background
-			|| nodeContentType === NodeContentType.Symbol) {
-			return;
-		} else {
-			nodeRef.userData.highlightColor = selected ? this._highlightColorABGR : undefined;
-			nodeRef._vkUpdateMaterialColorAndOpacity();
-			var children = nodeRef.children;
-			for (var i = 0, l = children.length; i < l; i++) {
-				var userData = children[i].userData;
-				if (userData && userData.objectType === ObjectType.Hotspot) {
-					continue;
-				}
-				this._updateHighlightColor(children[i], selected);
-			}
-		}
-	};
-
 	/**
 	 * Sets the selection state of the nodes.
 	 * @param {any|any[]} nodeRefs The node reference or the array of node references.
 	 * @param {boolean} selected The new selection state of the nodes.
 	 * @param {boolean} recursive The flags indicates if the change needs to propagate recursively to child nodes.
 	 * @param {boolean} blockNotification The flag to suppress selectionChanged event.
-	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
 	 * @deprecated Since version 1.56.3. Use {@link sap.ui.vk.threejs.ViewStateManager#setSelectionStates} instead.
 	 * @public
 	 */
 	ViewStateManager.prototype.setSelectionState = function(nodeRefs, selected, recursive, blockNotification) {
-		if (!nodeRefs) {
-			return this;
-		}
-
 		if (!Array.isArray(nodeRefs)) {
 			nodeRefs = [nodeRefs];
 		}
 
-		nodeRefs = (recursive || this.getRecursiveSelection() ? this._collectNodesRecursively(nodeRefs) : nodeRefs).filter(function(value, index, self) {
-			return self.indexOf(value) === index;
-		});
+		// First, extend `nodeRefs` with descendant nodes based on parameter `recursive` or property `recursiveSelection`.
+		nodeRefs = (recursive || this.getRecursiveSelection() ? this._collectNodesRecursively(nodeRefs) : nodeRefs)
+			.filter(function(value, index, array) {
+				return array.indexOf(value) === index;
+			});
 
+		// Then, extend `nodeRefs` with ancestors of nodes being unselected if the
+		// `recursiveSelection` property (but not necessarily the `recursive` parameter) is `true`.
 		if (this.getRecursiveSelection() && !selected) {
+			// E.g. if we deselect node D1 while the `recursiveSelection` property is `true` we
+			// deselect its ancestors C and B recursively. Nodes E and F are unselected previously,
+			// see the code above.
+			//
+			// The siblings stay as is.
+			//
+			// [ ] A                  [ ] A
+			//    [x] B                  [ ] B
+			//       [X] C         ->       [ ] C
+			//          [X] *D1*               [ ] *D1*
+			//             [X] E                 [ ] E
+			//               [X] F                 [ ] F
+			//          [X] D2                 [X] D2
+			//          [X] D3                 [X] D3
 			nodeRefs = this._nodeHierarchy._appendAncestors(nodeRefs);
 		}
 
-		var changed = nodeRefs.filter(function(nodeRef) {
-			return this._selectedNodes.has(nodeRef) !== selected;
-		}, this);
+		const selectedNodes = this._selectedNodes;
+
+		// These are the nodes whose selection state changed.
+		const changed = nodeRefs.filter(nodeRef => selectedNodes.has(nodeRef) !== selected);
 
 		if (changed.length > 0) {
-			changed.forEach(function(nodeRef) {
-				if (nodeRef) {
-					this._selectedNodes[selected ? "add" : "delete"](nodeRef);
-					if (this._showSelectionBoundingBox) {
-						this[selected ? "_AddBoundingBox" : "_RemoveBoundingBox"](nodeRef);
-					}
-				}
-			}, this);
+			this._applySelectionNodeState(changed, selected);
 
-			// we need to update this._selectedNodes before updating nodes highlight color
-			changed.forEach(function(nodeRef) {
-				if (nodeRef) {
-					this._updateHighlightColor(nodeRef, selected || this._isAncestorSelected(nodeRef));
-				}
-			}, this);
+			if (!selected) {
+				this._deleteUnusedNodeStates();
+			}
 
 			if (!blockNotification) {
 				this.fireSelectionChanged({
@@ -911,7 +952,7 @@ sap.ui.define([
 	 * @param {any|any[]} unselectedNodeRefs The node reference or the array of node references of unselected nodes.
 	 * @param {boolean} recursive The flags indicates if the change needs to propagate recursively to child nodes.
 	 * @param {boolean} blockNotification The flag to suppress selectionChanged event.
-	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
 	 * @public
 	 */
 	ViewStateManager.prototype.setSelectionStates = function(selectedNodeRefs, unselectedNodeRefs, recursive, blockNotification) {
@@ -939,25 +980,12 @@ sap.ui.define([
 		}, this);
 
 		if (selected.length > 0 || unselected.length > 0) {
-			selected.forEach(function(nodeRef) {
-				this._selectedNodes.add(nodeRef);
-				this._updateHighlightColor(nodeRef, true);
-				if (this._showSelectionBoundingBox) {
-					this._AddBoundingBox(nodeRef);
-				}
-			}, this);
+			this._applySelectionNodeState(selected, true);
+			this._applySelectionNodeState(unselected, false);
 
-			unselected.forEach(function(nodeRef) {
-				this._selectedNodes.delete(nodeRef);
-				if (this._showSelectionBoundingBox) {
-					this._RemoveBoundingBox(nodeRef);
-				}
-			}, this);
-
-			// we need to remove all unselected nodes from this._selectedNodes before updating unselected nodes highlight color
-			unselected.forEach(function(nodeRef) {
-				this._updateHighlightColor(nodeRef, this._isAncestorSelected(nodeRef));
-			}, this);
+			if (unselected.length > 0) {
+				this._deleteUnusedNodeStates();
+			}
 
 			if (!blockNotification) {
 				this.fireSelectionChanged({
@@ -975,7 +1003,7 @@ sap.ui.define([
 	 * @param {sap.ui.core.CSSColor|string|int} color The new outline color. The value can be defined as a string
 	 *                                                in the CSS color format or as an integer in the ABGR format. If <code>null</code>
 	 *                                                is passed then the tint color is reset and the node's own tint color should be used.
-	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
 	 * @public
 	 */
 	ViewStateManager.prototype.setOutlineColor = function(color) {
@@ -1001,7 +1029,6 @@ sap.ui.define([
 		return this;
 	};
 
-
 	/**
 	 * Gets the outline color
 	 *
@@ -1016,7 +1043,6 @@ sap.ui.define([
 		return inABGRFormat ? this._outlineColorABGR : colorToCSSColor(abgrToColor(this._outlineColorABGR));
 	};
 
-
 	/**
 	 * Gets the outlining state of the node.
 	 *
@@ -1037,14 +1063,13 @@ sap.ui.define([
 			nodeRefs.map(isOutlined) : isOutlined(nodeRefs); // NB: The nodeRefs argument is a single no
 	};
 
-
 	/**
 	 * Sets or resets the outlining state of the nodes.
 	 * @param {any|any[]} outlinedNodeRefs The node reference or the array of node references of outlined nodes.
 	 * @param {any|any[]} unoutlinedNodeRefs The node reference or the array of node references of un-outlined nodes.
 	 * @param {boolean} recursive The flags indicates if the change needs to propagate recursively to child nodes.
 	 * @param {boolean} blockNotification The flag to suppress outlineChanged event.
-	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
 	 * @public
 	 */
 	ViewStateManager.prototype.setOutliningStates = function(outlinedNodeRefs, unoutlinedNodeRefs, recursive, blockNotification) {
@@ -1099,7 +1124,6 @@ sap.ui.define([
 	 */
 	ViewStateManager.prototype.setOutlineWidth = function(width) {
 		this._outlineWidth = width;
-		this._outlineRenderer.setOutlineWidth(width);
 		this.fireOutlineWidthChanged({
 			width: width
 		});
@@ -1136,7 +1160,8 @@ sap.ui.define([
 	 * @private
 	 */
 	ViewStateManager.prototype._getOpacity = function(nodeRef) {
-		return nodeRef.userData.opacity !== undefined ? nodeRef.userData.opacity : null;
+		const state = this._nodeStates.get(nodeRef);
+		return state?.opacity ?? null;
 	};
 
 	/**
@@ -1145,8 +1170,8 @@ sap.ui.define([
 	 * If a single node is passed to the method then a single value is returned.<br/>
 	 * If an array of nodes is passed to the method then an array of values is returned.
 	 *
-	 * @param {any|any[]}	nodeRefs	The node reference or the array of node references.
-	 * @returns {float|float[]} A single value or an array of values. Value <code>null</code> means that the node's own opacity should be used.
+	 * @param {any|any[]} nodeRefs The node reference or the array of node references.
+	 * @returns {float|float[]|null|null[]} A single value or an array of values. Value <code>null</code> means that the node's own opacity should be used.
 	 * @public
 	 */
 	ViewStateManager.prototype.getOpacity = function(nodeRefs) {
@@ -1164,7 +1189,7 @@ sap.ui.define([
 	 * @param {float|float[]|null}      opacity           The new opacity of the nodes. If <code>null</code> is passed then the opacity is reset
 	 *                                                    and the node's own opacity should be used.
 	 * @param {boolean}         [recursive=false] This flag is not used, as opacity is always recursively applied to the offspring nodes by multiplication
-	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
 	 * @public
 	 */
 	ViewStateManager.prototype.setOpacity = function(nodeRefs, opacity, recursive) {
@@ -1176,54 +1201,55 @@ sap.ui.define([
 		// check if we got an array as opacity
 		var isBulkChange = Array.isArray(opacity);
 
-		if (opacity == null) {
-			opacity = undefined;
-		} else if (isBulkChange) {
-			opacity.forEach(function(value, idx) {
-				if (value == null) {
-					opacity[idx] = undefined;
-				}
-			});
-		}
-
-		var recursiveOpacity = [];
+		var recursiveOpacities = [];
 		var allNodeRefs = nodeRefs;
 
-		if (!isBulkChange) {
+		if (recursive) {
+			allNodeRefs = [];
+			nodeRefs.forEach(function(nodeRef, index) {
+				var collected = this._collectNodesRecursively(nodeRef);
+				allNodeRefs = allNodeRefs.concat(collected);
+
+				var length = recursiveOpacities.length;
+				recursiveOpacities.length += collected.length;
+				recursiveOpacities.fill(isBulkChange ? opacity[index] : opacity, length);
+			}, this);
+		} else if (!isBulkChange) {
 			// not recursive, opacity is a scalar
-			recursiveOpacity.length = allNodeRefs.length;
-			recursiveOpacity.fill(opacity);
+			recursiveOpacities.length = allNodeRefs.length;
+			recursiveOpacities.fill(opacity);
 		} else {
 			// not recursive, opacity is an array
-			recursiveOpacity = opacity;
+			recursiveOpacities = opacity;
 		}
 
 		// filter out unchanged opacity and duplicate nodes
-		var changedOpacity = [];
+		var changedOpacities = [];
 		var usedNodeRefs = new Set();
-		var changed = allNodeRefs.filter(function(nodeRef, index) {
+		var changedNodeRefs = allNodeRefs.filter(function(nodeRef, index) {
 			if (usedNodeRefs.has(nodeRef)) {
 				return false;
 			}
 
 			usedNodeRefs.add(nodeRef);
 
-			var changed = nodeRef ? nodeRef.userData.opacity !== recursiveOpacity[index] : false;
+			const state = this._nodeStates.get(nodeRef);
+			var opacity = recursiveOpacities[index];
+			var changed = state == null && opacity != null || state != null && state.opacity !== opacity;
 			if (changed) {
-				changedOpacity.push(recursiveOpacity[index]);
+				changedOpacities.push(opacity);
 			}
 
 			return changed;
 		}, this);
 
-		if (changed.length > 0) {
-			changed.forEach(function(nodeRef, idx) {
-				nodeRef._vkSetOpacity(changedOpacity[idx], this._jointCollection);
-			}, this);
+		if (changedNodeRefs.length > 0) {
+			this._applyOpacityNodeState(changedNodeRefs, changedOpacities);
+			this._deleteUnusedNodeStates();
 
 			var eventParameters = {
-				changed: changed,
-				opacity: isBulkChange ? changedOpacity : changedOpacity[0]
+				changed: changedNodeRefs,
+				opacity: isBulkChange ? changedOpacities : changedOpacities[0]
 			};
 
 			this.fireOpacityChanged(eventParameters);
@@ -1242,7 +1268,8 @@ sap.ui.define([
 	 * @private
 	 */
 	ViewStateManager.prototype._getTintColorABGR = function(nodeRef) {
-		return nodeRef.userData.tintColor !== undefined ? nodeRef.userData.tintColor : null;
+		const state = this._nodeStates.get(nodeRef);
+		return state?.tintColor;
 	};
 
 	/**
@@ -1255,8 +1282,8 @@ sap.ui.define([
 	 * @private
 	 */
 	ViewStateManager.prototype._getTintColor = function(nodeRef) {
-		return nodeRef.userData.tintColor !== undefined ?
-			colorToCSSColor(abgrToColor(nodeRef.userData.tintColor)) : null;
+		const tintColorABGR = this._getTintColorABGR(nodeRef);
+		return tintColorABGR != null ? colorToCSSColor(abgrToColor(tintColorABGR)) : null;
 	};
 
 	/**
@@ -1274,23 +1301,38 @@ sap.ui.define([
 	 * @public
 	 */
 	ViewStateManager.prototype.getTintColor = function(nodeRefs, inABGRFormat) {
-		var getTintColorMethodName = inABGRFormat ? "_getTintColorABGR" : "_getTintColor";
+		var getTintColorMethod = inABGRFormat ? this._getTintColorABGR : this._getTintColor;
 		if (Array.isArray(nodeRefs)) {
-			return nodeRefs.map(this[getTintColorMethodName], this);
+			return nodeRefs.map(getTintColorMethod, this);
 		} else {
-			return this[getTintColorMethodName](nodeRefs); // NB: The nodeRefs argument is a single nodeRef.
+			return getTintColorMethod.call(this, nodeRefs); // NB: The nodeRefs argument is a single nodeRef.
 		}
 	};
 
+	function toABGR(color) {
+		switch (typeof color) {
+			case "number":
+				return color;
+			case "string":
+				const CSSColor = DataType.getType("sap.ui.core.CSSColor");
+				return CSSColor.isValid(color) ? colorToABGR(cssColorToColor(color)) : null;
+			default:
+				return null; // The color is invalid, reset it to null.
+		}
+	}
+
 	/**
 	 * Sets the tint color of the nodes.
 	 * @param {any|any[]}                   nodeRefs          The node reference or the array of node references.
-	 * @param {sap.ui.core.CSSColor|int|sap.ui.core.CSSColor[]|int[]|null} tintColor The new tint color of the nodes.
-	 *                                                        The value can be defined as a string in the CSS color format or as an integer in the ABGR format or
-	 *                                                        it could be array of these values. If <code>null</code>
-	 *                                                        is passed then the tint color is reset and the node's own tint color should be used.
-	 * @param {boolean}                     [recursive=false] This flag indicates if the change needs to propagate recursively to child nodes.
-	 * @returns {this} <code>this</code> to allow method chaining.
+	 * @param {sap.ui.core.CSSColor|int|sap.ui.core.CSSColor[]|int[]|null} tintColor The new tint color of the nodes. The
+	 *                                                        value can be defined as a string in the CSS color format
+	 *                                                        or as an integer in the ABGR format or it could be an
+	 *                                                        array of these values. If <code>null</code> is passed then
+	 *                                                        the tint color is reset and the node's own tint color
+	 *                                                        should be used.
+	 * @param {boolean}                     [recursive=false] This flag indicates if the change needs to propagate
+	 *                                                        recursively to child nodes.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
 	 * @public
 	 */
 	ViewStateManager.prototype.setTintColor = function(nodeRefs, tintColor, recursive) {
@@ -1298,80 +1340,62 @@ sap.ui.define([
 			nodeRefs = [nodeRefs];
 		}
 
-		var toABGR = function(color) {
-			var result = null;
-			switch (typeof color) {
-				case "number":
-					result = color;
-					break;
-				case "string":
-					const CSSColor = DataType.getType("sap.ui.core.CSSColor");
-					if (CSSColor.isValid(color)) {
-						result = colorToABGR(cssColorToColor(color));
-					}
-					break;
-				default:
-					result = undefined; // The color is invalid, reset it to null.
-					break;
-			}
-
-			return result;
-		};
-
 		// check if we got an array as tint color
 		var isBulkChange = Array.isArray(tintColor);
 
-		var recursiveColor = [];
+		var recursiveColors = [];
 		var allNodeRefs = nodeRefs;
 
 		if (recursive) {
 			allNodeRefs = [];
-			nodeRefs.forEach(function(nodeRef, idx) {
+			nodeRefs.forEach(function(nodeRef, index) {
 				var collected = this._collectNodesRecursively(nodeRef);
 				allNodeRefs = allNodeRefs.concat(collected);
 
-				var length = recursiveColor.length;
-				recursiveColor.length = length + collected.length;
-				recursiveColor.fill(isBulkChange ? tintColor[idx] : tintColor, length);
+				var length = recursiveColors.length;
+				recursiveColors.length += collected.length;
+				recursiveColors.fill(isBulkChange ? tintColor[index] : tintColor, length);
 			}, this);
 		} else if (!isBulkChange) {
-			// not recursive, opacity is a scalar
-			recursiveColor.length = allNodeRefs.length;
-			recursiveColor.fill(tintColor);
+			// not recursive, tintColor is a scalar
+			recursiveColors.length = allNodeRefs.length;
+			recursiveColors.fill(tintColor);
 		} else {
-			// not recursive, opacity is an array
-			recursiveColor = tintColor;
+			// not recursive, tintColor is an array
+			recursiveColors = tintColor;
 		}
 
-		// filter out unchanged opacity and duplicate nodes
-		var changedColor = [];
+		// filter out unchanged tintColor and duplicate nodes
+		var changedColors = [];
+		var changedColorsABGR = [];
 		var usedNodeRefs = new Set();
-		var changed = allNodeRefs.filter(function(nodeRef, index) {
+		var changedNodeRefs = allNodeRefs.filter(function(nodeRef, index) {
 			if (usedNodeRefs.has(nodeRef)) {
 				return false;
 			}
 
 			usedNodeRefs.add(nodeRef);
-			var changed = nodeRef ? nodeRef.userData.tintColor !== toABGR(recursiveColor[index]) : false;
+
+			const state = this._nodeStates.get(nodeRef);
+			var tintColor = recursiveColors[index];
+			var tintColorABGR = toABGR(recursiveColors[index]);
+			var changed = state == null && tintColor != null || state != null && state.tintColor !== tintColorABGR;
 			if (changed) {
-				changedColor.push(recursiveColor[index]);
+				changedColors.push(tintColor);
+				changedColorsABGR.push(tintColorABGR);
 			}
 
 			return changed;
 		}, this);
 
-		if (changed.length > 0) {
-			var changedABGR = [];
-			changed.forEach(function(nodeRef, idx) {
-				var color = toABGR(changedColor[idx]);
-				nodeRef._vkSetTintColor(color);
-				changedABGR.push(color);
-			}, this);
+		if (changedNodeRefs.length > 0) {
+			this._applyTintColorNodeState(changedNodeRefs, changedColorsABGR);
+			this._deleteUnusedNodeStates();
 
 			var eventParameters = {
-				changed: changed,
-				tintColor: isBulkChange ? changedColor : changedColor[0],
-				tintColorABGR: isBulkChange ? changedABGR : changedABGR[0]
+				changed: changedNodeRefs,
+				tintColor: isBulkChange ? changedColors : changedColors[0],
+				tintColorABGR: isBulkChange ? changedColorsABGR : changedColorsABGR[0]
 			};
 
 			this.fireTintColorChanged(eventParameters);
@@ -1381,11 +1405,48 @@ sap.ui.define([
 	};
 
 	/**
-	 * Sets the default highlighting color
-	 * @param {sap.ui.core.CSSColor|string|int} color The new highlighting color. The value can be defined as a string
-	 *                                                in the CSS color format or as an integer in the ABGR format. If <code>null</code>
-	 *                                                is passed then the tint color is reset and the node's own tint color should be used.
-	 * @returns {this} <code>this</code> to allow method chaining.
+	 * Sets the highlight color of the nodes.
+	 * @param {any|any[]}                   nodeRefs          The node reference or the array of node references.
+	 * @param {float[]|null} highlightColor                   The new highlight color of the nodes. The
+	 *                                                        value should be defined as an array of floats in the RGBA format.
+	 *                                                        If <code>null</code> is passed then the highlight color is reset
+	 *                                                        and the node's own highlight color should be used.
+	 * @param {boolean}                     [recursive=false] This flag indicates if the change needs to propagate
+	 *                                                        recursively to child nodes.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
+	 * @public
+	 */
+	ViewStateManager.prototype.setNodesHighlightColor = function(nodeRefs, highlightColor, recursive) {
+		if (!Array.isArray(nodeRefs)) {
+			nodeRefs = [nodeRefs];
+		}
+
+		const allNodeRefs = recursive ? this._collectNodesRecursively(nodeRefs) : nodeRefs;
+		const changedNodeRefs = Array.from(new Set(allNodeRefs)); // filter out duplicate nodes
+
+		if (changedNodeRefs.length > 0) {
+			changedNodeRefs.forEach(function(nodeRef) {
+				const state = this._getNodeState(nodeRef, highlightColor != null);
+				if (state != null) {
+					state.highlightColor = highlightColor;
+					this._setNeedsMaterialUpdate(nodeRef);
+					nodeRef.children.forEach(this._setAncestorHighlightColorRecursively.bind(this,
+						highlightColor != null ? highlightColor : state.ancestorHighlightColor), this);
+				}
+			}, this);
+			this._deleteUnusedNodeStates();
+		}
+
+		return this;
+	};
+
+	/**
+	 * Sets the default selection color
+	 * @param {sap.ui.core.CSSColor|string|int} color The new selection color. The value can be defined as a string in
+	 *                                                the CSS color format or as an integer in the ABGR format. If
+	 *                                                <code>null</code> is passed then the tint color is reset and the
+	 *                                                node's own tint color should be used.
+	 * @returns {this} Returns <code>this</code> to allow method chaining
 	 * @public
 	 */
 	ViewStateManager.prototype.setHighlightColor = function(color) {
@@ -1405,8 +1466,12 @@ sap.ui.define([
 		}
 
 		if (this._selectedNodes.size > 0) {
-			this._selectedNodes.forEach(function(nodeRef) {
-				this._updateHighlightColor(nodeRef, true);
+			// NB: above we check if there are any nodes selected and below we traverse `_nodeStates` because unselected
+			// descendants of selected nodes are not in `_selectedNodes` and we need to update both classes of nodes.
+			this._nodeStates.forEach(function(state, nodeRef) {
+				if (state.selected || state.ancestorSelected) {
+					this._setNeedsMaterialUpdate(nodeRef);
+				}
 			}, this);
 		}
 
@@ -1418,7 +1483,6 @@ sap.ui.define([
 		return this;
 	};
 
-
 	/**
 	 * Gets the default highlighting color
 	 *
@@ -2075,13 +2139,14 @@ sap.ui.define([
 			joints.push(joint);
 		});
 
+		const that = this;
 		var applyOpacity = function(joint, opacity) {
-			if (joint.opacity != null && joint.node && joint.node.userData) {
-				joint.node.userData.opacity = joint.opacity * opacity;
-
+			if (joint.opacity != null && joint.node) {
+				let nodeOpacity = joint.opacity * opacity;
 				if (joint.node.userData.offsetOpacity != null) {
-					joint.node.userData.opacity *= joint.node.userData.offsetOpacity;
+					nodeOpacity *= joint.node.userData.offsetOpacity;
 				}
+				that.setOpacity(joint.node, nodeOpacity);
 			}
 		};
 
@@ -2097,29 +2162,6 @@ sap.ui.define([
 		return this;
 	};
 
-	/////////////////////////////////////////////////////////////////////////////////////////////////////////
-	//
-	// Moved from Viewport class: view activation - related
-	//
-	/////////////////////////////////////////////////////////////////////////////////////////////////////////
-	ViewStateManager.prototype._updateMaterialInNode = function(nodeInfo) {
-
-		var node = nodeInfo.target;
-
-		for (var i = 0, l = node.children.length; i < l; i++) {
-			var child = node.children[i];
-			if (child.userData.animatedColor) {
-				child._vkUpdateMaterialColorAndOpacity();
-			}
-		}
-
-		var materialId = nodeInfo.materialId;
-		if (node.userData.materialId !== materialId) {
-			node.userData.materialId = materialId;
-			this._scene._setNodeMaterial(node, materialId);
-		}
-	};
-
 	/**
 	 * Get the Symbol node from nodeId,
 	 * if nodeId is not set, returns a collection of all Symbol nodes
@@ -2310,37 +2352,11 @@ sap.ui.define([
 	};
 
 	ViewStateManager.prototype._resetNodesMaterialAndOpacityByCurrentView = function(view) {
-
-		if (!view) {
-			return;
-		}
-
-		var nodeInfo = view.getNodeInfos();
-
-		if (nodeInfo) {  // for totaraLoader
-			nodeInfo.forEach(function(node) {
-				if (!node.target) {
-					return;
-				}
-
-				this._updateMaterialInNode(node);
-			}.bind(this));
-
-			nodeInfo.forEach(function(node) {
-				if (!node.target || !node.target.userData) {
-					return;
-				}
-
-				node.target.userData.opacity = node.opacity;
-			});
-
-			var nativeScene = this._scene.getSceneRef();
-			nativeScene._vkSetOpacity(undefined, this._jointCollection);
-		}
-
-		this._selectedNodes.forEach(function(nodeRef) {
-			this._updateHighlightColor(nodeRef);
-		}.bind(this));
+		view?.getNodeInfos()?.forEach(function(node) {
+			if (node.target) {
+				this.setOpacity(node.target, node.opacity);
+			}
+		}, this);
 	};
 
 	ViewStateManager.prototype._onActivateView = function(channel, eventId, event) {
@@ -2439,8 +2455,6 @@ sap.ui.define([
 			return;
 		}
 
-		// console.log("_prepareTransition", nodeInfos);
-
 		var visibleNodes = new Set();
 		var hiddenNodes = new Set();
 		nodeInfos.forEach(function(info) {
@@ -2454,7 +2468,7 @@ sap.ui.define([
 		var collectTransitionMeshes = function(nodeRef, newVisible, oldVisible) {
 			if (!nodeRef.userData.skipIt) {
 				newVisible = newVisible && visibleNodes.has(nodeRef);
-				oldVisible = oldVisible && nodeRef.visible;
+				oldVisible = oldVisible && this.getVisibilityState(nodeRef);
 			}
 
 			if (nodeRef.geometry && newVisible !== oldVisible) {
@@ -2498,8 +2512,8 @@ sap.ui.define([
 			});
 		}
 
-		// console.log("+", Array.from(visibleNodes), fadeInNodes);
-		// console.log("-", Array.from(hiddenNodes), fadeOutNodes);
+		// console.log("+", Array.from(visibleNodes).map(n => n.name), fadeInNodes.map(n => n.name || ("<" + n.parent?.name)));
+		// console.log("-", Array.from(hiddenNodes).map(n => n.name), fadeOutNodes.map(n => n.name || ("<" + n.parent?.name)));
 		// console.log(this._fadeOutBackground, "->", this._fadeInBackground);
 	};
 
@@ -2576,20 +2590,12 @@ sap.ui.define([
 			return this;
 		}
 
-		var nodeInfo = currentView.getNodeInfos();
-
-		if (nodeInfo) {
-
-			nodeInfo.forEach(function(node) {
-
-				if (node.target !== nodeRef) {
-					return;
-				}
-
+		currentView.getNodeInfos()?.forEach(function(nodeInfo) {
+			if (nodeInfo.target === nodeRef) {
 				nodeRef.updateMatrix();
-				node.transform = nodeRef.matrix.elements.slice();
-			});
-		}
+				nodeInfo.transform = nodeRef.matrix.elements.slice();
+			}
+		});
 
 		if (this._jointCollection && this._jointCollection.length > 0) {
 			this._jointCollection.forEach(function(joint) {
@@ -2656,9 +2662,7 @@ sap.ui.define([
 		}
 
 		var nodeInfo = currentView.getNodeInfos();
-
 		if (nodeInfo) {
-
 			nodeInfo.forEach(function(node) {
 
 				if (node.target !== nodeRef) {
@@ -2718,9 +2722,7 @@ sap.ui.define([
 		}
 
 		var nodeInfo = currentView.getNodeInfos();
-
 		if (nodeInfo) {
-
 			nodeInfo.forEach(function(node) {
 
 				if (node.target !== nodeRef) {
@@ -2830,16 +2832,10 @@ sap.ui.define([
 	 * @private
 	 */
 	ViewStateManager.prototype.getRestOpacity = function(nodeRef) {
-		var nodeInfo;
-		var currentView = this.getCurrentView();
-		if (currentView) {
-			nodeInfo = currentView.getNodeInfos();
-		}
-
+		const nodeInfo = this.getCurrentView()?.getNodeInfos();
 		var result = 1;
 
-		if (nodeInfo && nodeInfo.length) {
-
+		if (nodeInfo?.length) {
 			for (var i = 0; i < nodeInfo.length; i++) {
 				var node = nodeInfo[i];
 				if (node.target !== nodeRef) {
@@ -2852,6 +2848,7 @@ sap.ui.define([
 				break;
 			}
 		}
+
 		return result;
 	};
 
@@ -2864,22 +2861,14 @@ sap.ui.define([
 	 * @private
 	 */
 	ViewStateManager.prototype.setRestOpacity = function(nodeRef, opacity) {
-		var nodeInfo;
-		var currentView = this.getCurrentView();
-		if (currentView) {
-			nodeInfo = currentView.getNodeInfos();
-		}
-
-		if (nodeInfo) {
-
-			nodeInfo.forEach(function(node) {
+		const nodeInfos = this.getCurrentView()?.getNodeInfos();
+		nodeInfos?.forEach(function(node) {
+			if (node.target !== nodeRef) {
+				return;
+			}
+			node.opacity = opacity;
+		});
 
-				if (node.target !== nodeRef) {
-					return;
-				}
-				node.opacity = opacity;
-			});
-		}
 		return this;
 	};
 
@@ -2891,14 +2880,8 @@ sap.ui.define([
 	 * @private
 	 */
 	ViewStateManager.prototype.restoreRestOpacity = function(nodeRef) {
-		var nodeInfo;
-		var currentView = this.getCurrentView();
-		if (currentView) {
-			nodeInfo = currentView.getNodeInfos();
-		}
-
+		const nodeInfo = this.getCurrentView()?.getNodeInfos();
 		if (nodeInfo) {
-
 			nodeInfo.forEach(function(node) {
 
 				if (node.target !== nodeRef) {
@@ -2967,28 +2950,23 @@ sap.ui.define([
 	 * @private
 	 */
 	ViewStateManager.prototype.updateRestOpacity = function(nodeRef) {
-		var nodeInfo;
-		var currentView = this.getCurrentView();
-		if (currentView) {
-			nodeInfo = currentView.getNodeInfos();
+		const currentView = this.getCurrentView();
+		if (!currentView) {
+			return this;
 		}
 
-		if (nodeInfo) {
-
-			nodeInfo.forEach(function(node) {
-
-				if (node.target !== nodeRef) {
-					return;
-				}
-				if (nodeRef.userData && nodeRef.userData.opacity !== undefined && nodeRef.userData.opacity !== null) {
-					node.opacity = nodeRef.userData.opacity;
+		currentView.getNodeInfos()?.forEach(function(nodeInfo) {
+			if (nodeInfo.target === nodeRef) {
+				const opacity = this._getOpacity(nodeRef);
+				if (opacity != null) {
+					nodeInfo.opacity = opacity;
 				} else {
-					delete node.opacity;
+					delete nodeInfo.opacity;
 				}
-			});
-		}
+			}
+		}, this);
 
-		if (this._jointCollection && this._jointCollection.length > 0) {
+		if (this._jointCollection?.length > 0) {
 			this._jointCollection.forEach(function(joint) {
 				if (!joint.node || !joint.parent) {
 					return;
@@ -3031,11 +3009,7 @@ sap.ui.define([
 	 * @private
 	 */
 	ViewStateManager.prototype.getRestTransformationWorld = function(nodeRef) {
-		var nodeInfo;
-		var currentView = this.getCurrentView();
-		if (currentView) {
-			nodeInfo = currentView.getNodeInfos();
-		}
+		const nodeInfo = this.getCurrentView()?.getNodeInfos();
 
 		var result;
 		if (nodeInfo) {
@@ -3101,11 +3075,7 @@ sap.ui.define([
 	 * @private
 	 */
 	ViewStateManager.prototype.getRestTransformation = function(nodeRef) {
-		var nodeInfo;
-		var currentView = this.getCurrentView();
-		if (currentView) {
-			nodeInfo = currentView.getNodeInfos();
-		}
+		const nodeInfo = this.getCurrentView()?.getNodeInfos();
 
 		var result;
 		if (nodeInfo) {
@@ -4012,7 +3982,7 @@ sap.ui.define([
 	 * @private
 	 */
 	ViewStateManager.prototype.getTotalOpacity = function(nodeRef) {
-		return nodeRef._vkGetTotalOpacity(this._jointCollection);
+		return nodeRef._vkGetTotalOpacity(this._jointCollection, this);
 	};
 
 	/**
@@ -4035,7 +4005,7 @@ sap.ui.define([
 			parentTotal = nodeRef.parent._vkGetTotalOpacity(this._jointCollection);
 		}
 
-		var opacity = this.getOpacity(nodeRef);
+		let opacity = this._getOpacity(nodeRef);
 
 		if (parentTotal !== 0.0) {
 			opacity = totalOpacity / parentTotal;
@@ -4043,16 +4013,16 @@ sap.ui.define([
 			totalOpacity = 0.0;
 		}
 
-		nodeRef._vkSetOpacity(opacity, this._jointCollection);
+		this.setOpacity(nodeRef, opacity);
 
 		var eventParameters = {
 			changed: nodeRef,
-			opacity: opacity
+			opacity
 		};
 
 		this.fireOpacityChanged(eventParameters);
 
-		return { opacity: opacity, totalOpacity: totalOpacity };
+		return { opacity, totalOpacity };
 	};
 
 	/**
@@ -4076,10 +4046,7 @@ sap.ui.define([
 			return null;
 		}
 
-		var value = 1;
-		if (nodeRef.userData && nodeRef.userData.opacity !== undefined && nodeRef.userData.opacity !== null) {
-			value = nodeRef.userData.opacity;
-		}
+		let value = this.getOpacity(nodeRef) ?? 1;
 
 		var restOpacity = this.getRestOpacity(nodeRef);
 		// for converted absolute track, 0 rest opacity is assumed to be 1 when being converted to relative track
@@ -4250,5 +4217,343 @@ sap.ui.define([
 		}
 	};
 
+	ViewStateManager.prototype._getNodeState = function(nodeRef, createIfNotExists) {
+		const nodeStates = this._nodeStates;
+		let state = nodeStates.get(nodeRef);
+		if (state == null && createIfNotExists) {
+			state = {
+				visible: null,
+				originalVisible: null,
+				selected: false,
+				ancestorSelected: false,
+				tintColor: null,
+				ancestorTintColor: null,
+				highlightColor: null,
+				ancestorHighlightColor: null,
+				opacity: null,
+				ancestorOverridesOpacity: false,
+				boundingBoxNode: null,
+				material: null,
+				material2: null,
+				originalMaterial: null
+			};
+			nodeStates.set(nodeRef, state);
+		}
+		return state;
+	};
+
+	ViewStateManager.prototype._deleteUnusedNodeStates = function() {
+		const materialCache = this._materialCache;
+		this._nodeStates.forEach(function(state, nodeRef, nodeStates) {
+			if (state.visible == null
+				&& !state.selected
+				&& !state.ancestorSelected
+				&& state.tintColor == null
+				&& state.ancestorTintColor == null
+				&& state.highlightColor == null
+				&& state.ancestorHighlightColor == null
+				&& state.opacity == null
+				&& !state.ancestorOverridesOpacity
+			) {
+				nodeStates.delete(nodeRef);
+				if (state.material != null) {
+					materialCache.releaseMaterial(state.material);
+				}
+				if (state.material2 != null) {
+					materialCache.releaseMaterial(state.material2);
+				}
+			}
+		});
+
+		return this;
+	};
+
+	ViewStateManager.prototype._applyVisibilityNodeState = function(nodeRefs, visibilities) {
+		nodeRefs.forEach(function(nodeRef, index) {
+			const newVisibility = visibilities[index];
+			const ownVisibility = nodeRef.visible;
+			const newVisibilityIsDifferentFromOwn = newVisibility !== ownVisibility;
+			const state = this._getNodeState(nodeRef, newVisibilityIsDifferentFromOwn);
+			if (state) {
+				if (newVisibilityIsDifferentFromOwn) {
+					state.visible = newVisibility;
+				} else {
+					// When we assign `null` the state is marked for deletion as it might be identical to the unmodified
+					// original state.
+					state.visible = null;
+				}
+			}
+		}, this);
+	};
+
+	ViewStateManager.prototype._applySelectionNodeState = function(nodeRefs, selected) {
+		if (selected) {
+			nodeRefs.forEach(function(nodeRef) {
+				this._selectedNodes.add(nodeRef);
+				if (this._showSelectionBoundingBox) {
+					this._addBoundingBox(nodeRef);
+				}
+				const state = this._getNodeState(nodeRef, true);
+				const nodeWasSelected = nodeIsSelected(state);
+				state.selected = true;
+				if (nodeIsSelected(state) !== nodeWasSelected) {
+					this._setNeedsMaterialUpdate(nodeRef);
+				}
+				// If state.ancestorSelected === true then descendants have already been processed.
+				if (!state.ancestorSelected) {
+					nodeRef.children.forEach(this._setAncestorSelectedRecursively.bind(this, true), this);
+				}
+			}, this);
+		} else {
+			nodeRefs.forEach(function(nodeRef) {
+				this._selectedNodes.delete(nodeRef);
+				if (this._showSelectionBoundingBox) {
+					this._removeBoundingBox(nodeRef);
+				}
+				const state = this._nodeStates.get(nodeRef);
+				if (state != null) {
+					const nodeWasSelected = nodeIsSelected(state);
+					state.selected = false;
+					if (nodeIsSelected(state) !== nodeWasSelected) {
+						this._setNeedsMaterialUpdate(nodeRef);
+					}
+					// If state.ancestorSelected === true then the descendants also are highlighted and we should not
+					// unset the state, they inherit it from the node's ancestor.
+					if (!state.ancestorSelected) {
+						nodeRef.children.forEach(this._setAncestorSelectedRecursively.bind(this, false), this);
+					}
+				}
+			}, this);
+		}
+
+		return this;
+	};
+
+	ViewStateManager.prototype._setAncestorSelectedRecursively = function(ancestorSelected, nodeRef) {
+		const state = this._getNodeState(nodeRef, ancestorSelected);
+		if (state != null && state.ancestorSelected !== ancestorSelected) {
+			const nodeWasSelected = nodeIsSelected(state);
+			state.ancestorSelected = ancestorSelected;
+			if (nodeIsSelected(state) !== nodeWasSelected) {
+				this._setNeedsMaterialUpdate(nodeRef);
+			}
+			// If state.selected === true then its descendants have already been processed.
+			if (!state.selected) {
+				nodeRef.children.forEach(this._setAncestorSelectedRecursively.bind(this, ancestorSelected), this);
+			}
+		}
+
+		return this;
+	};
+
+	ViewStateManager.prototype._applyTintColorNodeState = function(nodeRefs, colors) {
+		nodeRefs.forEach(function(nodeRef, index) {
+			const tintColor = colors[index];
+			const state = this._getNodeState(nodeRef, tintColor != null);
+			if (state != null) {
+				state.tintColor = tintColor;
+				this._setNeedsMaterialUpdate(nodeRef);
+				nodeRef.children.forEach(this._setAncestorTintColorRecursively.bind(this,
+					tintColor != null ? tintColor : state.ancestorTintColor), this);
+			}
+		}, this);
+
+		return this;
+	};
+
+	ViewStateManager.prototype._setAncestorTintColorRecursively = function(ancestorTintColor, nodeRef) {
+		const state = this._getNodeState(nodeRef, ancestorTintColor != null);
+		if (state != null && state.ancestorTintColor !== ancestorTintColor) {
+			const previousEffectiveTintColor = effectiveTintColor(state);
+			state.ancestorTintColor = ancestorTintColor;
+			if (effectiveTintColor(state) !== previousEffectiveTintColor) {
+				this._setNeedsMaterialUpdate(nodeRef);
+			}
+			// If this node has its own tint color then this tint color is already propagated to its descendants and we
+			// don't need to do anything. But if we remove tint color from this node then we need to propagate its
+			// ancestor's tint color (or its absence) to this node's descendants.
+			if (state.tintColor == null) {
+				nodeRef.children.forEach(this._setAncestorTintColorRecursively.bind(this, ancestorTintColor), this);
+			}
+		}
+
+		return this;
+	};
+
+	ViewStateManager.prototype._setAncestorHighlightColorRecursively = function(ancestorHighlightColor, nodeRef) {
+		const state = this._getNodeState(nodeRef, ancestorHighlightColor != null);
+		if (state != null && state.ancestorHighlightColor !== ancestorHighlightColor) {
+			const previousEffectiveHighlightColor = effectiveHighlightColor(state);
+			state.ancestorHighlightColor = ancestorHighlightColor;
+			if (effectiveHighlightColor(state) !== previousEffectiveHighlightColor) {
+				this._setNeedsMaterialUpdate(nodeRef);
+			}
+			// If this node has its own highlight color then this highlight color is already propagated to its descendants and we
+			// don't need to do anything. But if we remove highlight color from this node then we need to propagate its
+			// ancestor's highlight color (or its absence) to this node's descendants.
+			if (state.highlightColor == null) {
+				nodeRef.children.forEach(this._setAncestorHighlightColorRecursively.bind(this, ancestorHighlightColor), this);
+			}
+		}
+
+		return this;
+	};
+
+	ViewStateManager.prototype._applyOpacityNodeState = function(nodeRefs, opacities) {
+		nodeRefs.forEach(function(nodeRef, index) {
+			const opacity = opacities[index];
+			const state = this._getNodeState(nodeRef, opacity != null);
+			if (state != null) {
+				state.opacity = opacity;
+				// We do not compare whether the effective (world) opacity has changed, as this is a relatively
+				// expensive computation, and if the opacity is assigned, we expect it to be assigned a new value, so
+				// the effective opacity has surely changed.
+				this._setNeedsMaterialUpdate(nodeRef);
+
+				nodeRef.children.forEach(this._setAncestorOverridesOpacityRecursively.bind(this, opacity != null), this);
+			}
+		}, this);
+
+		return this;
+	};
+
+	ViewStateManager.prototype._setAncestorOverridesOpacityRecursively = function(ancestorOverridesOpacity, nodeRef) {
+		const state = this._getNodeState(nodeRef, ancestorOverridesOpacity);
+		if (state != null) {
+			state.ancestorOverridesOpacity = ancestorOverridesOpacity;
+			this._setNeedsMaterialUpdate(nodeRef);
+
+			nodeRef.children.forEach(this._setAncestorOverridesOpacityRecursively.bind(this, state.opacity != null || ancestorOverridesOpacity), this);
+		}
+
+		return this;
+	};
+
+	ViewStateManager.prototype._computeWorldOpacity = function(nodeRef, state) {
+		state ??= this._nodeStates.get(nodeRef);
+		const localOpacity = state?.opacity ?? nodeRef.userData.opacity ?? 1; // Default opacity value is 1
+		return nodeRef.parent ? localOpacity * this._computeWorldOpacity(nodeRef.parent) : localOpacity;
+	};
+
+	ViewStateManager.prototype._setNeedsMaterialUpdate = function(nodeRef) {
+		if (nodeRef.material != null) {
+			this._needsMaterialUpdate.add(nodeRef);
+		}
+	};
+
+	function customizeMaterial(material, originalMaterial, color, opacity) {
+		material.color.copy(originalMaterial.color);
+		material.emissive?.copy(originalMaterial.emissive);
+		material.specular?.copy(originalMaterial.specular);
+
+		material.userData.customColor = color.w > 0;
+		if (material.userData.customColor) {
+			const blendColor = new THREE.Color(color.x, color.y, color.z);
+			material.color.lerp(blendColor, color.w);
+			material.emissive?.lerp(blendColor, color.w * 0.5);
+			material.specular?.multiplyScalar(1 - 0.5 * color.w); // reduce specular as it may overexpose the highlighting
+		}
+
+		const wasTransparent = material.transparent;
+		material.opacity = opacity;
+		material.transparent = opacity < 1;
+		material.needsUpdate = material.transparent !== wasTransparent; // need to update the material if "transparent" state has changed
+	}
+
+	ViewStateManager.prototype._updateNodeStateMaterials = function() {
+		if (this._needsMaterialUpdate.size === 0) {
+			return this; // nothing to do
+		}
+
+		const materialCache = this._materialCache;
+		const selectionColor = abgrToColor(this._highlightColorABGR);
+		const selectionColorV4 = new THREE.Vector4(selectionColor.red / 255.0, selectionColor.green / 255.0, selectionColor.blue / 255.0, 1);
+
+		this._needsMaterialUpdate.forEach(function(nodeRef) {
+			assert(nodeRef.material != null, "Node should have a material to update its state");
+			const state = this._nodeStates.get(nodeRef);
+			if (state == null) {
+				return; // no state for this node, nothing to do
+			}
+
+			const worldOpacity = this._computeWorldOpacity(nodeRef, state);
+			const color = new THREE.Vector4(0, 0, 0, 0);
+
+			const highlightColor = effectiveHighlightColor(state);
+			if (highlightColor != null) { // view highlighting animation (HighlightPlayer)
+				color.fromArray(highlightColor);
+			}
+
+			const tintColor = effectiveTintColor(state);
+			if (tintColor != null) { // tinting
+				const c = abgrToColor(tintColor);
+				color.lerp(new THREE.Vector4(c.red / 255.0, c.green / 255.0, c.blue / 255.0, 1), c.alpha);
+			}
+
+			if (state.selected || state.ancestorSelected) { // selection
+				state.material2 ??= materialCache.cloneMaterial(nodeRef.material);
+				customizeMaterial(state.material2, nodeRef.material, color, worldOpacity); // material2 is used to render the outline selection
+
+				color.lerp(selectionColorV4, selectionColor.alpha);
+			}
+
+			state.material ??= materialCache.cloneMaterial(nodeRef.material);
+			customizeMaterial(state.material, nodeRef.material, color, worldOpacity);
+
+			state.customMaterial = color.w > 0 || worldOpacity < 1;
+		}, this);
+
+		this._needsMaterialUpdate.clear();
+
+		return this;
+	};
+
+	ViewStateManager.prototype.applyNodeStates = function(ignoreSelection) {
+		this._updateNodeStateMaterials();
+
+		this._nodeStates.forEach(function(state, nodeRef) {
+			if (state.material != null && state.customMaterial) {
+				state.originalMaterial = nodeRef.material;
+				nodeRef.material = ignoreSelection && (state.selected || state.ancestorSelected) ? (state.material2 ?? state.material) : state.material;
+				nodeRef.userData.customMaterial = true; // mark the node as having a custom material
+			}
+			if (state.visible != null) {
+				state.originalVisible = nodeRef.visible;
+				nodeRef.visible = state.visible;
+			}
+		});
+	};
+
+	ViewStateManager.prototype.revertNodeStates = function() {
+		this._nodeStates.forEach(function(state, nodeRef) {
+			if (state.originalMaterial) {
+				nodeRef.material = state.originalMaterial;
+				state.originalMaterial = null;
+				nodeRef.userData.customMaterial = false; // mark the node as not having a custom material
+			}
+			if (state.originalVisible != null) {
+				nodeRef.visible = state.originalVisible;
+				state.originalVisible = null;
+			}
+		});
+	};
+
+	function nodeIsSelected(state) {
+		assert(state != null, "Node state should not be null");
+		return state.selected || state.ancestorSelected;
+	}
+
+	function effectiveVisibility(nodeRef, state) {
+		return state?.visible ?? nodeRef?.visible ?? false;
+	}
+
+	function effectiveTintColor(state) {
+		return state.tintColor || state.ancestorTintColor;
+	}
+
+	function effectiveHighlightColor(state) {
+		return state.highlightColor || state.ancestorHighlightColor;
+	}
+
 	return ViewStateManager;
 });