1
0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-20 10:35:40 +02:00
This commit is contained in:
syuilo
2026-04-29 11:01:42 +09:00
parent c8441da835
commit 80c2b1fa65
4 changed files with 147 additions and 26 deletions

View File

@@ -18,9 +18,9 @@
"dependencies": {
"@analytics/google-analytics": "1.1.0",
"@babylonjs/core": "9.3.4",
"@babylonjs/inspector": "9.3.4",
"@babylonjs/loaders": "9.3.4",
"@babylonjs/materials": "9.3.4",
"@babylonjs/inspector": "9.3.4",
"@discordapp/twemoji": "16.0.1",
"@github/webauthn-json": "2.1.1",
"@mcaptcha/core-glue": "0.1.0-alpha-5",
@@ -48,6 +48,7 @@
"execa": "9.6.1",
"exifreader": "4.38.1",
"frontend-shared": "workspace:*",
"hls.js": "1.6.16",
"i18n": "workspace:*",
"icons-subsetter": "workspace:*",
"idb-keyval": "6.2.2",

View File

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.root" class="_pageScrollable">
<div :class="$style.root">
<div :class="[$style.screen, { [$style.zen]: isZenMode }]">
<canvas ref="canvas" :class="$style.canvas" tabindex="-1" :style="{ visibility: controller.isReady.value ? 'visible' : 'hidden' }"></canvas>
@@ -15,9 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveToClass="$style.transition_fade_leaveTo"
>
<div v-if="!controller.isReady.value" :class="$style.loading">
<div :class="$style.progressBar">
<div :class="$style.progressBarValue" :style="{ width: `${controller.initializeProgress.value * 100}%` }"></div>
</div>
<MkProgressBar :class="$style.progressBar" :progress="controller.initializeProgress.value" :waiting="controller.initializeProgress.value === 1"/>
</div>
</Transition>
@@ -88,15 +86,15 @@ definePage(() => ({
<style lang="scss" module>
.root {
height: 100%;
overflow: clip;
background: var(--MI_THEME-bg);
}
.screen {
position: relative;
width: 100%;
height: 90cqh;
}
.screen.zen {
height: 100%;
height: 100cqh;
overflow: clip;
}
.canvas {
@@ -110,7 +108,118 @@ definePage(() => ({
}
}
.controls {
.joyStick {
position: relative;
width: 50%;
height: 100px;
box-sizing: border-box;
padding: 8px;
}
.joyStick::before {
content: '';
display: block;
width: 100%;
height: 100%;
border: solid 2px #fff;
border-radius: 16px;
pointer-events: none;
}
.joyStickRangeCircle {
position: absolute;
top: var(--startYPx);
left: var(--startXPx);
width: calc(var(--rPx) * 2);
height: calc(var(--rPx) * 2);
border: solid 2px rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.joyStickPuck {
position: absolute;
top: calc(var(--startYPx) + (var(--y) * var(--rPx)));
left: calc(var(--startXPx) + (var(--x) * var(--rPx)));
width: 30px;
height: 30px;
background: #fff;
border-radius: 100%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.overlayTop {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
}
.overlayBottom {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
}
.topMain {
display: flex;
align-items: center;
gap: 16px;
}
.topMenu {
margin: 16px;
display: flex;
box-sizing: border-box;
width: max-content;
}
.topMenuButton {
padding: 8px;
}
.topMenuButton:first-child {
padding-left: 16px;
}
.topMenuButton:last-child {
padding-right: 16px;
}
.modified {
display: flex;
align-items: center;
font-size: 90%;
gap: 1em;
padding: 8px 16px;
}
.modifiedText {
color: var(--MI_THEME-warn);
animation: modified-blink 2s infinite;
}
@keyframes modified-blink {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.overlayControls {
}
.overlayObjectInfoPanel {
position: absolute;
top: 16px;
right: 16px;
z-index: 1;
padding: 16px;
box-sizing: border-box;
width: 300px;
}
.loading {
@@ -126,16 +235,6 @@ definePage(() => ({
.progressBar {
width: 75%;
height: 4px;
border-radius: 999px;
overflow: clip;
background-color: var(--MI_THEME-accentedBg);
}
.progressBarValue {
height: 100%;
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
transition: all 0.5s cubic-bezier(0,.5,.5,1);
}
.transition_fade_enterActive,

View File

@@ -8,6 +8,7 @@ import { AxesViewer } from '@babylonjs/core/Debug/axesViewer';
import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic';
import { EventEmitter } from 'eventemitter3';
import tinycolor from 'tinycolor2';
import Hls from 'hls.js';
import { RecyvlingTextGrid, Timer, WORLD_SCALE, camelToKebab, cm, createPlaneUvMapper, normalizeUvToSquare, randomRange } from './utility.js';
import { TIME_MAP } from './utility.js';
import { genId } from '@/utility/id.js';
@@ -181,10 +182,10 @@ export class WorldEngine extends EventEmitter<WorldEngineEvents> {
if (_DEV_) {
// snapshot renderingかつglow layerが有効だとなんかクラッシュする
if (!(SNAPSHOT_RENDERING && USE_GLOW)) {
const axes = new AxesViewer(this.scene, 30);
axes.xAxis.position = new BABYLON.Vector3(0, 30, 0);
axes.yAxis.position = new BABYLON.Vector3(0, 30, 0);
axes.zAxis.position = new BABYLON.Vector3(0, 30, 0);
//const axes = new AxesViewer(this.scene, 30);
//axes.xAxis.position = new BABYLON.Vector3(0, 30, 0);
//axes.yAxis.position = new BABYLON.Vector3(0, 30, 0);
//axes.zAxis.position = new BABYLON.Vector3(0, 30, 0);
}
if (!IN_WEB_WORKER) {
@@ -538,8 +539,15 @@ export class WorldEngine extends EventEmitter<WorldEngineEvents> {
const screenMeshes = envObj.meshes.filter(m => m.name.includes('__SCREEN__'));
const screenMaterial = screenMeshes[0].material as BABYLON.PBRMaterial;
const videoEl = document.createElement('video');
videoEl.crossOrigin = 'anonymous';
const hls = new Hls();
hls.loadSource('https://tvs.misskey.io/official/hq-beta/ts:abr.m3u8');
hls.attachMedia(videoEl);
this.timer.setTimeout(() => {
const tex = new BABYLON.VideoTexture('', 'http://syu-win.local:3000/files/931c02c3-6238-4c29-9371-06bab78950bb', this.scene, true, true);
const tex = new BABYLON.VideoTexture('', videoEl, this.scene, true, true);
tex.level = 0.5;
tex.video.loop = true;
tex.video.volume = 0.25;