4. Renderingsloopen, WebGPU och WebXR

Målet

Förstå varför 3D-världen uppdateras många gånger per sekund och varför WebGPU och WebXR är olika tekniker. Du kan göra allt i kapitlet på desktop; headsetet är valfritt.

Från objekt till bild

Scenen innehåller objekt, kameran väljer perspektiv och renderaren ritar resultatet. Anropet renderer.render(scene, camera) ger en stillbild. För rörelse behövs en loop. Three.js setAnimationLoop() fungerar både med vanlig skärm och när WebXR styr bildrutorna i ett headset.

renderer.setAnimationLoop(tick);

function tick() {
  // Beräkna rörelse och interaktioner.
  renderer.render(scene, camera);
}

Det färdiga spelet räknar ut dt: sekunderna sedan föregående bildruta. Hastighet multipliceras med dt, så rörelsen inte blir dubbelt snabb på en skärm med dubbelt så hög bildfrekvens. Spelet begränsar ett mycket stort dt efter en paus för att undvika stora hopp.

Vilken teknik gör vad?

Three.js ger scener, kameror, material, modeller och 3D-hjälpklasser.
WebGPU är ett modernt sätt för webbläsaren att använda grafikkortet. Det är inte samma sak som WebXR.
WebGL2 är ett alternativt grafikgränssnitt när WebGPU eller dess XR-koppling inte fungerar.
WebXR ger headsetets vy och kontrollerna. Det kräver en säker kontext och stöd i webbläsaren.

I spelets boot() försöker WebGPURenderer starta. Vid initieringsfel skapas den med forceWebGL: true. I Quest väljer koden WebGL2 om XRGPUBinding inte finns. Läs statusraden i spelet i stället för att anta att samma backend används överallt.

Upplösning och färger

renderer.setSize(innerWidth, innerHeight) matchar webbläsarfönstret. renderer.setPixelRatio(...) påverkar hur många pixlar som ritas; högre värde är skarpare men dyrare. outputColorSpace = THREE.SRGBColorSpace gör att färger och texturer behandlas på ett förväntat sätt. Vid fönsterstorleksändring måste även camera.aspect och camera.updateProjectionMatrix() uppdateras.

Övning

I labbscenen: ersätt konstant kubrotation per ruta med rotation baserad på dt och jämför på en snabb och en långsam dator.
Ändra webbläsarfönstrets storlek. Om bilden sträcks, lägg till kod för resize enligt spelets bindInputs().
I spelet: läs statusraden för WebGPU/WebGL2 och WebXR. Skriv ner vad din webbläsare visar. En annan dator kan visa något annat.

Klart när: du kan beskriva varför en renderingsloop behövs, varför dt används och varför ett WebXR-spel kan ritas med WebGL2.