postprocessing v6 (#739)

by vanruesc

HTML

<script type="importmap">
	{
		"imports": {
			"postprocessing": "//esm.sh/postprocessing@6",
			"spatial-controls": "//esm.sh/spatial-controls@6",
			"three": "//esm.sh/three@0.183"
		}
	}
</script>

CSS

html, body {
	background: #222222;
	height: 100%;
	width: 100%;
	margin: 0;
}

canvas {
	display: block;
	max-height: 100%;
	max-width: 100%;
}

JavaScript

import {
	AmbientLight,
	BoxGeometry,
	DirectionalLight,
	HalfFloatType,
	Mesh,
	MeshStandardMaterial,
	PerspectiveCamera,
	Scene,
	WebGLRenderer,
} from "three";

import {
	ControlMode,
	SpatialControls
} from "spatial-controls";

import {
	EffectComposer,
	EffectPass,
	RenderPass,
	SelectiveBloomEffect,
	ToneMappingEffect
} from "postprocessing";

// Renderer

const renderer = new WebGLRenderer({
	powerPreference: "high-performance",
	antialias: false,
	stencil: false,
	depth: false,
	alpha: false
});

renderer.setClearColor(0x000000, 1);
const container = document.body;
container.append(renderer.domElement);

// Scene, Camera and Controls

const scene = new Scene();
const camera = new PerspectiveCamera();
const { position, quaternion } = camera;
const controls = new SpatialControls(position, quaternion, renderer.domElement);
const settings = controls.settings;
settings.general.mode = ControlMode.THIRD_PERSON;
settings.rotation.sensitivity = 2.2;
settings.rotation.damping = 0.05;
settings.zoom.sensitivity = 0.25;
settings.zoom.damping = 0.1;
controls.position.set(-2, 2, 4);

// Lights & Objects

const box = new Mesh(new BoxGeometry(), new MeshStandardMaterial());
scene.add(box);

const ambientLight = new AmbientLight(0xffffff, 1.0);
const directionalLight = new DirectionalLight(0xffffff, 3.0);
directionalLight.position.set(-2, 3, -1);
scene.add(ambientLight, directionalLight, directionalLight.target);

// Postprocessing

const bloomEffect = new SelectiveBloomEffect(scene, camera);
bloomEffect.selection.add(box);

const toneMappingEffect = new ToneMappingEffect();
const effectPass = new EffectPass(camera, bloomEffect, toneMappingEffect);
effectPass.dithering = true;

const composer = new EffectComposer(renderer, {
	frameBufferType: HalfFloatType,
	multisampling: 4
});

composer.addPass(new RenderPass(scene, camera));
composer.addPass(effectPass);

// Resizing

function onResize()...