Version 6.37.0

manual/assets/js/src/demos/ascii.js

@@ -0,0 +1,155 @@
+import {
+	CubeTextureLoader,
+	FogExp2,
+	LoadingManager,
+	PerspectiveCamera,
+	Scene,
+	SRGBColorSpace,
+	WebGLRenderer
+} from "three";
+
+import {
+	ASCIIEffect,
+	ASCIITexture,
+	BlendFunction,
+	EffectComposer,
+	EffectPass,
+	RenderPass
+} from "postprocessing";
+
+import { Pane } from "tweakpane";
+import { SpatialControls } from "spatial-controls";
+import { calculateVerticalFoV, FPSMeter } from "../utils";
+import * as Domain from "../objects/Domain";
+
+function load() {
+
+	const assets = new Map();
+	const loadingManager = new LoadingManager();
+	const cubeTextureLoader = new CubeTextureLoader(loadingManager);
+
+	const path = document.baseURI + "img/textures/skies/sunset/";
+	const format = ".png";
+	const urls = [
+		path + "px" + format, path + "nx" + format,
+		path + "py" + format, path + "ny" + format,
+		path + "pz" + format, path + "nz" + format
+	];
+
+	return new Promise((resolve, reject) => {
+
+		loadingManager.onLoad = () => resolve(assets);
+		loadingManager.onError = (url) => reject(new Error(`Failed to load ${url}`));
+
+		cubeTextureLoader.load(urls, (t) => {
+
+			t.colorSpace = SRGBColorSpace;
+			assets.set("sky", t);
+
+		});
+
+	});
+
+}
+
+window.addEventListener("load", () => load().then((assets) => {
+
+	// Renderer
+
+	const renderer = new WebGLRenderer({
+		powerPreference: "high-performance",
+		antialias: false,
+		stencil: false,
+		depth: false
+	});
+
+	renderer.debug.checkShaderErrors = (window.location.hostname === "localhost");
+	const container = document.querySelector(".viewport");
+	container.prepend(renderer.domElement);
+
+	// Camera & Controls
+
+	const camera = new PerspectiveCamera();
+	const controls = new SpatialControls(camera.position, camera.quaternion, renderer.domElement);
+	const settings = controls.settings;
+	settings.rotation.sensitivity = 2.2;
+	settings.rotation.damping = 0.05;
+	settings.translation.damping = 0.1;
+	controls.position.set(0, 10, 1);
+	controls.lookAt(0, 10, -1);
+
+	// Scene, Lights, Objects
+
+	const scene = new Scene();
+	scene.fog = new FogExp2(0x373134, 0.06);
+	scene.background = assets.get("sky");
+	scene.add(Domain.createLights());
+	scene.add(Domain.createEnvironment(scene.background));
+	scene.add(Domain.createActors(scene.background));
+
+	// Post Processing
+
+	const composer = new EffectComposer(renderer, {
+		multisampling: Math.min(4, renderer.capabilities.maxSamples)
+	});
+
+	const effect = new ASCIIEffect({
+		asciiTexture: new ASCIITexture({
+			characters: " .:,'-^=*+?!|0#X%WM@",
+			font: "Arial",
+			fontSize: 54,
+			size: 1024,
+			maxCharsPerRow: 16
+		}),
+		cellSize: 12,
+		inverted: false
+	});
+
+	composer.addPass(new RenderPass(scene, camera));
+	composer.addPass(new EffectPass(camera, effect));
+
+	// Settings
+
+	const params = { useSceneColor: true };
+
+	const fpsMeter = new FPSMeter();
+	const pane = new Pane({ container: container.querySelector(".tp") });
+	pane.addBinding(fpsMeter, "fps", { readonly: true, label: "FPS" });
+
+	const folder = pane.addFolder({ title: "Settings" });
+	folder.addBinding(effect, "inverted");
+	folder.addBinding(effect, "cellSize", { min: 2, max: 24, step: 2 });
+	folder.addBinding(effect, "color", { color: { type: "float" } });
+	folder.addBinding(params, "useSceneColor").on("change",
+		(e) => void (effect.color = e.value ? null : effect.color.getHex()));
+
+	folder.addBinding(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
+	folder.addBinding(effect.blendMode, "blendFunction", { options: BlendFunction });
+
+	// Resize Handler
+
+	function onResize() {
+
+		const width = container.clientWidth, height = container.clientHeight;
+		camera.aspect = width / height;
+		camera.fov = calculateVerticalFoV(90, Math.max(camera.aspect, 16 / 9));
+		camera.updateProjectionMatrix();
+		composer.setSize(width, height);
+
+	}
+
+	window.addEventListener("resize", onResize);
+	onResize();
+
+	// Render Loop
+
+	requestAnimationFrame(function render(timestamp) {
+
+		fpsMeter.update(timestamp);
+		controls.update(timestamp);
+		composer.render();
+		requestAnimationFrame(render);
+
+	});
+
+}));

manual/content/demos/special-effects/ascii.en.md

@@ -0,0 +1,15 @@
+---
+layout: single
+collection: sections
+title: ASCII
+draft: false
+menu:
+  demos:
+    parent: special-effects
+    weight: 9
+script: ascii
+---
+
+# ASCII
+
+### External Resources

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "postprocessing",
-	"version": "6.36.7",
+	"version": "6.37.0",
 	"description": "A post processing library for three.js.",
 	"homepage": "https://github.com/pmndrs/postprocessing",
 	"license": "Zlib",
@@ -58,6 +58,7 @@
 	"pnpm": {
 		"onlyBuiltDependencies": [
 			"@parcel/watcher",
+			"core-js",
 			"esbuild",
 			"hugo-bin"
 		]
@@ -88,7 +89,7 @@
 		"watch:js": "node esbuild -w"
 	},
 	"peerDependencies": {
-		"three": ">= 0.157.0 < 0.174.0"
+		"three": ">= 0.157.0 < 0.175.0"
 	},
 	"devDependencies": {
 		"@tweakpane/core": "2.x.x",
@@ -101,7 +102,7 @@
 		"cssnano": "7.x.x",
 		"dat.gui": "0.x.x",
 		"del-cli": "6.x.x",
-		"esbuild": "0.24.x",
+		"esbuild": "0.25.x",
 		"esbuild-plugin-glsl": "1.x.x",
 		"esdoc": "1.x.x",
 		"esdoc-importpath-plugin": "1.x.x",