Improve Screen mode handling

Author: raub

examples/knot.mjs

@@ -33,7 +33,7 @@ scene.add(knotMesh);
 
 // A slightly larger knot mesh, inside-out black - for outline
 const outlineGeometry = new THREE.TorusKnotGeometry(10, 2, 256, 20, 2, 7);
-const outlineMaterial = new THREE.MeshBasicMaterial({ color: 0, side: THREE.BackSide });;
+const outlineMaterial = new THREE.MeshBasicMaterial({ color: 0, side: THREE.BackSide });
 const outlineMesh = new THREE.Mesh(outlineGeometry, outlineMaterial);
 knotMesh.add(outlineMesh);
 

examples/palette/palette.mjs

@@ -14,7 +14,7 @@ import { createRenderTarget } from './utils/create-render-target.js';
 import { populateScene } from './utils/populate-scene.js';
 
 
-const IS_PERF_MODE = true;
+const IS_PERF_MODE = !true;
 
 const hueModes = [
 	'monochromatic', 'analagous', 'complementary', 'triadic', 'tetradic',
@@ -37,16 +37,16 @@ addThreeHelpers(THREE, gl);
 const icon = new Image('textures/icon.png');
 icon.on('load', () => { doc.icon = icon; });
 
-const cameraPerspective = new THREE.PerspectiveCamera(50, doc.w / doc.h, 1, 1000);
-cameraPerspective.position.z = 9;
-const screen = new Screen({ three: THREE, camera: cameraPerspective });
+const screen = new Screen({ three: THREE, fov: 50, near: 1, far: 1000 });
+screen.renderer.shadowMap.enabled = true;
+screen.camera.position.z = 9;
 
 const cameraOrtho = new THREE.OrthographicCamera(
 	-doc.w * 0.5, doc.w * 0.5, doc.h * 0.5, -doc.h * 0.5, - 10, 10,
 );
 cameraOrtho.position.z = 5;
 
-const controls = new OrbitControls(cameraPerspective, doc);
+const controls = new OrbitControls(screen.camera, doc);
 controls.update();
 
 let mesh;
@@ -105,14 +105,29 @@ const setModeGrayscale = (newValue) => {
 		newValue = 1;
 	}
 	modeGrayscale = newValue;
+	
+	if (modeGrayscale == 1) {
+		console.log('Grayscale mode: Luminosity.');
+	} else if (modeGrayscale == 2) {
+		console.log('Grayscale mode: Lightness.');
+	} else if (modeGrayscale == 3) {
+		console.log('Grayscale mode: Average.');
+	} else {
+		console.log('Grayscale mode: OFF.');
+	}
+	
 	materialPost.uniforms.modeGrayscale.value = modeGrayscale;
 };
 
 const setIsSwap = (newValue) => {
+	isSwap = newValue;
+	
 	if (isSwap && !modeGrayscale) {
 		setModeGrayscale(1);
+	} else if (!isSwap) {
+		setModeGrayscale(0);
 	}
-	isSwap = newValue;
+	
 	materialPost.uniforms.isSwap.value = isSwap;
 	palette.forEach((color, i) => {
 		colorQuads[i].visible = isSwap;

examples/palette/post.glsl

@@ -34,7 +34,7 @@ float toGrayscale(vec3 rgb) {
 }
 
 void main() {
-	vec4 rgba = texture(t, tc);
+	vec4 rgba = sRGBTransferOETF(texture(t, tc));
 	float gray = toGrayscale(rgba.rgb);
 	vec3 finalColor = rgba.rgb;
 	if (modeGrayscale > 0) {

examples/palette/profile.txt

@@ -6,6 +6,7 @@ const createRenderTarget = (THREE, materialPost, w, h) => {
 			minFilter: THREE.LinearFilter,
 			magFilter: THREE.NearestFilter,
 			format: THREE.RGBAFormat,
+			colorSpace: THREE.LinearSRGBColorSpace,
 		}
 	);
 

examples/palette/utils/create-render-target.js

@@ -97,7 +97,7 @@ const createSettings = (colorCount) => {
 const generatePalette = (hueMode, colorCount) => {
 	let paletteSettings = createSettings(colorCount);
 	let lch = generateOKLCH(hueMode, paletteSettings);
-	console.log('generated', hueMode, lch);
+	console.log('New palette:', hueMode, lch);
 	return lch;
 };
 

examples/palette/utils/palette.js

@@ -30,20 +30,34 @@ const populateScene = (scene, cb) => {
 		const { GLTFLoader } = await import('three/examples/jsm/loaders/GLTFLoader.js');
 		const { DRACOLoader } = await import('./DRACOLoader.mjs');
 
-		const directionalLight1 = new THREE.DirectionalLight(0xffffff, 5);
-		directionalLight1.position.set(0.5, 0.5, 0.5).normalize();
-		directionalLight1.castShadow = true;
+		const ambientLight = new THREE.AmbientLight(0xeeffee, 0.3);
+		scene.add(ambientLight);
+		
+		const directionalLight1 = new THREE.DirectionalLight(0xeeeeff, 2.4);
+		directionalLight1.position.set(20, 20, 20);
 		scene.add(directionalLight1);
 
-		const directionalLight2 = new THREE.DirectionalLight(0xffffff, 3);
-		directionalLight2.position.set(-0.5, 0.5, 0.5).normalize();
+		const d = 10;
+		directionalLight1.castShadow = true;
+		directionalLight1.shadow.camera.left = -d;
+		directionalLight1.shadow.camera.right = d;
+		directionalLight1.shadow.camera.top = d;
+		directionalLight1.shadow.camera.bottom = -d;
+		directionalLight1.shadow.camera.near = 5;
+		directionalLight1.shadow.camera.far = 60;
+		directionalLight1.shadow.mapSize.x = 2048;
+		directionalLight1.shadow.mapSize.y = 2048;
+		directionalLight1.shadow.intensity = 0.55;
+		
+		const directionalLight2 = new THREE.DirectionalLight(0xffaaaa, 0.7);
+		directionalLight2.position.set(-20, 5, 20).normalize();
 		scene.add(directionalLight2);
 
-		const directionalLight3 = new THREE.DirectionalLight(0xffffff, 2);
-		directionalLight3.position.set(0, -0.5, -0.5).normalize();
+		const directionalLight3 = new THREE.DirectionalLight(0xffddaa, 0.5);
+		directionalLight3.position.set(5, -20, -5).normalize();
 		scene.add(directionalLight3);
 
-		scene.background = new THREE.Color(0xbfe3dd);
+		scene.background = new THREE.Color(0x87ceeb);
 
 		const dracoLoader = new DRACOLoader();
 		dracoLoader.setDecoderPath(`${__dirname}/../../../node_modules/three/examples/jsm/libs/draco/gltf/`);
@@ -57,13 +71,22 @@ const populateScene = (scene, cb) => {
 				if (!node.isMesh) {
 					return;
 				}
+				node.castShadow = true;
 				flipUv(node.geometry.attributes.uv);
 				flipUv(node.geometry.attributes.uv1);
 			});
 
 			scene.add(gltf.scene);
 			cb(gltf.scene);
 		});
+		
+		const floorMaterial = new THREE.MeshStandardMaterial({ color: 0xface8d });
+		const geoFloor = new THREE.PlaneGeometry(100, 100, 4, 4);
+		const meshFloor = new THREE.Mesh(geoFloor, floorMaterial);
+		meshFloor.rotation.x = -Math.PI * 0.5;
+		meshFloor.position.y = -2;
+		meshFloor.receiveShadow = true;
+		scene.add(meshFloor);
 	})();
 };
 

