@sapui5/sap.ui.vk 1.134.0 → 1.136.0

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

@@ -16,6 +16,7 @@ sap.ui.define([
 	"./PolylineMaterial",
 	"./PolylineMesh",
 	"./ThreeUtils",
+	"../totara/TotaraUtils",
 	"sap/base/util/uid"
 ], function(
 	Log,
@@ -27,6 +28,7 @@ sap.ui.define([
 	PolylineMaterial,
 	PolylineMesh,
 	ThreeUtils,
+	TotaraUtils,
 	uid
 ) {
 	"use strict";
@@ -41,7 +43,7 @@ sap.ui.define([
 	 * @param {THREE.Scene} scene The three.js scene object.
 	 * @public
 	 * @author SAP SE
-	 * @version 1.134.0
+	 * @version 1.136.0
 	 * @extends sap.ui.vk.Scene
 	 * @alias sap.ui.vk.threejs.Scene
 	 */
@@ -70,6 +72,8 @@ sap.ui.define([
 			this._initialView = null;
 			this._materialMap = new Map();
 
+			this._outlineGeometryToNodes = new Map(); // array of mesh nodes that have this geometry
+
 			// A storage (map) with all loaded annotations.
 			//
 			// annotationId -> { annotationInfo, node, attachment, targetNodes[] }
@@ -227,6 +231,7 @@ sap.ui.define([
 	};
 
 	Scene.prototype.destroy = function() {
+		this._outlineGeometryToNodes.clear();
 		this.clearThreeScene();
 		// if (this._sceneBuilder) {
 		// 	this._sceneBuilder.cleanup();
@@ -668,7 +673,7 @@ sap.ui.define([
 		return rg ? [rg.lastVertex - rg.firstVertex, rg.count] : [positionAttribute.count, geometry.index ? geometry.index.array.length : positionAttribute.count];
 	}
 
-	function addMeshVerticesIndices(resultVertices, resultIndices, resultCounts, node, isChild) {
+	function addMeshVerticesIndices(resultVertices, resultIndices, resultCounts, node, isChild, geometryToNodesMap) {
 		const geometry = node.isMesh && (!!node.userData.skipIt === isChild) && !nodeBoxIsNull(node) && node.geometry;
 		const positionAttribute = geometry && geometry.isBufferGeometry && geometry.getAttribute("position");
 		if (!positionAttribute) {
@@ -681,6 +686,10 @@ sap.ui.define([
 			tm = node.matrix;
 		}
 
+		if (geometryToNodesMap) {
+			TotaraUtils.pushElementIntoMapArray(geometryToNodesMap, node.userData.geometryId, isChild ? node.parent : node);
+		}
+
 		const rg = node.userData.renderGroup;
 		const vertexStart = rg ? rg.firstVertex : 0;
 		const vertexCount = rg ? (rg.lastVertex - vertexStart) : positionAttribute.count;
@@ -723,32 +732,58 @@ sap.ui.define([
 		resultCounts[1] += indexCount;
 	}
 
-	function createMergedGeometry(node) {
-		let i, childCount = node.children.length;
-		let [vertexCount, indexCount] = countMeshVerticesIndices(node, false);
-		for (i = 0; i < childCount; ++i) {
-			const [childVertexCount, childIndexCount] = countMeshVerticesIndices(node.children[i], true);
-			vertexCount += childVertexCount;
-			indexCount += childIndexCount;
-		}
+	function _addOutlineGeometry(node, isPolylineMesh, outlineMaterial, geometryToNodesMap) {
+		try {
+			// create merged geometry first
+			let i, childCount = node.children.length;
+			let [vertexCount, indexCount] = countMeshVerticesIndices(node, false);
+			for (i = 0; i < childCount; ++i) {
+				const [childVertexCount, childIndexCount] = countMeshVerticesIndices(node.children[i], true);
+				vertexCount += childVertexCount;
+				indexCount += childIndexCount;
+			}
 
-		if (!vertexCount) {
-			return null;
-		}
+			if (!vertexCount) {
+				return;
+			}
 
-		const vertices = new Float32Array(vertexCount * 3);
-		const indices = new Uint32Array(indexCount);
-		let counts = [0, 0]; // [0] - vertex, [1] - index
+			const vertices = new Float32Array(vertexCount * 3);
+			const indices = new Uint32Array(indexCount);
+			let counts = [0, 0]; // [0] - vertex, [1] - index
 
-		addMeshVerticesIndices(vertices, indices, counts, node, false);
-		for (i = 0; i < childCount; ++i) {
-			addMeshVerticesIndices(vertices, indices, counts, node.children[i], true);
-		}
+			addMeshVerticesIndices(vertices, indices, counts, node, false, geometryToNodesMap);
+			for (i = 0; i < childCount; ++i) {
+				addMeshVerticesIndices(vertices, indices, counts, node.children[i], true, geometryToNodesMap);
+			}
+
+			const geometry = new THREE.BufferGeometry();
+			geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+			geometry.setIndex(new THREE.BufferAttribute(indices, 1));
+
+			// now create the outline geometry from it
+			const outlineGeometry = new OutlineGeometry(geometry);
+			const positionAttribute = outlineGeometry.getAttribute("position");
+			if (positionAttribute && positionAttribute.count > 0) {
+				let line;
+				if (isPolylineMesh) {
+					const polylineGeometry = new PolylineGeometry(outlineGeometry);
+					polylineGeometry.boundingBox = new THREE.Box3(); // set empty bounding box, disable hit testing
+					line = new PolylineMesh(polylineGeometry, outlineMaterial);
+				} else {
+					outlineGeometry.boundingBox = new THREE.Box3(); // set empty bounding box, disable hit testing
+					line = new THREE.LineSegments(outlineGeometry, outlineMaterial);
+				}
 
-		const geometry = new THREE.BufferGeometry();
-		geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
-		geometry.setIndex(new THREE.BufferAttribute(indices, 1));
-		return geometry;
+				line.isOutline = true;
+				line.userData.skipIt = true;
+				line.renderOrder = node.renderOrder + 0.5;
+				line.matrixWorldNeedsUpdate = true;
+				node.add(line);
+				node.hasOutline = true;
+			}
+		} catch (err) {
+			Log.error("Unable to create outline geometry for node " + node.name, err);
+		}
 	}
 
 	function setMeshMaterial(node, newMaterial) {
@@ -794,58 +829,8 @@ sap.ui.define([
 					// }
 
 					if (!node.hasOutline) {// create outline
-						try {
-							var mergedGeometry = createMergedGeometry(node);
-							if (mergedGeometry !== null) {
-								node.hasOutline = true;
-								var outlineGeometry = new OutlineGeometry(mergedGeometry);
-								var positionAttribute = outlineGeometry.getAttribute("position");
-								if (positionAttribute && positionAttribute.count > 0) {
-									let line;
-
-									if (this._illustrationLineWidth > 0.0) {
-										// convert to PolylineGeometry
-										const normal1 = outlineGeometry.getAttribute("normal1").array;
-										const normal2 = outlineGeometry.getAttribute("normal2").array;
-										const positions = [];
-										const vertexCount = positionAttribute.count;
-										const pa = positionAttribute.array;
-										for (let i = 0; i < vertexCount; ++i) {
-											positions.push(new THREE.Vector3(pa[i * 3], pa[i * 3 + 1], pa[i * 3 + 2]));
-										}
-
-										const edgeCount = vertexCount / 2;
-										const indices = [];
-										const normals = new Float32Array(6 * edgeCount);
-										for (let j = 0; j < edgeCount; ++j) {
-											indices.push(j * 2);
-											indices.push(j * 2 + 1);
-											normals[j * 6] = normal1[j * 6];
-											normals[j * 6 + 1] = normal1[j * 6 + 1];
-											normals[j * 6 + 2] = normal1[j * 6 + 2];
-											normals[j * 6 + 3] = normal2[j * 6];
-											normals[j * 6 + 4] = normal2[j * 6 + 1];
-											normals[j * 6 + 5] = normal2[j * 6 + 2];
-										}
-
-										const polylineGeometry = new PolylineGeometry();
-										polylineGeometry.setVertices(positions, indices, normals);
-										polylineGeometry.boundingBox = new THREE.Box3(); // set empty bounding box, disable hit testing
-										line = new PolylineMesh(polylineGeometry, this._outlineThickMaterial);
-									} else {
-										outlineGeometry.boundingBox = new THREE.Box3(); // set empty bounding box, disable hit testing
-										line = new THREE.LineSegments(outlineGeometry, this._outlineMaterial);
-									}
-
-									line.isOutline = true;
-									line.renderOrder = node.renderOrder + 0.5;
-									line.matrixWorldNeedsUpdate = true;
-									node.add(line);
-								}
-							}
-						} catch (err) {
-							Log.error("Unable to create outline geometry for node " + node.name, err);
-						}
+						const isThickLines = this._illustrationLineWidth > 0.0;
+						_addOutlineGeometry(node, isThickLines, isThickLines ? this._outlineThickMaterial : this._outlineMaterial, this._outlineGeometryToNodes);
 					}
 					if (node.isMesh && node.material && !node.material.isLineBasicMaterial && !node.material.isLineMaterial) {// update material
 						switch (renderMode) {
@@ -887,6 +872,28 @@ sap.ui.define([
 		}
 	};
 
+	Scene.prototype.onGeometryUpdated = function(geometryId) {
+		const nodes = this._outlineGeometryToNodes.get(geometryId);
+		if (nodes) {
+			for (let ni = 0; ni < nodes.length; ++ni) {
+				const node = nodes[ni];
+				const ch = node.children;
+				for (let i = ch.length - 1; i >= 0; --i) {
+					const outlineNode = ch[i];
+					if (outlineNode.isOutline) {
+						const isPolylineMesh = outlineNode.isPolylineMesh;
+						const outlineMaterial = outlineNode.material;
+						node.remove(outlineNode);
+
+						// must rebuild the outline mesh used in illustration rendering as it was built off a proxy mesh
+						_addOutlineGeometry(node, isPolylineMesh, outlineMaterial, null);
+						break;
+					}
+				}
+			}
+		}
+	};
+
 	/**
 	 * Get initial view
 	 *

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

@@ -104,8 +104,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.134.0
-	 * @experimental Since 1.60.0 This class is experimental and might be modified or removed in future versions.
+	 * @version 1.136.0
 	 */
 	var SceneBuilder = function(rootNode, contentResource, resolve, reject) {
 		this._rootNode = rootNode;
@@ -386,26 +385,12 @@ sap.ui.define([
 		return matrix;
 	};
 
-	var DefaultHighlightingEmissive = {
-		r: 0.0235,
-		g: 0.0235,
-		b: 0.0235
-	};
-
-	var DefaultHighlightingSpecular = {
-		r: 0.0602,
-		g: 0.0602,
-		b: 0.0602
-	};
-
 	////////////////////////////////////////////////////////////////////////////////////////////////////////
 	// Create a place-holder material, whose value should be updated when material data is available
 	SceneBuilder.prototype._createTemporaryMaterial = function(materialId, materialType) {
 		var vkMaterial = new Material(materialType || MaterialType.MeshPhongMaterial);
 		var material = vkMaterial.getMaterialRef();
 		material.vertexColors = true; // note: we will turn vertex colors in the shader if geometry.attributes.color is not defined
-		material.userData.defaultHighlightingEmissive = DefaultHighlightingEmissive;
-		material.userData.defaultHighlightingSpecular = DefaultHighlightingSpecular;
 		material.userData.materialUsed = 0;
 		material.userData.materialId = materialId;
 		material.userData.toBeUpdated = true;
@@ -1558,7 +1543,7 @@ sap.ui.define([
 
 		if (geoInfo.isPointCloud) { // update scene point scale
 			const nativeSceneUD = this._vkScene.getSceneRef().userData;
-			const points = geoInfo.data.points;
+			const points = data.points;
 			const box = new THREE.Box3().setFromArray(points); // todo: pass bbox from loader instead of recomputing
 
 			nativeSceneUD.pointCloudBoundingBox ??= new THREE.Box3();
@@ -1613,14 +1598,16 @@ sap.ui.define([
 				var meshId = submeshInfo.meshId;
 				var nodes = this._meshNodes.get(meshId);
 				if (nodes) {
-					// "nodes" is a list of all meshes that have this geometry
-					for (var ni = 0; ni < nodes.length; ni++) {
+					// "nodes" is a list of all meshes that have this geometry and already exist in the scene
+					for (let ni = 0; ni < nodes.length; ++ni) {
 						// "nodes[ni].children" are all submeshes of a mesh
 						replaceSubmeshGeometry(nodes[ni].children,
 							this._geometrySubmeshIndices.get(nodes[ni].userData.nodeId + ":" + geometryId),
 							geometryId, geometryDescriptor, nativeSceneUD, true);
 					}
 				}
+
+				// "submeshes" are copies that don't exist in the scene (it is not attached to any nodes)
 				var submeshes = this._meshSubmeshes.get(meshId);
 				if (submeshes) {
 					replaceSubmeshGeometry(submeshes, submeshInfo.submeshIndex,
@@ -1631,6 +1618,7 @@ sap.ui.define([
 			this._geometryProxies.delete(geometryId);
 		}
 
+		this._vkScene.onGeometryUpdated(geometryId);
 		if (this._fireSceneUpdated) {
 			this._fireSceneUpdated(skipHierarchyProcessing);
 		}
@@ -2837,9 +2825,6 @@ sap.ui.define([
 		// exact pixel to pixel equality seems to be impossible without using custom shaders
 		// material.specular.multiplyScalar(3.0 / (material.shininess * 0.5 + 1.0));
 
-		material.userData.defaultHighlightingEmissive = DefaultHighlightingEmissive;
-		material.userData.defaultHighlightingSpecular = DefaultHighlightingSpecular;
-
 		material.userData.imageIdsToAddAsTexture = new Set();
 		var info, infos;
 		if (materialInfo.textureDiffuse) {
@@ -3834,7 +3819,7 @@ sap.ui.define([
 			color1[3] = ((info.color1 >>> 24) & 255) / 255; // highlighting intensity
 			color2[3] = ((info.color2 >>> 24) & 255) / 255; // highlighting intensity
 			highlight.colours = [color1, color2];
-			highlight.opacities = [info.opacity1, info.opacity2];
+			highlight.opacities = [THREE.MathUtils.clamp(info.opacity1, 0, 1), THREE.MathUtils.clamp(info.opacity2, 0, 1)];
 			this._vkScene.createHighlight(info.id, highlight);
 			view.addHighlightedNodes(info.id, highlightNodes);
 		}

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

@@ -18,13 +18,10 @@ sap.ui.define([
 	/**
 	 * Constructor for a new Material.
 	 *
-	 *
 	 * @class Provides the interface for the material.
-	 *
-	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.134.0
+	 * @version 1.136.0
 	 * @extends sap.ui.vk.Texture
 	 * @alias sap.ui.vk.threejs.Texture
 	 * @experimental Since 1.60.0 This class is experimental and might be modified or removed in future versions.

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

@@ -20,18 +20,6 @@ sap.ui.define([
 ) {
 	"use strict";
 
-	THREE.Object3D.prototype.defaultEmissive = {
-		r: 0.0235,
-		g: 0.0235,
-		b: 0.0235
-	};
-
-	THREE.Object3D.prototype.defaultSpecular = {
-		r: 0.0602,
-		g: 0.0602,
-		b: 0.0602
-	};
-
 	// TODO(VSM): REMOVE
 	THREE.Object3D.prototype._vkCalculateObjectOrientedBoundingBox = function() {
 		ThreeUtils.computeObjectOrientedBoundingBox(this, this.userData.boundingBox = new THREE.Box3());
@@ -100,30 +88,12 @@ sap.ui.define([
 		}
 
 		var userData = this.userData;
+		userData.blendColor = null;
 
 		if (userData.originalMaterial) {
-			if (userData.originalMaterial.color.r === undefined) {
-				// TODO(VSM): should we call `ThreeUtils.disposeMaterial(this.material)`?
-				userData.originalMaterial = null;
-			} else if (userData.originalMaterial.map !== this.material.map ||
-				userData.originalMaterial.bumpMap !== this.material.bumpMap ||
-				userData.originalMaterial.alphaMap !== this.material.alphaMap ||
-				userData.originalMaterial.envMap !== this.material.envMap ||
-				userData.originalMaterial.emissiveMap !== this.material.emissiveMap ||
-				userData.originalMaterial.aoMap !== this.material.aoMap) {
-				// textures are added to original material after node material is cloned, need to re-clone
-				// the same original material may be shared among nodes, so need to check for each node
-				// TODO(VSM): should we call `ThreeUtils.disposeMaterial(this.material)`?
-				this.material = userData.originalMaterial.clone();
-			} else {
-				this.material.color.copy(userData.originalMaterial.color);
-				if (this.material.emissive !== undefined) {
-					this.material.emissive.copy(userData.originalMaterial.emissive);
-				}
-				if (this.material.specular !== undefined) {
-					this.material.specular.copy(userData.originalMaterial.specular);
-				}
-			}
+			this.material.color.copy(userData.originalMaterial.color); // diffuse color, may be multiplied by material.map
+			this.material.emissive?.copy(userData.originalMaterial.emissive);
+			this.material.specular?.copy(userData.originalMaterial.specular);
 		}
 
 		if (userData.highlightColor !== undefined || userData.tintColor !== undefined || userData.highlightingColor !== undefined) {
@@ -134,52 +104,29 @@ sap.ui.define([
 				this.material = this.material.clone();
 			}
 
-			if (userData.highlightingColor !== undefined) {
+			const color = new THREE.Vector4(0, 0, 0, 0);
 
-				var color = new THREE.Color();
-				color.fromArray(userData.highlightingColor).lerp(userData.originalMaterial.color, 1 - userData.highlightingColor[3]);
+			if (userData.highlightingColor !== undefined) { // highlighting animation of the view (HighlightPlayer)
+				color.fromArray(userData.highlightingColor);
+			}
 
-				this.material.color.copy(color);
+			if (userData.tintColor !== undefined) { // tinting (ViewStateManangert)
+				const c = abgrToColor(userData.tintColor);
+				color.lerp(new THREE.Vector4(c.red / 255.0, c.green / 255.0, c.blue / 255.0, 1), c.alpha);
 			}
 
-			var c;
-			if (userData.tintColor !== undefined) {
-				c = abgrToColor(userData.tintColor);
-				this.material.color.lerp(new THREE.Color(c.red / 255.0, c.green / 255.0, c.blue / 255.0), c.alpha);
-				if (this.material.emissive !== undefined) {
-					if (this.material.userData.defaultHighlightingEmissive) {
-						this.material.emissive.copy(this.material.userData.defaultHighlightingEmissive);
-					} else {
-						this.material.emissive.copy(THREE.Object3D.prototype.defaultEmissive);
-					}
-				}
-				if (this.material.specular !== undefined) {
-					if (this.material.userData.defaultHighlightingSpecular) {
-						this.material.specular.copy(this.material.userData.defaultHighlightingSpecular);
-					} else {
-						this.material.specular.copy(THREE.Object3D.prototype.defaultSpecular);
-					}
-				}
+			if (userData.highlightColor !== undefined) { // selection (ViewStateManangert)
+				const c = abgrToColor(userData.highlightColor);
+				color.lerp(new THREE.Vector4(c.red / 255.0, c.green / 255.0, c.blue / 255.0, 1), c.alpha);
 			}
 
-			if (userData.highlightColor !== undefined) {
-				c = abgrToColor(userData.highlightColor);
-				this.material.color.lerp(new THREE.Color(c.red / 255.0, c.green / 255.0, c.blue / 255.0), c.alpha);
-				// when highlightColor = 0: total transparent, so do not change original emssive and specular
-				if (this.material.emissive !== undefined && userData.highlightColor !== 0) {
-					if (this.material.userData.defaultHighlightingEmissive) {
-						this.material.emissive.copy(this.material.userData.defaultHighlightingEmissive);
-					} else {
-						this.material.emissive.copy(THREE.Object3D.prototype.defaultEmissive);
-					}
-				}
-				if (this.material.specular !== undefined && userData.highlightColor !== 0) {
-					if (this.material.userData.defaultHighlightingSpecular) {
-						this.material.specular.copy(this.material.userData.defaultHighlightingSpecular);
-					} else {
-						this.material.specular.copy(THREE.Object3D.prototype.defaultSpecular);
-					}
-				}
+			if (color.w > 0) {
+				userData.blendColor = color.toArray();
+
+				const blendColor = new THREE.Color(color.x, color.y, color.z);
+				this.material.color.lerp(blendColor, color.w);
+				this.material.emissive?.lerp(blendColor, color.w * 0.5);
+				this.material.specular?.multiplyScalar(1 - 0.75 * color.w); // reduce specular as it may overexpose the highlighting
 			}
 		}
 
@@ -201,9 +148,12 @@ sap.ui.define([
 		var opacity = 1.0;
 
 		var hasOpacity = false;
+		let renderMethod;
 
 		var obj3D = this; // eslint-disable-line consistent-this
 		do {
+			renderMethod ??= obj3D.userData.renderMethod;
+
 			var currentOpacity = null, joint = null;
 			if (nodeJointMap) {
 				joint = nodeJointMap.get(obj3D);
@@ -234,6 +184,11 @@ sap.ui.define([
 			obj3D = obj3D.parent;
 		} while (obj3D);
 
+		if (renderMethod === 2) { // TRANSPARENT
+			opacity *= 0.5;
+			hasOpacity = true;
+		}
+
 		if (hasOpacity || this.renderOrder > 0) {
 			if (!userData.originalMaterial) {
 				userData.originalMaterial = this.material;
@@ -252,7 +207,7 @@ sap.ui.define([
 
 			if (this.material.opacity) {
 				this.material.opacity *= opacity;
-				var materialIsTransparent = userData.originalMaterial.transparent || this.material.opacity < 0.99;
+				var materialIsTransparent = userData.originalMaterial.transparent || this.material.opacity < 1;
 				if (materialIsTransparent !== this.material.transparent) {
 					this.material.transparent = materialIsTransparent;
 					this.material.needsUpdate = true; // three.js needs to update shaders for this material

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

@@ -455,7 +455,7 @@ sap.ui.define([
 				// '0' - hidden, '1' - draw as cluster, '2' - render by three js, '3' - cluster with custom color
 				if (!cluster.isPoints && (ud.initialMaterialId !== ud.materialId
 					|| node.renderOrder != 0
-					|| ud.highlightingColor
+					|| ud.blendColor != null
 					|| ud.defaultMaterial // defaultMaterial is used for Outline objects
 					|| node.material.transparent === true)) {
 

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

@@ -27,14 +27,11 @@ sap.ui.define([
 	 * Constructor for a new Thrustline.
 	 *
 	 * @class
-	 *
-	 *
 	 * @private
 	 * @author SAP SE
-	 * @version 1.134.0
+	 * @version 1.136.0
 	 * @extends sap.ui.base.ManagedObject
 	 * @alias sap.ui.vk.threejs.Thrustline
-	 * @experimental Since 1.65.0 This class is experimental and might be modified or removed in future versions.
 	 */
 	var Thrustline = BaseObject.extend("sap.ui.vk.threejs.Thrustline", /** @lends sap.ui.vk.threejs.Thrustline.prototype */ {
 		metadata: {

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

@@ -67,7 +67,7 @@ sap.ui.define([
 	 * @param {object} [mSettings] Initial settings for the new ViewStateManager object.
 	 * @public
 	 * @author SAP SE
-	 * @version 1.134.0
+	 * @version 1.136.0
 	 * @extends sap.ui.vk.ViewStateManagerBase
 	 * @alias sap.ui.vk.threejs.ViewStateManager
 	 * @since 1.32.0
@@ -2180,7 +2180,6 @@ sap.ui.define([
 	 *
 	 * @returns {?string} Image type string, or null
 	 * @private
-	 * @experimental Since 1.82.0 This method is experimental and might be modified or removed in future versions
 	 */
 	ViewStateManager.prototype.getBackgroundImageType = function() {
 		// currently can only use background node name to determine the image type
@@ -2194,7 +2193,6 @@ sap.ui.define([
 	 * @param {string} imageType Image type string
 	 * @returns {object} Background node object
 	 * @private
-	 * @experimental Since 1.82.0 This method is experimental and might be modified or removed in future versions
 	 */
 	ViewStateManager.prototype.setBackgroundImageType = function(imageType) {
 		var backgroundNodes = this._getBackgroundNodeInfos();
@@ -2512,8 +2510,9 @@ sap.ui.define([
 		if (fadeInNodes && fadeInNodes.length) {
 			var fadeInHighlight = new Highlight("FadeIn", {
 				duration: timeInterval / 500.0,
-				opacities: [0.0, 1.0],
-				cycles: 1
+				opacities: [1.0, 0.0],
+				cycles: 0.5,
+				type: "FadeIn"
 			});
 			this._transitionPlayer.addHighlights(fadeInHighlight, fadeInNodes);
 		}
@@ -2521,9 +2520,9 @@ sap.ui.define([
 		if (fadeOutNodes && fadeOutNodes.length) {
 			var fadeOutHighlight = new Highlight("FadeOut", {
 				duration: timeInterval / 500.0,
-				opacities: [1.0, 0.0],
-				cycles: 1,
-				fadeOut: true
+				opacities: [0.0, 1.0],
+				cycles: 0.5,
+				type: "FadeOut"
 			});
 			this._transitionPlayer.addHighlights(fadeOutHighlight, fadeOutNodes);
 		}

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

@@ -88,7 +88,7 @@ sap.ui.define([
 	 *
 	 * @public
 	 * @author SAP SE
-	 * @version 1.134.0
+	 * @version 1.136.0
 	 * @extends sap.ui.vk.ViewportBase
 	 * @alias sap.ui.vk.threejs.Viewport
 	 */
@@ -835,7 +835,6 @@ sap.ui.define([
 	 *
 	 * @returns {?string} Background projection or undefined
 	 * @private
-	 * @experimental Since 1.106.0 This method is experimental and might be modified or removed in future versions
 	 */
 	Viewport.prototype.getBackgroundProjection = function() {
 		return bgNodeNameToProjectionType[this._backgroundNode && this._backgroundNode.name];
@@ -2673,7 +2672,6 @@ sap.ui.define([
 	 * @param {object} options.parametricContent parametric content object
 	 * @returns {any[]} An array of Background nodes
 	 * @private
-	 * @experimental Since 1.82.0 This method is experimental and might be modified or removed in future versions
 	 */
 	Viewport.prototype.setBackgroundNode = function(options) {
 		var nodeHierarchy = this._viewStateManager.getNodeHierarchy();

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

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * @param {object} [mSettings] Initial settings for the new ViewStateManager object.
 	 * @private
 	 * @author SAP SE
-	 * @version 1.134.0
+	 * @version 1.136.0
 	 * @extends sap.ui.vk.threejs.ViewStateManager
 	 * @alias sap.ui.vk.threejs.v2.ViewStateManager
 	 * @since 1.99.0
@@ -1338,6 +1338,11 @@ sap.ui.define([
 	ViewStateManager.prototype._updateNodeStateMaterials = function() {
 		var materialCache = this._materialCache;
 
+		// node highlighting and tinting may work and look differently in the default ViewStateManager.js as it uses
+		// THREE.Object3D._vkUpdateMaterialColorAndOpacity() method to update the material color and opacity
+
+		const defaultHighlightingEmissive = { r: 0.0235, g: 0.0235, b: 0.0235 };
+		const defaultHighlightingSpecular = { r: 0.0602, g: 0.0602, b: 0.0602 };
 		var highlightColorABGR = this.getHighlightColor(true);
 		var highlightColor = abgrToColor(highlightColorABGR);
 		var highlightColorThreeJS = new THREE.Color(highlightColor.red / 255.0, highlightColor.green / 255.0, highlightColor.blue / 255.0);
@@ -1350,6 +1355,8 @@ sap.ui.define([
 					// TODO(VSM): do we really need this? I added this in case if material.color was
 					// modified in a previous iteration. When can it happen?
 					state.material.color.copy(nodeRef.material.color);
+					state.material.emissive?.copy(nodeRef.material.emissive);
+					state.material.specular?.copy(nodeRef.material.specular);
 				}
 
 				var material = state.material;
@@ -1359,39 +1366,15 @@ sap.ui.define([
 				if (tintColor != null) {
 					color = abgrToColor(tintColor);
 					material.color.lerp(new THREE.Color(color.red / 255.0, color.green / 255.0, color.blue / 255.0), color.alpha);
-					if (material.emissive != null) {
-						if (material.userData.defaultHighlightingEmissive) {
-							material.emissive.copy(material.userData.defaultHighlightingEmissive);
-						} else {
-							material.emissive.copy(THREE.Object3D.prototype.defaultEmissive);
-						}
-					}
-					if (material.specular != null) {
-						if (material.userData.defaultHighlightingSpecular) {
-							material.specular.copy(material.userData.defaultHighlightingSpecular);
-						} else {
-							material.specular.copy(THREE.Object3D.prototype.defaultSpecular);
-						}
-					}
+					material.emissive?.copy(defaultHighlightingEmissive);
+					material.specular?.copy(defaultHighlightingSpecular);
 				}
 
 				if (state.selected || state.ancestorSelected) {
 					material.color.lerp(highlightColorThreeJS, highlightColor.alpha);
 					// when highlightColor = 0: total transparent, so do not change original emissive and specular
-					if (material.emissive != null && highlightColorABGR !== 0) {
-						if (material.userData.defaultHighlightingEmissive) {
-							material.emissive.copy(material.userData.defaultHighlightingEmissive);
-						} else {
-							material.emissive.copy(THREE.Object3D.prototype.defaultEmissive);
-						}
-					}
-					if (material.specular != null && highlightColorABGR !== 0) {
-						if (material.userData.defaultHighlightingSpecular) {
-							material.specular.copy(material.userData.defaultHighlightingSpecular);
-						} else {
-							material.specular.copy(THREE.Object3D.prototype.defaultSpecular);
-						}
-					}
+					material.emissive?.copy(defaultHighlightingEmissive);
+					material.specular?.copy(defaultHighlightingSpecular);
 				}
 
 				var worldOpacity = this._computeWorldOpacity(nodeRef, state);