ShaderPass Example

HTML

<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/postprocessing@latest/build/postprocessing.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/math-ds@latest/build/math-ds.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/delta-controls@latest/build/delta-controls.min.js"></script>
<script src="https://threejs.org/examples/js/shaders/KaleidoShader.js"></script>

CSS

body {
  background: transparent;
	margin: 0;
}

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

JavaScript

const viewport = document.body;
const width = window.innerWidth;
const height = window.innerHeight;
const aspect = width / height;

// Scene, Clock, Renderer and Composer.

const scene = new THREE.Scene();
const clock = new THREE.Clock();
const renderer = new THREE.WebGLRenderer({ alpha: true });

renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x000000, 0.0);
viewport.appendChild(renderer.domElement);

const composer = new POSTPROCESSING.EffectComposer(renderer);

// Camera and Controls.

const camera = new THREE.PerspectiveCamera(50, aspect, 0.3, 2000);
camera.position.set(-1, 3, -6);

const controls = new DELTACONTROLS.DeltaControls(camera.position, camera.quaternion, renderer.domElement);
controls.settings.pointer.lock = false;
controls.settings.translation.enabled = false;
controls.settings.zoom.minDistance = 4.0;
controls.settings.zoom.maxDistance = 60.0;
controls.lookAt(scene.position);
this.controls = controls;

// Lights.

scene.add(new THREE.AmbientLight(0x404040));
scene.add(new THREE.DirectionalLight(0xffffff));

// Objects.

const mesh = new THREE.Mesh(
	new THREE.TorusKnotBufferGeometry(2.0, 0.25, 64, 64),
	new THREE.MeshLambertMaterial({
		color: 0xffffff
	})
);

scene.add(mesh);

// Passes.

const renderPass = new POSTPROCESSING.RenderPass(scene, camera);
const shaderPass = new POSTPROCESSING.ShaderPass(
	new THREE.ShaderMaterial(THREE.KaleidoShader),
	"tDiffuse"
);

shaderPass.renderToScreen = true;

composer.addPass(renderPass);
composer.addPass(shaderPass);

/**
 * Handles browser resizing.
 *
 * @private
 * @param {Event} event - An event.
 */

window.addEventListener("resize", (function() {

	let id = 0;

	function handleResize(event) {

		const width = event.target.innerWidth;
		const height = event.target.innerHeight;

		composer.setSize(width, height);
		camera.aspect = width / height;
		camera.updateProjectionMatrix();

		id = 0;

	}

	return function onResize(event) {

		if(id ===...