mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-28 10:04:43 +02:00
Code Releases Activity

wip

Browse Source
This commit is contained in:
syuilo
2026-05-03 21:34:11 +09:00
parent 210368d597
commit e6b5758d54
7 changed files with 30 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/pages/room.vue
View File

@@ -96,13 +96,13 @@ import * as os from '@/os.js';
import { RoomController } from '@/world/room/controller.js'; import { RoomController } from '@/world/room/controller.js';
import { cm, getHex, getRgb, WORLD_SCALE } from '@/world/utility.js'; import { cm, getHex, getRgb, WORLD_SCALE } from '@/world/utility.js';
import { deepClone } from '@/utility/clone.js'; import { deepClone } from '@/utility/clone.js';
import { GRAPHICS_QUALITY_HIGH, GRAPHICS_QUALITY_LOW, GRAPHICS_QUALITY_MEDIUM } from '@/world/room/engine.js';
import { deviceKind } from '@/utility/device-kind.js'; import { deviceKind } from '@/utility/device-kind.js';
import MkProgressBar from '@/components/MkProgressBar.vue'; import MkProgressBar from '@/components/MkProgressBar.vue';
import { Joystick } from '@/world/joystick.js'; import { Joystick } from '@/world/joystick.js';
import { isTouchUsing } from '@/utility/touch.js'; import { isTouchUsing } from '@/utility/touch.js';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import { getObjectDef } from '@/world/room/object-defs.js'; import { getObjectDef } from '@/world/room/object-defs.js';
import { GRAPHICS_QUALITY } from '@/world/room/utility.js';
const canvas = useTemplateRef('canvas'); const canvas = useTemplateRef('canvas');
@@ -121,7 +121,7 @@ const isRoomSettingsOpen = ref(false);
const isModified = ref(false); const isModified = ref(false);
const graphicsQualityRaw = prefer.model('world.graphicsQuality'); const graphicsQualityRaw = prefer.model('world.graphicsQuality');
const graphicsQualityAutoValue = computed<number>(() => deviceKind !== 'desktop' ? GRAPHICS_QUALITY_LOW : GRAPHICS_QUALITY_MEDIUM); const graphicsQualityAutoValue = computed<number>(() => deviceKind !== 'desktop' ? GRAPHICS_QUALITY.LOW : GRAPHICS_QUALITY.MEDIUM);
const graphicsQuality = computed<number>(() => graphicsQualityRaw.value ?? graphicsQualityAutoValue.value); const graphicsQuality = computed<number>(() => graphicsQualityRaw.value ?? graphicsQualityAutoValue.value);
const fpsRaw = prefer.model('world.fps'); const fpsRaw = prefer.model('world.fps');
@@ -531,17 +531,17 @@ function showOtherMenu(ev: PointerEvent) {
text: i18n.ts._room.graphicsQuality, text: i18n.ts._room.graphicsQuality,
caption: graphicsQualityRaw.value == null ? i18n.ts.auto : graphicsQualityRaw.value === GRAPHICS_QUALITY_HIGH ? 'High' : graphicsQualityRaw.value === GRAPHICS_QUALITY_MEDIUM ? 'Medium' : 'Low', caption: graphicsQualityRaw.value == null ? i18n.ts.auto : graphicsQualityRaw.value === GRAPHICS_QUALITY_HIGH ? 'High' : graphicsQualityRaw.value === GRAPHICS_QUALITY_MEDIUM ? 'Medium' : 'Low',
options: [{ options: [{
label: `${i18n.ts.auto} (${graphicsQualityAutoValue.value === GRAPHICS_QUALITY_HIGH ? 'High' : graphicsQualityAutoValue.value === GRAPHICS_QUALITY_MEDIUM ? 'Medium' : 'Low'})`, label: `${i18n.ts.auto} (${graphicsQualityAutoValue.value === GRAPHICS_QUALITY.HIGH ? 'High' : graphicsQualityAutoValue.value === GRAPHICS_QUALITY.MEDIUM ? 'Medium' : 'Low'})`,
value: null, value: null,
}, { type: 'divider' }, { }, { type: 'divider' }, {
label: 'High', label: 'High',
value: GRAPHICS_QUALITY_HIGH, value: GRAPHICS_QUALITY.HIGH,
}, { }, {
label: 'Medium', label: 'Medium',
value: GRAPHICS_QUALITY_MEDIUM, value: GRAPHICS_QUALITY.MEDIUM,
}, { }, {
label: 'Low', label: 'Low',
value: GRAPHICS_QUALITY_LOW, value: GRAPHICS_QUALITY.LOW,
}], }],
ref: graphicsQualityRaw, ref: graphicsQualityRaw,
}, { }, {

2
packages/frontend/src/world/room/controller.ts
View File

@@ -8,7 +8,7 @@ import * as BABYLON from '@babylonjs/core';
import { EventEmitter } from 'eventemitter3'; import { EventEmitter } from 'eventemitter3';
import { cm } from '../utility.js'; import { cm } from '../utility.js';
import RoomWorker from './worker?worker'; import RoomWorker from './worker?worker';
import { GRAPHICS_QUALITY_MEDIUM, RoomEngine } from './engine.js'; import { RoomEngine } from './engine.js';
import type { ShallowRef } from 'vue'; import type { ShallowRef } from 'vue';
import type { RoomEngineEvents, RoomState } from './engine.js'; import type { RoomEngineEvents, RoomState } from './engine.js';
import type { ObjectDef, RoomStateObject } from './object.js'; import type { ObjectDef, RoomStateObject } from './object.js';

14
packages/frontend/src/world/room/engine.ts
View File

@@ -17,7 +17,7 @@ import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic';
import { EventEmitter } from 'eventemitter3'; import { EventEmitter } from 'eventemitter3';
import { TIME_MAP, scaleMorph, camelToKebab, cm, WORLD_SCALE, getMeshesBoundingBox, Timer, getYRotationDirection, FreeCameraManualInput, remap } from '../utility.js'; import { TIME_MAP, scaleMorph, camelToKebab, cm, WORLD_SCALE, getMeshesBoundingBox, Timer, getYRotationDirection, FreeCameraManualInput, remap } from '../utility.js';
import { getObjectDef } from './object-defs.js'; import { getObjectDef } from './object-defs.js';
import { findMaterial, ModelManager, SYSTEM_HEYA_MESH_NAMES, SYSTEM_MESH_NAMES } from './utility.js'; import { findMaterial, GRAPHICS_QUALITY, ModelManager, SYSTEM_HEYA_MESH_NAMES, SYSTEM_MESH_NAMES } from './utility.js';
import { MuseumEnvManager, SimpleEnvManager } from './env.js'; import { MuseumEnvManager, SimpleEnvManager } from './env.js';
import type { GridMaterial } from '@babylonjs/materials'; import type { GridMaterial } from '@babylonjs/materials';
import type { EnvManager, JapaneseEnvOptions, SimpleEnvOptions } from './env.js'; import type { EnvManager, JapaneseEnvOptions, SimpleEnvOptions } from './env.js';
@@ -95,10 +95,6 @@ function enableObjectCollision(meshes: BABYLON.Mesh[]) {
} }
} }
export const GRAPHICS_QUALITY_HIGH = 1;
export const GRAPHICS_QUALITY_MEDIUM = 0;
export const GRAPHICS_QUALITY_LOW = -1;
export type RoomEngineEvents = { export type RoomEngineEvents = {
'changeSelectedState': (ctx: { 'changeSelectedState': (ctx: {
selected: { selected: {
@@ -233,7 +229,7 @@ export class RoomEngine extends EventEmitter {
}; };
this.graphicsQuality = options.graphicsQuality; this.graphicsQuality = options.graphicsQuality;
this.fps = options.fps; this.fps = options.fps;
this.useGlow = this.graphicsQuality >= GRAPHICS_QUALITY_MEDIUM; this.useGlow = this.graphicsQuality >= GRAPHICS_QUALITY.MEDIUM;
this.time = TIME_MAP[new Date().getHours() as keyof typeof TIME_MAP]; this.time = TIME_MAP[new Date().getHours() as keyof typeof TIME_MAP];
registerBuiltInLoaders(); registerBuiltInLoaders();
@@ -278,7 +274,7 @@ export class RoomEngine extends EventEmitter {
//this.scene.activeCamera = this.camera; //this.scene.activeCamera = this.camera;
this.lightContainer = new BABYLON.ClusteredLightContainer('clustered', [], this.scene); this.lightContainer = new BABYLON.ClusteredLightContainer('clustered', [], this.scene);
this.lightContainer.maxRange = this.graphicsQuality >= GRAPHICS_QUALITY_HIGH ? cm(200) : this.graphicsQuality >= GRAPHICS_QUALITY_MEDIUM ? cm(90) : cm(30); this.lightContainer.maxRange = this.graphicsQuality >= GRAPHICS_QUALITY.HIGH ? cm(200) : this.graphicsQuality >= GRAPHICS_QUALITY.MEDIUM ? cm(90) : cm(30);
this.lightContainer.verticalTiles = 32; this.lightContainer.verticalTiles = 32;
this.lightContainer.horizontalTiles = 32; this.lightContainer.horizontalTiles = 32;
this.lightContainer.depthSlices = 32; this.lightContainer.depthSlices = 32;
@@ -322,13 +318,13 @@ export class RoomEngine extends EventEmitter {
this.gridPlane.isVisible = false; this.gridPlane.isVisible = false;
this.gridPlane.setEnabled(false); this.gridPlane.setEnabled(false);
if (this.graphicsQuality >= GRAPHICS_QUALITY_MEDIUM) { if (this.graphicsQuality >= GRAPHICS_QUALITY.MEDIUM) {
this.selectionOutlineLayer = new BABYLON.SelectionOutlineLayer('outliner', this.scene); this.selectionOutlineLayer = new BABYLON.SelectionOutlineLayer('outliner', this.scene);
this.scene.setRenderingAutoClearDepthStencil(this.selectionOutlineLayer.renderingGroupId, false); this.scene.setRenderingAutoClearDepthStencil(this.selectionOutlineLayer.renderingGroupId, false);
this.sr.updateMeshesForEffectLayer(this.selectionOutlineLayer); this.sr.updateMeshesForEffectLayer(this.selectionOutlineLayer);
} }
if (this.graphicsQuality >= GRAPHICS_QUALITY_HIGH) { if (this.graphicsQuality >= GRAPHICS_QUALITY.HIGH) {
const pipeline = new BABYLON.DefaultRenderingPipeline('default', true, this.scene); const pipeline = new BABYLON.DefaultRenderingPipeline('default', true, this.scene);
if (options.antialias) { if (options.antialias) {
pipeline.samples = 4; pipeline.samples = 4;

21
packages/frontend/src/world/room/env.ts
View File

@@ -6,8 +6,7 @@
import * as BABYLON from '@babylonjs/core'; import * as BABYLON from '@babylonjs/core';
import { cm, WORLD_SCALE } from '../utility.js'; import { cm, WORLD_SCALE } from '../utility.js';
import { findMaterial, SYSTEM_HEYA_MESH_NAMES } from './utility.js'; import { findMaterial, GRAPHICS_QUALITY, SYSTEM_HEYA_MESH_NAMES } from './utility.js';
import { GRAPHICS_QUALITY_MEDIUM } from './engine.js';
import type { RoomEngine } from './engine.js'; import type { RoomEngine } from './engine.js';
//export interface EnvManager<T = any> { //export interface EnvManager<T = any> {
@@ -122,32 +121,32 @@ export class SimpleEnvManager extends EnvManager<SimpleEnvOptions> {
this.roomLight.shadowMaxZ = cm(300); this.roomLight.shadowMaxZ = cm(300);
this.roomLight.radius = cm(30); this.roomLight.radius = cm(30);
if (this.engine.graphicsQuality >= GRAPHICS_QUALITY_MEDIUM) { if (this.engine.graphicsQuality >= GRAPHICS_QUALITY.MEDIUM) {
const shadowGeneratorForRoomLight = new BABYLON.ShadowGenerator(this.engine.graphicsQuality <= GRAPHICS_QUALITY_MEDIUM ? 1024 : 2048, this.roomLight); const shadowGeneratorForRoomLight = new BABYLON.ShadowGenerator(this.engine.graphicsQuality <= GRAPHICS_QUALITY.MEDIUM ? 1024 : 2048, this.roomLight);
shadowGeneratorForRoomLight.forceBackFacesOnly = true; shadowGeneratorForRoomLight.forceBackFacesOnly = true;
shadowGeneratorForRoomLight.bias = 0.00001; shadowGeneratorForRoomLight.bias = 0.00001;
shadowGeneratorForRoomLight.normalBias = 0.005; shadowGeneratorForRoomLight.normalBias = 0.005;
shadowGeneratorForRoomLight.usePercentageCloserFiltering = true; shadowGeneratorForRoomLight.usePercentageCloserFiltering = true;
shadowGeneratorForRoomLight.filteringQuality = BABYLON.ShadowGenerator.QUALITY_HIGH; shadowGeneratorForRoomLight.filteringQuality = BABYLON.ShadowGenerator.QUALITY_HIGH;
if (this.engine.graphicsQuality <= GRAPHICS_QUALITY_MEDIUM) { if (this.engine.graphicsQuality <= GRAPHICS_QUALITY.MEDIUM) {
shadowGeneratorForRoomLight.getShadowMap().refreshRate = 60; shadowGeneratorForRoomLight.getShadowMap().refreshRate = 60;
} }
//this.shadowGeneratorForRoomLight.useContactHardeningShadow = true; //this.shadowGeneratorForRoomLight.useContactHardeningShadow = true;
this.shadowGenerators.push(shadowGeneratorForRoomLight); this.shadowGenerators.push(shadowGeneratorForRoomLight);
} }
if (this.engine.graphicsQuality >= GRAPHICS_QUALITY_MEDIUM) { if (this.engine.graphicsQuality >= GRAPHICS_QUALITY.MEDIUM) {
this.sunLight = new BABYLON.DirectionalLight('simpleEnv:SunLight', new BABYLON.Vector3(0.2, -1, -1), this.engine.scene); this.sunLight = new BABYLON.DirectionalLight('simpleEnv:SunLight', new BABYLON.Vector3(0.2, -1, -1), this.engine.scene);
this.sunLight.position = new BABYLON.Vector3(cm(-20), cm(1000), cm(1000)); this.sunLight.position = new BABYLON.Vector3(cm(-20), cm(1000), cm(1000));
this.sunLight.shadowMinZ = cm(1000); this.sunLight.shadowMinZ = cm(1000);
this.sunLight.shadowMaxZ = cm(2000); this.sunLight.shadowMaxZ = cm(2000);
const shadowGeneratorForSunLight = new BABYLON.ShadowGenerator(this.engine.graphicsQuality <= GRAPHICS_QUALITY_MEDIUM ? 1024 : 2048, this.sunLight); const shadowGeneratorForSunLight = new BABYLON.ShadowGenerator(this.engine.graphicsQuality <= GRAPHICS_QUALITY.MEDIUM ? 1024 : 2048, this.sunLight);
shadowGeneratorForSunLight.forceBackFacesOnly = true; shadowGeneratorForSunLight.forceBackFacesOnly = true;
shadowGeneratorForSunLight.bias = 0.00001; shadowGeneratorForSunLight.bias = 0.00001;
shadowGeneratorForSunLight.usePercentageCloserFiltering = true; shadowGeneratorForSunLight.usePercentageCloserFiltering = true;
shadowGeneratorForSunLight.usePoissonSampling = true; shadowGeneratorForSunLight.usePoissonSampling = true;
if (this.engine.graphicsQuality <= GRAPHICS_QUALITY_MEDIUM) { if (this.engine.graphicsQuality <= GRAPHICS_QUALITY.MEDIUM) {
shadowGeneratorForSunLight.getShadowMap().refreshRate = 60; shadowGeneratorForSunLight.getShadowMap().refreshRate = 60;
} }
this.shadowGenerators.push(shadowGeneratorForSunLight); this.shadowGenerators.push(shadowGeneratorForSunLight);
@@ -536,14 +535,14 @@ export class MuseumEnvManager extends EnvManager<MuseumEnvOptions> {
this.roomLight.shadowMaxZ = cm(500); this.roomLight.shadowMaxZ = cm(500);
this.roomLight.radius = cm(30); this.roomLight.radius = cm(30);
if (this.engine.graphicsQuality >= GRAPHICS_QUALITY_MEDIUM) { if (this.engine.graphicsQuality >= GRAPHICS_QUALITY.MEDIUM) {
const shadowGeneratorForRoomLight = new BABYLON.ShadowGenerator(this.engine.graphicsQuality <= GRAPHICS_QUALITY_MEDIUM ? 1024 : 2048, this.roomLight); const shadowGeneratorForRoomLight = new BABYLON.ShadowGenerator(this.engine.graphicsQuality <= GRAPHICS_QUALITY.MEDIUM ? 1024 : 2048, this.roomLight);
shadowGeneratorForRoomLight.forceBackFacesOnly = true; shadowGeneratorForRoomLight.forceBackFacesOnly = true;
shadowGeneratorForRoomLight.bias = 0.00001; shadowGeneratorForRoomLight.bias = 0.00001;
shadowGeneratorForRoomLight.normalBias = 0.005; shadowGeneratorForRoomLight.normalBias = 0.005;
shadowGeneratorForRoomLight.usePercentageCloserFiltering = true; shadowGeneratorForRoomLight.usePercentageCloserFiltering = true;
shadowGeneratorForRoomLight.filteringQuality = BABYLON.ShadowGenerator.QUALITY_HIGH; shadowGeneratorForRoomLight.filteringQuality = BABYLON.ShadowGenerator.QUALITY_HIGH;
if (this.engine.graphicsQuality <= GRAPHICS_QUALITY_MEDIUM) { if (this.engine.graphicsQuality <= GRAPHICS_QUALITY.MEDIUM) {
shadowGeneratorForRoomLight.getShadowMap().refreshRate = 60; shadowGeneratorForRoomLight.getShadowMap().refreshRate = 60;
} }
//this.shadowGeneratorForRoomLight.useContactHardeningShadow = true; //this.shadowGeneratorForRoomLight.useContactHardeningShadow = true;

2
packages/frontend/src/world/room/objects/woodRingFloorLamp.ts
View File

@@ -86,7 +86,7 @@ export const woodRingFloorLamp = defineObject({
const applyLightBrightness = () => { const applyLightBrightness = () => {
for (const light of lights) { for (const light of lights) {
light.intensity = 1 * options.lightBrightness * WORLD_SCALE * WORLD_SCALE; light.intensity = 1 * options.lightBrightness * WORLD_SCALE * WORLD_SCALE;
light.range = cm(200) * options.lightBrightness; light.range = cm(200);
} }
for (const lamp of lamps) { for (const lamp of lamps) {
const emissive = lamp.material as BABYLON.PBRMaterial; const emissive = lamp.material as BABYLON.PBRMaterial;

6
packages/frontend/src/world/room/utility.ts
View File

@@ -6,6 +6,12 @@
import * as BABYLON from '@babylonjs/core'; import * as BABYLON from '@babylonjs/core';
import { applyMorphTargetsToMesh, cm, getPlaneUvIndexes, Timer } from '../utility.js'; import { applyMorphTargetsToMesh, cm, getPlaneUvIndexes, Timer } from '../utility.js';
export const GRAPHICS_QUALITY = {
HIGH: 1,
MEDIUM: 0,
LOW: -1,
} as const;
export const SYSTEM_MESH_NAMES = ['__TOP__', '__SIDE__', '__PICK__', '__COLLISION__']; export const SYSTEM_MESH_NAMES = ['__TOP__', '__SIDE__', '__PICK__', '__COLLISION__'];
export const SYSTEM_HEYA_MESH_NAMES = ['__ROOM_WALL__', '__ROOM_SIDE__', '__ROOM_FLOOR__', '__ROOM_CEILING__', '__ROOM_TOP__', '__ROOM_BOTTOM__', '__COLLISION__']; export const SYSTEM_HEYA_MESH_NAMES = ['__ROOM_WALL__', '__ROOM_SIDE__', '__ROOM_FLOOR__', '__ROOM_CEILING__', '__ROOM_TOP__', '__ROOM_BOTTOM__', '__COLLISION__'];

2
packages/frontend/src/world/room/worker.ts
View File

@@ -4,7 +4,7 @@
*/ */
import * as BABYLON from '@babylonjs/core'; import * as BABYLON from '@babylonjs/core';
import { GRAPHICS_QUALITY_MEDIUM, RoomEngine } from './engine.js'; import { RoomEngine } from './engine.js';
import type { RoomState } from './engine.js'; import type { RoomState } from './engine.js';
let engine: RoomEngine | null = null; let engine: RoomEngine | null = null;