From 17ae1bd64458d6a4d1f4e4d809a8e3432b14d030 Mon Sep 17 00:00:00 2001 From: duckietm Date: Thu, 5 Feb 2026 13:04:44 +0100 Subject: [PATCH] :up: added Room background colors,so windows and landscapes are now 100% --- .../assets/src/assets/room/room.asset.json | 23 ++-- .../object/visualization/room/RoomPlane.ts | 127 ++++++++++++++++-- 2 files changed, 129 insertions(+), 21 deletions(-) diff --git a/packages/assets/src/assets/room/room.asset.json b/packages/assets/src/assets/room/room.asset.json index 07e62a4..83bfce9 100644 --- a/packages/assets/src/assets/room/room.asset.json +++ b/packages/assets/src/assets/room/room.asset.json @@ -5606,7 +5606,8 @@ "size": 64, "allLayers": [ { - "color": 8703727 + "color": 8703727, + "backgroundColor": "#84C6DF" }, { "items": [ @@ -5730,7 +5731,7 @@ { "materialId": "landscape_64_background_1", "align": "bottom", - "backgroundColor": "#FEFEFE" + "backgroundColor": "#B85D58" }, { "items": [ @@ -5857,7 +5858,8 @@ "allLayers": [ { "materialId": "landscape_64_background_2", - "align": "bottom" + "align": "bottom", + "backgroundColor": "#58B3B8" }, { "items": [ @@ -5984,7 +5986,8 @@ "allLayers": [ { "materialId": "landscape_64_background_3", - "align": "bottom" + "align": "bottom", + "backgroundColor": "#77B8CB" }, { "items": [ @@ -6111,7 +6114,8 @@ "allLayers": [ { "materialId": "landscape_64_background_4", - "align": "bottom" + "align": "bottom", + "backgroundColor": "#77CBC9" }, { "items": [ @@ -6238,7 +6242,8 @@ "allLayers": [ { "materialId": "landscape_64_background_5", - "align": "bottom" + "align": "bottom", + "backgroundColor": "#475962" }, { "items": [ @@ -6365,7 +6370,8 @@ "allLayers": [ { "materialId": "landscape_64_background_6", - "align": "bottom" + "align": "bottom", + "backgroundColor": "#191E3F" }, { "items": [ @@ -6492,7 +6498,8 @@ "allLayers": [ { "materialId": "landscape_64_background_7", - "align": "bottom" + "align": "bottom", + "backgroundColor": "#FFFF00" }, { "items": [ diff --git a/packages/room/src/object/visualization/room/RoomPlane.ts b/packages/room/src/object/visualization/room/RoomPlane.ts index c0eedf4..da10b15 100644 --- a/packages/room/src/object/visualization/room/RoomPlane.ts +++ b/packages/room/src/object/visualization/room/RoomPlane.ts @@ -18,6 +18,7 @@ export class RoomPlane implements IRoomPlane '64': new RoomGeometry(64, new Vector3d(RoomPlane.HORIZONTAL_ANGLE_DEFAULT, RoomPlane.VERTICAL_ANGLE_DEFAULT), new Vector3d(-10, 0, 0)) }; private static ANIMATION_UPDATE_INTERVAL: number = 500; + private static LANDSCAPE_DEFAULT_BACKGROUND_COLOR: number = 0x84C6DF; public static TYPE_UNDEFINED: number = 0; public static TYPE_WALL: number = 1; @@ -84,6 +85,7 @@ export class RoomPlane implements IRoomPlane private _landscapeBaseAlignBottom: boolean = false; private _landscapeForegroundAlignBottom: boolean = false; private _landscapeBackgroundColor: number = null; + private _lastLandscapeDebugSignature: string = null; private _hasWindowMask: boolean = false; private _windowMasks: { leftSideLoc: number; rightSideLoc: number }[] = []; @@ -295,7 +297,40 @@ export class RoomPlane implements IRoomPlane const foregroundAlignBottom = materialLayers[1]?.align === 'bottom'; // Parse backgroundColor from the first material layer (background layer) - const backgroundColorStr = materialLayers[0]?.backgroundColor; + const backgroundMaterialId = materialLayers[0]?.materialId; + const hasDirectBackgroundColor = !!materialLayers[0]?.backgroundColor; + let backgroundColorStr = materialLayers[0]?.backgroundColor; + + if(!backgroundColorStr && backgroundMaterialId) + { + const findBackgroundColorByMaterial = () => + { + for(const candidatePlane of planeVisualizationData?.planes ?? []) + { + const candidateVisualizations = [ + ...(candidatePlane.visualizations ?? []), + ...(candidatePlane.animatedVisualization ?? []) + ]; + + for(const candidateVisualization of candidateVisualizations) + { + if(candidateVisualization?.size !== planeGeometry.scale) continue; + + const candidateMaterialLayers = (candidateVisualization.allLayers ?? []).filter(layer => (layer as IAssetPlaneVisualizationLayer)?.materialId) as IAssetPlaneVisualizationLayer[]; + const candidateBackgroundLayer = candidateMaterialLayers[0]; + + if(candidateBackgroundLayer?.materialId !== backgroundMaterialId) continue; + + if(candidateBackgroundLayer.backgroundColor) return candidateBackgroundLayer.backgroundColor; + } + } + + return null; + }; + + backgroundColorStr = findBackgroundColorByMaterial(); + } + let backgroundColor: number = null; if(backgroundColorStr) { @@ -303,6 +338,8 @@ export class RoomPlane implements IRoomPlane backgroundColor = parseInt(backgroundColorStr.replace('#', ''), 16); } + const backgroundColorSource = hasDirectBackgroundColor ? 'direct' : (backgroundColor !== null ? 'fallback-material' : 'none'); + const selectMaterialMatrixForNormal = (matrices = [], normal = null) => { if(!matrices.length) return null; @@ -389,7 +426,7 @@ export class RoomPlane implements IRoomPlane } } - return { texture, foregroundTexture, color: planeColor, baseAlignBottom, foregroundAlignBottom, animationLayers, backgroundColor }; + return { texture, foregroundTexture, color: planeColor, baseAlignBottom, foregroundAlignBottom, animationLayers, backgroundColor, backgroundColorSource }; }; const planeData = getTextureAndColorForPlane(this._id, this._type, normal); @@ -504,6 +541,22 @@ export class RoomPlane implements IRoomPlane this._landscapeForegroundAlignBottom = planeData.foregroundAlignBottom ?? false; this._landscapeBackgroundColor = planeData.backgroundColor ?? null; + const landscapeDebugPayload = { + planeId: this._id, + backgroundColor: this._landscapeBackgroundColor, + backgroundColorSource: planeData.backgroundColorSource, + backgroundTexture: this._landscapeBackgroundTexture?.label ?? this._landscapeBackgroundTexture?.source?.label ?? null, + foregroundTexture: this._landscapeForegroundTexture?.label ?? this._landscapeForegroundTexture?.source?.label ?? null, + hasCloudAnimation: this._isAnimated + }; + const landscapeDebugSignature = JSON.stringify(landscapeDebugPayload); + + if(this._lastLandscapeDebugSignature !== landscapeDebugSignature) + { + this._lastLandscapeDebugSignature = landscapeDebugSignature; + console.debug('[RoomPlane] Loaded landscape background', landscapeDebugPayload); + } + this._planeSprite = new TilingSprite({ texture: Texture.WHITE, width, @@ -563,18 +616,29 @@ export class RoomPlane implements IRoomPlane if(needsUpdate || animationUpdate) { - // For landscapes with a custom backgroundColor, render it first - if(this._type === RoomPlane.TYPE_LANDSCAPE && this._landscapeBackgroundColor !== null) - { - this.renderBackgroundColor(); - } + const isLandscape = (this._type === RoomPlane.TYPE_LANDSCAPE); + const hasLandscapeLayeredRendering = (isLandscape && (this._landscapeBackgroundTexture !== null || this._landscapeForegroundTexture !== null || this._animationLayers.length > 0 || this._landscapeBackgroundColor !== null)); - GetRenderer().render({ - target: this._planeTexture, - container: this._planeSprite, - transform: this.getMatrixForDimensions(this._planeSprite.width, this._planeSprite.height), - clear: this._landscapeBackgroundColor === null - }); + if(hasLandscapeLayeredRendering) + { + if(this._landscapeBackgroundColor !== null) + { + this.renderBackgroundColor(); + } + else + { + this.clearPlaneTexture(); + } + } + else + { + GetRenderer().render({ + target: this._planeTexture, + container: this._planeSprite, + transform: this.getMatrixForDimensions(this._planeSprite.width, this._planeSprite.height), + clear: true + }); + } // Layer order for landscapes: // 1. Background color (rendered above) @@ -752,6 +816,43 @@ export class RoomPlane implements IRoomPlane colorGraphics.destroy(); } + private clearPlaneTexture(): void + { + if(!this._planeTexture) return; + + const canvasWidth = this._landscapeRenderWidth; + const canvasHeight = this._landscapeRenderHeight; + + if(canvasWidth <= 0 || canvasHeight <= 0) + { + GetRenderer().render({ + target: this._planeTexture, + container: new Container(), + clear: true + }); + + return; + } + + const colorGraphics = new Graphics(); + colorGraphics.rect(0, 0, canvasWidth, canvasHeight); + colorGraphics.fill(RoomPlane.LANDSCAPE_DEFAULT_BACKGROUND_COLOR); + + const colorContainer = new Container(); + colorContainer.addChild(colorGraphics); + + const transform = this.getMatrixForDimensions(canvasWidth, canvasHeight); + + GetRenderer().render({ + target: this._planeTexture, + container: colorContainer, + transform, + clear: true + }); + + colorGraphics.destroy(); + } + private updateCorners(geometry: IRoomGeometry): void { this._cornerA.assign(geometry.getScreenPosition(this._location));