Update demos

pmndrs · Jan 1, 2024 · 8ff7bd6 · 8ff7bd6
1 parent 0d073f5
commit 8ff7bd6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 25 deletions.
diff --git a/manual/assets/js/src/demos/gbuffer.ts b/manual/assets/js/src/demos/gbuffer.ts
@@ -1,5 +1,6 @@
 import {
 	CubeTextureLoader,
+	HalfFloatType,
 	LoadingManager,
 	PerspectiveCamera,
 	Scene,
@@ -12,9 +13,11 @@ import {
 import {
 	BufferDebugPass,
 	ClearPass,
+	EffectPass,
 	GBuffer,
 	GeometryPass,
-	RenderPipeline
+	RenderPipeline,
+	ToneMappingEffect
 } from "postprocessing";
 
 import { Pane } from "tweakpane";
@@ -81,15 +84,18 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	const scene = new Scene();
 	//scene.background = assets.get("sky") as Texture;
-
 	scene.add(CornellBox.createLights());
 	scene.add(CornellBox.createEnvironment());
 	scene.add(CornellBox.createActors());
 
 	// Post Processing
 
-	const clearPass = new ClearPass();
-	const geoPass = new GeometryPass(scene, camera, { samples: 4 });
+	const pipeline = new RenderPipeline(renderer);
+	pipeline.addPass(new ClearPass());
+	pipeline.addPass(new GeometryPass(scene, camera, {
+		frameBufferType: HalfFloatType,
+		samples: 4
+	}));
 
 	const bufferDebugPass = new BufferDebugPass(
 		new Set([
@@ -101,9 +107,7 @@ window.addEventListener("load", () => void load().then((assets) => {
 		])
 	);
 
-	const pipeline = new RenderPipeline(renderer);
-	pipeline.addPass(clearPass);
-	pipeline.addPass(geoPass);
+	pipeline.addPass(new EffectPass(new ToneMappingEffect()));
 	pipeline.addPass(bufferDebugPass);
 
 	// Settings

diff --git a/manual/assets/js/src/demos/msaa.ts b/manual/assets/js/src/demos/msaa.ts
@@ -1,5 +1,6 @@
 import {
 	CubeTextureLoader,
+	HalfFloatType,
 	LoadingManager,
 	PerspectiveCamera,
 	SRGBColorSpace,
@@ -11,29 +12,29 @@ import {
 
 import {
 	ClearPass,
-	CopyPass,
+	EffectPass,
 	GeometryPass,
-	RenderPipeline
+	RenderPipeline,
+	ToneMappingEffect
 } from "postprocessing";
 
 import { Pane } from "tweakpane";
-import * as EssentialsPlugin from "@tweakpane/plugin-essentials";
 import { ControlMode, SpatialControls } from "spatial-controls";
-import { calculateVerticalFoV, createFPSGraph, getSkyboxUrls } from "../utils/index.js";
 import * as CornellBox from "../objects/CornellBox.js";
+import * as Utils from "../utils/index.js";
 
-function load(): Promise<Map<string, unknown>> {
+function load(): Promise<Map<string, Texture>> {
 
-	const assets = new Map<string, unknown>();
+	const assets = new Map<string, Texture>();
 	const loadingManager = new LoadingManager();
 	const cubeTextureLoader = new CubeTextureLoader(loadingManager);
 
-	return new Promise<Map<string, unknown>>((resolve, reject) => {
+	return new Promise<Map<string, Texture>>((resolve, reject) => {
 
 		loadingManager.onLoad = () => resolve(assets);
 		loadingManager.onError = (url) => reject(new Error(`Failed to load ${url}`));
 
-		cubeTextureLoader.load(getSkyboxUrls("sunset"), (t) => {
+		cubeTextureLoader.load(Utils.getSkyboxUrls("sunset"), (t) => {
 
 			t.colorSpace = SRGBColorSpace;
 			assets.set("sky", t);
@@ -55,7 +56,6 @@ window.addEventListener("load", () => void load().then((assets) => {
 		depth: false
 	});
 
-	renderer.debug.checkShaderErrors = (window.location.hostname === "localhost");
 	renderer.shadowMap.type = VSMShadowMap;
 	renderer.shadowMap.autoUpdate = false;
 	renderer.shadowMap.needsUpdate = true;
@@ -87,15 +87,19 @@ window.addEventListener("load", () => void load().then((assets) => {
 	// Post Processing
 
 	const pipeline = new RenderPipeline(renderer);
-	const geoPass = new GeometryPass(scene, camera, { samples: 4 });
+	const geoPass = new GeometryPass(scene, camera, {
+		frameBufferType: HalfFloatType,
+		samples: 4
+	});
+
+	pipeline.addPass(new ClearPass());
 	pipeline.addPass(geoPass);
-	pipeline.addPass(new CopyPass());
+	pipeline.addPass(new EffectPass(new ToneMappingEffect()));
 
 	// Settings
 
 	const pane = new Pane({ container: container.querySelector(".tp") as HTMLElement });
-	pane.registerPlugin(EssentialsPlugin);
-	const fpsGraph = createFPSGraph(pane);
+	const fpsGraph = Utils.createFPSGraph(pane);
 
 	const folder = pane.addFolder({ title: "Settings" });
 	folder.addBinding(geoPass, "samples", {
@@ -114,7 +118,7 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 		const width = container.clientWidth, height = container.clientHeight;
 		camera.aspect = width / height;
-		camera.fov = calculateVerticalFoV(90, Math.max(camera.aspect, 16 / 9));
+		camera.fov = Utils.calculateVerticalFoV(90, Math.max(camera.aspect, 16 / 9));
 		camera.updateProjectionMatrix();
 		pipeline.setSize(width, height);
 
@@ -131,6 +135,7 @@ window.addEventListener("load", () => void load().then((assets) => {
 		controls.update(timestamp);
 		pipeline.render(timestamp);
 		fpsGraph.end();
+
 		requestAnimationFrame(render);
 
 	});

diff --git a/manual/assets/js/src/demos/tone-mapping.ts b/manual/assets/js/src/demos/tone-mapping.ts
@@ -84,13 +84,16 @@ window.addEventListener("load", () => void load().then((assets) => {
 
 	// Post Processing
 
+	const pipeline = new RenderPipeline(renderer);
+	pipeline.addPass(new ClearPass());
+	pipeline.addPass(new GeometryPass(scene, camera, {
+		frameBufferType: HalfFloatType,
+		samples: 4
+	}));
+
 	const effect = new ToneMappingEffect();
 	effect.blendMode.blendFunction = new MixBlendFunction();
-
-	const pipeline = new RenderPipeline(renderer);
 	const effectPass = new EffectPass(effect);
-	pipeline.addPass(new ClearPass());
-	pipeline.addPass(new GeometryPass(scene, camera, { samples: 4, frameBufferType: HalfFloatType }));
 	pipeline.addPass(effectPass);
 
 	// Settings