Compile before rendering

pmndrs · Jan 7, 2025 · 72312b8 · 72312b8
1 parent 6c6939b
commit 72312b8
Show file tree

Hide file tree

Showing 25 changed files with 328 additions and 221 deletions.
diff --git 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<HTMLElement>(".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
@@ -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<HTMLElement>(".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
@@ -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<HTMLElement>(".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
@@ -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<HTMLElement>(".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
@@ -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<HTMLElement>(".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
@@ -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<HTMLElement>(".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
@@ -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
@@ -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<HTMLElement>(".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
@@ -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<HTMLElement>(".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));
 
 }));