Examples: More module examples.

examples/webgl_physics_cloth.html

@@ -14,27 +14,38 @@
 		<div id="info">Ammo.js physics soft body cloth demo<br>Press Q or A to move the arm.</div>
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
 		<script src="js/libs/ammo.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
-		<script>
-
-			// Detects webgl
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				Clock,
+				Color,
+				DirectionalLight,
+				DoubleSide,
+				Mesh,
+				MeshLambertMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Quaternion,
+				RepeatWrapping,
+				Scene,
+				TextureLoader,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			// Graphics variables
 			var container, stats;
 			var camera, controls, scene, renderer;
 			var textureLoader;
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			// Physics variables
 			var gravityConstant = - 9.8;
@@ -47,7 +58,7 @@
 
 			var armMovement = 0;
 
-			Ammo().then( function( AmmoLib ) {
+			Ammo().then( function ( AmmoLib ) {
 
 				Ammo = AmmoLib;
 
@@ -73,29 +84,29 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xbfd1e5 );
+				scene = new Scene();
+				scene.background = new Color( 0xbfd1e5 );
 
 				camera.position.set( - 12, 7, 4 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 2, 0 );
 				controls.update();
 
-				textureLoader = new THREE.TextureLoader();
+				textureLoader = new TextureLoader();
 
-				var ambientLight = new THREE.AmbientLight( 0x404040 );
+				var ambientLight = new AmbientLight( 0x404040 );
 				scene.add( ambientLight );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				var light = new DirectionalLight( 0xffffff, 1 );
 				light.position.set( - 7, 10, 15 );
 				light.castShadow = true;
 				var d = 10;
@@ -141,19 +152,19 @@
 
 			function createObjects() {
 
-				var pos = new THREE.Vector3();
-				var quat = new THREE.Quaternion();
+				var pos = new Vector3();
+				var quat = new Quaternion();
 
 				// Ground
 				pos.set( 0, - 0.5, 0 );
 				quat.set( 0, 0, 0, 1 );
-				var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+				var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new MeshPhongMaterial( { color: 0xFFFFFF } ) );
 				ground.castShadow = true;
 				ground.receiveShadow = true;
 				textureLoader.load( "textures/grid.png", function ( texture ) {
 
-					texture.wrapS = THREE.RepeatWrapping;
-					texture.wrapT = THREE.RepeatWrapping;
+					texture.wrapS = RepeatWrapping;
+					texture.wrapT = RepeatWrapping;
 					texture.repeat.set( 40, 40 );
 					ground.material.map = texture;
 					ground.material.needsUpdate = true;
@@ -219,22 +230,21 @@
 				var clothHeight = 3;
 				var clothNumSegmentsZ = clothWidth * 5;
 				var clothNumSegmentsY = clothHeight * 5;
-				var clothPos = new THREE.Vector3( - 3, 3, 2 );
+				var clothPos = new Vector3( - 3, 3, 2 );
 
-				//var clothGeometry = new THREE.BufferGeometry();
-				var clothGeometry = new THREE.PlaneBufferGeometry( clothWidth, clothHeight, clothNumSegmentsZ, clothNumSegmentsY );
+				var clothGeometry = new PlaneBufferGeometry( clothWidth, clothHeight, clothNumSegmentsZ, clothNumSegmentsY );
 				clothGeometry.rotateY( Math.PI * 0.5 );
 				clothGeometry.translate( clothPos.x, clothPos.y + clothHeight * 0.5, clothPos.z - clothWidth * 0.5 );
-				//var clothMaterial = new THREE.MeshLambertMaterial( { color: 0x0030A0, side: THREE.DoubleSide } );
-				var clothMaterial = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, side: THREE.DoubleSide } );
-				cloth = new THREE.Mesh( clothGeometry, clothMaterial );
+
+				var clothMaterial = new MeshLambertMaterial( { color: 0xFFFFFF, side: DoubleSide } );
+				cloth = new Mesh( clothGeometry, clothMaterial );
 				cloth.castShadow = true;
 				cloth.receiveShadow = true;
 				scene.add( cloth );
 				textureLoader.load( "textures/grid.png", function ( texture ) {
 
-					texture.wrapS = THREE.RepeatWrapping;
-					texture.wrapT = THREE.RepeatWrapping;
+					texture.wrapS = RepeatWrapping;
+					texture.wrapT = RepeatWrapping;
 					texture.repeat.set( clothNumSegmentsZ, clothNumSegmentsY );
 					cloth.material.map = texture;
 					cloth.material.needsUpdate = true;
@@ -263,7 +273,7 @@
 				var armMass = 2;
 				var armLength = 3 + clothWidth;
 				var pylonHeight = clothPos.y + clothHeight;
-				var baseMaterial = new THREE.MeshPhongMaterial( { color: 0x606060 } );
+				var baseMaterial = new MeshPhongMaterial( { color: 0x606060 } );
 				pos.set( clothPos.x, 0.1, clothPos.z - armLength );
 				quat.set( 0, 0, 0, 1 );
 				var base = createParalellepiped( 1, 0.2, 1, 0, pos, quat, baseMaterial );
@@ -294,7 +304,7 @@
 
 			function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
 
-				var threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
+				var threeObject = new Mesh( new BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
 				var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
 				shape.setMargin( margin );
 
@@ -346,7 +356,7 @@
 
 			function createMaterial() {
 
-				return new THREE.MeshPhongMaterial( { color: createRandomColor() } );
+				return new MeshPhongMaterial( { color: createRandomColor() } );
 
 			}
 

examples/webgl_physics_convex_break.html

@@ -15,24 +15,34 @@
 	<div id="info">Physics threejs demo with convex objects breaking in real time<br />Press mouse to throw balls and move the camera.</div>
 	<div id="container"></div>
 
-	<script src="../build/three.js"></script>
 	<script src="js/libs/ammo.js"></script>
-	<script src="js/controls/OrbitControls.js"></script>
-	<script src="js/WebGL.js"></script>
-	<script src="js/libs/stats.min.js"></script>
-	<script src="js/misc/ConvexObjectBreaker.js"></script>
-	<script src="js/math/ConvexHull.js"></script>
-	<script src="js/geometries/ConvexGeometry.js"></script>
 
-		<script>
-
-		// Detects webgl
-
-		if ( WEBGL.isWebGLAvailable() === false ) {
-
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-		}
+	<script type="module">
+		import {
+			AmbientLight,
+			BoxBufferGeometry,
+			Clock,
+			Color,
+			DirectionalLight,
+			Mesh,
+			MeshPhongMaterial,
+			PerspectiveCamera,
+			Quaternion,
+			Raycaster,
+			RepeatWrapping,
+			Scene,
+			SphereBufferGeometry,
+			TextureLoader,
+			Vector2,
+			Vector3,
+			WebGLRenderer
+		} from "../build/three.module.js";
+
+		import Stats from './jsm/libs/stats.module.js';
+
+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
+		import { ConvexObjectBreaker } from './jsm/misc/ConvexObjectBreaker.js';
+		import { ConvexBufferGeometry } from './jsm/geometries/ConvexGeometry.js';
 
 		// - Global variables -
 
@@ -40,11 +50,11 @@
 		var container, stats;
 		var camera, controls, scene, renderer;
 		var textureLoader;
-		var clock = new THREE.Clock();
+		var clock = new Clock();
 
-		var mouseCoords = new THREE.Vector2();
-		var raycaster = new THREE.Raycaster();
-		var ballMaterial = new THREE.MeshPhongMaterial( { color: 0x202020 } );
+		var mouseCoords = new Vector2();
+		var raycaster = new Raycaster();
+		var ballMaterial = new MeshPhongMaterial( { color: 0x202020 } );
 
 		// Physics variables
 		var gravityConstant = 7.8;
@@ -55,30 +65,30 @@
 		var physicsWorld;
 		var margin = 0.05;
 
-		var convexBreaker = new THREE.ConvexObjectBreaker();
+		var convexBreaker = new ConvexObjectBreaker();
 
 		// Rigid bodies include all movable objects
 		var rigidBodies = [];
 
-		var pos = new THREE.Vector3();
-		var quat = new THREE.Quaternion();
+		var pos = new Vector3();
+		var quat = new Quaternion();
 		var transformAux1;
 		var tempBtVec3_1;
 
-		var time = 0;
-
 		var objectsToRemove = [];
-		for ( var i = 0; i < 500; i++ ) {
+		for ( var i = 0; i < 500; i ++ ) {
+
 			objectsToRemove[ i ] = null;
+
 		}
 		var numObjectsToRemove = 0;
 
-		var impactPoint = new THREE.Vector3();
-		var impactNormal = new THREE.Vector3();
+		var impactPoint = new Vector3();
+		var impactNormal = new Vector3();
 
 		// - Main code -
 
-		Ammo().then( function( AmmoLib ) {
+		Ammo().then( function ( AmmoLib ) {
 
 			Ammo = AmmoLib;
 
@@ -106,29 +116,29 @@
 
 			container = document.getElementById( 'container' );
 
-			camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
+			camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
-			scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0xbfd1e5 );
+			scene = new Scene();
+			scene.background = new Color( 0xbfd1e5 );
 
 			camera.position.set( - 14, 8, 16 );
 
-			renderer = new THREE.WebGLRenderer();
+			renderer = new WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.shadowMap.enabled = true;
 			container.appendChild( renderer.domElement );
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls = new OrbitControls( camera, renderer.domElement );
 			controls.target.set( 0, 2, 0 );
 			controls.update();
 
-			textureLoader = new THREE.TextureLoader();
+			textureLoader = new TextureLoader();
 
-			var ambientLight = new THREE.AmbientLight( 0x707070 );
+			var ambientLight = new AmbientLight( 0x707070 );
 			scene.add( ambientLight );
 
-			var light = new THREE.DirectionalLight( 0xffffff, 1 );
+			var light = new DirectionalLight( 0xffffff, 1 );
 			light.position.set( - 10, 18, 5 );
 			light.castShadow = true;
 			var d = 14;
@@ -169,14 +179,15 @@
 
 			transformAux1 = new Ammo.btTransform();
 			tempBtVec3_1 = new Ammo.btVector3( 0, 0, 0 );
+
 		}
 
 		function createObject( mass, halfExtents, pos, quat, material ) {
 
-			var object = new THREE.Mesh( new THREE.BoxBufferGeometry( halfExtents.x * 2, halfExtents.y * 2, halfExtents.z * 2 ), material );
+			var object = new Mesh( new BoxBufferGeometry( halfExtents.x * 2, halfExtents.y * 2, halfExtents.z * 2 ), material );
 			object.position.copy( pos );
 			object.quaternion.copy( quat );
-			convexBreaker.prepareBreakableObject( object, mass, new THREE.Vector3(), new THREE.Vector3(), true );
+			convexBreaker.prepareBreakableObject( object, mass, new Vector3(), new Vector3(), true );
 			createDebrisFromBreakableObject( object );
 
 		}
@@ -186,20 +197,22 @@
 			// Ground
 			pos.set( 0, - 0.5, 0 );
 			quat.set( 0, 0, 0, 1 );
-			var ground = createParalellepipedWithPhysics( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+			var ground = createParalellepipedWithPhysics( 40, 1, 40, 0, pos, quat, new MeshPhongMaterial( { color: 0xFFFFFF } ) );
 			ground.receiveShadow = true;
-			textureLoader.load( "textures/grid.png", function( texture ) {
-				texture.wrapS = THREE.RepeatWrapping;
-				texture.wrapT = THREE.RepeatWrapping;
+			textureLoader.load( "textures/grid.png", function ( texture ) {
+
+				texture.wrapS = RepeatWrapping;
+				texture.wrapT = RepeatWrapping;
 				texture.repeat.set( 40, 40 );
 				ground.material.map = texture;
 				ground.material.needsUpdate = true;
+
 			} );
 
 			// Tower 1
 			var towerMass = 1000;
-			var towerHalfExtents = new THREE.Vector3( 2, 5, 2 );
-			pos.set( -8, 5, 0 );
+			var towerHalfExtents = new Vector3( 2, 5, 2 );
+			pos.set( - 8, 5, 0 );
 			quat.set( 0, 0, 0, 1 );
 			createObject( towerMass, towerHalfExtents, pos, quat, createMaterial( 0xB03014 ) );
 
@@ -210,17 +223,17 @@
 
 			//Bridge
 			var bridgeMass = 100;
-			var bridgeHalfExtents = new THREE.Vector3( 7, 0.2, 1.5 );
+			var bridgeHalfExtents = new Vector3( 7, 0.2, 1.5 );
 			pos.set( 0, 10.2, 0 );
 			quat.set( 0, 0, 0, 1 );
 			createObject( bridgeMass, bridgeHalfExtents, pos, quat, createMaterial( 0xB3B865 ) );
 
 			// Stones
 			var stoneMass = 120;
-			var stoneHalfExtents = new THREE.Vector3( 1, 2, 0.15 );
+			var stoneHalfExtents = new Vector3( 1, 2, 0.15 );
 			var numStones = 8;
 			quat.set( 0, 0, 0, 1 );
-			for ( var i = 0; i < numStones; i++ ) {
+			for ( var i = 0; i < numStones; i ++ ) {
 
 				pos.set( 0, 2, 15 * ( 0.5 - i / ( numStones + 1 ) ) );
 
@@ -230,26 +243,26 @@
 
 			// Mountain
 			var mountainMass = 860;
-			var mountainHalfExtents = new THREE.Vector3( 4, 5, 4 );
+			var mountainHalfExtents = new Vector3( 4, 5, 4 );
 			pos.set( 5, mountainHalfExtents.y * 0.5, - 7 );
 			quat.set( 0, 0, 0, 1 );
 			var mountainPoints = [];
-			mountainPoints.push( new THREE.Vector3( mountainHalfExtents.x, - mountainHalfExtents.y, mountainHalfExtents.z ) );
-			mountainPoints.push( new THREE.Vector3( - mountainHalfExtents.x, - mountainHalfExtents.y, mountainHalfExtents.z ) );
-			mountainPoints.push( new THREE.Vector3( mountainHalfExtents.x, - mountainHalfExtents.y, - mountainHalfExtents.z ) );
-			mountainPoints.push( new THREE.Vector3( - mountainHalfExtents.x, - mountainHalfExtents.y, - mountainHalfExtents.z ) );
-			mountainPoints.push( new THREE.Vector3( 0, mountainHalfExtents.y, 0 ) );
-			var mountain = new THREE.Mesh( new THREE.ConvexBufferGeometry( mountainPoints ), createMaterial( 0xB03814 ) );
+			mountainPoints.push( new Vector3( mountainHalfExtents.x, - mountainHalfExtents.y, mountainHalfExtents.z ) );
+			mountainPoints.push( new Vector3( - mountainHalfExtents.x, - mountainHalfExtents.y, mountainHalfExtents.z ) );
+			mountainPoints.push( new Vector3( mountainHalfExtents.x, - mountainHalfExtents.y, - mountainHalfExtents.z ) );
+			mountainPoints.push( new Vector3( - mountainHalfExtents.x, - mountainHalfExtents.y, - mountainHalfExtents.z ) );
+			mountainPoints.push( new Vector3( 0, mountainHalfExtents.y, 0 ) );
+			var mountain = new Mesh( new ConvexBufferGeometry( mountainPoints ), createMaterial( 0xB03814 ) );
 			mountain.position.copy( pos );
 			mountain.quaternion.copy( quat );
-			convexBreaker.prepareBreakableObject( mountain, mountainMass, new THREE.Vector3(), new THREE.Vector3(), true );
+			convexBreaker.prepareBreakableObject( mountain, mountainMass, new Vector3(), new Vector3(), true );
 			createDebrisFromBreakableObject( mountain );
 
 		}
 
 		function createParalellepipedWithPhysics( sx, sy, sz, mass, pos, quat, material ) {
 
-			var object = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
+			var object = new Mesh( new BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
 			var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
 			shape.setMargin( margin );
 
@@ -288,10 +301,12 @@
 
 			var shape = new Ammo.btConvexHullShape();
 
-			for ( var i = 0, il = coords.length; i < il; i+= 3 ) {
+			for ( var i = 0, il = coords.length; i < il; i += 3 ) {
+
 				tempBtVec3_1.setValue( coords[ i ], coords[ i + 1 ], coords[ i + 2 ] );
 				var lastOne = ( i >= ( il - 3 ) );
 				shape.addPoint( tempBtVec3_1, lastOne );
+
 			}
 
 			return shape;
@@ -301,16 +316,22 @@
 		function createRigidBody( object, physicsShape, mass, pos, quat, vel, angVel ) {
 
 			if ( pos ) {
+
 				object.position.copy( pos );
-			}
-			else {
+
+			} else {
+
 				pos = object.position;
+
 			}
 			if ( quat ) {
+
 				object.quaternion.copy( quat );
-			}
-			else {
+
+			} else {
+
 				quat = object.quaternion;
+
 			}
 
 			var transform = new Ammo.btTransform();
@@ -328,10 +349,14 @@
 			body.setFriction( 0.5 );
 
 			if ( vel ) {
+
 				body.setLinearVelocity( new Ammo.btVector3( vel.x, vel.y, vel.z ) );
+
 			}
 			if ( angVel ) {
+
 				body.setAngularVelocity( new Ammo.btVector3( angVel.x, angVel.y, angVel.z ) );
+
 			}
 
 			object.userData.physicsBody = body;
@@ -340,29 +365,36 @@
 			scene.add( object );
 
 			if ( mass > 0 ) {
+
 				rigidBodies.push( object );
 
 				// Disable deactivation
 				body.setActivationState( 4 );
+
 			}
 
 			physicsWorld.addRigidBody( body );
 
 			return body;
+
 		}
 
 		function createRandomColor() {
+
 			return Math.floor( Math.random() * ( 1 << 24 ) );
+
 		}
 
 		function createMaterial( color ) {
+
 			color = color || createRandomColor();
-			return new THREE.MeshPhongMaterial( { color: color } );
+			return new MeshPhongMaterial( { color: color } );
+
 		}
 
 		function initInput() {
 
-			window.addEventListener( 'mousedown', function( event ) {
+			window.addEventListener( 'mousedown', function ( event ) {
 
 				mouseCoords.set(
 					( event.clientX / window.innerWidth ) * 2 - 1,
@@ -375,7 +407,7 @@
 				var ballMass = 35;
 				var ballRadius = 0.4;
 
-				var ball = new THREE.Mesh( new THREE.SphereBufferGeometry( ballRadius, 14, 10 ), ballMaterial );
+				var ball = new Mesh( new SphereBufferGeometry( ballRadius, 14, 10 ), ballMaterial );
 				ball.castShadow = true;
 				ball.receiveShadow = true;
 				var ballShape = new Ammo.btSphereShape( ballRadius );
@@ -419,8 +451,6 @@
 
 			renderer.render( scene, camera );
 
-			time += deltaTime;
-
 		}
 
 		function updatePhysics( deltaTime ) {
@@ -429,10 +459,12 @@
 			physicsWorld.stepSimulation( deltaTime, 10 );
 
 			// Update rigid bodies
-			for ( var i = 0, il = rigidBodies.length; i < il; i++ ) {
+			for ( var i = 0, il = rigidBodies.length; i < il; i ++ ) {
+
 				var objThree = rigidBodies[ i ];
 				var objPhys = objThree.userData.physicsBody;
 				var ms = objPhys.getMotionState();
+
 				if ( ms ) {
 
 					ms.getWorldTransform( transformAux1 );
@@ -444,6 +476,7 @@
 					objThree.userData.collided = false;
 
 				}
+
 			}
 
 			for ( var i = 0, il = dispatcher.getNumManifolds(); i < il; i ++ ) {
@@ -456,7 +489,9 @@
 				var threeObject1 = Ammo.castObject( rb1.getUserPointer(), Ammo.btVector3 ).threeObject;
 
 				if ( ! threeObject0 && ! threeObject1 ) {
+
 					continue;
+
 				}
 
 				var userData0 = threeObject0 ? threeObject0.userData : null;
@@ -469,42 +504,51 @@
 				var collided1 = userData1 ? userData1.collided : false;
 
 				if ( ( ! breakable0 && ! breakable1 ) || ( collided0 && collided1 ) ) {
+
 					continue;
+
 				}
 
 				var contact = false;
 				var maxImpulse = 0;
 				for ( var j = 0, jl = contactManifold.getNumContacts(); j < jl; j ++ ) {
+
 					var contactPoint = contactManifold.getContactPoint( j );
+
 					if ( contactPoint.getDistance() < 0 ) {
+
 						contact = true;
 						var impulse = contactPoint.getAppliedImpulse();
+
 						if ( impulse > maxImpulse ) {
+
 							maxImpulse = impulse;
 							var pos = contactPoint.get_m_positionWorldOnB();
 							var normal = contactPoint.get_m_normalWorldOnB();
 							impactPoint.set( pos.x(), pos.y(), pos.z() );
 							impactNormal.set( normal.x(), normal.y(), normal.z() );
+
 						}
+
 						break;
+
 					}
+
 				}
 
 				// If no point has contact, abort
-				if ( ! contact ) {
-					continue;
-				}
+				if ( ! contact ) continue;
 
 				// Subdivision
 
 				var fractureImpulse = 250;
 
-				if ( breakable0 && !collided0 && maxImpulse > fractureImpulse ) {
+				if ( breakable0 && ! collided0 && maxImpulse > fractureImpulse ) {
 
-					var debris = convexBreaker.subdivideByImpact( threeObject0, impactPoint, impactNormal , 1, 2, 1.5 );
+					var debris = convexBreaker.subdivideByImpact( threeObject0, impactPoint, impactNormal, 1, 2, 1.5 );
 
 					var numObjects = debris.length;
-					for ( var j = 0; j < numObjects; j++ ) {
+					for ( var j = 0; j < numObjects; j ++ ) {
 
 						var vel = rb0.getLinearVelocity();
 						var angVel = rb0.getAngularVelocity();
@@ -516,17 +560,17 @@
 
 					}
 
-					objectsToRemove[ numObjectsToRemove++ ] = threeObject0;
+					objectsToRemove[ numObjectsToRemove ++ ] = threeObject0;
 					userData0.collided = true;
 
 				}
 
-				if ( breakable1 && !collided1 && maxImpulse > fractureImpulse ) {
+				if ( breakable1 && ! collided1 && maxImpulse > fractureImpulse ) {
 
-					var debris = convexBreaker.subdivideByImpact( threeObject1, impactPoint, impactNormal , 1, 2, 1.5 );
+					var debris = convexBreaker.subdivideByImpact( threeObject1, impactPoint, impactNormal, 1, 2, 1.5 );
 
 					var numObjects = debris.length;
-					for ( var j = 0; j < numObjects; j++ ) {
+					for ( var j = 0; j < numObjects; j ++ ) {
 
 						var vel = rb1.getLinearVelocity();
 						var angVel = rb1.getAngularVelocity();
@@ -538,14 +582,14 @@
 
 					}
 
-					objectsToRemove[ numObjectsToRemove++ ] = threeObject1;
+					objectsToRemove[ numObjectsToRemove ++ ] = threeObject1;
 					userData1.collided = true;
 
 				}
 
 			}
 
-			for ( var i = 0; i < numObjectsToRemove; i++ ) {
+			for ( var i = 0; i < numObjectsToRemove; i ++ ) {
 
 				removeDebris( objectsToRemove[ i ] );
 

examples/webgl_physics_rope.html

@@ -14,27 +14,40 @@
 	<div id="info">Ammo.js physics soft body rope demo<br>Press Q or A to move the arm.</div>
 	<div id="container"></div>
 
-	<script src="../build/three.js"></script>
 	<script src="js/libs/ammo.js"></script>
-	<script src="js/controls/OrbitControls.js"></script>
-	<script src="js/WebGL.js"></script>
-	<script src="js/libs/stats.min.js"></script>
 
-	<script>
-
-		// Detects webgl
-
-		if ( WEBGL.isWebGLAvailable() === false ) {
-
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-		}
+	<script type="module">
+		import {
+			AmbientLight,
+			BoxBufferGeometry,
+			BufferAttribute,
+			BufferGeometry,
+			Clock,
+			Color,
+			DirectionalLight,
+			LineSegments,
+			LineBasicMaterial,
+			Mesh,
+			MeshPhongMaterial,
+			PerspectiveCamera,
+			Quaternion,
+			RepeatWrapping,
+			Scene,
+			SphereBufferGeometry,
+			TextureLoader,
+			Vector3,
+			WebGLRenderer
+		} from "../build/three.module.js";
+
+		import Stats from './jsm/libs/stats.module.js';
+
+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 		// Graphics variables
 		var container, stats;
 		var camera, controls, scene, renderer;
 		var textureLoader;
-		var clock = new THREE.Clock();
+		var clock = new Clock();
 
 		// Physics variables
 		var gravityConstant = - 9.8;
@@ -52,7 +65,7 @@
 
 		var armMovement = 0;
 
-		Ammo().then( function( AmmoLib ) {
+		Ammo().then( function ( AmmoLib ) {
 
 			Ammo = AmmoLib;
 
@@ -77,29 +90,29 @@
 
 			container = document.getElementById( 'container' );
 
-			camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
+			camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
-			scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0xbfd1e5 );
+			scene = new Scene();
+			scene.background = new Color( 0xbfd1e5 );
 
 			camera.position.set( - 7, 5, 8 );
 
-			renderer = new THREE.WebGLRenderer();
+			renderer = new WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.shadowMap.enabled = true;
 			container.appendChild( renderer.domElement );
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls = new OrbitControls( camera, renderer.domElement );
 			controls.target.set( 0, 2, 0 );
 			controls.update();
 
-			textureLoader = new THREE.TextureLoader();
+			textureLoader = new TextureLoader();
 
-			var ambientLight = new THREE.AmbientLight( 0x404040 );
+			var ambientLight = new AmbientLight( 0x404040 );
 			scene.add( ambientLight );
 
-			var light = new THREE.DirectionalLight( 0xffffff, 1 );
+			var light = new DirectionalLight( 0xffffff, 1 );
 			light.position.set( - 10, 10, 5 );
 			light.castShadow = true;
 			var d = 10;
@@ -146,19 +159,19 @@
 
 		function createObjects() {
 
-			var pos = new THREE.Vector3();
-			var quat = new THREE.Quaternion();
+			var pos = new Vector3();
+			var quat = new Quaternion();
 
 			// Ground
 			pos.set( 0, - 0.5, 0 );
 			quat.set( 0, 0, 0, 1 );
-			var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+			var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new MeshPhongMaterial( { color: 0xFFFFFF } ) );
 			ground.castShadow = true;
 			ground.receiveShadow = true;
 			textureLoader.load( "textures/grid.png", function ( texture ) {
 
-				texture.wrapS = THREE.RepeatWrapping;
-				texture.wrapT = THREE.RepeatWrapping;
+				texture.wrapS = RepeatWrapping;
+				texture.wrapT = RepeatWrapping;
 				texture.repeat.set( 40, 40 );
 				ground.material.map = texture;
 				ground.material.needsUpdate = true;
@@ -170,7 +183,7 @@
 			var ballMass = 1.2;
 			var ballRadius = 0.6;
 
-			var ball = new THREE.Mesh( new THREE.SphereBufferGeometry( ballRadius, 20, 20 ), new THREE.MeshPhongMaterial( { color: 0x202020 } ) );
+			var ball = new Mesh( new SphereBufferGeometry( ballRadius, 20, 20 ), new MeshPhongMaterial( { color: 0x202020 } ) );
 			ball.castShadow = true;
 			ball.receiveShadow = true;
 			var ballShape = new Ammo.btSphereShape( ballRadius );
@@ -242,8 +255,8 @@
 			ropePos.y += ballRadius;
 
 			var segmentLength = ropeLength / ropeNumSegments;
-			var ropeGeometry = new THREE.BufferGeometry();
-			var ropeMaterial = new THREE.LineBasicMaterial( { color: 0x000000 } );
+			var ropeGeometry = new BufferGeometry();
+			var ropeMaterial = new LineBasicMaterial( { color: 0x000000 } );
 			var ropePositions = [];
 			var ropeIndices = [];
 
@@ -259,10 +272,10 @@
 
 			}
 
-			ropeGeometry.setIndex( new THREE.BufferAttribute( new Uint16Array( ropeIndices ), 1 ) );
-			ropeGeometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ropePositions ), 3 ) );
+			ropeGeometry.setIndex( new BufferAttribute( new Uint16Array( ropeIndices ), 1 ) );
+			ropeGeometry.addAttribute( 'position', new BufferAttribute( new Float32Array( ropePositions ), 3 ) );
 			ropeGeometry.computeBoundingSphere();
-			rope = new THREE.LineSegments( ropeGeometry, ropeMaterial );
+			rope = new LineSegments( ropeGeometry, ropeMaterial );
 			rope.castShadow = true;
 			rope.receiveShadow = true;
 			scene.add( rope );
@@ -286,7 +299,7 @@
 			var armMass = 2;
 			var armLength = 3;
 			var pylonHeight = ropePos.y + ropeLength;
-			var baseMaterial = new THREE.MeshPhongMaterial( { color: 0x606060 } );
+			var baseMaterial = new MeshPhongMaterial( { color: 0x606060 } );
 			pos.set( ropePos.x, 0.1, ropePos.z - armLength );
 			quat.set( 0, 0, 0, 1 );
 			var base = createParalellepiped( 1, 0.2, 1, 0, pos, quat, baseMaterial );
@@ -318,7 +331,7 @@
 
 		function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
 
-			var threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
+			var threeObject = new Mesh( new BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
 			var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
 			shape.setMargin( margin );
 
@@ -370,7 +383,7 @@
 
 		function createMaterial() {
 
-			return new THREE.MeshPhongMaterial( { color: createRandomColor() } );
+			return new MeshPhongMaterial( { color: createRandomColor() } );
 
 		}
 

examples/webgl_physics_terrain.html

@@ -15,19 +15,30 @@
 		<div id="container"></div>
 		<div id="info">Ammo.js physics terrain heightfield demo</div>
 
-		<script src="../build/three.js"></script>
 		<script src="js/libs/ammo.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Clock,
+				Color,
+				ConeBufferGeometry,
+				CylinderBufferGeometry,
+				DirectionalLight,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RepeatWrapping,
+				Scene,
+				SphereBufferGeometry,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			// Heightfield parameters
 			var terrainWidthExtents = 100;
@@ -43,7 +54,7 @@
 			var container, stats;
 			var camera, scene, renderer;
 			var terrainMesh;
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			// Physics variables
 			var collisionConfiguration;
@@ -62,7 +73,7 @@
 			var timeNextSpawn = time + objectTimePeriod;
 			var maxNumObjects = 30;
 
-			Ammo().then( function( AmmoLib ) {
+			Ammo().then( function ( AmmoLib ) {
 
 				Ammo = AmmoLib;
 
@@ -85,7 +96,7 @@
 
 				container = document.getElementById( 'container' );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
@@ -96,19 +107,19 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xbfd1e5 );
+				scene = new Scene();
+				scene.background = new Color( 0xbfd1e5 );
 
 				camera.position.y = heightData[ terrainHalfWidth + terrainHalfDepth * terrainWidth ] * ( terrainMaxHeight - terrainMinHeight ) + 5;
 
 				camera.position.z = terrainDepthExtents / 2;
 				camera.lookAt( 0, 0, 0 );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
-				var geometry = new THREE.PlaneBufferGeometry( terrainWidthExtents, terrainDepthExtents, terrainWidth - 1, terrainDepth - 1 );
+				var geometry = new PlaneBufferGeometry( terrainWidthExtents, terrainDepthExtents, terrainWidth - 1, terrainDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
 				var vertices = geometry.attributes.position.array;
@@ -122,25 +133,25 @@
 
 				geometry.computeVertexNormals();
 
-				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xC7C7C7 } );
-				terrainMesh = new THREE.Mesh( geometry, groundMaterial );
+				var groundMaterial = new MeshPhongMaterial( { color: 0xC7C7C7 } );
+				terrainMesh = new Mesh( geometry, groundMaterial );
 				terrainMesh.receiveShadow = true;
 				terrainMesh.castShadow = true;
 
 				scene.add( terrainMesh );
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 				textureLoader.load( "textures/grid.png", function ( texture ) {
 
-					texture.wrapS = THREE.RepeatWrapping;
-					texture.wrapT = THREE.RepeatWrapping;
+					texture.wrapS = RepeatWrapping;
+					texture.wrapT = RepeatWrapping;
 					texture.repeat.set( terrainWidth - 1, terrainDepth - 1 );
 					groundMaterial.map = texture;
 					groundMaterial.needsUpdate = true;
 
 				} );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				var light = new DirectionalLight( 0xffffff, 1 );
 				light.position.set( 100, 100, 50 );
 				light.castShadow = true;
 				var dLight = 200;
@@ -311,7 +322,7 @@
 					case 1:
 						// Sphere
 						var radius = 1 + Math.random() * objectSize;
-						threeObject = new THREE.Mesh( new THREE.SphereBufferGeometry( radius, 20, 20 ), createObjectMaterial() );
+						threeObject = new Mesh( new SphereBufferGeometry( radius, 20, 20 ), createObjectMaterial() );
 						shape = new Ammo.btSphereShape( radius );
 						shape.setMargin( margin );
 						break;
@@ -320,7 +331,7 @@
 						var sx = 1 + Math.random() * objectSize;
 						var sy = 1 + Math.random() * objectSize;
 						var sz = 1 + Math.random() * objectSize;
-						threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), createObjectMaterial() );
+						threeObject = new Mesh( new BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), createObjectMaterial() );
 						shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
 						shape.setMargin( margin );
 						break;
@@ -328,7 +339,7 @@
 						// Cylinder
 						var radius = 1 + Math.random() * objectSize;
 						var height = 1 + Math.random() * objectSize;
-						threeObject = new THREE.Mesh( new THREE.CylinderBufferGeometry( radius, radius, height, 20, 1 ), createObjectMaterial() );
+						threeObject = new Mesh( new CylinderBufferGeometry( radius, radius, height, 20, 1 ), createObjectMaterial() );
 						shape = new Ammo.btCylinderShape( new Ammo.btVector3( radius, height * 0.5, radius ) );
 						shape.setMargin( margin );
 						break;
@@ -336,7 +347,7 @@
 						// Cone
 						var radius = 1 + Math.random() * objectSize;
 						var height = 2 + Math.random() * objectSize;
-						threeObject = new THREE.Mesh( new THREE.ConeBufferGeometry( radius, height, 20, 2 ), createObjectMaterial() );
+						threeObject = new Mesh( new ConeBufferGeometry( radius, height, 20, 2 ), createObjectMaterial() );
 						shape = new Ammo.btConeShape( radius, height );
 						break;
 
@@ -372,7 +383,7 @@
 			function createObjectMaterial() {
 
 				var c = Math.floor( Math.random() * ( 1 << 24 ) );
-				return new THREE.MeshPhongMaterial( { color: c } );
+				return new MeshPhongMaterial( { color: c } );
 
 			}
 

examples/webgl_physics_volume.html

@@ -17,32 +17,46 @@
 		</div>
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
 		<script src="js/libs/ammo.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/utils/BufferGeometryUtils.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				BufferGeometry,
+				Clock,
+				Color,
+				DirectionalLight,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Quaternion,
+				Raycaster,
+				RepeatWrapping,
+				Scene,
+				SphereBufferGeometry,
+				TextureLoader,
+				Vector2,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
 			// Graphics variables
 			var container, stats;
 			var camera, controls, scene, renderer;
 			var textureLoader;
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 			var clickRequest = false;
-			var mouseCoords = new THREE.Vector2();
-			var raycaster = new THREE.Raycaster();
-			var ballMaterial = new THREE.MeshPhongMaterial( { color: 0x202020 } );
-			var pos = new THREE.Vector3();
-			var quat = new THREE.Quaternion();
+			var mouseCoords = new Vector2();
+			var raycaster = new Raycaster();
+			var ballMaterial = new MeshPhongMaterial( { color: 0x202020 } );
+			var pos = new Vector3();
+			var quat = new Quaternion();
 
 			// Physics variables
 			var gravityConstant = - 9.8;
@@ -53,7 +67,7 @@
 			var transformAux1;
 			var softBodyHelpers;
 
-			Ammo().then( function( AmmoLib ) {
+			Ammo().then( function ( AmmoLib ) {
 
 				Ammo = AmmoLib;
 
@@ -78,29 +92,29 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.2, 2000 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xbfd1e5 );
+				scene = new Scene();
+				scene.background = new Color( 0xbfd1e5 );
 
 				camera.position.set( - 7, 5, 8 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 2, 0 );
 				controls.update();
 
-				textureLoader = new THREE.TextureLoader();
+				textureLoader = new TextureLoader();
 
-				var ambientLight = new THREE.AmbientLight( 0x404040 );
+				var ambientLight = new AmbientLight( 0x404040 );
 				scene.add( ambientLight );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				var light = new DirectionalLight( 0xffffff, 1 );
 				light.position.set( - 10, 10, 5 );
 				light.castShadow = true;
 				var d = 20;
@@ -150,13 +164,13 @@
 				// Ground
 				pos.set( 0, - 0.5, 0 );
 				quat.set( 0, 0, 0, 1 );
-				var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+				var ground = createParalellepiped( 40, 1, 40, 0, pos, quat, new MeshPhongMaterial( { color: 0xFFFFFF } ) );
 				ground.castShadow = true;
 				ground.receiveShadow = true;
 				textureLoader.load( "textures/grid.png", function ( texture ) {
 
-					texture.wrapS = THREE.RepeatWrapping;
-					texture.wrapT = THREE.RepeatWrapping;
+					texture.wrapS = RepeatWrapping;
+					texture.wrapT = RepeatWrapping;
 					texture.repeat.set( 40, 40 );
 					ground.material.map = texture;
 					ground.material.needsUpdate = true;
@@ -166,18 +180,18 @@
 				// Create soft volumes
 				var volumeMass = 15;
 
-				var sphereGeometry = new THREE.SphereBufferGeometry( 1.5, 40, 25 );
+				var sphereGeometry = new SphereBufferGeometry( 1.5, 40, 25 );
 				sphereGeometry.translate( 5, 5, 0 );
 				createSoftVolume( sphereGeometry, volumeMass, 250 );
 
-				var boxGeometry = new THREE.BoxBufferGeometry( 1, 1, 5, 4, 4, 20 );
+				var boxGeometry = new BoxBufferGeometry( 1, 1, 5, 4, 4, 20 );
 				boxGeometry.translate( - 2, 5, 0 );
 				createSoftVolume( boxGeometry, volumeMass, 120 );
 
 				// Ramp
 				pos.set( 3, 1, 0 );
-				quat.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), 30 * Math.PI / 180 );
-				var obstacle = createParalellepiped( 10, 1, 4, 0, pos, quat, new THREE.MeshPhongMaterial( { color: 0x606060 } ) );
+				quat.setFromAxisAngle( new Vector3( 0, 0, 1 ), 30 * Math.PI / 180 );
+				var obstacle = createParalellepiped( 10, 1, 4, 0, pos, quat, new MeshPhongMaterial( { color: 0x606060 } ) );
 				obstacle.castShadow = true;
 				obstacle.receiveShadow = true;
 
@@ -186,12 +200,12 @@
 			function processGeometry( bufGeometry ) {
 
 				// Ony consider the position values when merging the vertices
-				var posOnlyBufGeometry = new THREE.BufferGeometry();
+				var posOnlyBufGeometry = new BufferGeometry();
 				posOnlyBufGeometry.addAttribute( 'position', bufGeometry.getAttribute( 'position' ) );
 				posOnlyBufGeometry.setIndex( bufGeometry.getIndex() );
 
 				// Merge the vertices so the triangle soup is converted to indexed triangles
-				var indexedBufferGeom = THREE.BufferGeometryUtils.mergeVertices( posOnlyBufGeometry );
+				var indexedBufferGeom = BufferGeometryUtils.mergeVertices( posOnlyBufGeometry );
 
 				// Create index arrays mapping the indexed vertices to bufGeometry vertices
 				mapIndices( bufGeometry, indexedBufferGeom );
@@ -249,7 +263,7 @@
 
 				processGeometry( bufferGeom );
 
-				var volume = new THREE.Mesh( bufferGeom, new THREE.MeshPhongMaterial( { color: 0xFFFFFF } ) );
+				var volume = new Mesh( bufferGeom, new MeshPhongMaterial( { color: 0xFFFFFF } ) );
 				volume.castShadow = true;
 				volume.receiveShadow = true;
 				volume.frustumCulled = false;
@@ -301,7 +315,7 @@
 
 			function createParalellepiped( sx, sy, sz, mass, pos, quat, material ) {
 
-				var threeObject = new THREE.Mesh( new THREE.BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
+				var threeObject = new Mesh( new BoxBufferGeometry( sx, sy, sz, 1, 1, 1 ), material );
 				var shape = new Ammo.btBoxShape( new Ammo.btVector3( sx * 0.5, sy * 0.5, sz * 0.5 ) );
 				shape.setMargin( margin );
 
@@ -376,7 +390,7 @@
 					var ballMass = 3;
 					var ballRadius = 0.4;
 
-					var ball = new THREE.Mesh( new THREE.SphereBufferGeometry( ballRadius, 18, 16 ), ballMaterial );
+					var ball = new Mesh( new SphereBufferGeometry( ballRadius, 18, 16 ), ballMaterial );
 					ball.castShadow = true;
 					ball.receiveShadow = true;
 					var ballShape = new Ammo.btSphereShape( ballRadius );

examples/webgl_points_billboards.html

@@ -12,19 +12,22 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl particle billboards example
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BufferGeometry,
+				Float32BufferAttribute,
+				FogExp2,
+				PerspectiveCamera,
+				Points,
+				PointsMaterial,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			var camera, scene, renderer, stats, material;
 			var mouseX = 0, mouseY = 0;
@@ -37,16 +40,16 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
+				camera = new PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
 				camera.position.z = 1000;
 
-				scene = new THREE.Scene();
-				scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
+				scene = new Scene();
+				scene.fog = new FogExp2( 0x000000, 0.001 );
 
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				var vertices = [];
 
-				var sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
+				var sprite = new TextureLoader().load( 'textures/sprites/disc.png' );
 
 				for ( var i = 0; i < 10000; i ++ ) {
 
@@ -58,17 +61,17 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
 
-				material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true } );
+				material = new PointsMaterial( { size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true } );
 				material.color.setHSL( 1.0, 0.3, 0.7 );
 
-				var particles = new THREE.Points( geometry, material );
+				var particles = new Points( geometry, material );
 				scene.add( particles );
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -80,7 +83,7 @@
 
 				//
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( material, 'sizeAttenuation' ).onChange( function () {
 

examples/webgl_points_dynamic.html

@@ -15,32 +15,31 @@
 			<a href="http://sketchup.google.com/3dwarehouse/details?mid=f526cc4abf7cb68d76cab47c765b7255" target="_blank" rel="noopener">iClone</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/loaders/OBJLoader.js"></script>
-
-		<script src="js/shaders/ConvolutionShader.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FilmShader.js"></script>
-		<script src="js/shaders/FocusShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/FilmPass.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BufferAttribute,
+				BufferGeometry,
+				Clock,
+				Color,
+				FogExp2,
+				Object3D,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Points,
+				PointsMaterial,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { BloomPass } from './jsm/postprocessing/BloomPass.js';
+			import { FilmPass } from './jsm/postprocessing/FilmPass.js';
+			import { FocusShader } from './jsm/shaders/FocusShader.js';
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
 			var camera, scene, renderer, mesh;
 
@@ -48,7 +47,7 @@
 
 			var composer, effectFocus;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			var stats;
 
@@ -59,16 +58,16 @@
 
 				var container = document.querySelector( '#container' );
 
-				camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 50000 );
+				camera = new PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 50000 );
 				camera.position.set( 0, 700, 7000 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x000104 );
-				scene.fog = new THREE.FogExp2( 0x000104, 0.0000675 );
+				scene = new Scene();
+				scene.background = new Color( 0x000104 );
+				scene.fog = new FogExp2( 0x000104, 0.0000675 );
 
 				camera.lookAt( scene.position );
 
-				var loader = new THREE.OBJLoader();
+				var loader = new OBJLoader();
 
 				loader.load( 'models/obj/male02/male02.obj', function ( object ) {
 
@@ -94,32 +93,32 @@
 				} );
 
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
-				parent = new THREE.Object3D();
+				parent = new Object3D();
 				scene.add( parent );
 
-				var grid = new THREE.Points( new THREE.PlaneBufferGeometry( 15000, 15000, 64, 64 ), new THREE.PointsMaterial( { color: 0xff0000, size: 10 } ) );
+				var grid = new Points( new PlaneBufferGeometry( 15000, 15000, 64, 64 ), new PointsMaterial( { color: 0xff0000, size: 10 } ) );
 				grid.position.y = - 400;
 				grid.rotation.x = - Math.PI / 2;
 				parent.add( grid );
 
 				// postprocessing
 
-				var renderModel = new THREE.RenderPass( scene, camera );
-				var effectBloom = new THREE.BloomPass( 0.75 );
-				var effectFilm = new THREE.FilmPass( 0.5, 0.5, 1448, false );
+				var renderModel = new RenderPass( scene, camera );
+				var effectBloom = new BloomPass( 0.75 );
+				var effectFilm = new FilmPass( 0.5, 0.5, 1448, false );
 
-				effectFocus = new THREE.ShaderPass( THREE.FocusShader );
+				effectFocus = new ShaderPass( FocusShader );
 
 				effectFocus.uniforms[ "screenWidth" ].value = window.innerWidth * window.devicePixelRatio;
 				effectFocus.uniforms[ "screenHeight" ].value = window.innerHeight * window.devicePixelRatio;
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
 				composer.addPass( renderModel );
 				composer.addPass( effectBloom );
@@ -183,13 +182,13 @@
 
 				} );
 
-				return new THREE.BufferAttribute( combined, 3 );
+				return new BufferAttribute( combined, 3 );
 
 			}
 
 			function createMesh( positions, scene, scale, x, y, z, color ) {
 
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				geometry.addAttribute( 'position', positions.clone() );
 				geometry.addAttribute( 'initialPosition', positions.clone() );
 
@@ -213,7 +212,7 @@
 
 					var c = ( i < clones.length - 1 ) ? 0x252525 : color;
 
-					mesh = new THREE.Points( geometry, new THREE.PointsMaterial( { size: 30, color: c } ) );
+					mesh = new Points( geometry, new PointsMaterial( { size: 30, color: c } ) );
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 
 					mesh.position.x = x + clones[ i ][ 0 ];

examples/webgl_points_sprites.html

@@ -13,19 +13,23 @@
 			snowflakes by <a href="http://en.wikipedia.org/wiki/File:Sketch_of_snow_crystal_by_Ren%C3%A9_Descartes.jpg">Ren&eacute;  Descartes</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AdditiveBlending,
+				BufferGeometry,
+				Float32BufferAttribute,
+				FogExp2,
+				PerspectiveCamera,
+				Points,
+				PointsMaterial,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			var camera, scene, renderer, stats, materials = [], parameters;
 			var mouseX = 0, mouseY = 0;
@@ -38,16 +42,16 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 1000;
 
-				scene = new THREE.Scene();
-				scene.fog = new THREE.FogExp2( 0x000000, 0.0008 );
+				scene = new Scene();
+				scene.fog = new FogExp2( 0x000000, 0.0008 );
 
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				var vertices = [];
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 
 				var sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png' );
 				var sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png' );
@@ -65,7 +69,7 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
 
 				parameters = [
 					[[ 1.0, 0.2, 0.5 ], sprite2, 20 ],
@@ -81,10 +85,10 @@
 					var sprite = parameters[ i ][ 1 ];
 					var size = parameters[ i ][ 2 ];
 
-					materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
+					materials[ i ] = new PointsMaterial( { size: size, map: sprite, blending: AdditiveBlending, depthTest: false, transparent: true } );
 					materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ] );
 
-					var particles = new THREE.Points( geometry, materials[ i ] );
+					var particles = new Points( geometry, materials[ i ] );
 
 					particles.rotation.x = Math.random() * 6;
 					particles.rotation.y = Math.random() * 6;
@@ -96,7 +100,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -108,7 +112,7 @@
 
 				//
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				var params = {
 					texture: true
@@ -206,7 +210,7 @@
 
 					var object = scene.children[ i ];
 
-					if ( object instanceof THREE.Points ) {
+					if ( object instanceof Points ) {
 
 						object.rotation.y = time * ( i < 4 ? i + 1 : - ( i + 1 ) );
 

examples/webgl_points_waves.html

@@ -12,11 +12,6 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl particles waves example
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 			attribute float scale;
@@ -47,13 +42,19 @@
 
 		</script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
+		<script type="module">
+			import {
+				BufferAttribute,
+				BufferGeometry,
+				Color,
+				PerspectiveCamera,
+				Points,
+				Scene,
+				ShaderMaterial,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import Stats from './jsm/libs/stats.module.js';
 
 			var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
 
@@ -75,10 +76,10 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				//
 
@@ -106,14 +107,14 @@
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'scale', new THREE.BufferAttribute( scales, 1 ) );
+				var geometry = new BufferGeometry();
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'scale', new BufferAttribute( scales, 1 ) );
 
-				var material = new THREE.ShaderMaterial( {
+				var material = new ShaderMaterial( {
 
 					uniforms: {
-						color: { value: new THREE.Color( 0xffffff ) },
+						color: { value: new Color( 0xffffff ) },
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent
@@ -122,12 +123,12 @@
 
 				//
 
-				particles = new THREE.Points( geometry, material );
+				particles = new Points( geometry, material );
 				scene.add( particles );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_postprocessing_advanced.html

@@ -15,40 +15,45 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/BleachBypassShader.js"></script>
-		<script src="js/shaders/ColorifyShader.js"></script>
-		<script src="js/shaders/ConvolutionShader.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/DotScreenShader.js"></script>
-		<script src="js/shaders/FilmShader.js"></script>
-		<script src="js/shaders/HorizontalBlurShader.js"></script>
-		<script src="js/shaders/SepiaShader.js"></script>
-		<script src="js/shaders/VerticalBlurShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/postprocessing/FilmPass.js"></script>
-		<script src="js/postprocessing/DotScreenPass.js"></script>
-		<script src="js/postprocessing/TexturePass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-
-		<script src="js/loaders/GLTFLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Color,
+				DirectionalLight,
+				LinearFilter,
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				OrthographicCamera,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RGBFormat,
+				Scene,
+				TextureLoader,
+				Vector2,
+				Uniform,
+				WebGLRenderer,
+				WebGLRenderTarget,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { BloomPass } from './jsm/postprocessing/BloomPass.js';
+			import { FilmPass } from './jsm/postprocessing/FilmPass.js';
+			import { DotScreenPass } from './jsm/postprocessing/DotScreenPass.js';
+			import { MaskPass, ClearMaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { TexturePass } from './jsm/postprocessing/TexturePass.js';
+
+			import { BleachBypassShader } from './jsm/shaders/BleachBypassShader.js';
+			import { ColorifyShader } from './jsm/shaders/ColorifyShader.js';
+			import { HorizontalBlurShader } from './jsm/shaders/HorizontalBlurShader.js';
+			import { VerticalBlurShader } from './jsm/shaders/VerticalBlurShader.js';
+			import { SepiaShader } from './jsm/shaders/SepiaShader.js';
+			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
+
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 			var container, stats;
 
@@ -75,24 +80,24 @@
 
 				//
 
-				cameraOrtho = new THREE.OrthographicCamera( - halfWidth, halfWidth, halfHeight, - halfHeight, - 10000, 10000 );
+				cameraOrtho = new OrthographicCamera( - halfWidth, halfWidth, halfHeight, - halfHeight, - 10000, 10000 );
 				cameraOrtho.position.z = 100;
 
-				cameraPerspective = new THREE.PerspectiveCamera( 50, width / height, 1, 10000 );
+				cameraPerspective = new PerspectiveCamera( 50, width / height, 1, 10000 );
 				cameraPerspective.position.z = 900;
 
 				//
 
-				sceneModel = new THREE.Scene();
-				sceneBG = new THREE.Scene();
+				sceneModel = new Scene();
+				sceneBG = new Scene();
 
 				//
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff );
+				directionalLight = new DirectionalLight( 0xffffff );
 				directionalLight.position.set( 0, - 0.1, 1 ).normalize();
 				sceneModel.add( directionalLight );
 
-				var loader = new THREE.GLTFLoader();
+				var loader = new GLTFLoader();
 				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
 					createMesh( gltf.scene.children[ 0 ].geometry, sceneModel, 100 );
@@ -101,28 +106,28 @@
 
 				//
 
-				var materialColor = new THREE.MeshBasicMaterial( {
-					map: new THREE.TextureLoader().load( "textures/cube/SwedishRoyalCastle/pz.jpg" ),
+				var materialColor = new MeshBasicMaterial( {
+					map: new TextureLoader().load( "textures/cube/SwedishRoyalCastle/pz.jpg" ),
 					depthTest: false
 				} );
 
-				quadBG = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), materialColor );
+				quadBG = new Mesh( new PlaneBufferGeometry( 1, 1 ), materialColor );
 				quadBG.position.z = - 500;
 				quadBG.scale.set( width, height, 1 );
 				sceneBG.add( quadBG );
 
 				//
 
-				var sceneMask = new THREE.Scene();
+				var sceneMask = new Scene();
 
-				quadMask = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
+				quadMask = new Mesh( new PlaneBufferGeometry( 1, 1 ), new MeshBasicMaterial( { color: 0xffaa00 } ) );
 				quadMask.position.z = - 300;
 				quadMask.scale.set( width / 2, height / 2, 1 );
 				sceneMask.add( quadMask );
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
 				renderer.autoClear = false;
@@ -143,15 +148,15 @@
 
 				//
 
-				var shaderBleach = THREE.BleachBypassShader;
-				var shaderSepia = THREE.SepiaShader;
-				var shaderVignette = THREE.VignetteShader;
-				// var shaderCopy = THREE.CopyShader;
+				var shaderBleach = BleachBypassShader;
+				var shaderSepia = SepiaShader;
+				var shaderVignette = VignetteShader;
+				// var shaderCopy = CopyShader;
 
-				var effectBleach = new THREE.ShaderPass( shaderBleach );
-				var effectSepia = new THREE.ShaderPass( shaderSepia );
-				var effectVignette = new THREE.ShaderPass( shaderVignette );
-				// var effectCopy = new THREE.ShaderPass( shaderCopy );
+				var effectBleach = new ShaderPass( shaderBleach );
+				var effectSepia = new ShaderPass( shaderSepia );
+				var effectVignette = new ShaderPass( shaderVignette );
+				// var effectCopy = new ShaderPass( shaderCopy );
 
 				effectBleach.uniforms[ "opacity" ].value = 0.95;
 
@@ -160,33 +165,33 @@
 				effectVignette.uniforms[ "offset" ].value = 0.95;
 				effectVignette.uniforms[ "darkness" ].value = 1.6;
 
-				var effectBloom = new THREE.BloomPass( 0.5 );
-				var effectFilm = new THREE.FilmPass( 0.35, 0.025, 648, false );
-				var effectFilmBW = new THREE.FilmPass( 0.35, 0.5, 2048, true );
-				var effectDotScreen = new THREE.DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 );
+				var effectBloom = new BloomPass( 0.5 );
+				var effectFilm = new FilmPass( 0.35, 0.025, 648, false );
+				var effectFilmBW = new FilmPass( 0.35, 0.5, 2048, true );
+				var effectDotScreen = new DotScreenPass( new Vector2( 0, 0 ), 0.5, 0.8 );
 
-				var effectHBlur = new THREE.ShaderPass( THREE.HorizontalBlurShader );
-				var effectVBlur = new THREE.ShaderPass( THREE.VerticalBlurShader );
+				var effectHBlur = new ShaderPass( HorizontalBlurShader );
+				var effectVBlur = new ShaderPass( VerticalBlurShader );
 				effectHBlur.uniforms[ 'h' ].value = 2 / ( width / 2 );
 				effectVBlur.uniforms[ 'v' ].value = 2 / ( height / 2 );
 
-				var effectColorify1 = new THREE.ShaderPass( THREE.ColorifyShader );
-				var effectColorify2 = new THREE.ShaderPass( THREE.ColorifyShader );
-				effectColorify1.uniforms[ 'color' ] = new THREE.Uniform( new THREE.Color( 1, 0.8, 0.8 ) );
-				effectColorify2.uniforms[ 'color' ] = new THREE.Uniform( new THREE.Color( 1, 0.75, 0.5 ) );
+				var effectColorify1 = new ShaderPass( ColorifyShader );
+				var effectColorify2 = new ShaderPass( ColorifyShader );
+				effectColorify1.uniforms[ 'color' ] = new Uniform( new Color( 1, 0.8, 0.8 ) );
+				effectColorify2.uniforms[ 'color' ] = new Uniform( new Color( 1, 0.75, 0.5 ) );
 
-				var clearMask = new THREE.ClearMaskPass();
-				var renderMask = new THREE.MaskPass( sceneModel, cameraPerspective );
-				var renderMaskInverse = new THREE.MaskPass( sceneModel, cameraPerspective );
+				var clearMask = new ClearMaskPass();
+				var renderMask = new MaskPass( sceneModel, cameraPerspective );
+				var renderMaskInverse = new MaskPass( sceneModel, cameraPerspective );
 
 				renderMaskInverse.inverse = true;
 
 				//
 
 				var rtParameters = {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat,
+					minFilter: LinearFilter,
+					magFilter: LinearFilter,
+					format: RGBFormat,
 					stencilBuffer: true
 				};
 
@@ -195,12 +200,12 @@
 
 				//
 
-				var renderBackground = new THREE.RenderPass( sceneBG, cameraOrtho );
-				var renderModel = new THREE.RenderPass( sceneModel, cameraPerspective );
+				var renderBackground = new RenderPass( sceneBG, cameraOrtho );
+				var renderModel = new RenderPass( sceneModel, cameraPerspective );
 
 				renderModel.clear = false;
 
-				composerScene = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth * 2, rtHeight * 2, rtParameters ) );
+				composerScene = new EffectComposer( renderer, new WebGLRenderTarget( rtWidth * 2, rtHeight * 2, rtParameters ) );
 
 				composerScene.addPass( renderBackground );
 				composerScene.addPass( renderModel );
@@ -211,11 +216,11 @@
 
 				//
 
-				renderScene = new THREE.TexturePass( composerScene.renderTarget2.texture );
+				renderScene = new TexturePass( composerScene.renderTarget2.texture );
 
 				//
 
-				composer1 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
+				composer1 = new EffectComposer( renderer, new WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
 				composer1.addPass( renderScene );
 				//composer1.addPass( renderMask );
@@ -225,7 +230,7 @@
 
 				//
 
-				composer2 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
+				composer2 = new EffectComposer( renderer, new WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
 				composer2.addPass( renderScene );
 				composer2.addPass( effectDotScreen );
@@ -239,7 +244,7 @@
 
 				//
 
-				composer3 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
+				composer3 = new EffectComposer( renderer, new WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
 				composer3.addPass( renderScene );
 				//composer3.addPass( renderMask );
@@ -250,7 +255,7 @@
 
 				//
 
-				composer4 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
+				composer4 = new EffectComposer( renderer, new WebGLRenderTarget( rtWidth, rtHeight, rtParameters ) );
 
 				composer4.addPass( renderScene );
 				//composer4.addPass( renderMask );
@@ -299,18 +304,18 @@
 
 			function createMesh( geometry, scene, scale ) {
 
-				var mat2 = new THREE.MeshPhongMaterial( {
+				var mat2 = new MeshPhongMaterial( {
 
 					color: 0x999999,
 					specular: 0x080808,
 					shininess: 20,
-					map: new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
-					normalMap: new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
-					normalScale: new THREE.Vector2( 0.75, 0.75 )
+					map: new TextureLoader().load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
+					normalMap: new TextureLoader().load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
+					normalScale: new Vector2( 0.75, 0.75 )
 
 				} );
 
-				mesh = new THREE.Mesh( geometry, mat2 );
+				mesh = new Mesh( geometry, mat2 );
 				mesh.position.set( 0, - 50, 0 );
 				mesh.scale.set( scale, scale, scale );
 

examples/webgl_postprocessing_afterimage.html

@@ -8,20 +8,22 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/AfterimageShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/AfterimagePass.js"></script>
-
-		<script src="js/libs/dat.gui.min.js" type="text/javascript" charset="utf-8"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Fog,
+				Mesh,
+				MeshNormalMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { AfterimagePass } from './jsm/postprocessing/AfterimagePass.js';
 
 			var camera, scene, renderer, composer;
 			var mesh;
@@ -40,28 +42,28 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 400;
 
-				scene = new THREE.Scene();
-				scene.fog = new THREE.Fog( 0x000000, 1, 1000 );
+				scene = new Scene();
+				scene.fog = new Fog( 0x000000, 1, 1000 );
 
-				var geometry = new THREE.BoxBufferGeometry( 150, 150, 150, 2, 2, 2 );
-				var material = new THREE.MeshNormalMaterial();
-				mesh = new THREE.Mesh( geometry, material );
+				var geometry = new BoxBufferGeometry( 150, 150, 150, 2, 2, 2 );
+				var material = new MeshNormalMaterial();
+				mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
 				// postprocessing
 
-				composer = new THREE.EffectComposer( renderer );
-				composer.addPass( new THREE.RenderPass( scene, camera ) );
+				composer = new EffectComposer( renderer );
+				composer.addPass( new RenderPass( scene, camera ) );
 
-				afterimagePass = new THREE.AfterimagePass();
+				afterimagePass = new AfterimagePass();
 				composer.addPass( afterimagePass );
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -70,7 +72,7 @@
 
 			function createGUI() {
 
-				var gui = new dat.GUI( { name: 'Damp setting' } );
+				var gui = new GUI( { name: 'Damp setting' } );
 				gui.add( afterimagePass.uniforms[ "damp" ], 'value', 0, 1 ).step( 0.001 );
 				gui.add( params, 'enable' );
 

examples/webgl_postprocessing_backgrounds.html

@@ -14,27 +14,35 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/ClearPass.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/TexturePass.js"></script>
-		<script src="js/postprocessing/CubeTexturePass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				Group,
+				Mesh,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				SphereBufferGeometry,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { TexturePass } from './jsm/postprocessing/TexturePass.js';
+			import { CubeTexturePass } from './jsm/postprocessing/CubeTexturePass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { ClearPass } from './jsm/postprocessing/ClearPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var scene, renderer, composer;
 			var clearPass, texturePass, renderPass;
 			var cameraP, cubeTexturePassP;
-			//var cameraO, cubeTexturePassO;
 			var gui, stats;
 
 			var params = {
@@ -50,11 +58,6 @@
 				cubeTexturePassOpacity: 1.0,
 
 				renderPass: true
-
-				//autoRotate: true,
-
-				//camera: 'perspective'
-
 			};
 
 			init();
@@ -66,7 +69,7 @@
 
 				if ( gui ) gui.destroy();
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				gui.add( params, "clearPass" );
 				gui.add( params, "clearColor", [ 'black', 'white', 'blue', 'green', 'red' ] );
@@ -80,10 +83,6 @@
 
 				gui.add( params, "renderPass" );
 
-				//gui.add( params, "autoRotate" );
-
-				//gui.add( params, 'camera', [ 'perspective', 'orthographic' ] );
-
 				gui.open();
 
 			}
@@ -97,7 +96,7 @@
 				var aspect = width / height;
 				var devicePixelRatio = window.devicePixelRatio || 1;
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( devicePixelRatio );
 				renderer.setSize( width, height );
 				document.body.appendChild( renderer.domElement );
@@ -107,48 +106,40 @@
 
 				//
 
-				cameraP = new THREE.PerspectiveCamera( 65, aspect, 1, 10 );
+				cameraP = new PerspectiveCamera( 65, aspect, 1, 10 );
 				cameraP.position.z = 7;
 
-				//	cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 3, 10 );
-				//	cameraO.position.z = 7;
+				scene = new Scene();
 
-				//	var fov = THREE.Math.degToRad( cameraP.fov );
-				//	var hyperfocus = ( cameraP.near + cameraP.far ) / 2;
-				//	var _height = 2 * Math.tan( fov / 2 ) * hyperfocus;
-				//	cameraO.zoom = height / _height;
-
-				scene = new THREE.Scene();
-
-				var group = new THREE.Group();
+				var group = new Group();
 				scene.add( group );
 
-				var light = new THREE.PointLight( 0xddffdd, 1.0 );
+				var light = new PointLight( 0xddffdd, 1.0 );
 				light.position.z = 70;
 				light.position.y = - 70;
 				light.position.x = - 70;
 				scene.add( light );
 
-				var light2 = new THREE.PointLight( 0xffdddd, 1.0 );
+				var light2 = new PointLight( 0xffdddd, 1.0 );
 				light2.position.z = 70;
 				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
-				var light3 = new THREE.PointLight( 0xddddff, 1.0 );
+				var light3 = new PointLight( 0xddddff, 1.0 );
 				light3.position.z = 70;
 				light3.position.x = 70;
 				light3.position.y = - 70;
 				scene.add( light3 );
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 48, 24 );
+				var geometry = new SphereBufferGeometry( 1, 48, 24 );
 
-				var material = new THREE.MeshStandardMaterial();
+				var material = new MeshStandardMaterial();
 				material.roughness = 0.5 * Math.random() + 0.25;
 				material.metalness = 0;
 				material.color.setHSL( Math.random(), 1.0, 0.3 );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				group.add( mesh );
 
 				// postprocessing
@@ -163,40 +154,39 @@
 
 				};
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				clearPass = new THREE.ClearPass( params.clearColor, params.clearAlpha );
+				clearPass = new ClearPass( params.clearColor, params.clearAlpha );
 				composer.addPass( clearPass );
 
-				texturePass = new THREE.TexturePass();
+				texturePass = new TexturePass();
 				composer.addPass( texturePass );
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 				textureLoader.load( "textures/hardwood2_diffuse.jpg", function ( map ) {
 
 					texturePass.map = map;
 
 				} );
 
-				cubeTexturePassP = new THREE.CubeTexturePass( cameraP );
+				cubeTexturePassP = new CubeTexturePass( cameraP );
 				composer.addPass( cubeTexturePassP );
 
 				var ldrUrls = genCubeUrls( "textures/cube/pisa/", ".png" );
-				new THREE.CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
+				new CubeTextureLoader().load( ldrUrls, function ( ldrCubeMap ) {
 
 					cubeTexturePassP.envMap = ldrCubeMap;
-					console.log( "loaded envmap" );
 
 				} );
 
-				renderPass = new THREE.RenderPass( scene, cameraP );
+				renderPass = new RenderPass( scene, cameraP );
 				renderPass.clear = false;
 				composer.addPass( renderPass );
 
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var copyPass = new ShaderPass( CopyShader );
 				composer.addPass( copyPass );
 
-				var controls = new THREE.OrbitControls( cameraP, renderer.domElement );
+				var controls = new OrbitControls( cameraP, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -211,12 +201,6 @@
 				cameraP.aspect = aspect;
 				cameraP.updateProjectionMatrix();
 
-				/*cameraO.left = - height * aspect;
-				cameraO.right = height * aspect;
-				cameraO.top = height;
-				cameraO.bottom = - height;
-				cameraO.updateProjectionMatrix();*/
-
 				renderer.setSize( width, height );
 				composer.setSize( width, height );
 

examples/webgl_postprocessing_crossfade.html

@@ -15,12 +15,39 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/utils/BufferGeometryUtils.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				Clock,
+				Color,
+				Euler,
+				Float32BufferAttribute,
+				IcosahedronBufferGeometry,
+				LinearFilter,
+				Math as _Math,
+				Matrix4,
+				Mesh,
+				MeshPhongMaterial,
+				OrthographicCamera,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Quaternion,
+				RGBFormat,
+				Scene,
+				ShaderMaterial,
+				SpotLight,
+				TextureLoader,
+				Vector3,
+				VertexColors,
+				WebGLRenderer,
+				WebGLRenderTarget
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
 			var container, stats;
 			var renderer;
@@ -36,7 +63,7 @@
 				"textureThreshold": 0.3
 			};
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			init();
 			animate();
@@ -47,7 +74,7 @@
 
 				container = document.getElementById( "container" );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -55,8 +82,8 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var sceneA = new Scene( "cube", 5000, 1200, 120, new THREE.Vector3( 0, - 0.4, 0 ), 0xffffff );
-				var sceneB = new Scene( "sphere", 500, 2000, 50, new THREE.Vector3( 0, 0.2, 0.1 ), 0x000000 );
+				var sceneA = new FXScene( "cube", 5000, 1200, 120, new Vector3( 0, - 0.4, 0 ), 0xffffff );
+				var sceneB = new FXScene( "sphere", 500, 2000, 50, new Vector3( 0, 0.2, 0.1 ), 0x000000 );
 
 				transition = new Transition( sceneA, sceneB );
 
@@ -73,7 +100,7 @@
 
 			function initGUI() {
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( transitionParams, "useTexture" ).onChange( function ( value ) {
 
@@ -121,18 +148,18 @@
 
 					}
 
-					geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+					geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
 				}
 
 				var geometries = [];
 
-				var matrix = new THREE.Matrix4();
-				var position = new THREE.Vector3();
-				var rotation = new THREE.Euler();
-				var quaternion = new THREE.Quaternion();
-				var scale = new THREE.Vector3();
-				var color = new THREE.Color();
+				var matrix = new Matrix4();
+				var position = new Vector3();
+				var rotation = new Euler();
+				var quaternion = new Quaternion();
+				var scale = new Vector3();
+				var color = new Color();
 
 				for ( var i = 0; i < numObjects; i ++ ) {
 
@@ -151,7 +178,7 @@
 
 					if ( objectType === 'cube' ) {
 
-						geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+						geometry = new BoxBufferGeometry( 1, 1, 1 );
 						geometry = geometry.toNonIndexed(); // merging needs consistent buffer geometries
 						scale.y = Math.random() * 200 + 100;
 						scale.z = Math.random() * 200 + 100;
@@ -159,7 +186,7 @@
 
 					} else if ( objectType === 'sphere' ) {
 
-						geometry = new THREE.IcosahedronBufferGeometry( 1, 1 );
+						geometry = new IcosahedronBufferGeometry( 1, 1 );
 						scale.y = scale.z = scale.x;
 						color.setRGB( 0.1 + 0.9 * Math.random(), 0, 0 );
 
@@ -175,33 +202,33 @@
 
 				}
 
-				return THREE.BufferGeometryUtils.mergeBufferGeometries( geometries );
+				return BufferGeometryUtils.mergeBufferGeometries( geometries );
 
 			}
 
-			function Scene( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
+			function FXScene( type, numObjects, cameraZ, fov, rotationSpeed, clearColor ) {
 
 				this.clearColor = clearColor;
 
-				this.camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 10000 );
+				this.camera = new PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 10000 );
 				this.camera.position.z = cameraZ;
 
 				// Setup scene
-				this.scene = new THREE.Scene();
-				this.scene.add( new THREE.AmbientLight( 0x555555 ) );
+				this.scene = new Scene();
+				this.scene.add( new AmbientLight( 0x555555 ) );
 
-				var light = new THREE.SpotLight( 0xffffff, 1.5 );
+				var light = new SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
 				this.scene.add( light );
 
 				this.rotationSpeed = rotationSpeed;
 
-				var defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
-				this.mesh = new THREE.Mesh( generateGeometry( type, numObjects ), defaultMaterial );
+				var defaultMaterial = new MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: VertexColors } );
+				this.mesh = new Mesh( generateGeometry( type, numObjects ), defaultMaterial );
 				this.scene.add( this.mesh );
 
-				var renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
-				this.fbo = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
+				var renderTargetParameters = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat, stencilBuffer: false };
+				this.fbo = new WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
 
 				this.render = function ( delta, rtt ) {
 
@@ -230,18 +257,18 @@
 
 			function Transition( sceneA, sceneB ) {
 
-				this.scene = new THREE.Scene();
+				this.scene = new Scene();
 
-				this.cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10, 10 );
+				this.cameraOrtho = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10, 10 );
 
 				this.textures = [];
 
-				var loader = new THREE.TextureLoader();
+				var loader = new TextureLoader();
 
 				for ( var i = 0; i < 6; i ++ )
 					this.textures[ i ] = loader.load( 'textures/transition/transition' + ( i + 1 ) + '.png' );
 
-				this.quadmaterial = new THREE.ShaderMaterial( {
+				this.quadmaterial = new ShaderMaterial( {
 
 					uniforms: {
 
@@ -314,9 +341,9 @@
 
 				} );
 
-				var quadgeometry = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
+				var quadgeometry = new PlaneBufferGeometry( window.innerWidth, window.innerHeight );
 
-				this.quad = new THREE.Mesh( quadgeometry, this.quadmaterial );
+				this.quad = new Mesh( quadgeometry, this.quadmaterial );
 				this.scene.add( this.quad );
 
 				// Link both scenes and their FBOs
@@ -352,7 +379,7 @@
 					if ( transitionParams.animateTransition ) {
 
 						var t = ( 1 + Math.sin( transitionParams.transitionSpeed * clock.getElapsedTime() / Math.PI ) ) / 2;
-						transitionParams.transition = THREE.Math.smoothstep( t, 0.3, 0.7 );
+						transitionParams.transition = _Math.smoothstep( t, 0.3, 0.7 );
 
 						// Change the current alpha texture after each transition
 						if ( transitionParams.loopTexture && ( transitionParams.transition == 0 || transitionParams.transition == 1 ) ) {

examples/webgl_postprocessing_dof.html

@@ -8,35 +8,28 @@
 	</head>
 
 	<body>
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/BokehShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/BokehPass.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script src='js/libs/dat.gui.min.js'></script>
-
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl depth-of-field with bokeh example<br/>
 			shader by <a href="http://artmartinsh.blogspot.com/2010/02/glsl-lens-blur-filter-with-bokeh.html">Martins Upitis</a>
 		</div>
 
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { BokehPass } from './jsm/postprocessing/BokehPass.js';
 
 			var container, stats;
 			var camera, scene, renderer,
@@ -62,12 +55,12 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 3000 );
+				camera = new PerspectiveCamera( 70, width / height, 1, 3000 );
 				camera.position.z = 200;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
 				container.appendChild( renderer.domElement );
@@ -80,16 +73,16 @@
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				var textureCube = new CubeTextureLoader().load( urls );
 
 				parameters = { color: 0xff1100, envMap: textureCube };
-				cubeMaterial = new THREE.MeshBasicMaterial( parameters );
+				cubeMaterial = new MeshBasicMaterial( parameters );
 
 				singleMaterial = false;
 
 				if ( singleMaterial ) zmaterial = [ cubeMaterial ];
 
-				var geo = new THREE.SphereBufferGeometry( 1, 20, 10 );
+				var geo = new SphereBufferGeometry( 1, 20, 10 );
 
 				var xgrid = 14,
 					ygrid = 9,
@@ -108,11 +101,11 @@
 
 							if ( singleMaterial ) {
 
-								mesh = new THREE.Mesh( geo, zmaterial );
+								mesh = new Mesh( geo, zmaterial );
 
 							} else {
 
-								mesh = new THREE.Mesh( geo, new THREE.MeshBasicMaterial( parameters ) );
+								mesh = new Mesh( geo, new MeshBasicMaterial( parameters ) );
 								materials[ count ] = mesh.material;
 
 							}
@@ -163,7 +156,7 @@
 
 				};
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 				gui.add( effectController, "focus", 10.0, 3000.0, 10 ).onChange( matChanger );
 				gui.add( effectController, "aperture", 0, 10, 0.1 ).onChange( matChanger );
 				gui.add( effectController, "maxblur", 0.0, 3.0, 0.025 ).onChange( matChanger );
@@ -224,9 +217,9 @@
 
 			function initPostprocessing() {
 
-				var renderPass = new THREE.RenderPass( scene, camera );
+				var renderPass = new RenderPass( scene, camera );
 
-				var bokehPass = new THREE.BokehPass( scene, camera, {
+				var bokehPass = new BokehPass( scene, camera, {
 					focus: 1.0,
 					aperture:	0.025,
 					maxblur:	1.0,
@@ -235,7 +228,7 @@
 					height: height
 				} );
 
-				var composer = new THREE.EffectComposer( renderer );
+				var composer = new EffectComposer( renderer );
 
 				composer.addPass( renderPass );
 				composer.addPass( bokehPass );

examples/webgl_postprocessing_dof2.html

@@ -6,30 +6,44 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
-	<!-- TODO
-		Setup Number Focus Test Plates
-		Use WEBGL Depth buffer support?
-	-->
 	<body>
-		<script src="../build/three.js"></script>
-		<script src="js/shaders/BokehShader2.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl realistic depth-of-field bokeh example<br/>
 			shader ported from <a href="http://blenderartists.org/forum/showthread.php?237488-GLSL-depth-of-field-with-bokeh-v2-4-(update)">Martins Upitis</a>
 		</div>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				BackSide,
+				BoxBufferGeometry,
+				BufferGeometryLoader,
+				CubeTextureLoader,
+				DirectionalLight,
+				DoubleSide,
+				LinearFilter,
+				Mesh,
+				MeshPhongMaterial,
+				OrthographicCamera,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Raycaster,
+				RGBFormat,
+				Scene,
+				ShaderLib,
+				ShaderMaterial,
+				SphereBufferGeometry,
+				UniformsUtils,
+				Vector2,
+				Vector3,
+				WebGLRenderer,
+				WebGLRenderTarget
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { BokehShader, BokehDepthShader } from './jsm/shaders/BokehShader2.js';
 
 			var container, stats;
 			var camera, scene, renderer, materialDepth;
@@ -44,10 +58,10 @@
 				samples: 4
 			};
 
-			var mouse = new THREE.Vector2();
-			var raycaster = new THREE.Raycaster();
+			var mouse = new Vector2();
+			var raycaster = new Raycaster();
 			var distance = 100;
-			var target = new THREE.Vector3( 0, 20, - 50 );
+			var target = new Vector3( 0, 20, - 50 );
 			var effectController;
 			var planes = [];
 			var leaves = 100;
@@ -60,23 +74,23 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
 
 				camera.position.y = 150;
 				camera.position.z = 450;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 				scene.add( camera );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
 				container.appendChild( renderer.domElement );
 
-				var depthShader = THREE.BokehDepthShader;
+				var depthShader = BokehDepthShader;
 
-				materialDepth = new THREE.ShaderMaterial( {
+				materialDepth = new ShaderMaterial( {
 					uniforms: depthShader.uniforms,
 					vertexShader: depthShader.vertexShader,
 					fragmentShader: depthShader.fragmentShader
@@ -92,42 +106,42 @@
 							 r + 'posy.jpg', r + 'negy.jpg',
 							 r + 'posz.jpg', r + 'negz.jpg' ];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
-				textureCube.format = THREE.RGBFormat;
+				var textureCube = new CubeTextureLoader().load( urls );
+				textureCube.format = RGBFormat;
 
-				var shader = THREE.ShaderLib[ 'cube' ];
+				var shader = ShaderLib[ 'cube' ];
 				shader.uniforms[ 'tCube' ].value = textureCube;
 
-				var skyMaterial = new THREE.ShaderMaterial( {
+				var skyMaterial = new ShaderMaterial( {
 
 					fragmentShader: shader.fragmentShader,
 					vertexShader: shader.vertexShader,
 					uniforms: shader.uniforms,
 					depthWrite: false,
-					side: THREE.BackSide
+					side: BackSide
 
 				} );
 
-				var sky = new THREE.Mesh( new THREE.BoxBufferGeometry( 1000, 1000, 1000 ), skyMaterial );
+				var sky = new Mesh( new BoxBufferGeometry( 1000, 1000, 1000 ), skyMaterial );
 				scene.add( sky );
 
 				// plane particles
 
-				var planePiece = new THREE.PlaneBufferGeometry( 10, 10, 1, 1 );
+				var planePiece = new PlaneBufferGeometry( 10, 10, 1, 1 );
 
-				var planeMat = new THREE.MeshPhongMaterial( {
+				var planeMat = new MeshPhongMaterial( {
 					color: 0xffffff * 0.4,
 					shininess: 0.5,
 					specular: 0xffffff,
 					envMap: textureCube,
-					side: THREE.DoubleSide
+					side: DoubleSide
 				} );
 
 				var rand = Math.random;
 
 				for ( var i = 0; i < leaves; i ++ ) {
 
-					var plane = new THREE.Mesh( planePiece, planeMat );
+					var plane = new Mesh( planePiece, planeMat );
 					plane.rotation.set( rand(), rand(), rand() );
 					plane.rotation.dx = rand() * 0.1;
 					plane.rotation.dy = rand() * 0.1;
@@ -143,12 +157,12 @@
 
 				// adding Monkeys
 
-				var loader2 = new THREE.BufferGeometryLoader();
+				var loader2 = new BufferGeometryLoader();
 				loader2.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 
-					var material = new THREE.MeshPhongMaterial( {
+					var material = new MeshPhongMaterial( {
 						specular: 0xffffff,
 						envMap: textureCube,
 						shininess: 50,
@@ -160,7 +174,7 @@
 
 					for ( var i = 0; i < monkeys; i ++ ) {
 
-						var mesh = new THREE.Mesh( geometry, material );
+						var mesh = new Mesh( geometry, material );
 
 						mesh.position.z = Math.cos( i / monkeys * Math.PI * 2 ) * 200;
 						mesh.position.y = Math.sin( i / monkeys * Math.PI * 3 ) * 20;
@@ -178,17 +192,17 @@
 
 				// add balls
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 20, 20 );
+				var geometry = new SphereBufferGeometry( 1, 20, 20 );
 
 				for ( var i = 0; i < 20; i ++ ) {
 
-					var ballmaterial = new THREE.MeshPhongMaterial( {
+					var ballmaterial = new MeshPhongMaterial( {
 						color: 0xffffff * Math.random(),
 						shininess: 0.5,
 						specular: 0xffffff,
 						envMap: textureCube } );
 
-					var mesh = new THREE.Mesh( geometry, ballmaterial );
+					var mesh = new Mesh( geometry, ballmaterial );
 
 					mesh.position.x = ( Math.random() - 0.5 ) * 200;
 					mesh.position.y = Math.random() * 50;
@@ -200,13 +214,13 @@
 
 				// lights
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new AmbientLight( 0x222222 ) );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
+				var directionalLight = new DirectionalLight( 0xffffff, 2 );
 				directionalLight.position.set( 2, 1.2, 10 ).normalize();
 				scene.add( directionalLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				var directionalLight = new DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( - 2, 1.2, - 10 ).normalize();
 				scene.add( directionalLight );
 
@@ -266,7 +280,7 @@
 
 				};
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( effectController, 'enabled' ).onChange( matChanger );
 				gui.add( effectController, 'jsDepthCalculation' ).onChange( matChanger );
@@ -359,27 +373,27 @@
 
 			function initPostprocessing() {
 
-				postprocessing.scene = new THREE.Scene();
+				postprocessing.scene = new Scene();
 
-				postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
+				postprocessing.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
 				postprocessing.camera.position.z = 100;
 
 				postprocessing.scene.add( postprocessing.camera );
 
-				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
-				postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
+				var pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat };
+				postprocessing.rtTextureDepth = new WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
+				postprocessing.rtTextureColor = new WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
 
-				var bokeh_shader = THREE.BokehShader;
+				var bokeh_shader = BokehShader;
 
-				postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
+				postprocessing.bokeh_uniforms = UniformsUtils.clone( bokeh_shader.uniforms );
 
 				postprocessing.bokeh_uniforms[ 'tColor' ].value = postprocessing.rtTextureColor.texture;
 				postprocessing.bokeh_uniforms[ 'tDepth' ].value = postprocessing.rtTextureDepth.texture;
 				postprocessing.bokeh_uniforms[ 'textureWidth' ].value = window.innerWidth;
 				postprocessing.bokeh_uniforms[ 'textureHeight' ].value = window.innerHeight;
 
-				postprocessing.materialBokeh = new THREE.ShaderMaterial( {
+				postprocessing.materialBokeh = new ShaderMaterial( {
 
 					uniforms: postprocessing.bokeh_uniforms,
 					vertexShader: bokeh_shader.vertexShader,
@@ -391,7 +405,7 @@
 
 				} );
 
-				postprocessing.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
+				postprocessing.quad = new Mesh( new PlaneBufferGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
 				postprocessing.quad.position.z = - 500;
 				postprocessing.scene.add( postprocessing.quad );
 

examples/webgl_postprocessing_fxaa.html

@@ -33,25 +33,29 @@
 		<div id="container">
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/shaders/FXAAShader.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
-
-			var camera, scene, renderer, clock, group;
+		<script type="module">
+			import {
+				Clock,
+				Color,
+				DirectionalLight,
+				Fog,
+				Group,
+				HemisphereLight,
+				Mesh,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				Scene,
+				TetrahedronBufferGeometry,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { FXAAShader } from './jsm/shaders/FXAAShader.js';
+
+			var camera, scene, renderer, clock, group, container;
 
 			var composer1, composer2, fxaaPass;
 
@@ -60,37 +64,37 @@
 
 			function init() {
 
-				var container = document.getElementById( 'container' );
+				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 45, ( container.offsetWidth * 0.5 ) / container.offsetHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, ( container.offsetWidth * 0.5 ) / container.offsetHeight, 1, 2000 );
 				camera.position.z = 500;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
-				scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
+				scene.fog = new Fog( 0xcccccc, 100, 1500 );
 
-				clock = new THREE.Clock();
+				clock = new Clock();
 
 				//
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 1000, 0 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				var dirLight = new DirectionalLight( 0xffffff, 0.8 );
 				dirLight.position.set( - 3000, 1000, - 1000 );
 				scene.add( dirLight );
 
 				//
 
-				group = new THREE.Group();
+				group = new Group();
 
-				var geometry = new THREE.TetrahedronBufferGeometry( 10 );
-				var material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
+				var geometry = new TetrahedronBufferGeometry( 10 );
+				var material = new MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
 
 				for ( var i = 0; i < 100; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 500 - 250;
 					mesh.position.y = Math.random() * 500 - 250;
@@ -110,7 +114,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( container.offsetWidth, container.offsetHeight );
@@ -118,26 +122,26 @@
 
 				//
 
-				var renderPass = new THREE.RenderPass( scene, camera );
+				var renderPass = new RenderPass( scene, camera );
 
 				//
 
-				fxaaPass = new THREE.ShaderPass( THREE.FXAAShader );
+				fxaaPass = new ShaderPass( FXAAShader );
 
 				var pixelRatio = renderer.getPixelRatio();
 
 				fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( container.offsetWidth * pixelRatio );
 				fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( container.offsetHeight * pixelRatio );
 
-				composer1 = new THREE.EffectComposer( renderer );
+				composer1 = new EffectComposer( renderer );
 				composer1.addPass( renderPass );
 				composer1.addPass( fxaaPass );
 
 				//
 
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var copyPass = new ShaderPass( CopyShader );
 
-				composer2 = new THREE.EffectComposer( renderer );
+				composer2 = new EffectComposer( renderer );
 				composer2.addPass( renderPass );
 				composer2.addPass( copyPass );
 

examples/webgl_postprocessing_glitch.html

@@ -8,22 +8,27 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/DigitalGlitch.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/GlitchPass.js"></script>
-
 		<div id="info">
-			<label for="dotScreen">Glitch me wild:</label><input id="wildGlitch" type="checkbox" onchange="updateOptions()"/><br />
+			<label for="dotScreen">Glitch me wild:</label><input id="wildGlitch" type="checkbox"/><br />
 		</div>
 
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				DirectionalLight,
+				Fog,
+				Mesh,
+				MeshPhongMaterial,
+				Object3D,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { GlitchPass } from './jsm/postprocessing/GlitchPass.js';
 
 			var camera, scene, renderer, composer;
 			var object, light;
@@ -42,29 +47,29 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 400;
 
-				scene = new THREE.Scene();
-				scene.fog = new THREE.Fog( 0x000000, 1, 1000 );
+				scene = new Scene();
+				scene.fog = new Fog( 0x000000, 1, 1000 );
 
-				object = new THREE.Object3D();
+				object = new Object3D();
 				scene.add( object );
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 4, 4 );
+				var geometry = new SphereBufferGeometry( 1, 4, 4 );
 
 				for ( var i = 0; i < 100; i ++ ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random(), flatShading: true } );
+					var material = new MeshPhongMaterial( { color: 0xffffff * Math.random(), flatShading: true } );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
 					mesh.position.multiplyScalar( Math.random() * 400 );
 					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
@@ -73,18 +78,18 @@
 
 				}
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new AmbientLight( 0x222222 ) );
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				light = new DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
 				// postprocessing
 
-				composer = new THREE.EffectComposer( renderer );
-				composer.addPass( new THREE.RenderPass( scene, camera ) );
+				composer = new EffectComposer( renderer );
+				composer.addPass( new RenderPass( scene, camera ) );
 
-				glitchPass = new THREE.GlitchPass();
+				glitchPass = new GlitchPass();
 				composer.addPass( glitchPass );
 
 
@@ -92,6 +97,9 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
+				var wildGlitchOption = document.getElementById( 'wildGlitch' );
+				wildGlitchOption.addEventListener( 'change', updateOptions );
+
 				updateOptions();
 
 			}
@@ -115,7 +123,6 @@
 				object.rotation.y += 0.01;
 
 				composer.render();
-				//renderer.render(scene, camera);
 
 			}
 

examples/webgl_postprocessing_godrays.html

@@ -8,33 +8,41 @@
 	</head>
 
 	<body>
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/OBJLoader.js"></script>
-		<script src="js/shaders/GodRaysShader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl god-rays example - tree by <a href="http://www.turbosquid.com/3d-models/free-tree-3d-model/592617" target="_blank" rel="noopener">stanloshka</a>
 		</div>
 
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				LinearFilter,
+				Mesh,
+				MeshBasicMaterial,
+				MeshDepthMaterial,
+				OrthographicCamera,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RGBFormat,
+				Scene,
+				ShaderMaterial,
+				SphereBufferGeometry,
+				UniformsUtils,
+				Vector3,
+				WebGLRenderer,
+				WebGLRenderTarget
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
+			import { GodRaysFakeSunShader, GodRaysDepthMaskShader, GodRaysCombineShader, GodRaysGenerateShader } from './jsm/shaders/GodRaysShader.js';
 
 			var container, stats;
 			var camera, scene, renderer, materialDepth;
 
 			var sphereMesh;
 
-			var sunPosition = new THREE.Vector3( 0, 1000, - 1000 );
-			var screenSpacePosition = new THREE.Vector3();
+			var sunPosition = new Vector3( 0, 1000, - 1000 );
+			var screenSpacePosition = new Vector3();
 
 			var mouseX = 0, mouseY = 0;
 
@@ -58,20 +66,20 @@
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 200;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				//
 
-				materialDepth = new THREE.MeshDepthMaterial();
+				materialDepth = new MeshDepthMaterial();
 
-				var materialScene = new THREE.MeshBasicMaterial( { color: 0x000000 } );
+				var materialScene = new MeshBasicMaterial( { color: 0x000000 } );
 
 				// tree
 
-				var loader = new THREE.OBJLoader();
+				var loader = new OBJLoader();
 				loader.load( 'models/obj/tree.obj', function ( object ) {
 
 					object.material = materialScene;
@@ -83,14 +91,14 @@
 
 				// sphere
 
-				var geo = new THREE.SphereBufferGeometry( 1, 20, 10 );
-				sphereMesh = new THREE.Mesh( geo, materialScene );
+				var geo = new SphereBufferGeometry( 1, 20, 10 );
+				sphereMesh = new Mesh( geo, materialScene );
 				sphereMesh.scale.multiplyScalar( 20 );
 				scene.add( sphereMesh );
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setClearColor( 0xffffff );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -175,38 +183,38 @@
 
 			function initPostprocessing( renderTargetWidth, renderTargetHeight ) {
 
-				postprocessing.scene = new THREE.Scene();
+				postprocessing.scene = new Scene();
 
-				postprocessing.camera = new THREE.OrthographicCamera( - 0.5, 0.5, 0.5, - 0.5, - 10000, 10000 );
+				postprocessing.camera = new OrthographicCamera( - 0.5, 0.5, 0.5, - 0.5, - 10000, 10000 );
 				postprocessing.camera.position.z = 100;
 
 				postprocessing.scene.add( postprocessing.camera );
 
-				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-				postprocessing.rtTextureColors = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight, pars );
+				var pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat };
+				postprocessing.rtTextureColors = new WebGLRenderTarget( renderTargetWidth, renderTargetHeight, pars );
 
 				// Switching the depth formats to luminance from rgb doesn't seem to work. I didn't
 				// investigate further for now.
-				// pars.format = THREE.LuminanceFormat;
+				// pars.format = LuminanceFormat;
 
 				// I would have this quarter size and use it as one of the ping-pong render
 				// targets but the aliasing causes some temporal flickering
 
-				postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight, pars );
-				postprocessing.rtTextureDepthMask = new THREE.WebGLRenderTarget( renderTargetWidth, renderTargetHeight, pars );
+				postprocessing.rtTextureDepth = new WebGLRenderTarget( renderTargetWidth, renderTargetHeight, pars );
+				postprocessing.rtTextureDepthMask = new WebGLRenderTarget( renderTargetWidth, renderTargetHeight, pars );
 
 				// The ping-pong render targets can use an adjusted resolution to minimize cost
 
 				var adjustedWidth = renderTargetWidth * godrayRenderTargetResolutionMultiplier;
 				var adjustedHeight = renderTargetHeight * godrayRenderTargetResolutionMultiplier;
-				postprocessing.rtTextureGodRays1 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight, pars );
-				postprocessing.rtTextureGodRays2 = new THREE.WebGLRenderTarget( adjustedWidth, adjustedHeight, pars );
+				postprocessing.rtTextureGodRays1 = new WebGLRenderTarget( adjustedWidth, adjustedHeight, pars );
+				postprocessing.rtTextureGodRays2 = new WebGLRenderTarget( adjustedWidth, adjustedHeight, pars );
 
 				// god-ray shaders
 
-				var godraysMaskShader = THREE.GodRaysDepthMaskShader;
-				postprocessing.godrayMaskUniforms = THREE.UniformsUtils.clone( godraysMaskShader.uniforms );
-				postprocessing.materialGodraysDepthMask = new THREE.ShaderMaterial( {
+				var godraysMaskShader = GodRaysDepthMaskShader;
+				postprocessing.godrayMaskUniforms = UniformsUtils.clone( godraysMaskShader.uniforms );
+				postprocessing.materialGodraysDepthMask = new ShaderMaterial( {
 
 					uniforms: postprocessing.godrayMaskUniforms,
 					vertexShader: godraysMaskShader.vertexShader,
@@ -214,9 +222,9 @@
 
 				} );
 
-				var godraysGenShader = THREE.GodRaysGenerateShader;
-				postprocessing.godrayGenUniforms = THREE.UniformsUtils.clone( godraysGenShader.uniforms );
-				postprocessing.materialGodraysGenerate = new THREE.ShaderMaterial( {
+				var godraysGenShader = GodRaysGenerateShader;
+				postprocessing.godrayGenUniforms = UniformsUtils.clone( godraysGenShader.uniforms );
+				postprocessing.materialGodraysGenerate = new ShaderMaterial( {
 
 					uniforms: postprocessing.godrayGenUniforms,
 					vertexShader: godraysGenShader.vertexShader,
@@ -224,9 +232,9 @@
 
 				} );
 
-				var godraysCombineShader = THREE.GodRaysCombineShader;
-				postprocessing.godrayCombineUniforms = THREE.UniformsUtils.clone( godraysCombineShader.uniforms );
-				postprocessing.materialGodraysCombine = new THREE.ShaderMaterial( {
+				var godraysCombineShader = GodRaysCombineShader;
+				postprocessing.godrayCombineUniforms = UniformsUtils.clone( godraysCombineShader.uniforms );
+				postprocessing.materialGodraysCombine = new ShaderMaterial( {
 
 					uniforms: postprocessing.godrayCombineUniforms,
 					vertexShader: godraysCombineShader.vertexShader,
@@ -234,9 +242,9 @@
 
 				} );
 
-				var godraysFakeSunShader = THREE.GodRaysFakeSunShader;
-				postprocessing.godraysFakeSunUniforms = THREE.UniformsUtils.clone( godraysFakeSunShader.uniforms );
-				postprocessing.materialGodraysFakeSun = new THREE.ShaderMaterial( {
+				var godraysFakeSunShader = GodRaysFakeSunShader;
+				postprocessing.godraysFakeSunUniforms = UniformsUtils.clone( godraysFakeSunShader.uniforms );
+				postprocessing.materialGodraysFakeSun = new ShaderMaterial( {
 
 					uniforms: postprocessing.godraysFakeSunUniforms,
 					vertexShader: godraysFakeSunShader.vertexShader,
@@ -249,8 +257,8 @@
 
 				postprocessing.godrayCombineUniforms.fGodRayIntensity.value = 0.75;
 
-				postprocessing.quad = new THREE.Mesh(
-					new THREE.PlaneBufferGeometry( 1.0, 1.0 ),
+				postprocessing.quad = new Mesh(
+					new PlaneBufferGeometry( 1.0, 1.0 ),
 					postprocessing.materialGodraysGenerate
 				);
 				postprocessing.quad.position.z = - 9900;

examples/webgl_postprocessing_masking.html

@@ -10,26 +10,26 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/ClearPass.js"></script>
-		<script src="js/postprocessing/TexturePass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				LinearFilter,
+				Mesh,
+				PerspectiveCamera,
+				RGBFormat,
+				Scene,
+				TextureLoader,
+				TorusBufferGeometry,
+				WebGLRenderer,
+				WebGLRenderTarget
+			} from "../build/three.module.js";
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { TexturePass } from './jsm/postprocessing/TexturePass.js';
+			import { ClearPass } from './jsm/postprocessing/ClearPass.js';
+			import { MaskPass, ClearMaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
 			var camera, composer, renderer;
 			var box, torus;
@@ -39,19 +39,19 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 10;
 
-				var scene1 = new THREE.Scene();
-				var scene2 = new THREE.Scene();
+				var scene1 = new Scene();
+				var scene2 = new Scene();
 
-				box = new THREE.Mesh( new THREE.BoxBufferGeometry( 4, 4, 4 ) );
+				box = new Mesh( new BoxBufferGeometry( 4, 4, 4 ) );
 				scene1.add( box );
 
-				torus = new THREE.Mesh( new THREE.TorusBufferGeometry( 3, 1, 16, 32 ) );
+				torus = new Mesh( new TorusBufferGeometry( 3, 1, 16, 32 ) );
 				scene2.add( torus );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setClearColor( 0xe0e0e0 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -60,32 +60,32 @@
 
 				//
 
-				var clearPass = new THREE.ClearPass();
+				var clearPass = new ClearPass();
 
-				var clearMaskPass = new THREE.ClearMaskPass();
+				var clearMaskPass = new ClearMaskPass();
 
-				var maskPass1 = new THREE.MaskPass( scene1, camera );
-				var maskPass2 = new THREE.MaskPass( scene2, camera );
+				var maskPass1 = new MaskPass( scene1, camera );
+				var maskPass2 = new MaskPass( scene2, camera );
 
-				var texture1 = new THREE.TextureLoader().load( 'textures/758px-Canestra_di_frutta_(Caravaggio).jpg' );
-				texture1.minFilter = THREE.LinearFilter;
-				var texture2 = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
+				var texture1 = new TextureLoader().load( 'textures/758px-Canestra_di_frutta_(Caravaggio).jpg' );
+				texture1.minFilter = LinearFilter;
+				var texture2 = new TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
 
-				var texturePass1 = new THREE.TexturePass( texture1 );
-				var texturePass2 = new THREE.TexturePass( texture2 );
+				var texturePass1 = new TexturePass( texture1 );
+				var texturePass2 = new TexturePass( texture2 );
 
-				var outputPass = new THREE.ShaderPass( THREE.CopyShader );
+				var outputPass = new ShaderPass( CopyShader );
 
 				var parameters = {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat,
+					minFilter: LinearFilter,
+					magFilter: LinearFilter,
+					format: RGBFormat,
 					stencilBuffer: true
 				};
 
-				var renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );
+				var renderTarget = new WebGLRenderTarget( window.innerWidth, window.innerHeight, parameters );
 
-				composer = new THREE.EffectComposer( renderer, renderTarget );
+				composer = new EffectComposer( renderer, renderTarget );
 				composer.addPass( clearPass );
 				composer.addPass( maskPass1 );
 				composer.addPass( texturePass1 );

examples/webgl_postprocessing_outline.html

@@ -7,44 +7,55 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/OBJLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FXAAShader.js"></script>
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/OutlinePass.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Outline Pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a><br/><br/>
 		</div>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				DirectionalLight,
+				DoubleSide,
+				Group,
+				LoadingManager,
+				Mesh,
+				MeshLambertMaterial,
+				MeshPhongMaterial,
+				Object3D,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Raycaster,
+				RepeatWrapping,
+				Scene,
+				SphereBufferGeometry,
+				TextureLoader,
+				TorusBufferGeometry,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { OutlinePass } from './jsm/postprocessing/OutlinePass.js';
+			import { FXAAShader } from './jsm/shaders/FXAAShader.js';
 
 			var container, stats;
 			var camera, scene, renderer, controls;
-			var raycaster = new THREE.Raycaster();
+			var raycaster = new Raycaster();
 
-			var mouse = new THREE.Vector2();
+			var mouse = new Vector2();
 			var selectedObjects = [];
 
 			var composer, effectFXAA, outlinePass;
-			var obj3d = new THREE.Object3D();
+			var obj3d = new Object3D();
 
-			var group = new THREE.Group();
+			var group = new Group();
 
 			var params = {
 				edgeStrength: 3.0,
@@ -57,7 +68,7 @@
 
 			// Init gui
 
-			var gui = new dat.GUI( { width: 300 } );
+			var gui = new GUI( { width: 300 } );
 
 			gui.add( params, 'edgeStrength', 0.01, 10 ).onChange( function ( value ) {
 
@@ -123,18 +134,18 @@
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.shadowMap.enabled = true;
 				// todo - support pixelRatio in this demo
 				renderer.setSize( width, height );
 				document.body.appendChild( renderer.domElement );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 100 );
+				camera = new PerspectiveCamera( 45, width / height, 0.1, 100 );
 				camera.position.set( 0, 0, 8 );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 5;
 				controls.maxDistance = 20;
 				controls.enablePan = false;
@@ -143,9 +154,9 @@
 
 				//
 
-				scene.add( new THREE.AmbientLight( 0xaaaaaa, 0.2 ) );
+				scene.add( new AmbientLight( 0xaaaaaa, 0.2 ) );
 
-				var light = new THREE.DirectionalLight( 0xddffdd, 0.6 );
+				var light = new DirectionalLight( 0xddffdd, 0.6 );
 				light.position.set( 1, 1, 1 );
 
 				light.castShadow = true;
@@ -166,7 +177,7 @@
 
 				// model
 
-				var manager = new THREE.LoadingManager();
+				var manager = new LoadingManager();
 
 				manager.onProgress = function ( item, loaded, total ) {
 
@@ -174,20 +185,20 @@
 
 				};
 
-				var loader = new THREE.OBJLoader( manager );
+				var loader = new OBJLoader( manager );
 				loader.load( 'models/obj/tree.obj', function ( object ) {
 
 					var scale = 1.0;
 
 					object.traverse( function ( child ) {
 
-						if ( child instanceof THREE.Mesh ) {
+						if ( child instanceof Mesh ) {
 
 							child.geometry.center();
 							child.geometry.computeBoundingSphere();
 							scale = 0.2 * child.geometry.boundingSphere.radius;
 
-							var phongMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 5 } );
+							var phongMaterial = new MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 5 } );
 							child.material = phongMaterial;
 							child.receiveShadow = true;
 							child.castShadow = true;
@@ -208,14 +219,14 @@
 
 				//
 
-				var geometry = new THREE.SphereBufferGeometry( 3, 48, 24 );
+				var geometry = new SphereBufferGeometry( 3, 48, 24 );
 
 				for ( var i = 0; i < 20; i ++ ) {
 
-					var material = new THREE.MeshLambertMaterial();
+					var material = new MeshLambertMaterial();
 					material.color.setHSL( Math.random(), 1.0, 0.3 );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 					mesh.position.x = Math.random() * 4 - 2;
 					mesh.position.y = Math.random() * 4 - 2;
 					mesh.position.z = Math.random() * 4 - 2;
@@ -226,18 +237,18 @@
 
 				}
 
-				var floorMaterial = new THREE.MeshLambertMaterial( { side: THREE.DoubleSide } );
+				var floorMaterial = new MeshLambertMaterial( { side: DoubleSide } );
 
-				var floorGeometry = new THREE.PlaneBufferGeometry( 12, 12 );
-				var floorMesh = new THREE.Mesh( floorGeometry, floorMaterial );
+				var floorGeometry = new PlaneBufferGeometry( 12, 12 );
+				var floorMesh = new Mesh( floorGeometry, floorMaterial );
 				floorMesh.rotation.x -= Math.PI * 0.5;
 				floorMesh.position.y -= 1.5;
 				group.add( floorMesh );
 				floorMesh.receiveShadow = true;
 
-				var geometry = new THREE.TorusBufferGeometry( 1, 0.3, 16, 100 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffaaff } );
-				var torus = new THREE.Mesh( geometry, material );
+				var geometry = new TorusBufferGeometry( 1, 0.3, 16, 100 );
+				var material = new MeshPhongMaterial( { color: 0xffaaff } );
+				var torus = new Mesh( geometry, material );
 				torus.position.z = - 4;
 				group.add( torus );
 				torus.receiveShadow = true;
@@ -250,27 +261,27 @@
 
 				// postprocessing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var renderPass = new THREE.RenderPass( scene, camera );
+				var renderPass = new RenderPass( scene, camera );
 				composer.addPass( renderPass );
 
-				outlinePass = new THREE.OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );
+				outlinePass = new OutlinePass( new Vector2( window.innerWidth, window.innerHeight ), scene, camera );
 				composer.addPass( outlinePass );
 
 				var onLoad = function ( texture ) {
 
 					outlinePass.patternTexture = texture;
-					texture.wrapS = THREE.RepeatWrapping;
-					texture.wrapT = THREE.RepeatWrapping;
+					texture.wrapS = RepeatWrapping;
+					texture.wrapT = RepeatWrapping;
 
 				};
 
-				var loader = new THREE.TextureLoader();
+				var loader = new TextureLoader();
 
 				loader.load( 'textures/tri_pattern.jpg', onLoad );
 
-				effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
+				effectFXAA = new ShaderPass( FXAAShader );
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
 				composer.addPass( effectFXAA );
 

examples/webgl_postprocessing_pixel.html

@@ -8,23 +8,39 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/PixelShader.js"></script>
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/controls/TrackballControls.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
 		<div id="container"></div>
 
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - pixel shader by <a href="http://wongbryan.github.io">wongbryan</a>
 		</div>
 
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				ConeBufferGeometry,
+				DirectionalLight,
+				Group,
+				HemisphereLight,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				TetrahedronBufferGeometry,
+				TorusKnotBufferGeometry,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { PixelShader } from './jsm/shaders/PixelShader.js';
+
 
 			var camera, scene, renderer, gui, composer, controls;
 			var pixelPass, params;
@@ -53,52 +69,52 @@
 			function init() {
 
 				var container = document.getElementById( 'container' );
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 0, 30 );
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 				controls.rotateSpeed = 2.0;
 				controls.panSpeed = 0.8;
 				controls.zoomSpeed = 1.5;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var hemisphereLight = new THREE.HemisphereLight( 0xfceafc, 0x000000, .8 );
+				var hemisphereLight = new HemisphereLight( 0xfceafc, 0x000000, .8 );
 				scene.add( hemisphereLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, .5 );
+				var dirLight = new DirectionalLight( 0xffffff, .5 );
 				dirLight.position.set( 150, 75, 150 );
 				scene.add( dirLight );
 
-				var dirLight2 = new THREE.DirectionalLight( 0xffffff, .2 );
+				var dirLight2 = new DirectionalLight( 0xffffff, .2 );
 				dirLight2.position.set( - 150, 75, - 150 );
 				scene.add( dirLight2 );
 
-				var dirLight3 = new THREE.DirectionalLight( 0xffffff, .1 );
+				var dirLight3 = new DirectionalLight( 0xffffff, .1 );
 				dirLight3.position.set( 0, 125, 0 );
 				scene.add( dirLight3 );
 
 				var geometries = [
-					new THREE.SphereBufferGeometry( 1, 64, 64 ),
-					new THREE.BoxBufferGeometry( 1, 1, 1 ),
-					new THREE.ConeBufferGeometry( 1, 1, 32 ),
-					new THREE.TetrahedronBufferGeometry( 1 ),
-					new THREE.TorusKnotBufferGeometry( 1, .4 )
+					new SphereBufferGeometry( 1, 64, 64 ),
+					new BoxBufferGeometry( 1, 1, 1 ),
+					new ConeBufferGeometry( 1, 1, 32 ),
+					new TetrahedronBufferGeometry( 1 ),
+					new TorusKnotBufferGeometry( 1, .4 )
 				];
 
-				group = new THREE.Group();
+				group = new Group();
 
 				for ( var i = 0; i < 25; i ++ ) {
 
 					var geom = geometries[ Math.floor( Math.random() * geometries.length ) ];
-					var color = new THREE.Color();
+					var color = new Color();
 					color.setHSL( Math.random(), .7 + .2 * Math.random(), .5 + .1 * Math.random() );
-					var mat = new THREE.MeshPhongMaterial( { color: color, shininess: 200 } );
-					var mesh = new THREE.Mesh( geom, mat );
+					var mat = new MeshPhongMaterial( { color: color, shininess: 200 } );
+					var mesh = new Mesh( geom, mat );
 					var s = 4 + Math.random() * 10;
 					mesh.scale.set( s, s, s );
 
@@ -111,11 +127,11 @@
 
 				scene.add( group );
 
-				composer = new THREE.EffectComposer( renderer );
-				composer.addPass( new THREE.RenderPass( scene, camera ) );
+				composer = new EffectComposer( renderer );
+				composer.addPass( new RenderPass( scene, camera ) );
 
-				pixelPass = new THREE.ShaderPass( THREE.PixelShader );
-				pixelPass.uniforms[ "resolution" ].value = new THREE.Vector2( window.innerWidth, window.innerHeight );
+				pixelPass = new ShaderPass( PixelShader );
+				pixelPass.uniforms[ "resolution" ].value = new Vector2( window.innerWidth, window.innerHeight );
 				pixelPass.uniforms[ "resolution" ].value.multiplyScalar( window.devicePixelRatio );
 				composer.addPass( pixelPass );
 
@@ -125,7 +141,7 @@
 					pixelSize: 16,
 					postprocessing: true
 				};
-				gui = new dat.GUI();
+				gui = new GUI();
 				gui.add( params, 'pixelSize' ).min( 2 ).max( 32 ).step( 2 );
 				gui.add( params, 'postprocessing' );
 

examples/webgl_postprocessing_procedural.html

@@ -54,12 +54,18 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-
-		<script>
+		<script type="module">
+			import {
+				Mesh,
+				OrthographicCamera,
+				PlaneBufferGeometry,
+				Scene,
+				ShaderMaterial,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			var postCamera, postScene, renderer;
 			var postMaterial, noiseRandom1DMaterial, noiseRandom2DMaterial, noiseRandom3DMaterial, postQuad;
@@ -74,7 +80,7 @@
 			// Init gui
 			function initGui() {
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 				gui.add( params, 'procedure', [ 'noiseRandom1D', 'noiseRandom2D', 'noiseRandom3D' ] );
 
 			}
@@ -83,7 +89,7 @@
 
 				var container = document.getElementById( "container" );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -92,23 +98,23 @@
 				container.appendChild( stats.dom );
 
 				// Setup post processing stage
-				postCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-				noiseRandom1DMaterial = new THREE.ShaderMaterial( {
+				postCamera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+				noiseRandom1DMaterial = new ShaderMaterial( {
 					vertexShader: document.querySelector( '#procedural-vert' ).textContent.trim(),
 					fragmentShader: document.querySelector( '#noiseRandom1D-frag' ).textContent.trim()
 				} );
-				noiseRandom2DMaterial = new THREE.ShaderMaterial( {
+				noiseRandom2DMaterial = new ShaderMaterial( {
 					vertexShader: document.querySelector( '#procedural-vert' ).textContent.trim(),
 					fragmentShader: document.querySelector( '#noiseRandom2D-frag' ).textContent.trim()
 				} );
-				noiseRandom3DMaterial = new THREE.ShaderMaterial( {
+				noiseRandom3DMaterial = new ShaderMaterial( {
 					vertexShader: document.querySelector( '#procedural-vert' ).textContent.trim(),
 					fragmentShader: document.querySelector( '#noiseRandom3D-frag' ).textContent.trim()
 				} );
 				postMaterial = noiseRandom3DMaterial;
-				var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
-				postQuad = new THREE.Mesh( postPlane, postMaterial );
-				postScene = new THREE.Scene();
+				var postPlane = new PlaneBufferGeometry( 2, 2 );
+				postQuad = new Mesh( postPlane, postMaterial );
+				postScene = new Scene();
 				postScene.add( postQuad );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_postprocessing_rgb_halftone.html

@@ -1,205 +1,204 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl</title>
+		<title>three.js webgl - postprocessing RGB Halftone</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
-		<script src="../build/three.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/HalftonePass.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/HalftoneShader.js"></script>
-		<script src="js/shaders/DepthLimitedBlurShader.js"></script>
-		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src='js/libs/stats.min.js'></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - RGB Halftone post-processing by
 			<a href="https://github.com/meatbags" target="_blank">Xavier Burrow</a>
 		</div>
 
-		<script>
-
-		if ( WEBGL.isWebGLAvailable() === false ) {
-
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-		}
-
-		// setup
-		var renderer, clock, camera, controls, stats, rotationSpeed;
-
-		renderer = new THREE.WebGLRenderer();
-		renderer.setPixelRatio( window.devicePixelRatio );
-		renderer.setSize( window.innerWidth, window.innerHeight );
-
-		clock = new THREE.Clock();
-
-		camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
-		camera.position.z = 12;
-
-		rotationSpeed = Math.PI / 64;
-		stats = new Stats();
-
-		document.body.appendChild( renderer.domElement );
-		document.body.appendChild( stats.dom );
-
-		// camera controls
-		controls = new THREE.OrbitControls( camera, renderer.domElement );
-		controls.target.set( 0, 0, 0 );
-		controls.update();
-
-		// scene
-		var scene, group, mat, floor, light;
-
-		scene = new THREE.Scene();
-		scene.background = new THREE.Color( 0x444444 );
-		group = new THREE.Group();
-		floor = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 1, 100 ), new THREE.MeshPhongMaterial( {} ) );
-		floor.position.y = - 10;
-		light = new THREE.PointLight( 0xffffff, 1.0, 50, 2 );
-		light.position.y = 2;
-		group.add( floor, light );
-		scene.add( group );
-
-		mat = new THREE.ShaderMaterial( {
-
-			uniforms: {},
-
-			vertexShader: [
-				"varying vec2 vUV;",
-				"varying vec3 vNormal;",
-
-				"void main() {",
-
-				"vUV = uv;",
-				"vNormal = vec3( normal );",
-				"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
-				"}"
-			].join( "\n" ),
-
-			fragmentShader: [
-				"varying vec2 vUV;",
-				"varying vec3 vNormal;",
-
-				"void main() {",
-
-				"vec4 c = vec4( abs( vNormal ) + vec3( vUV, 0.0 ), 0.0 );",
-				"gl_FragColor = c;",
-
-				"}"
-			].join( "\n" )
-		} );
-
-		for ( var i = 0; i < 50; ++ i ) {
-
-			// fill scene with coloured cubes
-			var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 2, 2, 2 ), mat );
-			mesh.position.set( Math.random() * 16 - 8, Math.random() * 16 - 8, Math.random() * 16 - 8 );
-			mesh.rotation.set( Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2 );
-			group.add( mesh );
-
-		}
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Clock,
+				Color,
+				Group,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				ShaderMaterial,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { HalftonePass } from './jsm/postprocessing/HalftonePass.js';
+
+			// setup
+
+			var renderer, clock, camera, controls, stats, rotationSpeed;
+
+			renderer = new WebGLRenderer();
+			renderer.setPixelRatio( window.devicePixelRatio );
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
-		// post-processing
-		var composer, renderPass, halftonePass, params;
+			clock = new Clock();
 
-		composer = new THREE.EffectComposer( renderer );
-		renderPass = new THREE.RenderPass( scene, camera );
-		params = {
-			shape: 1,
-			radius: 4,
-			rotateR: Math.PI / 12,
-			rotateB: Math.PI / 12 * 2,
-			rotateG: Math.PI / 12 * 3,
-			scatter: 0,
-			blending: 1,
-			blendingMode: 1,
-			greyscale: false,
-			disable: false
-		};
-		halftonePass = new THREE.HalftonePass( window.innerWidth, window.innerHeight, params );
-		composer.addPass( renderPass );
-		composer.addPass( halftonePass );
+			camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+			camera.position.z = 12;
 
-		window.onresize = function () {
+			rotationSpeed = Math.PI / 64;
+			stats = new Stats();
 
-			// resize composer
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			composer.setSize( window.innerWidth, window.innerHeight );
-			camera.aspect = window.innerWidth / window.innerHeight;
-			camera.updateProjectionMatrix();
-
-		};
-
-		// GUI
-		var controller, gui, onGUIChange;
-
-		controller = {
-			radius: halftonePass.uniforms[ "radius" ].value,
-			rotateR: halftonePass.uniforms[ "rotateR" ].value / ( Math.PI / 180 ),
-			rotateG: halftonePass.uniforms[ "rotateG" ].value / ( Math.PI / 180 ),
-			rotateB: halftonePass.uniforms[ "rotateB" ].value / ( Math.PI / 180 ),
-			scatter: halftonePass.uniforms[ "scatter" ].value,
-			shape: halftonePass.uniforms[ "shape" ].value,
-			greyscale: halftonePass.uniforms[ "greyscale" ].value,
-			blending: halftonePass.uniforms[ "blending" ].value,
-			blendingMode: halftonePass.uniforms[ "blendingMode" ].value,
-			disable: halftonePass.uniforms[ "disable" ].value
-		};
-
-		onGUIChange = function () {
-
-			// update uniforms
-			halftonePass.uniforms[ "radius" ].value = controller.radius;
-			halftonePass.uniforms[ "rotateR" ].value = controller.rotateR * ( Math.PI / 180 );
-			halftonePass.uniforms[ "rotateG" ].value = controller.rotateG * ( Math.PI / 180 );
-			halftonePass.uniforms[ "rotateB" ].value = controller.rotateB * ( Math.PI / 180 );
-			halftonePass.uniforms[ "scatter" ].value = controller.scatter;
-			halftonePass.uniforms[ "shape" ].value = controller.shape;
-			halftonePass.uniforms[ "greyscale" ].value = controller.greyscale;
-			halftonePass.uniforms[ "blending" ].value = controller.blending;
-			halftonePass.uniforms[ "blendingMode" ].value = controller.blendingMode;
-			halftonePass.uniforms[ "disable" ].value = controller.disable;
-
-		};
-
-		gui = new dat.GUI();
-		gui.add( controller, 'shape', { 'Dot': 1, 'Ellipse': 2, 'Line': 3, 'Square': 4 } ).onChange( onGUIChange );
-		gui.add( controller, 'radius', 1, 25 ).onChange( onGUIChange );
-		gui.add( controller, 'rotateR', 0, 90 ).onChange( onGUIChange );
-		gui.add( controller, 'rotateG', 0, 90 ).onChange( onGUIChange );
-		gui.add( controller, 'rotateB', 0, 90 ).onChange( onGUIChange );
-		gui.add( controller, 'scatter', 0, 1, 0.01 ).onChange( onGUIChange );
-		gui.add( controller, 'greyscale' ).onChange( onGUIChange );
-		gui.add( controller, 'blending', 0, 1, 0.01 ).onChange( onGUIChange );
-		gui.add( controller, 'blendingMode', { 'Linear': 1, 'Multiply': 2, 'Add': 3, 'Lighter': 4, 'Darker': 5 } ).onChange( onGUIChange );
-		gui.add( controller, 'disable' ).onChange( onGUIChange );
-
-		function loop() {
-
-			// demo loop
-			var delta = clock.getDelta();
-			requestAnimationFrame( loop );
-			stats.update();
-			group.rotation.y += delta * rotationSpeed;
-			composer.render( delta );
-
-		}
-
-		loop();
+			document.body.appendChild( renderer.domElement );
+			document.body.appendChild( stats.dom );
+
+			// camera controls
+			controls = new OrbitControls( camera, renderer.domElement );
+			controls.target.set( 0, 0, 0 );
+			controls.update();
+
+			// scene
+			var scene, group, mat, floor, light;
+
+			scene = new Scene();
+			scene.background = new Color( 0x444444 );
+			group = new Group();
+			floor = new Mesh( new BoxBufferGeometry( 100, 1, 100 ), new MeshPhongMaterial( {} ) );
+			floor.position.y = - 10;
+			light = new PointLight( 0xffffff, 1.0, 50, 2 );
+			light.position.y = 2;
+			group.add( floor, light );
+			scene.add( group );
+
+			mat = new ShaderMaterial( {
+
+				uniforms: {},
+
+				vertexShader: [
+					"varying vec2 vUV;",
+					"varying vec3 vNormal;",
+
+					"void main() {",
+
+					"vUV = uv;",
+					"vNormal = vec3( normal );",
+					"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+					"}"
+				].join( "\n" ),
+
+				fragmentShader: [
+					"varying vec2 vUV;",
+					"varying vec3 vNormal;",
+
+					"void main() {",
+
+					"vec4 c = vec4( abs( vNormal ) + vec3( vUV, 0.0 ), 0.0 );",
+					"gl_FragColor = c;",
+
+					"}"
+				].join( "\n" )
+			} );
+
+			for ( var i = 0; i < 50; ++ i ) {
+
+				// fill scene with coloured cubes
+				var mesh = new Mesh( new BoxBufferGeometry( 2, 2, 2 ), mat );
+				mesh.position.set( Math.random() * 16 - 8, Math.random() * 16 - 8, Math.random() * 16 - 8 );
+				mesh.rotation.set( Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2 );
+				group.add( mesh );
+
+			}
+
+			// post-processing
+			var composer, renderPass, halftonePass, params;
+
+			composer = new EffectComposer( renderer );
+			renderPass = new RenderPass( scene, camera );
+			params = {
+				shape: 1,
+				radius: 4,
+				rotateR: Math.PI / 12,
+				rotateB: Math.PI / 12 * 2,
+				rotateG: Math.PI / 12 * 3,
+				scatter: 0,
+				blending: 1,
+				blendingMode: 1,
+				greyscale: false,
+				disable: false
+			};
+			halftonePass = new HalftonePass( window.innerWidth, window.innerHeight, params );
+			composer.addPass( renderPass );
+			composer.addPass( halftonePass );
+
+			window.onresize = function () {
+
+				// resize composer
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				composer.setSize( window.innerWidth, window.innerHeight );
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+			};
+
+			// GUI
+			var controller, gui, onGUIChange;
+
+			controller = {
+				radius: halftonePass.uniforms[ "radius" ].value,
+				rotateR: halftonePass.uniforms[ "rotateR" ].value / ( Math.PI / 180 ),
+				rotateG: halftonePass.uniforms[ "rotateG" ].value / ( Math.PI / 180 ),
+				rotateB: halftonePass.uniforms[ "rotateB" ].value / ( Math.PI / 180 ),
+				scatter: halftonePass.uniforms[ "scatter" ].value,
+				shape: halftonePass.uniforms[ "shape" ].value,
+				greyscale: halftonePass.uniforms[ "greyscale" ].value,
+				blending: halftonePass.uniforms[ "blending" ].value,
+				blendingMode: halftonePass.uniforms[ "blendingMode" ].value,
+				disable: halftonePass.uniforms[ "disable" ].value
+			};
+
+			onGUIChange = function () {
+
+				// update uniforms
+				halftonePass.uniforms[ "radius" ].value = controller.radius;
+				halftonePass.uniforms[ "rotateR" ].value = controller.rotateR * ( Math.PI / 180 );
+				halftonePass.uniforms[ "rotateG" ].value = controller.rotateG * ( Math.PI / 180 );
+				halftonePass.uniforms[ "rotateB" ].value = controller.rotateB * ( Math.PI / 180 );
+				halftonePass.uniforms[ "scatter" ].value = controller.scatter;
+				halftonePass.uniforms[ "shape" ].value = controller.shape;
+				halftonePass.uniforms[ "greyscale" ].value = controller.greyscale;
+				halftonePass.uniforms[ "blending" ].value = controller.blending;
+				halftonePass.uniforms[ "blendingMode" ].value = controller.blendingMode;
+				halftonePass.uniforms[ "disable" ].value = controller.disable;
+
+			};
+
+			gui = new GUI();
+			gui.add( controller, 'shape', { 'Dot': 1, 'Ellipse': 2, 'Line': 3, 'Square': 4 } ).onChange( onGUIChange );
+			gui.add( controller, 'radius', 1, 25 ).onChange( onGUIChange );
+			gui.add( controller, 'rotateR', 0, 90 ).onChange( onGUIChange );
+			gui.add( controller, 'rotateG', 0, 90 ).onChange( onGUIChange );
+			gui.add( controller, 'rotateB', 0, 90 ).onChange( onGUIChange );
+			gui.add( controller, 'scatter', 0, 1, 0.01 ).onChange( onGUIChange );
+			gui.add( controller, 'greyscale' ).onChange( onGUIChange );
+			gui.add( controller, 'blending', 0, 1, 0.01 ).onChange( onGUIChange );
+			gui.add( controller, 'blendingMode', { 'Linear': 1, 'Multiply': 2, 'Add': 3, 'Lighter': 4, 'Darker': 5 } ).onChange( onGUIChange );
+			gui.add( controller, 'disable' ).onChange( onGUIChange );
+
+			function loop() {
+
+				// demo loop
+				var delta = clock.getDelta();
+				requestAnimationFrame( loop );
+				stats.update();
+				group.rotation.y += delta * rotationSpeed;
+				composer.render( delta );
+
+			}
+
+			loop();
 
 
 		</script>

examples/webgl_postprocessing_sao.html

@@ -7,34 +7,30 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
-		<script src="../build/three.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/SAOPass.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/SAOShader.js"></script>
-		<script src="js/shaders/DepthLimitedBlurShader.js"></script>
-		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - Scalable Ambient Occlusion (SAO)<br/>
 			shader by <a href="http://clara.io">Ben Houston</a> / Post-processing pass by <a href="http://ludobaka.github.io">Ludobaka</a>
 		</div>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Mesh,
+				MeshStandardMaterial,
+				Object3D,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { SAOPass } from './jsm/postprocessing/SAOPass.js';
 
 			var container, stats;
 			var camera, scene, renderer;
@@ -53,51 +49,51 @@
 				var height = window.innerHeight || 1;
 				var devicePixelRatio = window.devicePixelRatio || 1;
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setClearColor( 0x000000 );
 				renderer.setPixelRatio( devicePixelRatio );
 				renderer.setSize( width, height );
 				document.body.appendChild( renderer.domElement );
 
-				camera = new THREE.PerspectiveCamera( 65, width / height, 3, 10 );
+				camera = new PerspectiveCamera( 65, width / height, 3, 10 );
 				camera.position.z = 7;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				group = new THREE.Object3D();
+				group = new Object3D();
 				scene.add( group );
 
-				var light = new THREE.PointLight( 0xddffdd, 0.8 );
+				var light = new PointLight( 0xddffdd, 0.8 );
 				light.position.z = 70;
 				light.position.y = - 70;
 				light.position.x = - 70;
 				scene.add( light );
 
-				var light2 = new THREE.PointLight( 0xffdddd, 0.8 );
+				var light2 = new PointLight( 0xffdddd, 0.8 );
 				light2.position.z = 70;
 				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
-				var light3 = new THREE.PointLight( 0xddddff, 0.8 );
+				var light3 = new PointLight( 0xddddff, 0.8 );
 				light3.position.z = 70;
 				light3.position.x = 70;
 				light3.position.y = - 70;
 				scene.add( light3 );
 
-				var light3 = new THREE.AmbientLight( 0xffffff, 0.05 );
+				var light3 = new AmbientLight( 0xffffff, 0.05 );
 				scene.add( light3 );
 
-				var geometry = new THREE.SphereBufferGeometry( 3, 48, 24 );
+				var geometry = new SphereBufferGeometry( 3, 48, 24 );
 
 				for ( var i = 0; i < 120; i ++ ) {
 
-					var material = new THREE.MeshStandardMaterial();
+					var material = new MeshStandardMaterial();
 					material.roughness = 0.5 * Math.random() + 0.25;
 					material.metalness = 0;
 					material.color.setHSL( Math.random(), 1.0, 0.3 );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 					mesh.position.x = Math.random() * 4 - 2;
 					mesh.position.y = Math.random() * 4 - 2;
 					mesh.position.z = Math.random() * 4 - 2;
@@ -113,20 +109,20 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				composer = new THREE.EffectComposer( renderer );
-				renderPass = new THREE.RenderPass( scene, camera );
+				composer = new EffectComposer( renderer );
+				renderPass = new RenderPass( scene, camera );
 				composer.addPass( renderPass );
-				saoPass = new THREE.SAOPass( scene, camera, false, true );
+				saoPass = new SAOPass( scene, camera, false, true );
 				composer.addPass( saoPass );
 
 				// Init gui
-				var gui = new dat.GUI();
+				var gui = new GUI();
 				gui.add( saoPass.params, 'output', {
-					'Beauty': THREE.SAOPass.OUTPUT.Beauty,
-					'Beauty+SAO': THREE.SAOPass.OUTPUT.Default,
-					'SAO': THREE.SAOPass.OUTPUT.SAO,
-					'Depth': THREE.SAOPass.OUTPUT.Depth,
-					'Normal': THREE.SAOPass.OUTPUT.Normal
+					'Beauty': SAOPass.OUTPUT.Beauty,
+					'Beauty+SAO': SAOPass.OUTPUT.Default,
+					'SAO': SAOPass.OUTPUT.SAO,
+					'Depth': SAOPass.OUTPUT.Depth,
+					'Normal': SAOPass.OUTPUT.Normal
 				} ).onChange( function ( value ) {
 
 					saoPass.params.output = parseInt( value );

examples/webgl_postprocessing_smaa.html

@@ -7,23 +7,28 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - post-processing SMAA
+		</div>
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/SMAAShader.js"></script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/SMAAPass.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-
-
-		<script>
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { SMAAPass } from './jsm/postprocessing/SMAAPass.js';
 
 			var camera, scene, renderer, composer, pass, stats;
 
@@ -34,7 +39,7 @@
 
 				var container = document.getElementById( "container" );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -44,33 +49,33 @@
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 300;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+				var geometry = new BoxBufferGeometry( 120, 120, 120 );
+				var material = new MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				mesh.position.x = - 100;
 				scene.add( mesh );
 
-				var texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
+				var texture = new TextureLoader().load( "textures/brick_diffuse.jpg" );
 				texture.anisotropy = 4;
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				var material = new MeshBasicMaterial( { map: texture } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				mesh.position.x = 100;
 				scene.add( mesh );
 
 				// postprocessing
 
-				composer = new THREE.EffectComposer( renderer );
-				composer.addPass( new THREE.RenderPass( scene, camera ) );
+				composer = new EffectComposer( renderer );
+				composer.addPass( new RenderPass( scene, camera ) );
 
-				pass = new THREE.SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() );
+				pass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() );
 				composer.addPass( pass );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_postprocessing_ssaa.html

@@ -15,20 +15,25 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/SSAARenderPass.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Mesh,
+				MeshBasicMaterial,
+				NearestFilter,
+				PerspectiveCamera,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { SSAARenderPass } from './jsm/postprocessing/SSAARenderPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
 			var camera, scene, renderer, composer, copyPass, ssaaRenderPass;
 			var gui, stats;
@@ -46,7 +51,7 @@
 
 				if ( gui ) gui.destroy();
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				gui.add( param, 'sampleLevel', {
 					'Level 0: 1 Sample': 0,
@@ -65,7 +70,7 @@
 
 				var container = document.getElementById( "container" );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -73,39 +78,39 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 300;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+				var geometry = new BoxBufferGeometry( 120, 120, 120 );
+				var material = new MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				mesh.position.x = - 100;
 				scene.add( mesh );
 
-				var texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
-				texture.minFilter = THREE.NearestFilter;
-				texture.magFilter = THREE.NearestFilter;
+				var texture = new TextureLoader().load( "textures/brick_diffuse.jpg" );
+				texture.minFilter = NearestFilter;
+				texture.magFilter = NearestFilter;
 				texture.anisotropy = 1;
 				texture.generateMipmaps = false;
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				var material = new MeshBasicMaterial( { map: texture } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				mesh.position.x = 100;
 				scene.add( mesh );
 
 				// postprocessing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				ssaaRenderPass = new THREE.SSAARenderPass( scene, camera );
+				ssaaRenderPass = new SSAARenderPass( scene, camera );
 				ssaaRenderPass.unbiased = false;
 				composer.addPass( ssaaRenderPass );
 
-				copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				copyPass = new ShaderPass( CopyShader );
 				composer.addPass( copyPass );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_postprocessing_ssaa_unbiased.html

@@ -15,20 +15,28 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/SSAARenderPass.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				Group,
+				Math as _Math,
+				Mesh,
+				MeshStandardMaterial,
+				OrthographicCamera,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { SSAARenderPass } from './jsm/postprocessing/SSAARenderPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
 			var scene, renderer, composer, copyPass;
 			var cameraP, ssaaRenderPassP;
@@ -55,7 +63,7 @@
 
 				if ( gui ) gui.destroy();
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				gui.add( params, "unbiased" );
 				gui.add( params, "renderToScreen" );
@@ -85,7 +93,7 @@
 				var aspect = width / height;
 				var devicePixelRatio = window.devicePixelRatio || 1;
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( devicePixelRatio );
 				renderer.setSize( width, height );
 				document.body.appendChild( renderer.domElement );
@@ -93,53 +101,53 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				cameraP = new THREE.PerspectiveCamera( 65, aspect, 3, 10 );
+				cameraP = new PerspectiveCamera( 65, aspect, 3, 10 );
 				cameraP.position.z = 7;
 
-				cameraO = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 3, 10 );
+				cameraO = new OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 3, 10 );
 				cameraO.position.z = 7;
 
-				var fov = THREE.Math.degToRad( cameraP.fov );
+				var fov = _Math.degToRad( cameraP.fov );
 				var hyperfocus = ( cameraP.near + cameraP.far ) / 2;
 				var _height = 2 * Math.tan( fov / 2 ) * hyperfocus;
 				cameraO.zoom = height / _height;
 
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var group = new THREE.Group();
+				var group = new Group();
 				scene.add( group );
 
-				var light = new THREE.PointLight( 0xddffdd, 1.0 );
+				var light = new PointLight( 0xddffdd, 1.0 );
 				light.position.z = 70;
 				light.position.y = - 70;
 				light.position.x = - 70;
 				scene.add( light );
 
-				var light2 = new THREE.PointLight( 0xffdddd, 1.0 );
+				var light2 = new PointLight( 0xffdddd, 1.0 );
 				light2.position.z = 70;
 				light2.position.x = - 70;
 				light2.position.y = 70;
 				scene.add( light2 );
 
-				var light3 = new THREE.PointLight( 0xddddff, 1.0 );
+				var light3 = new PointLight( 0xddddff, 1.0 );
 				light3.position.z = 70;
 				light3.position.x = 70;
 				light3.position.y = - 70;
 				scene.add( light3 );
 
-				var light3 = new THREE.AmbientLight( 0xffffff, 0.05 );
+				var light3 = new AmbientLight( 0xffffff, 0.05 );
 				scene.add( light3 );
 
-				var geometry = new THREE.SphereBufferGeometry( 3, 48, 24 );
+				var geometry = new SphereBufferGeometry( 3, 48, 24 );
 				for ( var i = 0; i < 120; i ++ ) {
 
-					var material = new THREE.MeshStandardMaterial();
+					var material = new MeshStandardMaterial();
 					material.roughness = 0.5 * Math.random() + 0.25;
 					material.metalness = 0;
 					material.color.setHSL( Math.random(), 1.0, 0.3 );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 					mesh.position.x = Math.random() * 4 - 2;
 					mesh.position.y = Math.random() * 4 - 2;
 					mesh.position.z = Math.random() * 4 - 2;
@@ -154,13 +162,13 @@
 
 				// postprocessing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 				composer.setPixelRatio( 1 ); // ensure pixel ratio is always 1 for performance reasons
-				ssaaRenderPassP = new THREE.SSAARenderPass( scene, cameraP );
+				ssaaRenderPassP = new SSAARenderPass( scene, cameraP );
 				composer.addPass( ssaaRenderPassP );
-				ssaaRenderPassO = new THREE.SSAARenderPass( scene, cameraO );
+				ssaaRenderPassO = new SSAARenderPass( scene, cameraO );
 				composer.addPass( ssaaRenderPassO );
-				copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				copyPass = new ShaderPass( CopyShader );
 				composer.addPass( copyPass );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_postprocessing_ssao.html

@@ -12,20 +12,6 @@
 		</style>
 	</head>
 	<body>
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/SSAOShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/SSAOPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/math/SimplexNoise.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - screen space ambient occlusion<br/>
 
@@ -35,13 +21,25 @@
 			</div>
 		</div>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				DirectionalLight,
+				Group,
+				HemisphereLight,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { SSAOPass } from './jsm/postprocessing/SSAOPass.js';
 
 			var container, stats;
 			var camera, scene, renderer;
@@ -56,7 +54,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
@@ -67,27 +65,27 @@
 
 				}
 
-				camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 100, 700 );
+				camera = new PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 100, 700 );
 				camera.position.z = 500;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xaaaaaa );
+				scene = new Scene();
+				scene.background = new Color( 0xaaaaaa );
 
-				scene.add( new THREE.DirectionalLight() );
-				scene.add( new THREE.HemisphereLight() );
+				scene.add( new DirectionalLight() );
+				scene.add( new HemisphereLight() );
 
-				group = new THREE.Group();
+				group = new Group();
 				scene.add( group );
 
-				var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
+				var geometry = new BoxBufferGeometry( 10, 10, 10 );
 
 				for ( var i = 0; i < 100; i ++ ) {
 
-					var material = new THREE.MeshLambertMaterial( {
+					var material = new MeshLambertMaterial( {
 						color: Math.random() * 0xffffff
 					} );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 					mesh.position.x = Math.random() * 400 - 200;
 					mesh.position.y = Math.random() * 400 - 200;
 					mesh.position.z = Math.random() * 400 - 200;
@@ -106,22 +104,22 @@
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var ssaoPass = new THREE.SSAOPass( scene, camera, width, height );
+				var ssaoPass = new SSAOPass( scene, camera, width, height );
 				ssaoPass.kernelRadius = 16;
 				composer.addPass( ssaoPass );
 
 				// Init gui
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( ssaoPass, 'output', {
-					'Default': THREE.SSAOPass.OUTPUT.Default,
-					'SSAO Only': THREE.SSAOPass.OUTPUT.SSAO,
-					'SSAO Only + Blur': THREE.SSAOPass.OUTPUT.Blur,
-					'Beauty': THREE.SSAOPass.OUTPUT.Beauty,
-					'Depth': THREE.SSAOPass.OUTPUT.Depth,
-					'Normal': THREE.SSAOPass.OUTPUT.Normal
+					'Default': SSAOPass.OUTPUT.Default,
+					'SSAO Only': SSAOPass.OUTPUT.SSAO,
+					'SSAO Only + Blur': SSAOPass.OUTPUT.Blur,
+					'Beauty': SSAOPass.OUTPUT.Beauty,
+					'Depth': SSAOPass.OUTPUT.Depth,
+					'Normal': SSAOPass.OUTPUT.Normal
 				} ).onChange( function ( value ) {
 
 					ssaoPass.output = parseInt( value );

examples/webgl_postprocessing_taa.html

@@ -16,21 +16,26 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/SSAARenderPass.js"></script>
-		<script src="js/postprocessing/TAARenderPass.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Mesh,
+				MeshBasicMaterial,
+				NearestFilter,
+				PerspectiveCamera,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { TAARenderPass } from './jsm/postprocessing/TAARenderPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
 			var camera, scene, renderer, composer, copyPass, taaRenderPass, renderPass;
 			var gui, stats;
@@ -47,7 +52,7 @@
 
 				if ( gui ) gui.destroy();
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				gui.add( param, 'TAAEnabled', {
 					'Disabled': '0',
@@ -88,7 +93,7 @@
 
 				var container = document.getElementById( "container" );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -98,43 +103,43 @@
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 300;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
+				var geometry = new BoxBufferGeometry( 120, 120, 120 );
+				var material = new MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				mesh.position.x = - 100;
 				scene.add( mesh );
 
-				var texture = new THREE.TextureLoader().load( "textures/brick_diffuse.jpg" );
-				texture.minFilter = THREE.NearestFilter;
-				texture.magFilter = THREE.NearestFilter;
+				var texture = new TextureLoader().load( "textures/brick_diffuse.jpg" );
+				texture.minFilter = NearestFilter;
+				texture.magFilter = NearestFilter;
 				texture.anisotropy = 1;
 				texture.generateMipmaps = false;
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				var material = new MeshBasicMaterial( { map: texture } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				mesh.position.x = 100;
 				scene.add( mesh );
 
 				// postprocessing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				taaRenderPass = new THREE.TAARenderPass( scene, camera );
+				taaRenderPass = new TAARenderPass( scene, camera );
 				taaRenderPass.unbiased = false;
 				composer.addPass( taaRenderPass );
 
-				renderPass = new THREE.RenderPass( scene, camera );
+				renderPass = new RenderPass( scene, camera );
 				renderPass.enabled = false;
 				composer.addPass( renderPass );
 
-				copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				copyPass = new ShaderPass( CopyShader );
 				composer.addPass( copyPass );
 
 				window.addEventListener( 'resize', onWindowResize, false );

examples/webgl_postprocessing_unreal_bloom.html

@@ -14,28 +14,34 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>
 			<p>
 				This Bloom Pass is inspired by the bloom pass of the Unreal Engine. It creates a mip map chain of bloom textures and blur them
-				with different radii. Because of the weigted combination of mips, and since larger blurs are done on higher mips, this bloom
+				with different radii.<br /> Because of the weigted combination of mips, and since larger blurs are done on higher mips, this bloom
 				is better in quality and performance.
 			</p>
 			Model: <a href="https://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">Primary Ion Drive</a> by
 			<a href="http://mjmurdock.com/" target="_blank" rel="noopener">Mike Murdock</a>, CC Attribution.
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/LuminosityHighPassShader.js"></script>
-		<script src="js/postprocessing/UnrealBloomPass.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				AnimationMixer,
+				Clock,
+				PerspectiveCamera,
+				PointLight,
+				ReinhardToneMapping,
+				Scene,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { UnrealBloomPass } from './jsm/postprocessing/UnrealBloomPass.js';
 
 			var scene, camera, controls, pointLight, stats;
 			var composer, renderer, mixer;
@@ -47,46 +53,46 @@
 				bloomRadius: 0
 			};
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 			var container = document.getElementById( 'container' );
 
 			stats = new Stats();
 			container.appendChild( stats.dom );
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer = new WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.toneMapping = THREE.ReinhardToneMapping;
+			renderer.toneMapping = ReinhardToneMapping;
 			container.appendChild( renderer.domElement );
 
-			scene = new THREE.Scene();
+			scene = new Scene();
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
+			camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 			camera.position.set( - 5, 2.5, - 3.5 );
 			scene.add( camera );
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls = new OrbitControls( camera, renderer.domElement );
 			controls.maxPolarAngle = Math.PI * 0.5;
 			controls.minDistance = 1;
 			controls.maxDistance = 10;
 
-			scene.add( new THREE.AmbientLight( 0x404040 ) );
+			scene.add( new AmbientLight( 0x404040 ) );
 
-			pointLight = new THREE.PointLight( 0xffffff, 1 );
+			pointLight = new PointLight( 0xffffff, 1 );
 			camera.add( pointLight );
 
-			var renderScene = new THREE.RenderPass( scene, camera );
+			var renderScene = new RenderPass( scene, camera );
 
-			var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
+			var bloomPass = new UnrealBloomPass( new Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
 			bloomPass.threshold = params.bloomThreshold;
 			bloomPass.strength = params.bloomStrength;
 			bloomPass.radius = params.bloomRadius;
 
-			composer = new THREE.EffectComposer( renderer );
+			composer = new EffectComposer( renderer );
 			composer.addPass( renderScene );
 			composer.addPass( bloomPass );
 
-			new THREE.GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {
+			new GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {
 
 				var model = gltf.scene;
 
@@ -97,7 +103,7 @@
 				var core = model.getObjectByName( 'geo1_HoloFillDark_0' );
 				core.material.depthWrite = false;
 
-				mixer = new THREE.AnimationMixer( model );
+				mixer = new AnimationMixer( model );
 				var clip = gltf.animations[ 0 ];
 				mixer.clipAction( clip.optimize() ).play();
 
@@ -105,7 +111,7 @@
 
 			} );
 
-			var gui = new dat.GUI();
+			var gui = new GUI();
 
 			gui.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
 

examples/webgl_postprocessing_unreal_bloom_selective.html

@@ -8,25 +8,10 @@
 	</head>
 	<body>
 
-		<div id="container"></div>
-
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> Click on a sphere to toggle bloom<br>By <a href="http://github.com/Temdog007" target="_blank" rel="noopener">Temdog007</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/LuminosityHighPassShader.js"></script>
-		<script src="js/postprocessing/UnrealBloomPass.js"></script>
-
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 			varying vec2 vUv;
@@ -62,14 +47,37 @@
 
 		</script>
 
-		<script>
-
-			var scene, camera, geometry, controls;
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				IcosahedronBufferGeometry,
+				Layers,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Raycaster,
+				ReinhardToneMapping,
+				Scene,
+				ShaderMaterial,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { UnrealBloomPass } from './jsm/postprocessing/UnrealBloomPass.js';
+
+			var scene, camera, controls;
 			var renderer;
 
 			var ENTIRE_SCENE = 0, BLOOM_SCENE = 1;
 
-			var bloomLayer = new THREE.Layers();
+			var bloomLayer = new Layers();
 			bloomLayer.set( BLOOM_SCENE );
 
 			var params = {
@@ -80,45 +88,43 @@
 				scene: "Scene with Glow"
 			};
 
-			var darkMaterial = new THREE.MeshBasicMaterial( { color: "black" } );
+			var darkMaterial = new MeshBasicMaterial( { color: "black" } );
 			var materials = {};
 
-			var container = document.getElementById( 'container' );
-
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer = new WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.toneMapping = THREE.ReinhardToneMapping;
+			renderer.toneMapping = ReinhardToneMapping;
 			document.body.appendChild( renderer.domElement );
 
-			scene = new THREE.Scene();
+			scene = new Scene();
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
+			camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
 			camera.position.set( 0, 0, 20 );
 			camera.lookAt( 0, 0, 0 );
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls = new OrbitControls( camera, renderer.domElement );
 			controls.maxPolarAngle = Math.PI * 0.5;
 			controls.minDistance = 1;
 			controls.maxDistance = 100;
 			controls.addEventListener( 'change', render );
 
-			scene.add( new THREE.AmbientLight( 0x404040 ) );
+			scene.add( new AmbientLight( 0x404040 ) );
 
-			var renderScene = new THREE.RenderPass( scene, camera );
+			var renderScene = new RenderPass( scene, camera );
 
-			var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
+			var bloomPass = new UnrealBloomPass( new Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
 			bloomPass.threshold = params.bloomThreshold;
 			bloomPass.strength = params.bloomStrength;
 			bloomPass.radius = params.bloomRadius;
 
-			var bloomComposer = new THREE.EffectComposer( renderer );
+			var bloomComposer = new EffectComposer( renderer );
 			bloomComposer.renderToScreen = false;
 			bloomComposer.addPass( renderScene );
 			bloomComposer.addPass( bloomPass );
 
-			var finalPass = new THREE.ShaderPass(
-				new THREE.ShaderMaterial( {
+			var finalPass = new ShaderPass(
+				new ShaderMaterial( {
 					uniforms: {
 						baseTexture: { value: null },
 						bloomTexture: { value: bloomComposer.renderTarget2.texture }
@@ -130,17 +136,17 @@
 			);
 			finalPass.needsSwap = true;
 
-			var finalComposer = new THREE.EffectComposer( renderer );
+			var finalComposer = new EffectComposer( renderer );
 			finalComposer.addPass( renderScene );
 			finalComposer.addPass( finalPass );
 
-			var raycaster = new THREE.Raycaster();
+			var raycaster = new Raycaster();
 
-			var mouse = new THREE.Vector2();
+			var mouse = new Vector2();
 
 			window.addEventListener( 'click', onDocumentMouseClick, false );
 
-			var gui = new dat.GUI();
+			var gui = new GUI();
 
 			gui.add( params, 'scene', [ 'Scene with Glow', 'Glow only', 'Scene only' ] ).onChange( function ( value ) {
 
@@ -232,21 +238,18 @@
 
 			function setupScene() {
 
-				var minLightness = 0;
-				var maxLightness = 0.1;
-
 				scene.traverse( disposeMaterial );
 				scene.children.length = 0;
 
-				var geometry = new THREE.IcosahedronBufferGeometry( 1, 4 );
+				var geometry = new IcosahedronBufferGeometry( 1, 4 );
 
 				for ( var i = 0; i < 50; i ++ ) {
 
-					var color = new THREE.Color();
+					var color = new Color();
 					color.setHSL( Math.random(), 0.7, Math.random() * 0.2 + 0.05 );
 
-					var material = new THREE.MeshBasicMaterial( { color: color } );
-					var sphere = new THREE.Mesh( geometry, material );
+					var material = new MeshBasicMaterial( { color: color } );
+					var sphere = new Mesh( geometry, material );
 					sphere.position.x = Math.random() * 10 - 5;
 					sphere.position.y = Math.random() * 10 - 5;
 					sphere.position.z = Math.random() * 10 - 5;

examples/webgl_raycast_sprite.html

@@ -18,9 +18,22 @@
 	</head>
 <body>
 	<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl raycast sprite<br></div>
-	<script src="../build/three.js"></script>
-	<script src="./js/controls/OrbitControls.js"></script>
-	<script>
+
+	<script type="module">
+		import {
+			Color,
+			Group,
+			Object3D,
+			PerspectiveCamera,
+			Raycaster,
+			Scene,
+			Sprite,
+			SpriteMaterial,
+			Vector3,
+			WebGLRenderer
+		} from "../build/three.module.js";
+
+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 		var renderer, scene, camera;
 		var controls, group;
@@ -31,47 +44,47 @@
 		function init() {
 
 			// init renderer
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer = new WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			document.body.appendChild( renderer.domElement );
 
 			// init scene
-			scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0xffffff );
+			scene = new Scene();
+			scene.background = new Color( 0xffffff );
 
-			group = new THREE.Group();
+			group = new Group();
 			scene.add( group );
 
 			// init camera
-			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 			camera.position.set( 15, 15, 15 );
 			camera.lookAt( scene.position );
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls = new OrbitControls( camera, renderer.domElement );
 			controls.enableRotate = true;
 
 			// add sprites
 
-			var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f' } ) );
+			var sprite = new Sprite( new SpriteMaterial( { color: '#69f' } ) );
 			sprite.position.set( 6, 5, 5 );
 			sprite.scale.set( 2, 5, 1 );
 			group.add( sprite );
 
-			var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f', sizeAttenuation: false } ) );
+			var sprite = new Sprite( new SpriteMaterial( { color: '#69f', sizeAttenuation: false } ) );
 			sprite.material.rotation = Math.PI / 3 * 4;
 			sprite.position.set( 8, - 2, 2 );
 			sprite.center.set( 0.5, 0 );
 			sprite.scale.set( .1, .5, .1 );
 			group.add( sprite );
 
-			var group2 = new THREE.Object3D();
+			var group2 = new Object3D();
 			group2.scale.set( 1, 2, 1 );
 			group2.position.set( - 5, 0, 0 );
 			group2.rotation.set( Math.PI / 2, 0, 0 );
 			group.add( group2 );
 
-			var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: '#69f' } ) );
+			var sprite = new Sprite( new SpriteMaterial( { color: '#69f' } ) );
 			sprite.position.set( 0, 2, 5 );
 			sprite.scale.set( 10, 2, 3 );
 			sprite.center.set( - 0.1, 0 );
@@ -131,8 +144,8 @@
 
 		}
 
-		var raycaster = new THREE.Raycaster();
-		var mouseVector = new THREE.Vector3();
+		var raycaster = new Raycaster();
+		var mouseVector = new Vector3();
 
 		function getIntersects( x, y ) {
 

examples/webgl_raycast_texture.html

@@ -34,33 +34,50 @@
 		<fieldset id="controls">
 			<legend>Circle</legend>
 			<div class="control">
-				WrapS : <select onchange="setwrapS(this)">
-					<option value="ClampToEdgeWrapping">ClampToEdgeWrapping</option>
-					<option value="RepeatWrapping" selected>RepeatWrapping</option>
-					<option value="MirroredRepeatWrapping">MirroredRepeatWrapping</option>
+				WrapS : <select id="setwrapS">
+					<option value="1001">ClampToEdgeWrapping</option>
+					<option value="1000" selected>RepeatWrapping</option>
+					<option value="1002">MirroredRepeatWrapping</option>
 				</select>
 			</div>
 			<div class="control">
-				WrapT : <select onchange="setwrapT(this)">
-					<option value="ClampToEdgeWrapping">ClampToEdgeWrapping</option>
-					<option value="RepeatWrapping" selected>RepeatWrapping</option>
-					<option value="MirroredRepeatWrapping">MirroredRepeatWrapping</option>
+				WrapT : <select id="setwrapT">
+					<option value="1001">ClampToEdgeWrapping</option>
+					<option value="1000" selected>RepeatWrapping</option>
+					<option value="1002">MirroredRepeatWrapping</option>
 				</select>
 			</div>
 			<div class="control">
-				Offset : X <input type="number" value="0" step="0.05" onchange="setOffsetU(this)" />
-				Y <input type="number" value="0" step="0.05" onchange="setOffsetV(this)" /><br />
+				Offset : X <input id="setOffsetU" type="number" value="0" step="0.05" />
+				Y <input id="setOffsetV" type="number" value="0" step="0.05" /><br />
 			</div>
 			<div class="control">
-				Repeat : X <input type="number" value="1" step="0.1" onchange="setRepeatU(this)" />
-				Y <input type="number" value="1" step="0.1" onchange="setRepeatV(this)" />
+				Repeat : X <input id="setRepeatU" type="number" value="1" step="0.1" />
+				Y <input id="setRepeatV" type="number" value="1" step="0.1" />
 			</div>
 			<div class="control">
-				Rotation : <input type="number" value="0" step="0.1" onchange="setRotation(this)" />
+				Rotation : <input id="setRotation" type="number" value="0" step="0.1" />
 			</div>
 		</fieldset>
-		<script src="../build/three.js"></script>
-		<script>
+
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				CircleBufferGeometry,
+				Color,
+				Mesh,
+				MeshBasicMaterial,
+				MirroredRepeatWrapping,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Raycaster,
+				RepeatWrapping,
+				Scene,
+				Texture,
+				Vector2,
+				UVMapping,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
 			var CanvasTexture = function ( parentTexture ) {
 
@@ -182,9 +199,9 @@
 
 			var camera, scene, renderer;
 
-			var raycaster = new THREE.Raycaster();
-			var mouse = new THREE.Vector2();
-			var onClickPosition = new THREE.Vector2();
+			var raycaster = new Raycaster();
+			var mouse = new Vector2();
+			var onClickPosition = new Vector2();
 
 			init();
 			render();
@@ -193,25 +210,25 @@
 
 				container = document.getElementById( "container" );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xeeeeee );
+				scene = new Scene();
+				scene.background = new Color( 0xeeeeee );
 
-				camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
+				camera = new PerspectiveCamera( 45, width / height, 1, 1000 );
 				camera.position.x = - 30;
 				camera.position.y = 40;
 				camera.position.z = 50;
 				camera.lookAt( scene.position );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
 				container.appendChild( renderer.domElement );
 
 				// A cube, in the middle.
-				cubeTexture = new THREE.Texture( undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping );
+				cubeTexture = new Texture( undefined, UVMapping, RepeatWrapping, RepeatWrapping );
 				canvas = new CanvasTexture( cubeTexture );
-				var cubeMaterial = new THREE.MeshBasicMaterial( { map: cubeTexture } );
-				var cubeGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+				var cubeMaterial = new MeshBasicMaterial( { map: cubeTexture } );
+				var cubeGeometry = new BoxBufferGeometry( 20, 20, 20 );
 				var uvs = cubeGeometry.attributes.uv.array;
 				// Set a specific texture mapping.
 				for ( var i = 0; i < uvs.length; i ++ ) {
@@ -220,17 +237,17 @@
 
 				}
 
-				var cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
+				var cube = new Mesh( cubeGeometry, cubeMaterial );
 				cube.position.x = 4;
 				cube.position.y = - 5;
 				cube.position.z = 0;
 				scene.add( cube );
 
 				// A plane on the left.
-				planeTexture = new THREE.Texture( undefined, THREE.UVMapping, THREE.MirroredRepeatWrapping, THREE.MirroredRepeatWrapping );
+				planeTexture = new Texture( undefined, UVMapping, MirroredRepeatWrapping, MirroredRepeatWrapping );
 				canvas.addParent( planeTexture );
-				var planeMaterial = new THREE.MeshBasicMaterial( { map: planeTexture } );
-				var planeGeometry = new THREE.PlaneBufferGeometry( 25, 25, 1, 1 );
+				var planeMaterial = new MeshBasicMaterial( { map: planeTexture } );
+				var planeGeometry = new PlaneBufferGeometry( 25, 25, 1, 1 );
 				var uvs = planeGeometry.attributes.uv.array;
 				// Set a specific texture mapping.
 				for ( var i = 0; i < uvs.length; i ++ ) {
@@ -238,17 +255,17 @@
 					uvs[ i ] *= 2;
 
 				}
-				var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+				var plane = new Mesh( planeGeometry, planeMaterial );
 				plane.position.x = - 16;
 				plane.position.y = - 5;
 				plane.position.z = 0;
 				scene.add( plane );
 
 				// A circle on the right.
-				circleTexture = new THREE.Texture( undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping );
+				circleTexture = new Texture( undefined, UVMapping, RepeatWrapping, RepeatWrapping );
 				canvas.addParent( circleTexture );
-				var circleMaterial = new THREE.MeshBasicMaterial( { map: circleTexture } );
-				var circleGeometry = new THREE.CircleBufferGeometry( 25, 40, 0, Math.PI * 2 );
+				var circleMaterial = new MeshBasicMaterial( { map: circleTexture } );
+				var circleGeometry = new CircleBufferGeometry( 25, 40, 0, Math.PI * 2 );
 				var uvs = circleGeometry.attributes.uv.array;
 				// Set a specific texture mapping.
 				for ( var i = 0; i < uvs.length; i ++ ) {
@@ -256,7 +273,7 @@
 					uvs[ i ] = ( uvs[ i ] - 0.25 ) * 2;
 
 				}
-				var circle = new THREE.Mesh( circleGeometry, circleMaterial );
+				var circle = new Mesh( circleGeometry, circleMaterial );
 				circle.position.x = 24;
 				circle.position.y = - 5;
 				circle.position.z = 0;
@@ -265,6 +282,14 @@
 				window.addEventListener( 'resize', onWindowResize, false );
 				container.addEventListener( 'mousemove', onMouseMove, false );
 
+				document.getElementById( 'setwrapS' ).addEventListener( 'change', setwrapS );
+				document.getElementById( 'setwrapT' ).addEventListener( 'change', setwrapT );
+				document.getElementById( 'setOffsetU' ).addEventListener( 'change', setOffsetU );
+				document.getElementById( 'setOffsetV' ).addEventListener( 'change', setOffsetV );
+				document.getElementById( 'setRepeatU' ).addEventListener( 'change', setRepeatU );
+				document.getElementById( 'setRepeatV' ).addEventListener( 'change', setRepeatV );
+				document.getElementById( 'setRotation' ).addEventListener( 'change', setRotation );
+
 			}
 
 			function onWindowResize() {
@@ -319,47 +344,47 @@
 
 			}
 
-			function setwrapS( that ) {
+			function setwrapS( event ) {
 
-				circleTexture.wrapS = THREE[ that.value ];
+				circleTexture.wrapS = parseFloat( event.target.value );
 				circleTexture.needsUpdate = true;
 
 			}
 
-			function setwrapT( that ) {
+			function setwrapT( event ) {
 
-				circleTexture.wrapT = THREE[ that.value ];
+				circleTexture.wrapT = parseFloat( event.target.value );
 				circleTexture.needsUpdate = true;
 
 			}
 
-			function setOffsetU( that ) {
+			function setOffsetU( event ) {
 
-				circleTexture.offset.x = parseFloat( that.value );
+				circleTexture.offset.x = parseFloat( event.target.value );
 
 			}
 
-			function setOffsetV( that ) {
+			function setOffsetV( event ) {
 
-				circleTexture.offset.y = parseFloat( that.value );
+				circleTexture.offset.y = parseFloat( event.target.value );
 
 			}
 
-			function setRepeatU( that ) {
+			function setRepeatU( event ) {
 
-				circleTexture.repeat.x = parseFloat( that.value );
+				circleTexture.repeat.x = parseFloat( event.target.value );
 
 			}
 
-			function setRepeatV( that ) {
+			function setRepeatV( event ) {
 
-				circleTexture.repeat.y = parseFloat( that.value );
+				circleTexture.repeat.y = parseFloat( event.target.value );
 
 			}
 
-			function setRotation( that ) {
+			function setRotation( event ) {
 
-				circleTexture.rotation = parseFloat( that.value );
+				circleTexture.rotation = parseFloat( event.target.value );
 
 			}
 

examples/webgl_raymarching_reflect.html

@@ -236,13 +236,23 @@
 
 		</script>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				Group,
+				Matrix4,
+				Mesh,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RawShaderMaterial,
+				Scene,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var dolly, camera, scene, renderer;
 			var geometry, material, mesh;
@@ -265,41 +275,41 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer( { canvas: canvas } );
+				renderer = new WebGLRenderer( { canvas: canvas } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( config.resolution, config.resolution );
 
 				window.addEventListener( 'resize', onWindowResize );
 
 				// Scene
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				dolly = new THREE.Group();
+				dolly = new Group();
 				scene.add( dolly );
 
-				camera = new THREE.PerspectiveCamera( 60, canvas.width / canvas.height, 1, 2000 );
+				camera = new PerspectiveCamera( 60, canvas.width / canvas.height, 1, 2000 );
 				camera.position.z = 4;
 				dolly.add( camera );
 
-				geometry = new THREE.PlaneBufferGeometry( 2.0, 2.0 );
-				material = new THREE.RawShaderMaterial( {
+				geometry = new PlaneBufferGeometry( 2.0, 2.0 );
+				material = new RawShaderMaterial( {
 					uniforms: {
-						resolution: { value: new THREE.Vector2( canvas.width, canvas.height ) },
+						resolution: { value: new Vector2( canvas.width, canvas.height ) },
 						cameraWorldMatrix: { value: camera.matrixWorld },
-						cameraProjectionMatrixInverse: { value: new THREE.Matrix4().getInverse( camera.projectionMatrix ) }
+						cameraProjectionMatrixInverse: { value: new Matrix4().getInverse( camera.projectionMatrix ) }
 					},
 					vertexShader: document.getElementById( 'vertex_shader' ).textContent,
 					fragmentShader: document.getElementById( 'fragment_shader' ).textContent
 				} );
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 				mesh.frustumCulled = false;
 				scene.add( mesh );
 
 				// Controls
-				var controls = new THREE.OrbitControls( camera, canvas );
+				var controls = new OrbitControls( camera, canvas );
 
 				// GUI
-				var gui = new dat.GUI();
+				var gui = new GUI();
 				gui.add( config, 'saveImage' ).name( 'Save Image' );
 				gui.add( config, 'resolution', [ '256', '512', '800', 'full' ] ).name( 'Resolution' ).onChange( onWindowResize );
 

examples/webgl_read_float_buffer.html

@@ -14,11 +14,6 @@
 			<span id="values"></span>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
 		<script id="fragment_shader_screen" type="x-shader/x-fragment">
 
 			varying vec2 vUv;
@@ -63,14 +58,25 @@
 
 		</script>
 
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				DirectionalLight,
+				FloatType,
+				LinearFilter,
+				Mesh,
+				MeshPhongMaterial,
+				NearestFilter,
+				OrthographicCamera,
+				PlaneBufferGeometry,
+				RGBAFormat,
+				Scene,
+				ShaderMaterial,
+				TorusBufferGeometry,
+				WebGLRenderer,
+				WebGLRenderTarget
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var container, stats;
 
@@ -93,25 +99,25 @@
 
 				container = document.getElementById( 'container' );
 
-				cameraRTT = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
+				cameraRTT = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
 				cameraRTT.position.z = 100;
 
 				//
 
-				sceneRTT = new THREE.Scene();
-				sceneScreen = new THREE.Scene();
+				sceneRTT = new Scene();
+				sceneScreen = new Scene();
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				var light = new DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 ).normalize();
 				sceneRTT.add( light );
 
-				light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
+				light = new DirectionalLight( 0xffaaaa, 1.5 );
 				light.position.set( 0, 0, - 1 ).normalize();
 				sceneRTT.add( light );
 
-				rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, type: THREE.FloatType } );
+				rtTexture = new WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat, type: FloatType } );
 
-				material = new THREE.ShaderMaterial( {
+				material = new ShaderMaterial( {
 
 					uniforms: { "time": { value: 0.0 } },
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -119,7 +125,7 @@
 
 				} );
 
-				var materialScreen = new THREE.ShaderMaterial( {
+				var materialScreen = new ShaderMaterial( {
 
 					uniforms: { "tDiffuse": { value: rtTexture.texture } },
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -129,32 +135,32 @@
 
 				} );
 
-				var plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
+				var plane = new PlaneBufferGeometry( window.innerWidth, window.innerHeight );
 
-				quad = new THREE.Mesh( plane, material );
+				quad = new Mesh( plane, material );
 				quad.position.z = - 100;
 				sceneRTT.add( quad );
 
-				var geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
+				var geometry = new TorusBufferGeometry( 100, 25, 15, 30 );
 
-				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
-				var mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
+				var mat1 = new MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
+				var mat2 = new MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
 
-				zmesh1 = new THREE.Mesh( geometry, mat1 );
+				zmesh1 = new Mesh( geometry, mat1 );
 				zmesh1.position.set( 0, 0, 100 );
 				zmesh1.scale.set( 1.5, 1.5, 1.5 );
 				sceneRTT.add( zmesh1 );
 
-				zmesh2 = new THREE.Mesh( geometry, mat2 );
+				zmesh2 = new Mesh( geometry, mat2 );
 				zmesh2.position.set( 0, 150, 100 );
 				zmesh2.scale.set( 0.75, 0.75, 0.75 );
 				sceneRTT.add( zmesh2 );
 
-				quad = new THREE.Mesh( plane, materialScreen );
+				quad = new Mesh( plane, materialScreen );
 				quad.position.z = - 100;
 				sceneScreen.add( quad );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;

examples/webgl_refraction.html

@@ -5,13 +5,6 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
-
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/shaders/WaterRefractionShader.js"></script>
-		<script src="js/objects/Refractor.js"></script>
-		<script src="js/WebGL.js"></script>
-
 	</head>
 	<body>
 
@@ -20,118 +13,130 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - refraction
 		</div>
 
-		<script>
-
-		if ( WEBGL.isWebGLAvailable() === false ) {
-
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+		<script type="module">
+			import {
+				AmbientLight,
+				Clock,
+				Mesh,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				PointLight,
+				RepeatWrapping,
+				Scene,
+				TextureLoader,
+				TorusKnotBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { Refractor } from './jsm/objects/Refractor.js';
+			import { WaterRefractionShader } from './jsm/shaders/WaterRefractionShader.js';
 
-		var scene, camera, clock, renderer, refractor, controls;
+			var scene, camera, clock, renderer, refractor;
 
-		init();
+			init();
 
-		function init() {
+			function init() {
 
-			// scene
+				// scene
 
-			scene = new THREE.Scene();
+				scene = new Scene();
 
-			// camera
+				// camera
 
-			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
-			camera.position.set( - 10, 0, 15 );
-			camera.lookAt( scene.position );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( - 10, 0, 15 );
+				camera.lookAt( scene.position );
 
-			// clock
+				// clock
 
-			clock = new THREE.Clock();
+				clock = new Clock();
 
-			// mesh
+				// mesh
 
-			var geometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
-			var material = new THREE.MeshStandardMaterial( { color: 0x6083c2 } );
+				var geometry = new TorusKnotBufferGeometry( 3, 1, 256, 32 );
+				var material = new MeshStandardMaterial( { color: 0x6083c2 } );
 
-			var mesh = new THREE.Mesh( geometry, material );
-			scene.add( mesh );
+				var mesh = new Mesh( geometry, material );
+				scene.add( mesh );
 
-			// refractor
+				// refractor
 
-			var refractorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
+				var refractorGeometry = new PlaneBufferGeometry( 10, 10 );
 
-			refractor = new THREE.Refractor( refractorGeometry, {
-				color: 0x999999,
-				textureWidth: 1024,
-				textureHeight: 1024,
-				shader: THREE.WaterRefractionShader
-			} );
+				refractor = new Refractor( refractorGeometry, {
+					color: 0x999999,
+					textureWidth: 1024,
+					textureHeight: 1024,
+					shader: WaterRefractionShader
+				} );
 
-			refractor.position.set( 0, 0, 5 );
+				refractor.position.set( 0, 0, 5 );
 
-			scene.add( refractor );
+				scene.add( refractor );
 
-			// load dudv map for distortion effect
+				// load dudv map for distortion effect
 
-			var dudvMap = new THREE.TextureLoader().load( 'textures/waterdudv.jpg', function () {
+				var dudvMap = new TextureLoader().load( 'textures/waterdudv.jpg', function () {
 
-				animate();
+					animate();
 
-			} );
+				} );
 
-			dudvMap.wrapS = dudvMap.wrapT = THREE.RepeatWrapping;
-			refractor.material.uniforms[ "tDudv" ].value = dudvMap;
+				dudvMap.wrapS = dudvMap.wrapT = RepeatWrapping;
+				refractor.material.uniforms[ "tDudv" ].value = dudvMap;
 
-			// light
+				// light
 
-			var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
-			scene.add( ambientLight );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
+				scene.add( ambientLight );
 
-			var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
-			camera.add( pointLight );
-			scene.add( camera );
+				var pointLight = new PointLight( 0xffffff, 0.8 );
+				camera.add( pointLight );
+				scene.add( camera );
 
-			// renderer
+				// renderer
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.setClearColor( 0x20252f );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			document.body.appendChild( renderer.domElement );
+				renderer = new WebGLRenderer( { antialias: true } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( 0x20252f );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				document.body.appendChild( renderer.domElement );
 
-			//
+				//
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
-			//
+				//
 
-			window.addEventListener( 'resize', onResize, false );
+				window.addEventListener( 'resize', onResize, false );
 
-		}
+			}
 
-		function onResize() {
+			function onResize() {
 
-			camera.aspect = window.innerWidth / window.innerHeight;
-			camera.updateProjectionMatrix();
-			renderer.setSize( window.innerWidth, window.innerHeight );
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-		}
+			}
 
-		function animate() {
+			function animate() {
 
-			requestAnimationFrame( animate );
+				requestAnimationFrame( animate );
 
-			render();
+				render();
 
-		}
+			}
 
-		function render() {
+			function render() {
 
-			refractor.material.uniforms[ "time" ].value += clock.getDelta();
+				refractor.material.uniforms[ "time" ].value += clock.getDelta();
 
-			renderer.render( scene, camera );
+				renderer.render( scene, camera );
 
-		}
+			}
 
 	</script>
 

examples/webgl_rtt.html

@@ -11,11 +11,6 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> render-to-texture webgl example</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
 		<script id="fragment_shader_screen" type="x-shader/x-fragment">
 
 			varying vec2 vUv;
@@ -60,14 +55,27 @@
 
 		</script>
 
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				DirectionalLight,
+				LinearFilter,
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				NearestFilter,
+				OrthographicCamera,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RGBFormat,
+				Scene,
+				ShaderMaterial,
+				SphereBufferGeometry,
+				TorusBufferGeometry,
+				WebGLRenderer,
+				WebGLRenderTarget
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var container, stats;
 
@@ -89,29 +97,29 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 100;
 
-				cameraRTT = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
+				cameraRTT = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
 				cameraRTT.position.z = 100;
 
 				//
 
-				scene = new THREE.Scene();
-				sceneRTT = new THREE.Scene();
-				sceneScreen = new THREE.Scene();
+				scene = new Scene();
+				sceneRTT = new Scene();
+				sceneScreen = new Scene();
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				var light = new DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 ).normalize();
 				sceneRTT.add( light );
 
-				light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
+				light = new DirectionalLight( 0xffaaaa, 1.5 );
 				light.position.set( 0, 0, - 1 ).normalize();
 				sceneRTT.add( light );
 
-				rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
+				rtTexture = new WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBFormat } );
 
-				material = new THREE.ShaderMaterial( {
+				material = new ShaderMaterial( {
 
 					uniforms: { time: { value: 0.0 } },
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -119,7 +127,7 @@
 
 				} );
 
-				var materialScreen = new THREE.ShaderMaterial( {
+				var materialScreen = new ShaderMaterial( {
 
 					uniforms: { tDiffuse: { value: rtTexture.texture } },
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -129,40 +137,40 @@
 
 				} );
 
-				var plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
+				var plane = new PlaneBufferGeometry( window.innerWidth, window.innerHeight );
 
-				quad = new THREE.Mesh( plane, material );
+				quad = new Mesh( plane, material );
 				quad.position.z = - 100;
 				sceneRTT.add( quad );
 
-				var geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
+				var geometry = new TorusBufferGeometry( 100, 25, 15, 30 );
 
-				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
-				var mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
+				var mat1 = new MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
+				var mat2 = new MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
 
-				zmesh1 = new THREE.Mesh( geometry, mat1 );
+				zmesh1 = new Mesh( geometry, mat1 );
 				zmesh1.position.set( 0, 0, 100 );
 				zmesh1.scale.set( 1.5, 1.5, 1.5 );
 				sceneRTT.add( zmesh1 );
 
-				zmesh2 = new THREE.Mesh( geometry, mat2 );
+				zmesh2 = new Mesh( geometry, mat2 );
 				zmesh2.position.set( 0, 150, 100 );
 				zmesh2.scale.set( 0.75, 0.75, 0.75 );
 				sceneRTT.add( zmesh2 );
 
-				quad = new THREE.Mesh( plane, materialScreen );
+				quad = new Mesh( plane, materialScreen );
 				quad.position.z = - 100;
 				sceneScreen.add( quad );
 
 				var n = 5,
-					geometry = new THREE.SphereBufferGeometry( 10, 64, 32 ),
-					material2 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: rtTexture.texture } );
+					geometry = new SphereBufferGeometry( 10, 64, 32 ),
+					material2 = new MeshBasicMaterial( { color: 0xffffff, map: rtTexture.texture } );
 
 				for ( var j = 0; j < n; j ++ ) {
 
 					for ( var i = 0; i < n; i ++ ) {
 
-						var mesh = new THREE.Mesh( geometry, material2 );
+						var mesh = new Mesh( geometry, material2 );
 
 						mesh.position.x = ( i - ( n - 1 ) / 2 ) * 20;
 						mesh.position.y = ( j - ( n - 1 ) / 2 ) * 20;
@@ -176,7 +184,7 @@
 
 				}
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;

examples/webgl_sandbox.html

@@ -10,13 +10,30 @@
 	<body>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - sandbox</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/BasicShader.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AdditiveBlending,
+				CanvasTexture,
+				Fog,
+				Mesh,
+				MeshDepthMaterial,
+				MeshLambertMaterial,
+				MeshNormalMaterial,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				ShaderMaterial,
+				SphereBufferGeometry,
+				TextureLoader,
+				UVMapping,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { BasicShader } from './jsm/shaders/BasicShader.js';
 
 			var statsEnabled = true;
 
@@ -37,40 +54,40 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.z = 3200;
 
-				scene = new THREE.Scene();
-				scene.fog = new THREE.Fog( 0x000000, 1, 20000 );
+				scene = new Scene();
+				scene.fog = new Fog( 0x000000, 1, 20000 );
 
-				var light = new THREE.PointLight( 0xffffff );
+				var light = new PointLight( 0xffffff );
 				scene.add( light );
 
-				var shader = THREE.BasicShader;
+				var shader = BasicShader;
 				var uniforms = shader.uniforms;
 				var vertexShader = shader.vertexShader;
 				var fragmentShader = shader.fragmentShader;
 
-				var texture1 = new THREE.CanvasTexture( generateTexture( 0, 0.5, 1 ), THREE.UVMapping );
-				var texture2 = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
+				var texture1 = new CanvasTexture( generateTexture( 0, 0.5, 1 ), UVMapping );
+				var texture2 = new TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
 
 				var materials = [
 
-					new THREE.MeshNormalMaterial(),
-					new THREE.MeshDepthMaterial(),
-					new THREE.MeshBasicMaterial( { color: 0x0066ff, blending: THREE.AdditiveBlending, transparent: true, depthWrite: false } ),
-					new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ),
-					new THREE.MeshBasicMaterial( { map: texture1, fog: false } ),
-					new THREE.MeshBasicMaterial( { map: texture2 } ),
-					new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true } ),
-					new THREE.MeshLambertMaterial( { map: texture2 } ),
-					new THREE.MeshLambertMaterial( { color: 0xdddddd } ),
-					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } ),
-					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30 } )
+					new MeshNormalMaterial(),
+					new MeshDepthMaterial(),
+					new MeshBasicMaterial( { color: 0x0066ff, blending: AdditiveBlending, transparent: true, depthWrite: false } ),
+					new MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ),
+					new MeshBasicMaterial( { map: texture1, fog: false } ),
+					new MeshBasicMaterial( { map: texture2 } ),
+					new ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true } ),
+					new MeshLambertMaterial( { map: texture2 } ),
+					new MeshLambertMaterial( { color: 0xdddddd } ),
+					new MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } ),
+					new MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30 } )
 
 				];
 
-				var geometry = new THREE.SphereBufferGeometry( 50, 32, 16 );
+				var geometry = new SphereBufferGeometry( 50, 32, 16 );
 
 				for ( var i = 0; i < 5000; i ++ ) {
 
@@ -82,7 +99,7 @@
 
 					var material = materials[ index ];
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
@@ -97,7 +114,7 @@
 
 				}
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_shader.html

@@ -11,10 +11,6 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shader demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank" rel="noopener">Monjori by Mic</a></div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
 		<script id="vertexShader" type="x-shader/x-vertex">
 
 			varying vec2 vUv;
@@ -67,13 +63,15 @@
 
 		</script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Mesh,
+				OrthographicCamera,
+				PlaneBufferGeometry,
+				Scene,
+				ShaderMaterial,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
 			var container;
 
@@ -88,17 +86,17 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+				camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
+				var geometry = new PlaneBufferGeometry( 2, 2 );
 
 				uniforms = {
 					"time": { value: 1.0 }
 				};
 
-				var material = new THREE.ShaderMaterial( {
+				var material = new ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -106,10 +104,10 @@
 
 				} );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 

examples/webgl_shader_lava.html

@@ -11,21 +11,6 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shader material demo. featuring lava shader by <a href="http://irrlicht.sourceforge.net/phpBB2/viewtopic.php?t=21057" target="_blank" rel="noopener">TheGameMaker</a></div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/ConvolutionShader.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FilmShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/postprocessing/FilmPass.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
 		<script id="fragmentShader" type="x-shader/x-fragment">
 
 			uniform float time;
@@ -89,13 +74,25 @@
 
 		</script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Clock,
+				Mesh,
+				PerspectiveCamera,
+				RepeatWrapping,
+				Scene,
+				ShaderMaterial,
+				TextureLoader,
+				TorusBufferGeometry,
+				Vector2,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { FilmPass } from './jsm/postprocessing/FilmPass.js';
+			import { BloomPass } from './jsm/postprocessing/BloomPass.js';
 
 			var container;
 
@@ -110,32 +107,32 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 4;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				clock = new THREE.Clock();
+				clock = new Clock();
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 
 				uniforms = {
 
 					"fogDensity": { value: 0.45 },
-					"fogColor": { value: new THREE.Vector3( 0, 0, 0 ) },
+					"fogColor": { value: new Vector3( 0, 0, 0 ) },
 					"time": { value: 1.0 },
-					"uvScale": { value: new THREE.Vector2( 3.0, 1.0 ) },
+					"uvScale": { value: new Vector2( 3.0, 1.0 ) },
 					"texture1": { value: textureLoader.load( 'textures/lava/cloud.png' ) },
 					"texture2": { value: textureLoader.load( 'textures/lava/lavatile.jpg' ) }
 
 				};
 
-				uniforms[ "texture1" ].value.wrapS = uniforms[ "texture1" ].value.wrapT = THREE.RepeatWrapping;
-				uniforms[ "texture2" ].value.wrapS = uniforms[ "texture2" ].value.wrapT = THREE.RepeatWrapping;
+				uniforms[ "texture1" ].value.wrapS = uniforms[ "texture1" ].value.wrapT = RepeatWrapping;
+				uniforms[ "texture2" ].value.wrapS = uniforms[ "texture2" ].value.wrapT = RepeatWrapping;
 
 				var size = 0.65;
 
-				var material = new THREE.ShaderMaterial( {
+				var material = new ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -143,13 +140,13 @@
 
 				} );
 
-				mesh = new THREE.Mesh( new THREE.TorusBufferGeometry( size, 0.3, 30, 30 ), material );
+				mesh = new Mesh( new TorusBufferGeometry( size, 0.3, 30, 30 ), material );
 				mesh.rotation.x = 0.3;
 				scene.add( mesh );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 				renderer.autoClear = false;
@@ -157,11 +154,11 @@
 
 				//
 
-				var renderModel = new THREE.RenderPass( scene, camera );
-				var effectBloom = new THREE.BloomPass( 1.25 );
-				var effectFilm = new THREE.FilmPass( 0.35, 0.95, 2048, false );
+				var renderModel = new RenderPass( scene, camera );
+				var effectBloom = new BloomPass( 1.25 );
+				var effectFilm = new FilmPass( 0.35, 0.95, 2048, false );
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
 				composer.addPass( renderModel );
 				composer.addPass( effectBloom );