mhq

packages/frontend/package.json

@@ -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",

packages/frontend/src/pages/world.vue

@@ -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">
+				<MkProgressBar :class="$style.progressBar" :progress="controller.initializeProgress.value" :waiting="controller.initializeProgress.value === 1"/>
-					<div :class="$style.progressBarValue" :style="{ width: `${controller.initializeProgress.value * 100}%` }"></div>
-				</div>
 			</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;
+	height: 100cqh;
-}
+	overflow: clip;
-.screen.zen {
-	height: 100%;
 }
 
 .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,

packages/frontend/src/world/engine.ts

@@ -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);
+				//const axes = new AxesViewer(this.scene, 30);
-				axes.xAxis.position = new BABYLON.Vector3(0, 30, 0);
+				//axes.xAxis.position = new BABYLON.Vector3(0, 30, 0);
-				axes.yAxis.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);
+				//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;

pnpm-lock.yaml

@@ -704,6 +704,9 @@ importers:
       frontend-shared:
         specifier: workspace:*
         version: link:../frontend-shared
+      hls.js:
+        specifier: 1.6.16
+        version: 1.6.16
       i18n:
         specifier: workspace:*
         version: link:../i18n
@@ -7277,6 +7280,9 @@ packages:
     resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
     engines: {node: '>=12.0.0'}
 
+  hls.js@1.6.16:
+    resolution: {integrity: sha512-VSIRpLfRwlAAdGL4wiTucx2ScRipo0ed1FBatWkyt832jC4CReKstga6yIhYVwGu9LOBjuX9wzmRMeQdBJtzEA==}
+
   hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
 
@@ -10944,6 +10950,9 @@ packages:
   vue-component-type-helpers@3.2.6:
     resolution: {integrity: sha512-O02tnvIfOQVmnvoWwuSydwRoHjZVt8UEBR+2p4rT35p8GAy5VTlWP8o5qXfJR/GWCN0nVZoYWsVUvx2jwgdBmQ==}
 
+  vue-component-type-helpers@3.2.7:
+    resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -15583,7 +15592,7 @@ snapshots:
       storybook: 10.3.5(@testing-library/dom@10.4.0)(bufferutil@4.1.0)(prettier@3.8.3)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)(utf-8-validate@6.0.6)
       type-fest: 2.19.0
       vue: 3.5.32(typescript@5.9.3)
-      vue-component-type-helpers: 3.2.6
+      vue-component-type-helpers: 3.2.7
 
   '@stylistic/eslint-plugin@5.5.0(eslint@9.39.4)':
     dependencies:
@@ -18694,6 +18703,8 @@ snapshots:
 
   highlight.js@11.11.1: {}
 
+  hls.js@1.6.16: {}
+
   hosted-git-info@2.8.9: {}
 
   hosted-git-info@4.1.0:
@@ -22576,6 +22587,8 @@ snapshots:
 
   vue-component-type-helpers@3.2.6: {}
 
+  vue-component-type-helpers@3.2.7: {}
+
   vue-demi@0.14.10(vue@3.5.32(typescript@5.9.3)):
     dependencies:
       vue: 3.5.32(typescript@5.9.3)