Probleme mit der HD rendern - moonphase
This commit is contained in:
+116
-95
@@ -309,7 +309,7 @@ try {
|
||||
<script type="module">
|
||||
import * as THREE from './js/three.module.min.js';
|
||||
|
||||
const moonCanvas = document.getElementById('moonCanvas');
|
||||
let moonCanvas = document.getElementById('moonCanvas');
|
||||
const moonCraterOverlay = document.getElementById('moonCraterOverlay');
|
||||
const datePicker = document.getElementById('datePicker');
|
||||
const timeSlider = document.getElementById('timeSlider');
|
||||
@@ -553,8 +553,33 @@ async function fetchWithProgress(url, onProgress) {
|
||||
return URL.createObjectURL(new Blob(chunks));
|
||||
}
|
||||
|
||||
function destroyMoonScene() {
|
||||
if (!moonSceneState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { renderer, scene, moonMesh } = moonSceneState;
|
||||
|
||||
moonMesh.material.map && moonMesh.material.map.dispose();
|
||||
moonMesh.material.displacementMap && moonMesh.material.displacementMap.dispose();
|
||||
moonMesh.material.dispose();
|
||||
moonMesh.geometry.dispose();
|
||||
scene.clear();
|
||||
renderer.dispose();
|
||||
|
||||
// Canvas durch frisches Element ersetzen damit kein alter WebGL-Kontext hängt
|
||||
const newCanvas = document.createElement('canvas');
|
||||
newCanvas.id = moonCanvas.id;
|
||||
newCanvas.setAttribute('aria-label', moonCanvas.getAttribute('aria-label') || '');
|
||||
moonCanvas.replaceWith(newCanvas);
|
||||
moonCanvas = newCanvas;
|
||||
|
||||
moonSceneState = null;
|
||||
moonSceneInitPromise = null;
|
||||
}
|
||||
|
||||
async function loadHdTextures() {
|
||||
if (hdTexturesLoaded || hdTexturesLoading || !moonSceneState) {
|
||||
if (hdTexturesLoaded || hdTexturesLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -563,17 +588,8 @@ async function loadHdTextures() {
|
||||
moonLoading.classList.remove('is-hidden', 'is-error');
|
||||
setMoonLoadingProgress(0, 'HD-Texturen werden geladen... 0 %');
|
||||
|
||||
const textureLoader = new THREE.TextureLoader();
|
||||
const objectUrls = [];
|
||||
|
||||
const loadTexture = (objectUrl, colorSpace) => new Promise((resolve, reject) => {
|
||||
textureLoader.load(objectUrl, tex => {
|
||||
tex.colorSpace = colorSpace;
|
||||
tex.anisotropy = moonSceneState.renderer.capabilities.getMaxAnisotropy();
|
||||
resolve(tex);
|
||||
}, undefined, reject);
|
||||
});
|
||||
|
||||
try {
|
||||
let prog1 = 0;
|
||||
let prog2 = 0;
|
||||
@@ -583,23 +599,25 @@ async function loadHdTextures() {
|
||||
setMoonLoadingProgress(combined, `HD-Texturen werden geladen... ${Math.round(combined * 100)} %`);
|
||||
};
|
||||
|
||||
// Beide Dateien parallel herunterladen (RAM, noch kein GPU)
|
||||
const [url1, url2] = await Promise.all([
|
||||
fetchWithProgress(MOON_TEXTURE_PATH_HD, p => { prog1 = p; updateProgress(); }),
|
||||
fetchWithProgress(MOON_DISPLACEMENT_MAP_PATH_HD, p => { prog2 = p; updateProgress(); })
|
||||
]);
|
||||
|
||||
objectUrls.push(url1, url2);
|
||||
setMoonLoadingProgress(1, 'HD-Texturen werden verarbeitet...');
|
||||
setMoonLoadingProgress(1, 'Alte Scene wird entfernt...');
|
||||
|
||||
const [hdTex, hdDisp] = await Promise.all([
|
||||
loadTexture(url1, THREE.SRGBColorSpace),
|
||||
loadTexture(url2, THREE.NoColorSpace)
|
||||
]);
|
||||
// Alte Scene komplett zerstören → GPU-VRAM vollständig frei
|
||||
destroyMoonScene();
|
||||
|
||||
moonSceneState.moonMesh.material.map = hdTex;
|
||||
moonSceneState.moonMesh.material.displacementMap = hdDisp;
|
||||
moonSceneState.moonMesh.material.bumpMap = hdDisp;
|
||||
moonSceneState.moonMesh.material.needsUpdate = true;
|
||||
// Warten damit der Browser/GPU den Speicher wirklich freigibt
|
||||
await new Promise(resolve => window.setTimeout(resolve, 200));
|
||||
|
||||
setMoonLoadingProgress(1, 'HD-Scene wird aufgebaut...');
|
||||
|
||||
// Scene neu aufbauen mit den HD-Blob-URLs
|
||||
await buildMoonSceneFromUrls(url1, url2);
|
||||
|
||||
hdTexturesLoaded = true;
|
||||
hdTexturesLoading = false;
|
||||
@@ -814,6 +832,83 @@ async function fetchMoonPhaseData(date) {
|
||||
|
||||
let moonSceneInitPromise = null;
|
||||
|
||||
async function buildMoonSceneFromUrls(url1, url2) {
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
canvas: moonCanvas,
|
||||
antialias: true,
|
||||
alpha: false,
|
||||
powerPreference: 'high-performance'
|
||||
});
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
renderer.setClearColor(0x010102, 1);
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 3));
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFShadowMap;
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(28, 1, 0.1, 100);
|
||||
camera.position.set(0, 0, MOON_CAMERA_BASE_Z);
|
||||
|
||||
const ambientLight = new THREE.AmbientLight(0x1b2230, 0.004);
|
||||
scene.add(ambientLight);
|
||||
|
||||
const sunLight = new THREE.DirectionalLight(0xffffff, 2.9);
|
||||
sunLight.castShadow = true;
|
||||
sunLight.shadow.mapSize.width = 4096;
|
||||
sunLight.shadow.mapSize.height = 4096;
|
||||
sunLight.shadow.bias = -0.00015;
|
||||
sunLight.shadow.normalBias = 0.02;
|
||||
sunLight.shadow.camera.near = 1;
|
||||
sunLight.shadow.camera.far = 20;
|
||||
sunLight.shadow.camera.left = -3;
|
||||
sunLight.shadow.camera.right = 3;
|
||||
sunLight.shadow.camera.top = 3;
|
||||
sunLight.shadow.camera.bottom = -3;
|
||||
scene.add(sunLight);
|
||||
|
||||
const rimLight = new THREE.DirectionalLight(0x89a8ff, 0.015);
|
||||
rimLight.position.set(-2.5, 1.2, 3.2);
|
||||
scene.add(rimLight);
|
||||
|
||||
const textureLoader = new THREE.TextureLoader();
|
||||
const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
|
||||
|
||||
const loadTex = (url, colorSpace) => new Promise((resolve, reject) => {
|
||||
textureLoader.load(url, tex => {
|
||||
tex.colorSpace = colorSpace;
|
||||
tex.anisotropy = maxAnisotropy;
|
||||
resolve(tex);
|
||||
}, undefined, reject);
|
||||
});
|
||||
|
||||
// Sequenziell laden um GPU-Speicherspitzen zu vermeiden
|
||||
const texture = await loadTex(url1, THREE.SRGBColorSpace);
|
||||
const displacementMap = await loadTex(url2, THREE.NoColorSpace);
|
||||
|
||||
const geometry = new THREE.SphereGeometry(1.6, 256, 256);
|
||||
const material = new THREE.MeshStandardMaterial({
|
||||
map: texture,
|
||||
displacementMap,
|
||||
displacementScale: MOON_DISPLACEMENT_SCALE,
|
||||
displacementBias: MOON_DISPLACEMENT_BIAS,
|
||||
bumpMap: displacementMap,
|
||||
bumpScale: MOON_BUMP_SCALE,
|
||||
roughness: 1,
|
||||
metalness: 0
|
||||
});
|
||||
const moonMesh = new THREE.Mesh(geometry, material);
|
||||
moonMesh.castShadow = true;
|
||||
moonMesh.receiveShadow = true;
|
||||
moonMesh.rotation.y = MOON_TEXTURE_BASE_ROTATION_Y;
|
||||
scene.add(moonMesh);
|
||||
|
||||
moonSceneState = { renderer, scene, camera, moonMesh, sunLight, ambientLight, rimLight };
|
||||
|
||||
resizeMoonScene();
|
||||
applyMoonZoom();
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
async function ensureMoonScene() {
|
||||
if (moonSceneState) {
|
||||
return moonSceneState;
|
||||
@@ -846,81 +941,7 @@ async function ensureMoonScene() {
|
||||
objectUrls.push(url1, url2);
|
||||
setMoonLoadingProgress(1, 'Mondtexturen werden verarbeitet...');
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
canvas: moonCanvas,
|
||||
antialias: true,
|
||||
alpha: false,
|
||||
powerPreference: 'high-performance'
|
||||
});
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
renderer.setClearColor(0x010102, 1);
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 3));
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(28, 1, 0.1, 100);
|
||||
camera.position.set(0, 0, MOON_CAMERA_BASE_Z);
|
||||
|
||||
const ambientLight = new THREE.AmbientLight(0x1b2230, 0.004);
|
||||
scene.add(ambientLight);
|
||||
|
||||
const sunLight = new THREE.DirectionalLight(0xffffff, 2.9);
|
||||
sunLight.castShadow = true;
|
||||
sunLight.shadow.mapSize.width = 4096;
|
||||
sunLight.shadow.mapSize.height = 4096;
|
||||
sunLight.shadow.bias = -0.00015;
|
||||
sunLight.shadow.normalBias = 0.02;
|
||||
sunLight.shadow.camera.near = 1;
|
||||
sunLight.shadow.camera.far = 20;
|
||||
sunLight.shadow.camera.left = -3;
|
||||
sunLight.shadow.camera.right = 3;
|
||||
sunLight.shadow.camera.top = 3;
|
||||
sunLight.shadow.camera.bottom = -3;
|
||||
scene.add(sunLight);
|
||||
|
||||
const rimLight = new THREE.DirectionalLight(0x89a8ff, 0.015);
|
||||
rimLight.position.set(-2.5, 1.2, 3.2);
|
||||
scene.add(rimLight);
|
||||
|
||||
const textureLoader = new THREE.TextureLoader();
|
||||
const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
|
||||
|
||||
const loadTex = (url, colorSpace) => new Promise((resolve, reject) => {
|
||||
textureLoader.load(url, tex => {
|
||||
tex.colorSpace = colorSpace;
|
||||
tex.anisotropy = maxAnisotropy;
|
||||
resolve(tex);
|
||||
}, undefined, reject);
|
||||
});
|
||||
|
||||
const [texture, displacementMap] = await Promise.all([
|
||||
loadTex(url1, THREE.SRGBColorSpace),
|
||||
loadTex(url2, THREE.NoColorSpace)
|
||||
]);
|
||||
|
||||
const geometry = new THREE.SphereGeometry(1.6, 256, 256);
|
||||
const material = new THREE.MeshStandardMaterial({
|
||||
map: texture,
|
||||
displacementMap,
|
||||
displacementScale: MOON_DISPLACEMENT_SCALE,
|
||||
displacementBias: MOON_DISPLACEMENT_BIAS,
|
||||
bumpMap: displacementMap,
|
||||
bumpScale: MOON_BUMP_SCALE,
|
||||
roughness: 1,
|
||||
metalness: 0
|
||||
});
|
||||
const moonMesh = new THREE.Mesh(geometry, material);
|
||||
moonMesh.castShadow = true;
|
||||
moonMesh.receiveShadow = true;
|
||||
moonMesh.rotation.y = MOON_TEXTURE_BASE_ROTATION_Y;
|
||||
scene.add(moonMesh);
|
||||
|
||||
moonSceneState = { renderer, scene, camera, moonMesh, sunLight, ambientLight, rimLight };
|
||||
|
||||
resizeMoonScene();
|
||||
applyMoonZoom();
|
||||
renderer.render(scene, camera);
|
||||
await buildMoonSceneFromUrls(url1, url2);
|
||||
|
||||
moonLoadingText.textContent = 'Mondtexturen geladen';
|
||||
window.setTimeout(hideMoonLoading, 350);
|
||||
|
||||
Reference in New Issue
Block a user