examples/palette/utils/populate-scene.js

@@ -2,6 +2,7 @@
 	"name": "test",
 	"version": "0.0.0",
 	"type": "module",
+	"private": true,
 	"scripts": {
 		"start": "node --experimental-strip-types main.ts"
 	},

examples/srgb/package.json

@@ -224,6 +224,19 @@ declare module "3d-core-raub" {
 		 */
 		requestAnimationFrame: (cb: (dateNow: number) => void) => number,
 
+		/**
+		 * A wrapper for `document` that automates some common operations.
+		 *
+		 * * Pass `three`, or `THREE`. If not, it will refer to `global.THREE`
+		 * * Pass your own `camera`, or it will create a new one - with default parameters, or yours.
+		 * * Pass your `scene`, or it will create a new one.
+		 * * Pass a `renderer`, or don't - that's just fine.
+		 * * Call `screen.draw()` - equivalent of `renderer.render(scene, camera)`.
+		 *
+		 * It will also propagate the `document` input events and handle the `'mode'` event.
+		 * The latter is important to correctly update any VAO-based geometry. The `'mode'`
+		 * event will be propagated after necessary handling (re-creation of `renderer`).
+		 */
 		Screen: typeof Screen,
 	};
 

index.d.ts

@@ -19,15 +19,15 @@ class Screen extends EventEmitter {
 		if (!opts.camera) {
 			const { fov, near, far, z } = opts;
 			if (fov === 0) {
-				this._camera = new this.three.OrthographicCamera(
-					-this.width * 0.5, this.width * 0.5,
-					this.height * 0.5, -this.height * 0.5,
+				this._camera = new this._three.OrthographicCamera(
+					-this.w * 0.5, this.w * 0.5,
+					this.h * 0.5, -this.h * 0.5,
 					near ?? -10, far ?? 10,
 				);
 				this._camera.position.z = z ?? 5;
 			} else {
-				this._camera = new this.three.PerspectiveCamera(
-					fov ?? 90, this.width / this.height, near ?? 0.1, far ?? 200,
+				this._camera = new this._three.PerspectiveCamera(
+					fov ?? 90, this.w / this.h, near ?? 0.1, far ?? 200,
 				);
 				this._camera.position.z = z ?? 10;
 			}
@@ -36,40 +36,37 @@ class Screen extends EventEmitter {
 		}
 
 		if (!opts.scene) {
-			this._scene = new this.three.Scene();
+			this._scene = new this._three.Scene();
 		} else {
 			this._scene = opts.scene;
 		}
 
-		if (!opts.renderer) {
-			this._reinitRenderer();
-		} else {
+		if (opts.renderer) {
 			this._autoRenderer = false;
 			this._renderer = opts.renderer;
-			this.context.enable(0x8861); // GL_POINT_SPRITE 0x8861
-			this.context.enable(0x8642); // GL_VERTEX_PROGRAM_POINT_SIZE
-			this.context.enable(0x8862); // GL_COORD_REPLACE
 		}
+		this._reinitRenderer();
 
-		this.renderer.setSize(this._doc.width, this._doc.height, false);
+		this._renderer.setSize(this._doc.width, this._doc.height, false);
 
-		this.document.on('mode', () => {
+		this._doc.on('mode', (e) => {
 			this._reinitRenderer();
+			this.emit('mode', e);
 		});
 
-		this.document.on('resize', ({ width, height }) => {
+		this._doc.on('resize', ({ width, height }) => {
 			width = width || 16;
 			height = height || 16;
 
-			this.camera.aspect = width / height;
-			this.camera.updateProjectionMatrix();
-			this.renderer.setSize(width, height, false);
+			this._camera.aspect = width / height;
+			this._camera.updateProjectionMatrix();
+			this._renderer.setSize(width, height, false);
 
 			this.emit('resize', { width, height });
 		});
 
 		['keydown', 'keyup', 'mousedown', 'mouseup', 'mousemove','mousewheel'].forEach(
-			(type) => this.document.on(type, (e) => this.emit(type, e))
+			(type) => this._doc.on(type, (e) => this.emit(type, e))
 		);
 
 		this.draw();
@@ -87,9 +84,9 @@ class Screen extends EventEmitter {
 
 	get width() { return this._doc.width; }
 	get height() { return this._doc.height; }
-	get w() { return this.width; }
-	get h() { return this.height; }
-	get size() { return new this.three.Vector2(this.width, this.height); }
+	get w() { return this._doc.width; }
+	get h() { return this._doc.height; }
+	get size() { return new this._three.Vector2(this.w, this.h); }
 
 	get title() { return this._doc.title; }
 	set title(v) { this._doc.title = v || 'Untitled'; }
@@ -103,50 +100,82 @@ class Screen extends EventEmitter {
 		this._camera.updateProjectionMatrix();
 	}
 
-	get mode() { return this._doc._mode; }
+	get mode() { return this._doc.mode; }
 	set mode(v) { this._doc.mode = v; }
 
 	draw() {
-		this._renderer.render(this.scene, this.camera);
+		this._renderer.render(this._scene, this._camera);
 	}
 
 
 	snapshot(name = `${Date.now()}.jpg`) {
 		const memSize = this.w * this.h * 4; // estimated number of bytes
 		const storage = { data: Buffer.allocUnsafeSlow(memSize) };
 
-		this.context.readPixels(
-			0, 0, this.w, this.h, this.context.RGBA, this.context.UNSIGNED_BYTE, storage,
+		this._gl.readPixels(
+			0, 0, this.w, this.h, this._gl.RGBA, this._gl.UNSIGNED_BYTE, storage,
 		);
 
 		const img = this._Image.fromPixels(this.w, this.h, 32, storage.data);
 		img.save(name);
 	}
 
+	static _deepAssign(src, dest) {
+		Object.entries(src).forEach(([k, v]) => {
+			if (v && typeof v === 'object') {
+				Screen._deepAssign(v, dest[k]);
+				return;
+			}
+			dest[k] = v;
+		});
+	}
+	
 	// When switching from fullscreen and back, reset renderer to update VAO/FBO objects
 	_reinitRenderer() {
+		const old = this._renderer;
+		
+		// Migrate renderer props
+		const renderProps = !old ? null : {
+			shadowMap: {
+				enabled: old.shadowMap.enabled,
+				type: old.shadowMap.type,
+			},
+			debug: {
+				checkShaderErrors: old.debug_checkShaderErrors,
+				onShaderError: old.debug_onShaderError,
+			},
+			autoClear: old.autoClear,
+			autoClearColor: old.autoClearColor,
+			autoClearDepth: old.autoClearDepth,
+			autoClearStencil: old.autoClearStencil,
+			clippingPlanes: old.clippingPlanes,
+			outputColorSpace: old.outputColorSpace,
+			sortObjects: old.sortObjects,
+			toneMapping: old.toneMapping,
+			toneMappingExposure: old.toneMappingExposure,
+			transmissionResolutionScale: old.transmissionResolutionScale,
+		};
 		if (this._autoRenderer) {
-			this._renderer.dispose();
+			old.dispose();
 		}
 
 		this._autoRenderer = true;
-		this._renderer = new this.three.WebGLRenderer({
-			context: this.context,
-			antialias: true,
+		this._renderer = new this._three.WebGLRenderer({
+			context: this._gl,
 			canvas: this.canvas,
-			alpha: true,
-			
-			premultipliedAlpha: true,
-			preserveDrawingBuffer: true,
-			logarithmicDepthBuffer: true,
 		});
 
-		this._camera.aspect = this.width / this.height;
+		this._camera.aspect = this.w / this.h;
 		this._camera.updateProjectionMatrix();
-		this._renderer.setSize(this.width, this.height, false);
-		this.context.enable(0x8861); // GL_POINT_SPRITE 0x8861
-		this.context.enable(0x8642); // GL_VERTEX_PROGRAM_POINT_SIZE
-		this.context.enable(0x8862); // GL_COORD_REPLACE
+		this._renderer.setSize(this.w, this.h, false);
+		
+		if (renderProps) {
+			Screen._deepAssign(renderProps, this._renderer);
+		}
+		
+		this._gl.enable(0x8861); // GL_POINT_SPRITE 0x8861
+		this._gl.enable(0x8642); // GL_VERTEX_PROGRAM_POINT_SIZE
+		this._gl.enable(0x8862); // GL_COORD_REPLACE
 	}
 }