three.js dev template - module

HTML

<script id="vertexShader" type="x-shader/x-vertex">

			// Texture varyings
			varying vec2 v_uv;

			/*
			 * The main program
			 */
			void main() {
					// Calculate the varyings
					v_uv = uv;

					// Vertex shader output
					gl_Position = vec4(position, 1.0);
			}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">

			// Common uniforms
			uniform vec2 u_resolution;
			uniform vec2 u_mouse;
			uniform float u_time;

			// Texture uniforms
			uniform sampler2D u_texture;

			// Texture varyings
			varying vec2 v_uv;

			/*
			 * Random number generator with a float seed
			 *
			 * Credits:
			 * http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0
			 */
			highp float random1d(float dt) {
					highp float c = 43758.5453;
					highp float sn = mod(dt, 3.14);
					return fract(sin(sn) * c);
			}

			/*
			 * Pseudo-noise generator
			 *
			 * Credits:
			 * https://thebookofshaders.com/11/
			 */
			highp float noise1d(float value) {
					highp float i = floor(value);
					highp float f = fract(value);
					return mix(random1d(i), random1d(i + 1.0), smoothstep(0.0, 1.0, f));
			}

			/*
			 * Random number generator with a vec2 seed
			 *
			 * Credits:
			 * http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0
			 * https://github.com/mattdesl/glsl-random
			 */
			highp float random2d(vec2 co) {
					highp float a = 12.9898;
					highp float b = 78.233;
					highp float c = 43758.5453;
					highp float dt = dot(co.xy, vec2(a, b));
					highp float sn = mod(dt, 3.14);
					return fract(sin(sn) * c);
			}

			/*
			 * The main program
			 */
			void main() {
					// Calculate the effect relative strength
					float strength = (0.3 + 0.7 * noise1d(0.3 * u_time)) * u_mouse.x / u_resolution.x;

					// Calculate the effect jump at the current u_time interval
					float jump = 500.0 * floor(0.3 * (u_mouse.x / u_resolution.x) * (u_time +...

CSS

body {
	margin: 0px;
}
canvas {
	display: block;
}

JavaScript

import * as THREE from "https://rawgit.com/mrdoob/three.js/dev/build/three.module.js";

import { OrbitControls } from "https://rawgit.com/mrdoob/three.js/dev/examples/jsm/controls/OrbitControls.js";

import { EffectComposer } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'https://rawgit.com/mrdoob/three.js/dev/examples/jsm/postprocessing/ShaderPass.js';

var camera, scene, renderer, composer, clock;

var uniforms;

init();
animate();

function init() {
	//

	scene = new THREE.Scene();

	clock = new THREE.Clock();

	camera = new THREE.PerspectiveCamera(
		70,
		window.innerWidth / window.innerHeight,
		1,
		1000
	);
	camera.position.set(0, 10, 25);
	camera.lookAt(scene.position);

	//

	var geometry = new THREE.TorusKnotBufferGeometry(8, 3, 256, 32, 2, 3);
	var material = new THREE.MeshPhongMaterial({ color: 0xcccccc });

	var mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);

	//

	var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
	scene.add(ambientLight);

	var pointLight = new THREE.PointLight(0xffffff, 0.8);
	camera.add(pointLight);
	scene.add(camera);

	//

	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	// postprocessing

	composer = new EffectComposer(renderer);
	var renderPass = new RenderPass(scene, camera);
	composer.addPass(renderPass);

	// badtv pass

	uniforms = {
		u_time: {
			value: 0.0
		},
		u_frame: {
			value: 0.0
		},
		u_resolution: {
			value: new THREE.Vector2(
				window.innerWidth,
				window.innerHeight
			).multiplyScalar(window.devicePixelRatio)
		},
		u_mouse: {
			value: new THREE.Vector2(
				0.5 *...