wip

packages/frontend/src/world/room/object-defs.ts

@@ -37,6 +37,7 @@ import { energyDrink } from './objects/energyDrink.js';
 import { envelope } from './objects/envelope.js';
 import { facialTissue } from './objects/facialTissue.js';
 import { glassCylinderPotPlant } from './objects/glassCylinderPotPlant.js';
+import { hangingDuctRail } from './objects/hangingDuctRail.js';
 import { hangingTShirt } from './objects/hangingTShirt.js';
 import { icosahedron } from './objects/icosahedron.js';
 import { ironFrameShelf5, ironFrameShelf4, ironFrameShelf3 } from './objects/ironFrameShelf.js';
@@ -78,6 +79,7 @@ import { snakeplant } from './objects/snakeplant.js';
 import { sofa } from './objects/sofa.js';
 import { speaker } from './objects/speaker.js';
 import { speakerStand } from './objects/speakerStand.js';
+import { spotLight } from './objects/spotLight.js';
 import { sprayer } from './objects/sprayer.js';
 import { steelRack } from './objects/steelRack.js';
 import { stormGlass } from './objects/stormGlass.js';
@@ -205,6 +207,8 @@ export const OBJECT_DEFS = [
 	woodRingFloorLamp,
 	woodRingsPendantLight,
 	woodSoundAbsorbingPanel,
+	hangingDuctRail,
+	spotLight,
 ];
 
 export function getObjectDef(type: string): typeof OBJECT_DEFS[number] {

packages/frontend/src/world/room/objects/hangingDuctRail.ts

@@ -0,0 +1,77 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import * as BABYLON from '@babylonjs/core';
+import { defineObject } from '../object.js';
+
+export const hangingDuctRail = defineObject({
+	id: 'hangingDuctRail',
+	name: 'hangingDuctRail',
+	options: {
+		schema: {
+			width: {
+				type: 'range',
+				label: 'Width',
+				min: 0,
+				max: 1,
+				step: 0.01,
+			},
+			height: {
+				type: 'range',
+				label: 'Height',
+				min: 0,
+				max: 1,
+				step: 0.01,
+			},
+			bodyColor: {
+				type: 'color',
+				label: 'body color',
+			},
+		},
+		default: {
+			width: 0.2,
+			height: 0.2,
+			bodyColor: [0.05, 0.05, 0.05],
+		},
+	},
+	placement: 'ceiling',
+	hasCollisions: false,
+	createInstance: async ({ options, model }) => {
+		const bodyMaterial = model.findMaterial('__X_BODY__');
+		const bodyMesh = model.findMesh('__X_BODY__');
+
+		const applySize = () => {
+			bodyMesh.morphTargetManager!.getTargetByName('W')!.influence = options.width;
+			bodyMesh.morphTargetManager!.getTargetByName('H')!.influence = options.height;
+			model.updated();
+		};
+
+		applySize();
+
+		const applyBodyColor = () => {
+			bodyMaterial.albedoColor = new BABYLON.Color3(...options.bodyColor);
+		};
+
+		applyBodyColor();
+
+		return {
+			onInited: () => {
+
+			},
+			onOptionsUpdated: ([k, v]) => {
+				switch (k) {
+					case 'width':
+					case 'height':
+						applySize();
+						break;
+					case 'bodyColor':
+						applyBodyColor();
+						break;
+				}
+			},
+			interactions: {},
+		};
+	},
+});

packages/frontend/src/world/room/objects/spotLight.ts

@@ -0,0 +1,117 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import * as BABYLON from '@babylonjs/core';
+import { defineObject } from '../object.js';
+import { getLightRangeFactorByGraphicsQuality } from '../utility.js';
+import { cm, remap, WORLD_SCALE } from '@/world/utility.js';
+
+export const spotLight = defineObject({
+	id: 'spotLight',
+	name: 'spotLight',
+	options: {
+		schema: {
+			bodyColor: {
+				type: 'color',
+				label: 'Body color',
+			},
+			lightColor: {
+				type: 'color',
+				label: 'Light color',
+			},
+			lightBrightness: {
+				type: 'range',
+				label: 'Light brightness',
+				min: 0,
+				max: 1,
+				step: 0.01,
+			},
+			angleV: {
+				type: 'range',
+				label: 'Vertical angle',
+				min: 0,
+				max: 1,
+				step: 0.01,
+			},
+			angleH: {
+				type: 'range',
+				label: 'Horizontal angle',
+				min: 0,
+				max: 1,
+				step: 0.01,
+			},
+		},
+		default: {
+			bodyColor: [0.05, 0.05, 0.05],
+			lightColor: [1, 0.5, 0.2],
+			lightBrightness: 0.5,
+			angleV: 0.75,
+			angleH: 0.5,
+		},
+	},
+	placement: 'bottom',
+	hasCollisions: false,
+	createInstance: ({ room, scene, options, model, graphicsQuality }) => {
+		const bodyMaterial = model.findMaterial('__X_BODY__');
+
+		const applyBodyColor = () => {
+			const [r, g, b] = options.bodyColor;
+			bodyMaterial.albedoColor = new BABYLON.Color3(r, g, b);
+		};
+
+		applyBodyColor();
+
+		const lamp = model.findMesh('__X_LAMP__');
+		const light = new BABYLON.SpotLight('', new BABYLON.Vector3(cm(0), cm(0), 0), new BABYLON.Vector3(0, -1, 0), Math.PI / 1, 2, scene, room?.lightContainer != null);
+		light.parent = lamp;
+		light.radius = cm(8);
+		if (room?.lightContainer != null) room.lightContainer.addLight(light);
+
+		const applyLightColor = () => {
+			const [r, g, b] = options.lightColor;
+			light.diffuse = new BABYLON.Color3(r, g, b);
+			const emissive = lamp.material as BABYLON.PBRMaterial;
+			emissive.emissiveColor = new BABYLON.Color3(r, g, b);
+		};
+
+		applyLightColor();
+
+		const applyLightBrightness = () => {
+			light.intensity = 2 * options.lightBrightness * WORLD_SCALE * WORLD_SCALE;
+			light.range = cm(300) * getLightRangeFactorByGraphicsQuality(graphicsQuality);
+			const emissive = lamp.material as BABYLON.PBRMaterial;
+			emissive.emissiveIntensity = options.lightBrightness * 20;
+		};
+
+		applyLightBrightness();
+
+		const shade = model.findMesh('__X_SHADE__');
+
+		const applyAngle = () => {
+			shade.rotationQuaternion = null;
+			shade.rotation = new BABYLON.Vector3(0, 0, 0);
+			shade.addRotation(remap(options.angleV, 0, 1, Math.PI / 2, -Math.PI / 2), 0, 0);
+			shade.addRotation(0, 0, remap(options.angleH, 0, 1, -Math.PI / 2, Math.PI / 2));
+			model.updated();
+		};
+
+		applyAngle();
+
+		return {
+			onOptionsUpdated: ([k, v]) => {
+				switch (k) {
+					case 'bodyColor': applyBodyColor(); break;
+					case 'lightColor': applyLightColor(); break;
+					case 'lightBrightness': applyLightBrightness(); break;
+					case 'angleV':
+					case 'angleH':
+						applyAngle();
+						break;
+				}
+			},
+			interactions: {},
+		};
+	},
+});

packages/frontend/src/world/room/objects/tabletopDigitalClock.ts

@@ -36,6 +36,10 @@ export const tabletopDigitalClock = defineObject({
 	hasCollisions: false,
 	canPreMeshesMerging: false,
 	createInstance: ({ root, room, options, model, scene, timer }) => {
+		const matrix = model.root.getWorldMatrix(true);
+		const scale = new BABYLON.Vector3();
+		matrix.decompose(scale);
+
 		//const light = new BABYLON.SpotLight('', new BABYLON.Vector3(0, cm(3), cm(1)), new BABYLON.Vector3(0, 0, 1), Math.PI / 1, 2, scene, room?.lightContainer != null);
 		//light.parent = root;
 		//light.intensity = 0.01 * WORLD_SCALE * WORLD_SCALE;
@@ -112,11 +116,11 @@ export const tabletopDigitalClock = defineObject({
 					// また、scalingを0にすることでも見た目上非表示にすることはできるが、なぜかその状態でsnapshot renderingが開始されるとその後にscaleを戻しても表示されなくなる(バグ？)
 					for (const mesh of Object.values(segmentMeshes)) {
 						const isVisible = onMeshes.includes(mesh);
-						mesh.position.y = isVisible ? defaultSegMeshDepth : defaultSegMeshDepth - cm(2);
+						mesh.position.y = isVisible ? defaultSegMeshDepth : defaultSegMeshDepth - (cm(2) / Math.abs(scale.y));
 					}
 					for (const mesh of colonMeshes) {
 						const isVisible = Date.now() % 2000 < 1000;
-						mesh.position.y = isVisible ? defaultSegMeshDepth : defaultSegMeshDepth - cm(2);
+						mesh.position.y = isVisible ? defaultSegMeshDepth : defaultSegMeshDepth - (cm(2) / Math.abs(scale.y));
 					}
 
 					room?.sr.updateMesh([...Object.values(segmentMeshes), ...colonMeshes]);

packages/frontend/src/world/room/previewEngine.ts

@@ -36,6 +36,7 @@ export class RoomObjectPreviewEngine {
 	private roomLight: BABYLON.SpotLight;
 	private zGridPreviewPlane: BABYLON.Mesh;
 	private timerForEachObject: Timer | null = null;
+	private pipeline: BABYLON.DefaultRenderingPipeline;
 	private fps: number | null = null;
 	private disposed = false;
 
@@ -95,6 +96,16 @@ export class RoomObjectPreviewEngine {
 		gl.intensity = 0.5;
 		this.scene.setRenderingAutoClearDepthStencil(gl.renderingGroupId, false);
 
+		this.pipeline = new BABYLON.DefaultRenderingPipeline('default', true, this.scene);
+		this.pipeline.samples = 4;
+		this.pipeline.bloomEnabled = true;
+		this.pipeline.bloomThreshold = 0.95;
+		this.pipeline.bloomWeight = 0.1;
+		this.pipeline.bloomKernel = 256;
+		this.pipeline.bloomScale = 2;
+		this.pipeline.sharpenEnabled = true;
+		this.pipeline.sharpen.edgeAmount = 0.5;
+
 		if (_DEV_) {
 			window.takeScreenshot = () => {
 				const def = getObjectDef(this.objectType);
@@ -181,6 +192,7 @@ export class RoomObjectPreviewEngine {
 		window.setTimeout(() => {
 			const boundingInfo = getMeshesBoundingBox(this.objectMesh!.getChildMeshes().filter(m => m.isEnabled() && m.isVisible));
 
+			this.pipeline.removeCamera(this.camera);
 			this.camera.dispose();
 
 			this.camera = new BABYLON.ArcRotateCamera('camera', Math.PI / 2, Math.PI / 2.5, cm(300), new BABYLON.Vector3(0, cm(90), 0), this.scene);
@@ -220,6 +232,8 @@ export class RoomObjectPreviewEngine {
 			//this.camera.orthoRight = distance;
 			//this.camera.orthoTop = distance;
 			//this.camera.orthoBottom = -distance;
+
+			this.pipeline.addCamera(this.camera);
 		}, 10);
 
 		return {