diff --git a/manual/assets/js/src/demos/bloom.ts b/manual/assets/js/src/demos/bloom.ts index 6ab312c41..c2dfacfea 100644 --- a/manual/assets/js/src/demos/bloom.ts +++ b/manual/assets/js/src/demos/bloom.ts @@ -65,8 +65,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.setPixelRatio(window.devicePixelRatio); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); // Camera & Controls @@ -111,6 +109,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -145,13 +144,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/blur.ts b/manual/assets/js/src/demos/blur.ts index 8481ba088..21d07c7be 100644 --- a/manual/assets/js/src/demos/blur.ts +++ b/manual/assets/js/src/demos/blur.ts @@ -65,9 +65,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.shadowMap.needsUpdate = true; renderer.shadowMap.enabled = true; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -122,6 +119,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -184,13 +182,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/brightness-contrast.ts b/manual/assets/js/src/demos/brightness-contrast.ts index 8f9ac4c28..ff1526f06 100644 --- a/manual/assets/js/src/demos/brightness-contrast.ts +++ b/manual/assets/js/src/demos/brightness-contrast.ts @@ -58,9 +58,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.debug.checkShaderErrors = Utils.isLocalhost; renderer.setClearAlpha(0); - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -102,6 +99,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -131,13 +129,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/chromatic-aberration.ts b/manual/assets/js/src/demos/chromatic-aberration.ts index 714c662be..624a4c467 100644 --- a/manual/assets/js/src/demos/chromatic-aberration.ts +++ b/manual/assets/js/src/demos/chromatic-aberration.ts @@ -63,8 +63,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.setPixelRatio(window.devicePixelRatio); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); // Camera & Controls @@ -105,6 +103,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -136,13 +135,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/color-depth.ts b/manual/assets/js/src/demos/color-depth.ts index cb506e08a..b6c1b691d 100644 --- a/manual/assets/js/src/demos/color-depth.ts +++ b/manual/assets/js/src/demos/color-depth.ts @@ -58,8 +58,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.setPixelRatio(window.devicePixelRatio); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); // Camera & Controls @@ -97,6 +95,7 @@ window.addEventListener("load", () => void load().then((assets) => { const params = { bitDepth: 6 }; + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -138,13 +137,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/depth-of-field.ts b/manual/assets/js/src/demos/depth-of-field.ts index e6adec892..f8e2b7eb3 100644 --- a/manual/assets/js/src/demos/depth-of-field.ts +++ b/manual/assets/js/src/demos/depth-of-field.ts @@ -65,8 +65,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.setPixelRatio(window.devicePixelRatio); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); // Camera & Controls @@ -146,6 +144,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -181,13 +180,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/depth-picking.ts b/manual/assets/js/src/demos/depth-picking.ts index bd183d028..81c2c2519 100644 --- a/manual/assets/js/src/demos/depth-picking.ts +++ b/manual/assets/js/src/demos/depth-picking.ts @@ -67,9 +67,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.shadowMap.needsUpdate = true; renderer.shadowMap.enabled = true; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -132,6 +129,7 @@ window.addEventListener("load", () => void load().then((assets) => { } + const container = document.getElementById("viewport")!; container.addEventListener("pointermove", (e) => void pickDepth(e), { passive: true }); // Settings @@ -157,13 +155,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/fxaa.ts b/manual/assets/js/src/demos/fxaa.ts index 647e51152..27f24e812 100644 --- a/manual/assets/js/src/demos/fxaa.ts +++ b/manual/assets/js/src/demos/fxaa.ts @@ -64,9 +64,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.shadowMap.needsUpdate = true; renderer.shadowMap.enabled = true; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -101,6 +98,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -129,13 +127,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/gbuffer.ts b/manual/assets/js/src/demos/gbuffer.ts index ddf47d160..161fe31e3 100644 --- a/manual/assets/js/src/demos/gbuffer.ts +++ b/manual/assets/js/src/demos/gbuffer.ts @@ -65,9 +65,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.shadowMap.needsUpdate = true; renderer.shadowMap.enabled = true; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(50, 1, 1, 1000); @@ -118,6 +115,7 @@ window.addEventListener("load", () => void load().then((assets) => { const gBufferOptions = Object.assign({ NONE: "" }, Utils.enumToRecord(GBuffer)); bufferDebugPass.bufferFocus = gBufferOptions.NONE; + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); const folder = pane.addFolder({ title: "Settings" }); @@ -142,13 +140,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/glitch.ts b/manual/assets/js/src/demos/glitch.ts index 08be067cd..7aa3f7e5c 100644 --- a/manual/assets/js/src/demos/glitch.ts +++ b/manual/assets/js/src/demos/glitch.ts @@ -62,9 +62,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.setPixelRatio(window.devicePixelRatio); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.dataset.epilepsyWarning = "1"; - container.prepend(renderer.domElement); // Camera & Controls @@ -105,6 +102,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -146,13 +144,20 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.dataset.epilepsyWarning = "1"; + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/halftone.ts b/manual/assets/js/src/demos/halftone.ts index a98dcf996..225bba633 100644 --- a/manual/assets/js/src/demos/halftone.ts +++ b/manual/assets/js/src/demos/halftone.ts @@ -58,8 +58,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.setPixelRatio(window.devicePixelRatio); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); // Camera & Controls @@ -98,6 +96,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -132,13 +131,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/hue-saturation.ts b/manual/assets/js/src/demos/hue-saturation.ts index 5d19f2fb0..e10aa83f9 100644 --- a/manual/assets/js/src/demos/hue-saturation.ts +++ b/manual/assets/js/src/demos/hue-saturation.ts @@ -58,9 +58,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.debug.checkShaderErrors = Utils.isLocalhost; renderer.setClearAlpha(0); - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -102,6 +99,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -131,13 +129,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/lens-distortion.ts b/manual/assets/js/src/demos/lens-distortion.ts index 856fa9be4..d7bd43079 100644 --- a/manual/assets/js/src/demos/lens-distortion.ts +++ b/manual/assets/js/src/demos/lens-distortion.ts @@ -58,8 +58,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.setPixelRatio(window.devicePixelRatio); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); // Camera & Controls @@ -97,6 +95,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -136,13 +135,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/lut.ts b/manual/assets/js/src/demos/lut.ts index caffb71cd..d33a41acb 100644 --- a/manual/assets/js/src/demos/lut.ts +++ b/manual/assets/js/src/demos/lut.ts @@ -149,9 +149,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.debug.checkShaderErrors = Utils.isLocalhost; renderer.setClearAlpha(0); - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -179,6 +176,7 @@ window.addEventListener("load", () => void load().then((assets) => { // LUT Preview + const container = document.getElementById("viewport")!; const img = document.createElement("img"); img.title = "This is a compressed preview image"; img.classList.add("lut", "hidden"); @@ -304,13 +302,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/msaa.ts b/manual/assets/js/src/demos/msaa.ts index 67ecb61b6..1ea307a10 100644 --- a/manual/assets/js/src/demos/msaa.ts +++ b/manual/assets/js/src/demos/msaa.ts @@ -62,9 +62,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.shadowMap.needsUpdate = true; renderer.shadowMap.enabled = true; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -98,6 +95,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -130,13 +128,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/pixelation.ts b/manual/assets/js/src/demos/pixelation.ts index f9d7dcf45..664e472de 100644 --- a/manual/assets/js/src/demos/pixelation.ts +++ b/manual/assets/js/src/demos/pixelation.ts @@ -54,8 +54,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.setPixelRatio(window.devicePixelRatio); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); // Camera & Controls @@ -92,6 +90,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -118,13 +117,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/scanlines.ts b/manual/assets/js/src/demos/scanlines.ts index 26d72f800..0c2df3de4 100644 --- a/manual/assets/js/src/demos/scanlines.ts +++ b/manual/assets/js/src/demos/scanlines.ts @@ -57,8 +57,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.setPixelRatio(window.devicePixelRatio); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); // Camera & Controls @@ -94,6 +92,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -121,13 +120,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/scissor-viewport.ts b/manual/assets/js/src/demos/scissor-viewport.ts index 469716292..91918a267 100644 --- a/manual/assets/js/src/demos/scissor-viewport.ts +++ b/manual/assets/js/src/demos/scissor-viewport.ts @@ -70,9 +70,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.shadowMap.needsUpdate = true; renderer.shadowMap.enabled = true; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(50, 1, 1, 1000); @@ -127,6 +124,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -160,13 +158,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/sepia.ts b/manual/assets/js/src/demos/sepia.ts index 37ee485e3..58cd26c49 100644 --- a/manual/assets/js/src/demos/sepia.ts +++ b/manual/assets/js/src/demos/sepia.ts @@ -58,9 +58,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.debug.checkShaderErrors = Utils.isLocalhost; renderer.setClearAlpha(0); - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -102,6 +99,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -128,13 +126,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/smaa.ts b/manual/assets/js/src/demos/smaa.ts index 224b3ed88..c742cc85e 100644 --- a/manual/assets/js/src/demos/smaa.ts +++ b/manual/assets/js/src/demos/smaa.ts @@ -68,9 +68,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.shadowMap.needsUpdate = true; renderer.shadowMap.enabled = true; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -120,6 +117,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); const edgeDetectionMaterial = effect.edgeDetectionMaterial; @@ -182,13 +180,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/texture.ts b/manual/assets/js/src/demos/texture.ts index 7b66eaefa..836e6cf7f 100644 --- a/manual/assets/js/src/demos/texture.ts +++ b/manual/assets/js/src/demos/texture.ts @@ -75,9 +75,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.shadowMap.needsUpdate = true; renderer.shadowMap.enabled = true; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -112,6 +109,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -149,13 +147,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/tilt-shift.ts b/manual/assets/js/src/demos/tilt-shift.ts index 2fd79859d..91ab8e837 100644 --- a/manual/assets/js/src/demos/tilt-shift.ts +++ b/manual/assets/js/src/demos/tilt-shift.ts @@ -58,9 +58,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.debug.checkShaderErrors = Utils.isLocalhost; renderer.setClearAlpha(0); - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(); @@ -108,6 +105,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -144,13 +142,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/tone-mapping.ts b/manual/assets/js/src/demos/tone-mapping.ts index 63cbdd421..fb07513cf 100644 --- a/manual/assets/js/src/demos/tone-mapping.ts +++ b/manual/assets/js/src/demos/tone-mapping.ts @@ -58,8 +58,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.setPixelRatio(window.devicePixelRatio); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); // Camera & Controls @@ -95,6 +93,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); const folder = pane.addFolder({ title: "Settings" }); @@ -120,13 +119,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/ui.ts b/manual/assets/js/src/demos/ui.ts index 3cb2704c4..19010fa0d 100644 --- a/manual/assets/js/src/demos/ui.ts +++ b/manual/assets/js/src/demos/ui.ts @@ -83,9 +83,6 @@ window.addEventListener("load", () => void load().then((assets) => { renderer.shadowMap.needsUpdate = true; renderer.shadowMap.enabled = true; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); - // Camera & Controls const camera = new PerspectiveCamera(50, 1, 1, 1000); @@ -177,10 +174,9 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings - const params = { - depthAware: true - }; + const params = { depthAware: true }; + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -219,18 +215,22 @@ window.addEventListener("load", () => void load().then((assets) => { const timer = new Timer(); - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - timer.update(timestamp); + container.prepend(renderer.domElement); - coin.rotation.y = (coin.rotation.y + timer.getDelta() * 5) % Math.PI; - health.position.y = (healthPosition.y + Math.sin(timer.getElapsed()) * 0.025); + renderer.setAnimationLoop((timestamp) => { - pipeline.render(timestamp); - fpsGraph.end(); + fpsGraph.begin(); + controls.update(timestamp); + timer.update(timestamp); + coin.rotation.y = (coin.rotation.y + timer.getDelta() * 5) % Math.PI; + health.position.y = (healthPosition.y + Math.sin(timer.getElapsed()) * 0.025); + pipeline.render(timestamp); + fpsGraph.end(); - }); + }); + + }).catch((e) => console.error(e)); })); diff --git a/manual/assets/js/src/demos/vignette.ts b/manual/assets/js/src/demos/vignette.ts index 39e4c001d..02480ab6d 100644 --- a/manual/assets/js/src/demos/vignette.ts +++ b/manual/assets/js/src/demos/vignette.ts @@ -58,8 +58,6 @@ window.addEventListener("load", () => void load().then((assets) => { }); renderer.debug.checkShaderErrors = Utils.isLocalhost; - const container = document.getElementById("viewport")!; - container.prepend(renderer.domElement); // Camera & Controls @@ -102,6 +100,7 @@ window.addEventListener("load", () => void load().then((assets) => { // Settings + const container = document.getElementById("viewport")!; const pane = new Pane({ container: container.querySelector(".tp")! }); const fpsGraph = Utils.createFPSGraph(pane); @@ -132,13 +131,19 @@ window.addEventListener("load", () => void load().then((assets) => { // Render Loop - renderer.setAnimationLoop((timestamp: number) => { + pipeline.compile().then(() => { - fpsGraph.begin(); - controls.update(timestamp); - pipeline.render(timestamp); - fpsGraph.end(); + container.prepend(renderer.domElement); - }); + renderer.setAnimationLoop((timestamp) => { + + fpsGraph.begin(); + controls.update(timestamp); + pipeline.render(timestamp); + fpsGraph.end(); + + }); + + }).catch((e) => console.error(e)); }));