Merge pull request #414 from pmndrs/dev

Version 6.29.0

demo/src/demos/SSAODemo.js

@@ -399,7 +399,7 @@ export class SSAODemo extends PostProcessingDemo {
 
 		menu.add(params, "intensity", 1.0, 4.0, 0.01).onChange((value) => {
 
-			uniforms.intensity.value = value;
+			ssaoEffect.ssaoMaterial.intensity = value;
 
 		});
 

esbuild.mjs

@@ -6,15 +6,18 @@ import esbuild from "esbuild";
 
 const require = createRequire(import.meta.url);
 const pkg = require("./package");
-const date = (new Date()).toDateString();
-const external = Object.keys(pkg.peerDependencies || {});
+
 const minify = process.argv.includes("-m");
 const watch = process.argv.includes("-w");
 const plugins = [glsl({ minify }), tsPaths()];
+const external = Object.keys(pkg.peerDependencies || {})
+	.concat(["spatial-controls", "tweakpane"]);
+
+const date = new Date();
 const banner = `/**
- * ${pkg.name} v${pkg.version} build ${date}
+ * ${pkg.name} v${pkg.version} build ${date.toDateString()}
  * ${pkg.homepage}
- * Copyright 2015-${date.slice(-4)} ${pkg.author.name}
+ * Copyright 2015-${date.getFullYear()} ${pkg.author.name}
  * @license ${pkg.license}
  */`;
 
@@ -43,9 +46,9 @@ await esbuild.build({
 }).catch(() => process.exit(1));
 
 await esbuild.build({
-	entryPoints: ["manual/assets/js/libs/three.js"],
+	entryPoints: ["manual/assets/js/libs/vendor.js"],
 	outdir: "manual/assets/js/dist/libs",
-	globalName: "THREE",
+	globalName: "VENDOR",
 	target: "es6",
 	logLevel: "info",
 	format: "iife",

manual/assets/css/src/screen/default/layout/_sidebar.scss

@@ -75,8 +75,8 @@
 		h3 {
 			opacity: 1;
 		}
-		.sidebar-button-open {
-			background-image: url("/img/svg/menu_open_white_24dp.svg");
-		}
+	}
+	.sidebar-button-open {
+		background-image: url("/img/svg/menu_open_white_24dp.svg");
 	}
 }

manual/assets/css/src/screen/default/layout/_viewport.scss

@@ -81,7 +81,7 @@
 		cursor: pointer;
 	}
 	p {
-		max-width: 500px;
+		max-width: 550px;
 	}
 	h4 {
 		align-items: center;

manual/assets/css/src/screen/large/_index.scss

@@ -2,5 +2,5 @@
  * Style definitions for large screens.
  */
 
+@use "base/body";
 @use "layout/main";
-@use "layout/sidebar";

manual/assets/css/src/screen/large/base/_body.scss

@@ -0,0 +1,3 @@
+body {
+	font-size: 18px;
+}

manual/assets/css/src/screen/large/layout/_main.scss

@@ -1,6 +1,6 @@
 .content {
 	> div {
-		max-width: calc(1024px + 4rem);
-		padding: 0.5rem 2rem 2rem 2rem;
+		max-width: calc(1280px + 4rem);
+		padding: 0.5rem 3rem 2rem 3rem;
 	}
 }

manual/assets/css/src/screen/medium/_index.scss

@@ -4,4 +4,5 @@
 
 @use "base/body";
 @use "layout/main";
+@use "layout/sidebar";
 @use "layout/tweakpane";

manual/assets/css/src/screen/medium/layout/_main.scss

@@ -1,6 +1,6 @@
 .content {
 	> div {
-		max-width: calc(1024px + 3rem);
-		padding: 0.5rem 1.5rem 2rem 1.5rem;
+		max-width: calc(1024px + 4rem);
+		padding: 0.5rem 2rem 2rem 2rem;
 	}
 }

manual/assets/css/src/values/_breakpoints.scss

@@ -1,6 +1,6 @@
-$small: 480px;
-$medium: 768px;
-$large: 1024px;
+$small: 512px;
+$medium: 1024px;
+$large: 2048px;
 
 :root {
 	--breakpoint-small: #{$small};

manual/assets/js/libs/vendor.js

@@ -0,0 +1,5 @@
+export * from "three";
+export * from "three/examples/jsm/loaders/GLTFLoader.js";
+
+export { ControlMode, SpatialControls } from "spatial-controls";
+export { Pane } from "tweakpane";

manual/assets/js/src/demos/depth-picking.js

@@ -6,7 +6,7 @@ import {
 	MeshBasicMaterial,
 	PerspectiveCamera,
 	Scene,
-	SphereBufferGeometry,
+	SphereGeometry,
 	sRGBEncoding,
 	Vector3,
 	VSMShadowMap,
@@ -100,7 +100,7 @@ window.addEventListener("load", () => load().then((assets) => {
 	scene.add(CornellBox.createActors());
 
 	const cursor = new Mesh(
-		new SphereBufferGeometry(0.2, 32, 32),
+		new SphereGeometry(0.2, 32, 32),
 		new MeshBasicMaterial({
 			color: 0xa9a9a9,
 			transparent: true,

manual/assets/js/src/demos/ssao.js

@@ -2,17 +2,16 @@ import {
 	Color,
 	ColorManagement,
 	CubeTextureLoader,
-	FogExp2,
 	LoadingManager,
 	PerspectiveCamera,
 	Scene,
 	sRGBEncoding,
+	VSMShadowMap,
 	WebGLRenderer
 } from "three";
 
 import {
 	BlendFunction,
-	DepthDownsamplingPass,
 	EffectComposer,
 	EffectPass,
 	NormalPass,
@@ -21,9 +20,9 @@ import {
 } from "postprocessing";
 
 import { Pane } from "tweakpane";
-import { SpatialControls } from "spatial-controls";
+import { ControlMode, SpatialControls } from "spatial-controls";
 import { calculateVerticalFoV, FPSMeter } from "../utils";
-import * as Domain from "../objects/Domain";
+import * as CornellBox from "../objects/CornellBox";
 
 function load() {
 
@@ -71,6 +70,10 @@ window.addEventListener("load", () => load().then((assets) => {
 	renderer.debug.checkShaderErrors = (window.location.hostname === "localhost");
 	renderer.physicallyCorrectLights = true;
 	renderer.outputEncoding = sRGBEncoding;
+	renderer.shadowMap.type = VSMShadowMap;
+	renderer.shadowMap.autoUpdate = false;
+	renderer.shadowMap.needsUpdate = true;
+	renderer.shadowMap.enabled = true;
 
 	const container = document.querySelector(".viewport");
 	container.prepend(renderer.domElement);
@@ -80,58 +83,41 @@ window.addEventListener("load", () => load().then((assets) => {
 	const camera = new PerspectiveCamera();
 	const controls = new SpatialControls(camera.position, camera.quaternion, renderer.domElement);
 	const settings = controls.settings;
+	settings.general.setMode(ControlMode.THIRD_PERSON);
 	settings.rotation.setSensitivity(2.2);
 	settings.rotation.setDamping(0.05);
-	settings.translation.setDamping(0.1);
-	controls.setPosition(0, 0, 1);
-	controls.lookAt(0, 0, 0);
+	settings.zoom.setDamping(0.1);
+	settings.translation.setEnabled(false);
+	controls.setPosition(0, 0, 5);
 
 	// 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));
+	scene.add(CornellBox.createLights());
+	scene.add(CornellBox.createEnvironment());
+	scene.add(CornellBox.createActors());
 
 	// Post Processing
 
-	const composer = new EffectComposer(renderer, {
-		multisampling: Math.min(4, renderer.capabilities.maxSamples)
-	});
+	const composer = new EffectComposer(renderer);
 
 	const normalPass = new NormalPass(scene, camera);
-	const depthDownsamplingPass = new DepthDownsamplingPass({
-		normalBuffer: normalPass.texture,
-		resolutionScale: 0.5
-	});
-
-	const normalDepthBuffer = renderer.capabilities.isWebGL2 ? depthDownsamplingPass.texture : null;
-
 	const effect = new SSAOEffect(camera, normalPass.texture, {
-		distanceScaling: true,
-		depthAwareUpsampling: false,
-		normalDepthBuffer,
 		worldDistanceThreshold: 20,
 		worldDistanceFalloff: 5,
 		worldProximityThreshold: 0.4,
 		worldProximityFalloff: 0.1,
-		radius: 0.1,
-		intensity: 1.33,
+		luminanceInfluence: 0.7,
+		samples: 16,
+		radius: 0.04,
+		intensity: 1,
 		resolutionScale: 0.5
 	});
 
 	const effectPass = new EffectPass(camera, effect);
 	composer.addPass(new RenderPass(scene, camera));
 	composer.addPass(normalPass);
-
-	if(renderer.capabilities.isWebGL2) {
-
-		composer.addPass(depthDownsamplingPass);
-
-	}
-
 	composer.addPass(effectPass);
 
 	// Settings
@@ -152,37 +138,24 @@ window.addEventListener("load", () => load().then((assets) => {
 	subfolder.addInput(ssaoMaterial, "worldProximityThreshold", { min: 0, max: 3, step: 1e-2 });
 	subfolder.addInput(ssaoMaterial, "worldProximityFalloff", { min: 0, max: 3, step: 1e-2 });
 
-	folder.addInput(effect.resolution, "scale", { label: "resolution", min: 0.25, max: 1, step: 0.05 })
-		.on("change", (e) => depthDownsamplingPass.resolution.scale = e.value);
-
 	if(renderer.capabilities.isWebGL2) {
 
 		folder.addInput(effect, "depthAwareUpsampling");
 
 	}
 
+	folder.addInput(effect.resolution, "scale", { label: "resolution", min: 0.25, max: 1, step: 0.05 });
+
 	folder.addInput(ssaoMaterial, "samples", { min: 1, max: 32, step: 1 });
 	folder.addInput(ssaoMaterial, "rings", { min: 1, max: 16, step: 1 });
 	folder.addInput(ssaoMaterial, "radius", { min: 1e-6, max: 1.0, step: 1e-2 });
-	folder.addInput(ssaoMaterial, "distanceScaling");
 	folder.addInput(ssaoMaterial, "minRadiusScale", { min: 0, max: 1, step: 1e-2 });
 	folder.addInput(ssaoMaterial, "bias", { min: 0, max: 0.5, step: 1e-3 });
 	folder.addInput(ssaoMaterial, "fade", { min: 0, max: 1, step: 1e-3 });
-	folder.addInput(ssaoMaterial, "intensity", { min: 0, max: 4, step: 1e-2 });
+	folder.addInput(effect.ssaoMaterial, "intensity", { min: 0, max: 4, step: 1e-2 });
 	folder.addInput(effect, "luminanceInfluence", { min: 0, max: 1, step: 1e-2 });
-	folder.addInput(params, "color", { view: "color" }).on("change", (e) => {
-
-		if(e.value === 0x000000) {
-
-			effect.color = null;
-
-		} else {
-
-			effect.color = color.setHex(e.value).convertSRGBToLinear();
-
-		}
-
-	});
+	folder.addInput(params, "color", { view: "color" })
+		.on("change", (e) => effect.color = (e.value === 0) ? null : color.setHex(e.value).convertSRGBToLinear());
 
 	folder.addInput(effect.blendMode.opacity, "value", { label: "opacity", min: 0, max: 1, step: 0.01 });
 	folder.addInput(effect.blendMode, "blendFunction", { options: BlendFunction });