Tune WebGL quality and loading screen
This commit is contained in:
yangbear
+105
-1
@@ -117,6 +117,32 @@ function serveIndex(res) {
|
||||
// 注入到 </head> 之前的 CSS
|
||||
const css = `
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #0d0a0b;
|
||||
}
|
||||
#unity-container {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #0d0a0b;
|
||||
}
|
||||
#unity-canvas {
|
||||
width: min(100vw, 177.7778vh) !important;
|
||||
height: min(56.25vw, 100vh) !important;
|
||||
aspect-ratio: 16 / 9;
|
||||
background: #231f20;
|
||||
display: block;
|
||||
}
|
||||
#unity-loading-bar {
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
}
|
||||
#landing-overlay {
|
||||
position: fixed; inset: 0; z-index: 9999;
|
||||
display: flex; flex-direction: column;
|
||||
@@ -157,15 +183,51 @@ function serveIndex(res) {
|
||||
box-shadow: 0 12px 40px rgba(74, 144, 217, 0.5);
|
||||
}
|
||||
#landing-btn:active { transform: translateY(0) scale(0.98); }
|
||||
#landing-btn:disabled {
|
||||
cursor: default;
|
||||
opacity: 0.48;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
|
||||
}
|
||||
#landing-progress {
|
||||
width: min(420px, 72vw);
|
||||
height: 8px;
|
||||
margin-top: 28px;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
background: rgba(255,255,255,0.14);
|
||||
}
|
||||
#landing-progress-fill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #4a90d9 0%, #7dd3fc 100%);
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
#landing-progress-text {
|
||||
margin-top: 12px;
|
||||
min-height: 18px;
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.52);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
#landing-btn .arrow {
|
||||
display: inline-block; font-size: 1.2em;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
#landing-btn:hover .arrow { transform: translateX(4px); }
|
||||
#landing-btn:disabled .arrow { transform: none; }
|
||||
#landing-overlay .hint {
|
||||
margin-top: 40px; font-size: 13px;
|
||||
color: rgba(255,255,255,0.25); letter-spacing: 0.05em;
|
||||
}
|
||||
@media (orientation: portrait) {
|
||||
#landing-overlay .logo-area { margin-bottom: 34px; }
|
||||
#landing-overlay .logo-area .icon { width: 84px; height: 84px; margin-bottom: 22px; }
|
||||
#landing-btn { padding: 14px 32px; }
|
||||
#landing-overlay .hint { margin-top: 24px; }
|
||||
}
|
||||
</style>`;
|
||||
|
||||
// 注入到 <body> 最前面的 overlay
|
||||
@@ -176,10 +238,14 @@ function serveIndex(res) {
|
||||
<h1>运动伤害现场急救虚拟仿真实验</h1>
|
||||
<p class="subtitle">VIRTUAL SIMULATION EXPERIMENT</p>
|
||||
</div>
|
||||
<button id="landing-btn" onclick="enterExperiment()">
|
||||
<button id="landing-btn" onclick="enterExperiment()" disabled>
|
||||
进入全屏实验
|
||||
<span class="arrow">→</span>
|
||||
</button>
|
||||
<div id="landing-progress">
|
||||
<div id="landing-progress-fill"></div>
|
||||
</div>
|
||||
<div id="landing-progress-text">加载中 0%</div>
|
||||
<p class="hint">点击按钮进入全屏沉浸式实验环境</p>
|
||||
</div>`;
|
||||
|
||||
@@ -188,8 +254,25 @@ function serveIndex(res) {
|
||||
<script>
|
||||
(function() {
|
||||
var overlay = document.getElementById('landing-overlay');
|
||||
var btn = document.getElementById('landing-btn');
|
||||
var fill = document.getElementById('landing-progress-fill');
|
||||
var text = document.getElementById('landing-progress-text');
|
||||
var ready = false;
|
||||
|
||||
window.__landingSetProgress = function(progress) {
|
||||
var percent = Math.max(0, Math.min(100, Math.round((progress || 0) * 100)));
|
||||
if (fill) fill.style.width = percent + '%';
|
||||
if (text) text.textContent = percent >= 100 ? '加载完成' : '加载中 ' + percent + '%';
|
||||
};
|
||||
|
||||
window.__landingSetReady = function() {
|
||||
ready = true;
|
||||
window.__landingSetProgress(1);
|
||||
if (btn) btn.disabled = false;
|
||||
};
|
||||
|
||||
window.enterExperiment = function() {
|
||||
if (!ready) return;
|
||||
var el = document.documentElement;
|
||||
var requestFS = el.requestFullscreen || el.webkitRequestFullscreen
|
||||
|| el.msRequestFullscreen || el.mozRequestFullScreen;
|
||||
@@ -210,6 +293,27 @@ function serveIndex(res) {
|
||||
})();
|
||||
</script>`;
|
||||
|
||||
html = html.replace(
|
||||
/progressBarFull\.style\.width\s*=\s*100\s*\*\s*progress\s*\+\s*"%";/,
|
||||
'progressBarFull.style.width = 100 * progress + "%"; if (window.__landingSetProgress) window.__landingSetProgress(progress);'
|
||||
);
|
||||
if (!html.includes('config.cacheControl')) {
|
||||
html = html.replace(
|
||||
/showBanner:\s*unityShowBanner,\s*\n\s*};/,
|
||||
'showBanner: unityShowBanner,\n };\n\n config.cacheControl = function (url) {\n if (url === config.dataUrl || url === config.frameworkUrl || url === config.codeUrl) {\n return "immutable";\n }\n return "must-revalidate";\n };'
|
||||
);
|
||||
}
|
||||
if (!html.includes('config.devicePixelRatio')) {
|
||||
html = html.replace(
|
||||
/};\s*\n\s*\/\/ By default Unity keeps WebGL canvas render target size matched with/,
|
||||
'};\n config.devicePixelRatio = Math.min(window.devicePixelRatio || 1, 1.5);\n\n // By default Unity keeps WebGL canvas render target size matched with'
|
||||
);
|
||||
}
|
||||
html = html.replace(
|
||||
/loadingBar\.style\.display\s*=\s*"none";/,
|
||||
'if (window.__landingSetReady) window.__landingSetReady(); loadingBar.style.display = "none";'
|
||||
);
|
||||
|
||||
html = html.replace('</head>', css + '\n</head>');
|
||||
html = html.replace('<body>', '<body>\n' + overlay);
|
||||
html = html.replace('</body>', js + '\n</body>');
|
||||
|
||||
Reference in New Issue
Block a user