Merge pull request #6 from mrdoob/dev

Update

.github/ISSUE_TEMPLATE.md

@@ -19,7 +19,7 @@ Please also include a live example if possible. You can start from these templat
 ##### Three.js version
 
 - [ ] Dev
-- [ ] r102
+- [ ] r103
 - [ ] ...
 
 ##### Browser

docs/api/en/core/Object3D.html

@@ -229,6 +229,8 @@
 		recursive -- if true, descendants of the object are also copied. Default is true.<br /><br />
 
 		Copy the given object into this object.
+
+		Note: event listeners and user-defined callbacks ([page:.onAfterRender] and [page:.onBeforeRender]) are not copied.
 		</p>
 
 		<h3>[method:Object3D getObjectById]( [param:Integer id] )</h3>

docs/api/en/objects/Mesh.html

@@ -95,7 +95,7 @@
 		<h3>[method:null raycast]( [param:Raycaster raycaster], [param:Array intersects] )</h3>
 		<p>
 		Get intersections between a casted ray and this mesh.
-		[page:Raycaster.intersectObject] will call this method.
+		[page:Raycaster.intersectObject] will call this method, but the results are not ordered.
 		</p>
 
 		<h3>[method:null updateMorphTargets]()</h3>

docs/api/en/renderers/WebGLRenderer.html

@@ -279,13 +279,6 @@
 
 		<h2>Methods</h2>
 
-		<h3>[method:Integer allocTextureUnit]</h3>
-		<p>
-		Attempt to allocate a texture unit for use by a shader. Will warn if trying to allocate
-		more texture units than the GPU supports. This is mainly used internally.
-		See [page:WebGLRenderer.capabilities capabilities.maxTextures].
-		</p>
-
 		<h3>[method:null clear]( [param:Boolean color], [param:Boolean depth], [param:Boolean stencil] )</h3>
 		<p>
 		Tells the renderer to clear its color, depth or stencil drawing buffer(s).
@@ -346,7 +339,7 @@
 		<p>Returns an object that describes the attributes set on the WebGL context when it was created.</p>
 
 		<h3>[method:RenderTarget getRenderTarget]()</h3>
-		<p>Returns the current RenderTarget, if any.</p>
+		<p>Returns the current [page:RenderTarget RenderTarget] if there are; returns *null* otherwise.</p>
 
 		<h3>[method:Vector4 getCurrentViewport]( [param:Vector4 target] )</h3>
 		<p>
@@ -436,10 +429,10 @@
 
 		<h3>[method:null setRenderTarget]( [param:WebGLRenderTarget renderTarget], [param:Integer activeCubeFace], [param:Integer activeMipMapLevel] )</h3>
 		<p>
-		renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated (optional).<br />
+		renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated. When *null* is given, the canvas is set as the active render target instead.<br />
 		activeCubeFace -- Specifies the active cube side (PX 0, NX 1, PY 2, NY 3, PZ 4, NZ 5) of [page:WebGLRenderTargetCube] (optional).<br />
 		activeMipMapLevel -- Specifies the active mipmap level (optional).<br /><br />
-		This method sets the active rendertarget. If the parameter is omitted the canvas is set as the active rendertarget.
+		This method sets the active rendertarget.
 		</p>
 
 		<h3>[method:null setScissor]( [param:Integer x], [param:Integer y], [param:Integer width], [param:Integer height] )<br />
@@ -466,26 +459,6 @@
 			Setting [page:Boolean updateStyle] to false prevents any style changes to the output canvas.
 		</p>
 
-		<h3>[method:null setTexture2D]( [param:Texture texture], [param:number slot] )</h3>
-		<p>
-		texture -- The [page:Texture texture] that needs to be set.<br />
-		slot -- The number indicating which slot should be used by the texture.<br /><br />
-
-		This method sets the correct texture to the correct slot for the WebGL shader.
-		The slot number can be found as a value of the uniform of the sampler.<br /><br />
-
-		Note: This method replaces the older [method:null setTexture] method.
-		</p>
-
-		<h3>[method:null setTextureCube]( [param:CubeTexture cubeTexture], [param:Number slot] )</h3>
-		<p>
-		texture -- The [page:CubeTexture cubeTexture] that needs to be set.<br />
-		slot -- The number indicating which slot should be used by the texture.<br /><br />
-
-		This method sets the correct texture to the correct slot for the WebGL shader.
-		The slot number can be found as a value of the uniform of the sampler.
-		</p>
-
 		<h3>[method:null setViewport]( [param:Integer x], [param:Integer y], [param:Integer width], [param:Integer height] )<br />
 		[method:null setViewport]( [param:Vector4 vector] )</h3>
 

docs/api/zh/objects/Mesh.html

@@ -91,7 +91,7 @@
 		<h3>[method:null raycast]( [param:Raycaster raycaster], [param:Array intersects] )</h3>
 		<p>
 			在一条投射出去的[page:Ray]（射线）和这个网格之间产生交互。
-			[page:Raycaster.intersectObject]将会调用这个方法。
+			[page:Raycaster.intersectObject]将会调用这个方法但是这个结果是未排序的
 		</p>
 
 		<h3>[method:null updateMorphTargets]()</h3>

docs/api/zh/renderers/WebGLRenderer.html

@@ -254,12 +254,6 @@
 
 		<h2>方法</h2>
 
-		<h3>[method:Integer allocTextureUnit]</h3>
-		<p>
-		尝试分配纹理单元以供着色器使用。如果尝试分配超过GPU支持量的纹理单元，则会报警告。主要供内部使用。
-		请参阅[page:WebGLRenderer.capabilities capabilities.maxTextures]。
-		</p>
-
 		<h3>[method:null clear]( [param:Boolean color], [param:Boolean depth], [param:Boolean stencil] )</h3>
 		<p>
 		告诉渲染器清除颜色、深度或模板缓存.
@@ -412,23 +406,6 @@
 		将[page:Boolean updateStyle]设置为false以阻止对canvas的样式做任何改变。
 		</p>
 
-		<h3>[method:null setTexture2D]( [param:Texture texture], [param:number slot] )</h3>
-		<p>
-		texture -- 需被设置的[page:Texture texture]<br />
-		slot -- 纹理应该使用的插槽号<br /><br />
-        该方法为WebGL着色器将正确的纹理设置到正确的插槽中。插槽号可作为取样器的全局变量（uniform）<br /><br />
-
-		说明: 该方法取代了旧的[method:null setTexture]方法
-		</p>
-
-		<h3>[method:null setTextureCube]( [param:CubeTexture cubeTexture], [param:Number slot] )</h3>
-		<p>
-		texture -- 需要被设置的[page:CubeTexture cubeTexture]<br />
-		slot -- 纹理应该使用的插槽号<br /><br />
-
-        该方法为WebGL着色器将正确的纹理设置到正确的插槽中。插槽号可作为取样器的全局变量（uniform）
-		</p>
-
 		<h3>[method:null setViewport]( [param:Integer x], [param:Integer y], [param:Integer width], [param:Integer height] )</h3>
 		<p>将视口大小设置为(x, y)到 (x + width, y + height).</p>
 

docs/examples/loaders/DRACOLoader.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Loader] &rarr;
+		<h1>[name]</h1>
+
+		<p class="desc">
+			A loader for geometry compressed with the Draco library. <br /><br />
+			[link:https://google.github.io/draco/ Draco] is an open source library for compressing and
+			decompressing 3D meshes and point clouds. Compressed geometry can be significantly smaller,
+			at the cost of additional decoding time on the client device.
+		</p>
+
+		<p>
+			Standalone Draco files have a <em>.drc</em> extension, and contain vertex positions,
+			normals, colors, and other attributes. Draco files <em>do not</em> contain materials,
+			textures, animation, or node hierarchies – to use these features, embed Draco geometry
+			inside of a glTF file. A normal glTF file can be converted to a Draco-compressed glTF file
+			using [link:https://github.com/AnalyticalGraphicsInc/gltf-pipeline glTF-Pipeline]. When
+			using Draco with glTF, an instance of DRACOLoader will be used internally by [page:GLTFLoader].
+		</p>
+
+		<h2>Example</h2>
+
+		<code>
+		// Instantiate a loader
+		var loader = new THREE.DRACOLoader();
+
+		// Specify path to a folder containing WASM/JS decoding libraries.
+		THREE.DRACOLoader.setDecoderPath( '/examples/js/libs/draco' );
+
+		// Optional: Pre-fetch Draco WASM/JS module.
+		THREE.DRACOLoader.getDecoderModule();
+
+		// Load a Draco geometry
+		loader.load(
+			// resource URL
+			'model.drc',
+			// called when the resource is loaded
+			function ( geometry ) {
+
+				var material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
+				var mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+			},
+			// called as loading progresses
+			function ( xhr ) {
+
+				console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
+
+			},
+			// called when loading has errors
+			function ( error ) {
+
+				console.log( 'An error happened' );
+
+			}
+		);
+		</code>
+
+		[example:webgl_loader_draco]
+
+		<h2>Browser compatibility</h2>
+
+		<p>DRACOLoader relies on ES6 [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promises],
+		which are not supported in IE11. To use the loader in IE11, you must
+		[link:https://github.com/stefanpenner/es6-promise include a polyfill]
+		providing a Promise replacement. DRACOLoader will automatically use
+		either the JS or the WASM decoding library, based on browser
+		capabilities.</p>
+
+		<br>
+		<hr>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:LoadingManager manager] )</h3>
+		<p>
+		[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
+		</p>
+		<p>
+		Creates a new [name].
+		</p>
+
+		<h2>Static Methods</h2>
+
+		<h3>[method:null setDecoderPath]( [param:String value] )</h3>
+		<p>
+		[page:String value] — Path to folder containing the JS and WASM decoder libraries.
+		</p>
+
+		<h3>[method:null setDecoderConfig]( [param:Object config] )</h3>
+		<p>
+			[page:String config.type] - (Optional) <em>"js"</em> or <em>"wasm"</em>.<br />
+		</p>
+		<p>
+		Provides configuration for the decoder libraries. Configuration cannot be changed
+		after loading the decoders.
+		</p>
+
+		<h3>[method:Promise getDecoderModule]()</h3>
+		<p>
+		Requests the decoder libraries, if not already loaded.
+		</p>
+
+		<h3>[method:null releaseDecoderModule]()</h3>
+		<p>
+		Disposes of the decoder library and deallocates memory. The decoder
+		[link:https://github.com/google/draco/issues/349 cannot be reloaded afterward].
+		</p>
+
+		<h2>Methods</h2>
+
+		<h3>[method:null load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
+		<p>
+		[page:String url] — A string containing the path/URL of the <em>.drc</em> file.<br />
+		[page:Function onLoad] — A function to be called after the loading is successfully completed.<br />
+		[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
+		[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
+		</p>
+		<p>
+		Begin loading from url and call the <em>onLoad</em> function with the decompressed geometry.
+		</p>
+
+		<h3>[method:DRACOLoader setPath]( [param:String path] )</h3>
+		<p>
+		[page:String path] — Base path.
+		</p>
+		<p>
+		Set the base path for the <em>.drc</em> file.
+		</p>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/DRACOLoader.js examples/js/loaders/DRACOLoader.js]
+	</body>
+</html>

docs/examples/loaders/OBJLoader2.html

@@ -52,7 +52,7 @@
 
 		<h2>Methods</h2>
 
-		<h3>[method:Object3D parse]( {[param:arraybuffer content]|[param:String content]] )</h3>
+		<h3>[method:Object3D parse]( [param:arraybuffer content]|[param:String content] )</h3>
 		<p>
 			[[page:arraybuffer content]|[page:String content]] OBJ data as Uint8Array or String
 		</p>

docs/examples/loaders/SVGLoader.html

@@ -26,8 +26,9 @@
 			// resource URL
 			'data/svgSample.svg',
 			// called when the resource is loaded
-			function ( paths ) {
+			function ( data ) {
 
+				var paths = data.paths;
 				var group = new THREE.Group();
 
 				for ( var i = 0; i < paths.length; i ++ ) {

docs/examples/objects/Lensflare.html

@@ -44,13 +44,12 @@ light.add( lensflare );
 		<h2>Constructor</h2>
 
 
-		<h3>LensflareElement( [param:Texture texture], [param:Float size], [param:Float distance], [param:Color color], [param:Materials blending] )</h3>
+		<h3>LensflareElement( [param:Texture texture], [param:Float size], [param:Float distance], [param:Color color] )</h3>
 		<p>
 		[page:Texture texture] - THREE.Texture to use for the flare. <br />
 		[page:Float size] - (optional) size in pixels <br />
 		[page:Float distance] - (optional) (0-1) from light source (0 = at light source) <br />
-		[page:Color color] - (optional) the [page:Color] of the lens flare<br />
-		[page:Materials blending] - (optional) [page:Materials Blending Mode] - Defaults to THREE.NormalBlending
+		[page:Color color] - (optional) the [page:Color] of the lens flare
 		</p>
 
 		<h2>Properties</h2>

docs/examples/utils/SkeletonUtils.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>[name]</h1>
+
+		<p class="desc">Utility functions for [page:Skeleton], [page:SkinnedMesh], and [page:Bone] manipulation.</p>
+
+
+		<h2>Methods</h2>
+
+		<h3>[method:Object3D clone]( [param:Object3D object] )</h3>
+		<p>
+			Clones the given object and its descendants, ensuring that any [page:SkinnedMesh] instances
+			are correctly associated with their bones. Bones are also cloned, and must be descendants of
+			the object passed to this method. Other data, like geometries and materials, are reused by
+			reference.
+		</p>
+
+		<h3>[method:Object findBoneTrackData]( [param:String name], [param:Array tracks] )</h3>
+		<p></p>
+
+		<h3>[method:Bone getBoneByName]( [param:String name], [param:Skeleton skeleton] )</h3>
+		<p></p>
+
+		<h3>[method:Array getBones]( [param:Skeleton skeleton] )</h3>
+		<p></p>
+
+		<h3>[method:Array getEqualsBonesNames]( [param:Skeleton skeleton], [param:Skeleton targetSkeleton] )</h3>
+		<p></p>
+
+		<h3>[method:SkeletonHelper getHelperFromSkeleton]( [param:Skeleton skeleton] )</h3>
+		<p></p>
+
+		<h3>[method:Bone getNearestBone]( [param:Bone bone], [param:Array names] )</h3>
+		<p></p>
+
+		<h3>[method:Object getSkeletonOffsets]( [param:SkeletonHelper target], [param:SkeletonHelper source], [param:Object options] )</h3>
+		<p></p>
+
+		<h3>[method:this renameBones]( [param:Skeleton skeleton], [param:Array names] )</h3>
+		<p></p>
+
+		<h3>[method:null retarget]( [param:SkeletonHelper target], [param:SkeletonHelper source], [param:Object options] )</h3>
+		<p></p>
+
+		<h3>[method:AnimationClip retargetClip]( [param:SkeletonHelper target], [param:SkeletonHelper source], [param:AnimationClip clip], [param:Object options] )</h3>
+		<p></p>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/utils/SkeletonUtils.js examples/js/utils/SkeletonUtils.js]
+	</body>
+</html>

docs/list.js

@@ -363,6 +363,7 @@ var list = {
 
 			"Loaders": {
 				"BabylonLoader": "examples/loaders/BabylonLoader",
+				"DRACOLoader": "examples/loaders/DRACOLoader",
 				"GLTFLoader": "examples/loaders/GLTFLoader",
 				"MMDLoader": "examples/loaders/MMDLoader",
 				"MTLLoader": "examples/loaders/MTLLoader",
@@ -407,7 +408,8 @@ var list = {
 
 			"Utils": {
 				"BufferGeometryUtils": "examples/utils/BufferGeometryUtils",
-				"SceneUtils": "examples/utils/SceneUtils"
+				"SceneUtils": "examples/utils/SceneUtils",
+				"SkeletonUtils": "examples/utils/SkeletonUtils"
 			}
 
 		},

editor/css/dark.css

@@ -294,7 +294,7 @@ select {
 	#toolbar {
 		left: calc(50% - 140px);
 		width: 280px;
-		top: 52px;
+		top: 68px;
 	}
 
 }

editor/css/light.css

@@ -287,7 +287,7 @@ select {
 	#toolbar {
 		left: calc(50% - 140px);
 		width: 280px;
-		top: 52px;
+		top: 68px;
 	}
 
 }

editor/index.html

@@ -4,8 +4,7 @@
 		<title>three.js / editor</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<!-- Origin Trial Token, feature = WebXR Device API (For Chrome M69+), origin = https://threejs.org, expires = 2019-03-06 -->
-		<meta http-equiv="origin-trial" data-feature="WebXR Device API (For Chrome M69+)" data-expires="2019-03-06" content="AvDjbxYpoTgOL1PS0JEra7KFCehfTlKnXpU/ORSwNdCQ35cX70cTUkXOnQ26A5XJi3eXHSKpBPchdt5lbcxDuAIAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU02OSIsImV4cGlyeSI6MTU1MTgzMDM5OX0=">
+		<link rel="apple-touch-icon" href="images/icon.png">
 		<link rel="manifest" href="manifest.json">
 	</head>
 	<body ontouchstart="">
@@ -142,6 +141,7 @@
 		<script src="js/Strings.js"></script>
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>
+		<script src="js/Viewport.Camera.js"></script>
 		<script src="js/Viewport.Info.js"></script>
 
 		<script src="js/Command.js"></script>
@@ -191,14 +191,11 @@
 			var player = new Player( editor );
 			document.body.appendChild( player.dom );
 
-			var menubar = new Menubar( editor );
-			document.body.appendChild( menubar.dom );
-
 			var sidebar = new Sidebar( editor );
 			document.body.appendChild( sidebar.dom );
 
-			var modal = new UI.Modal();
-			document.body.appendChild( modal.dom );
+			var menubar = new Menubar( editor );
+			document.body.appendChild( menubar.dom );
 
 			//
 
@@ -269,12 +266,6 @@
 				signals.scriptChanged.add( saveState );
 				signals.historyChanged.add( saveState );
 
-				signals.showModal.add( function ( content ) {
-
-					modal.show( content );
-
-				} );
-
 			} );
 
 			//

editor/js/Editor.js

@@ -22,10 +22,6 @@ var Editor = function () {
 		startPlayer: new Signal(),
 		stopPlayer: new Signal(),
 
-		// actions
-
-		showModal: new Signal(),
-
 		// notifications
 
 		editorCleared: new Signal(),
@@ -55,6 +51,9 @@ var Editor = function () {
 		objectChanged: new Signal(),
 		objectRemoved: new Signal(),
 
+		cameraAdded: new Signal(),
+		cameraRemoved: new Signal(),
+
 		helperAdded: new Signal(),
 		helperRemoved: new Signal(),
 
@@ -68,7 +67,9 @@ var Editor = function () {
 
 		showGridChanged: new Signal(),
 		refreshSidebarObject3D: new Signal(),
-		historyChanged: new Signal()
+		historyChanged: new Signal(),
+
+		viewportCameraChanged: new Signal()
 
 	};
 
@@ -99,6 +100,11 @@ var Editor = function () {
 	this.selected = null;
 	this.helpers = {};
 
+	this.cameras = {};
+	this.viewportCamera = this.camera;
+
+	this.addCamera( this.camera );
+
 };
 
 Editor.prototype = {
@@ -149,6 +155,7 @@ Editor.prototype = {
 			if ( child.geometry !== undefined ) scope.addGeometry( child.geometry );
 			if ( child.material !== undefined ) scope.addMaterial( child.material );
 
+			scope.addCamera( child );
 			scope.addHelper( child );
 
 		} );
@@ -199,6 +206,7 @@ Editor.prototype = {
 
 		object.traverse( function ( child ) {
 
+			scope.removeCamera( child );
 			scope.removeHelper( child );
 
 		} );
@@ -254,6 +262,32 @@ Editor.prototype = {
 
 	//
 
+	addCamera: function ( camera ) {
+
+		if ( camera.isCamera ) {
+
+			this.cameras[ camera.uuid ] = camera;
+
+			this.signals.cameraAdded.dispatch( camera );
+
+		}
+
+	},
+
+	removeCamera: function ( camera ) {
+
+		if ( this.cameras[ camera.uuid ] !== undefined ) {
+
+			delete this.cameras[ camera.uuid ];
+
+			this.signals.cameraRemoved.dispatch( camera );
+
+		}
+
+	},
+
+	//
+
 	addHelper: function () {
 
 		var geometry = new THREE.SphereBufferGeometry( 2, 4, 2 );
@@ -383,6 +417,13 @@ Editor.prototype = {
 
 	},
 
+	setViewportCamera: function ( uuid ) {
+
+		this.viewportCamera = this.cameras[ uuid ];
+		this.signals.viewportCameraChanged.dispatch( this.viewportCamera );
+
+	},
+
 	//
 
 	select: function ( object ) {

editor/js/Loader.js

@@ -453,7 +453,7 @@ var Loader = function ( editor ) {
 					var contents = event.target.result;
 
 					var loader = new THREE.SVGLoader();
-					var paths = loader.parse( contents );
+					var paths = loader.parse( contents ).paths;
 
 					//
 

editor/js/Menubar.Add.js

@@ -380,7 +380,7 @@ Menubar.Add = function ( editor ) {
 	option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) );
 	option.onClick( function () {
 
-		var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10000 );
+		var camera = new THREE.PerspectiveCamera();
 		camera.name = 'PerspectiveCamera';
 
 		editor.execute( new AddObjectCommand( camera ) );

editor/js/Sidebar.Settings.js

@@ -72,7 +72,7 @@ Sidebar.Settings = function ( editor ) {
 	themeRow.add( new UI.Text( strings.getKey( 'sidebar/settings/theme' ) ).setWidth( '90px' ) );
 	themeRow.add( theme );
 
-	container.add( themeRow );
+	container.add( themeRow );	
 
 	container.add( new Sidebar.Settings.Shortcuts( editor ) );
 	container.add( new Sidebar.Settings.Viewport( editor ) );

editor/js/Viewport.Camera.js

@@ -0,0 +1,48 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+Viewport.Camera = function ( editor ) {
+
+	var signals = editor.signals;
+
+	//
+
+	var cameraSelect = new UI.Select();
+	cameraSelect.setPosition( 'absolute' );
+	cameraSelect.setRight( '10px' );
+	cameraSelect.setTop( '10px' );
+	cameraSelect.onChange( function () {
+
+		editor.setViewportCamera( this.getValue() );
+
+	} );
+
+	signals.cameraAdded.add( update );
+	signals.cameraRemoved.add( update );
+
+	update();
+
+	//
+
+	function update() {
+
+		var options = {};
+
+		var cameras = editor.cameras;
+
+		for ( var key in cameras ) {
+
+			var camera = cameras[ key ];
+			options[ camera.uuid ] = camera.name;
+
+		}
+
+		cameraSelect.setOptions( options );
+		cameraSelect.setValue( editor.viewportCamera.uuid );
+
+	}
+
+	return cameraSelect;
+
+};

editor/js/Viewport.js

@@ -10,6 +10,7 @@ var Viewport = function ( editor ) {
 	container.setId( 'viewport' );
 	container.setPosition( 'absolute' );
 
+	container.add( new Viewport.Camera( editor ) );
 	container.add( new Viewport.Info( editor ) );
 
 	//
@@ -198,7 +199,7 @@ var Viewport = function ( editor ) {
 
 	function onMouseDown( event ) {
 
-		event.preventDefault();
+		// event.preventDefault();
 
 		var array = getMousePosition( container.dom, event.clientX, event.clientY );
 		onDownPosition.fromArray( array );
@@ -478,16 +479,20 @@ var Viewport = function ( editor ) {
 
 		}
 
-		if ( scene.fog.isFog ) {
+		if ( scene.fog ) {
 
-			scene.fog.color.setHex( fogColor );
-			scene.fog.near = fogNear;
-			scene.fog.far = fogFar;
+			if ( scene.fog.isFog ) {
 
-		} else if ( scene.fog.isFogExp2 ) {
+				scene.fog.color.setHex( fogColor );
+				scene.fog.near = fogNear;
+				scene.fog.far = fogFar;
 
-			scene.fog.color.setHex( fogColor );
-			scene.fog.density = fogDensity;
+			} else if ( scene.fog.isFogExp2 ) {
+
+				scene.fog.color.setHex( fogColor );
+				scene.fog.density = fogDensity;
+
+			}
 
 		}
 
@@ -495,6 +500,17 @@ var Viewport = function ( editor ) {
 
 	} );
 
+	signals.viewportCameraChanged.add( function ( viewportCamera ) {
+
+		camera = viewportCamera;
+
+		camera.aspect = editor.camera.aspect;
+		camera.projectionMatrix.copy( editor.camera.projectionMatrix );
+
+		render();
+
+	} );
+
 	//
 
 	signals.windowResize.add( function () {
@@ -547,14 +563,17 @@ var Viewport = function ( editor ) {
 
 	function render() {
 
-		sceneHelpers.updateMatrixWorld();
 		scene.updateMatrixWorld();
-
 		renderer.render( scene, camera );
 
 		if ( renderer instanceof THREE.RaytracingRenderer === false ) {
 
-			renderer.render( sceneHelpers, camera );
+			if ( camera === editor.camera ) {
+
+				sceneHelpers.updateMatrixWorld();
+				renderer.render( sceneHelpers, camera );
+
+			}
 
 		}
 

editor/js/libs/ui.js

@@ -625,6 +625,56 @@ UI.Number = function ( number ) {
 
 	}
 
+	function onTouchStart( event ) {
+
+		if ( event.touches.length === 1 ) {
+
+			distance = 0;
+
+			onMouseDownValue = scope.value;
+
+			prevPointer = [ event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ];
+
+			document.addEventListener( 'touchmove', onTouchMove, false );
+			document.addEventListener( 'touchend', onTouchEnd, false );
+
+		}
+
+	}
+
+	function onTouchMove( event ) {
+
+		var currentValue = scope.value;
+
+		pointer = [ event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ];
+
+		distance += ( pointer[ 0 ] - prevPointer[ 0 ] ) - ( pointer[ 1 ] - prevPointer[ 1 ] );
+
+		var value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
+		value = Math.min( scope.max, Math.max( scope.min, value ) );
+
+		if ( currentValue !== value ) {
+
+			scope.setValue( value );
+			dom.dispatchEvent( changeEvent );
+
+		}
+
+		prevPointer = [ event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ];
+
+	}
+
+	function onTouchEnd( event ) {
+
+		if ( event.touches.length === 0 ) {
+
+			document.removeEventListener( 'touchmove', onTouchMove, false );
+			document.removeEventListener( 'touchend', onTouchEnd, false );
+
+		}
+
+	}
+
 	function onChange( event ) {
 
 		scope.setValue( dom.value );
@@ -648,6 +698,7 @@ UI.Number = function ( number ) {
 	onBlur();
 
 	dom.addEventListener( 'mousedown', onMouseDown, false );
+	dom.addEventListener( 'touchstart', onTouchStart, false );
 	dom.addEventListener( 'change', onChange, false );
 	dom.addEventListener( 'focus', onFocus, false );
 	dom.addEventListener( 'blur', onBlur, false );
@@ -944,61 +995,3 @@ UI.Button.prototype.setLabel = function ( value ) {
 	return this;
 
 };
-
-
-// Modal
-
-UI.Modal = function ( value ) {
-
-	var scope = this;
-
-	var dom = document.createElement( 'div' );
-
-	dom.style.position = 'absolute';
-	dom.style.width = '100%';
-	dom.style.height = '100%';
-	dom.style.backgroundColor = 'rgba(0,0,0,0.5)';
-	dom.style.display = 'none';
-	dom.style.alignItems = 'center';
-	dom.style.justifyContent = 'center';
-	dom.addEventListener( 'click', function ( event ) {
-
-		scope.hide();
-
-	} );
-
-	this.dom = dom;
-
-	this.container = new UI.Panel();
-	this.container.dom.style.width = '200px';
-	this.container.dom.style.padding = '20px';
-	this.container.dom.style.backgroundColor = '#ffffff';
-	this.container.dom.style.boxShadow = '0px 5px 10px rgba(0,0,0,0.5)';
-
-	this.add( this.container );
-
-	return this;
-
-};
-
-UI.Modal.prototype = Object.create( UI.Element.prototype );
-UI.Modal.prototype.constructor = UI.Modal;
-
-UI.Modal.prototype.show = function ( content ) {
-
-	this.container.clear();
-	this.container.add( content );
-
-	this.dom.style.display = 'flex';
-
-	return this;
-
-};
-
-UI.Modal.prototype.hide = function () {
-
-	this.dom.style.display = 'none';
-
-	return this;
-
-};

editor/sw.js

@@ -1,4 +1,4 @@
-// r102.1
+// r103
 
 const staticAssets = [
 	'./',

examples/files.js

@@ -4,6 +4,7 @@ var files = {
 		"webgl_animation_keyframes",
 		"webgl_animation_skinning_blending",
 		"webgl_animation_skinning_morph",
+		"webgl_animation_multiple",
 		"webgl_camera",
 		"webgl_camera_array",
 		"webgl_camera_cinematic",
@@ -43,6 +44,7 @@ var files = {
 		"webgl_geometry_terrain_raycast",
 		"webgl_geometry_text",
 		"webgl_geometry_text_shapes",
+		"webgl_geometry_text_stroke",
 		"webgl_hdr",
 		"webgl_helpers",
 		"webgl_interactive_buffergeometry",
@@ -66,6 +68,7 @@ var files = {
 		"webgl_lights_spotlight",
 		"webgl_lights_spotlights",
 		"webgl_lights_rectarealight",
+		"webgl_lightshafts",
 		"webgl_lines_colors",
 		"webgl_lines_dashed",
 		"webgl_lines_fat",
@@ -94,6 +97,7 @@ var files = {
 		"webgl_loader_json_claraio",
 		"webgl_loader_kmz",
 		"webgl_loader_ldraw",
+		"webgl_loader_lwo",
 		"webgl_loader_md2",
 		"webgl_loader_md2_control",
 		"webgl_loader_mmd",
@@ -310,6 +314,7 @@ var files = {
 		"webgldeferred_animation"
 	],
 	"webgl2": [
+		"webgl2_loader_gltf",
 		"webgl2_materials_texture2darray",
 		"webgl2_materials_texture3d",
 		"webgl2_multisampled_renderbuffers",
@@ -355,6 +360,7 @@ var files = {
 		"misc_controls_trackball",
 		"misc_controls_transform",
 		"misc_exporter_collada",
+		"misc_exporter_draco",
 		"misc_exporter_gltf",
 		"misc_exporter_obj",
 		"misc_exporter_stl",

examples/js/MD2Character.js

@@ -44,8 +44,10 @@ THREE.MD2Character = function () {
 
 		loader.load( config.baseUrl + config.body, function ( geo ) {
 
-			geo.computeBoundingBox();
-			scope.root.position.y = - scope.scale * geo.boundingBox.min.y;
+			var boundingBox = new THREE.Box3();
+			boundingBox.setFromBufferAttribute( geo.attributes.position );
+			
+			scope.root.position.y = - scope.scale * boundingBox.min.y;
 
 			var mesh = createPart( geo, scope.skinsBody[ 0 ] );
 			mesh.scale.set( scope.scale, scope.scale, scope.scale );

examples/js/MD2CharacterComplex.js

@@ -156,8 +156,10 @@ THREE.MD2CharacterComplex = function () {
 
 		loader.load( config.baseUrl + config.body, function( geo ) {
 
-			geo.computeBoundingBox();
-			scope.root.position.y = - scope.scale * geo.boundingBox.min.y;
+			var boundingBox = new THREE.Box3();
+			boundingBox.setFromBufferAttribute( geo.attributes.position );
+
+			scope.root.position.y = - scope.scale * boundingBox.min.y;
 
 			var mesh = createPart( geo, scope.skinsBody[ 0 ] );
 			mesh.scale.set( scope.scale, scope.scale, scope.scale );

examples/js/controls/EditorControls.js

@@ -13,7 +13,7 @@ THREE.EditorControls = function ( object, domElement ) {
 
 	this.enabled = true;
 	this.center = new THREE.Vector3();
-	this.panSpeed = 0.001;
+	this.panSpeed = 0.002;
 	this.zoomSpeed = 0.1;
 	this.rotationSpeed = 0.005;
 
@@ -104,8 +104,8 @@ THREE.EditorControls = function ( object, domElement ) {
 
 		spherical.setFromVector3( vector );
 
-		spherical.theta += delta.x;
-		spherical.phi += delta.y;
+		spherical.theta += delta.x * scope.rotationSpeed;
+		spherical.phi += delta.y * scope.rotationSpeed;
 
 		spherical.makeSafe();
 
@@ -159,7 +159,7 @@ THREE.EditorControls = function ( object, domElement ) {
 
 		if ( state === STATE.ROTATE ) {
 
-			scope.rotate( delta.set( - movementX * scope.rotationSpeed, - movementY * scope.rotationSpeed, 0 ) );
+			scope.rotate( delta.set( - movementX, - movementY, 0 ) );
 
 		} else if ( state === STATE.ZOOM ) {
 
@@ -235,13 +235,13 @@ THREE.EditorControls = function ( object, domElement ) {
 		switch ( event.touches.length ) {
 
 			case 1:
-				touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
-				touches[ 1 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
+				touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
+				touches[ 1 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
 				break;
 
 			case 2:
-				touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
-				touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 );
+				touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
+				touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
 				prevDistance = touches[ 0 ].distanceTo( touches[ 1 ] );
 				break;
 
@@ -277,14 +277,14 @@ THREE.EditorControls = function ( object, domElement ) {
 		switch ( event.touches.length ) {
 
 			case 1:
-				touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
-				touches[ 1 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
-				scope.rotate( touches[ 0 ].sub( getClosest( touches[ 0 ], prevTouches ) ).multiplyScalar( - scope.rotationSpeed ) );
+				touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
+				touches[ 1 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
+				scope.rotate( touches[ 0 ].sub( getClosest( touches[ 0 ], prevTouches ) ).multiplyScalar( - 1 ) );
 				break;
 
 			case 2:
-				touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 );
-				touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 );
+				touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
+				touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
 				var distance = touches[ 0 ].distanceTo( touches[ 1 ] );
 				scope.zoom( delta.set( 0, 0, prevDistance - distance ) );
 				prevDistance = distance;
@@ -295,7 +295,7 @@ THREE.EditorControls = function ( object, domElement ) {
 				offset0.x = - offset0.x;
 				offset1.x = - offset1.x;
 
-				scope.pan( offset0.add( offset1 ).multiplyScalar( 0.5 ) );
+				scope.pan( offset0.add( offset1 ) );
 
 				break;
 

examples/js/controls/TransformControls.js

@@ -128,6 +128,13 @@ THREE.TransformControls = function ( camera, domElement ) {
 		domElement.removeEventListener( "touchcancel", onPointerUp );
 		domElement.removeEventListener( "touchleave", onPointerUp );
 
+		this.traverse( function ( child ) {
+
+			if ( child.geometry ) child.geometry.dispose();
+			if ( child.material ) child.material.dispose();
+
+		} );
+
 	};
 
 	// Set current object
@@ -396,27 +403,33 @@ THREE.TransformControls = function ( camera, domElement ) {
 
 				if ( pointEnd.dot( pointStart ) < 0 ) d *= -1;
 
-				_tempVector.set( d, d, d );
+				_tempVector2.set( d, d, d );
 
 			} else {
 
-				_tempVector.copy( pointEnd ).divide( pointStart );
+				_tempVector.copy(pointStart);
+				_tempVector2.copy(pointEnd);
+
+				_tempVector.applyQuaternion( worldQuaternionInv );
+				_tempVector2.applyQuaternion( worldQuaternionInv );
+
+				_tempVector2.divide( _tempVector );
 
 				if ( axis.search( 'X' ) === -1 ) {
-					_tempVector.x = 1;
+					_tempVector2.x = 1;
 				}
 				if ( axis.search( 'Y' ) === -1 ) {
-					_tempVector.y = 1;
+					_tempVector2.y = 1;
 				}
 				if ( axis.search( 'Z' ) === -1 ) {
-					_tempVector.z = 1;
+					_tempVector2.z = 1;
 				}
 
 			}
 
 			// Apply scale
 
-			object.scale.copy( scaleStart ).multiply( _tempVector );
+			object.scale.copy( scaleStart ).multiply( _tempVector2 );
 
 		} else if ( mode === 'rotate' ) {
 
@@ -1183,7 +1196,7 @@ THREE.TransformControlsGizmo = function () {
 
 				var AXIS_HIDE_TRESHOLD = 0.99;
 				var PLANE_HIDE_TRESHOLD = 0.2;
-				var AXIS_FLIP_TRESHOLD = -0.4;
+				var AXIS_FLIP_TRESHOLD = 0.0;
 
 
 				if ( handle.name === 'X' || handle.name === 'XYZX' ) {

examples/js/effects/OutlineEffect.js

@@ -66,9 +66,9 @@ THREE.OutlineEffect = function ( renderer, parameters ) {
 	};
 
 	var uniformsChunk = {
-		outlineThickness: { type: "f", value: defaultThickness },
-		outlineColor: { type: "c", value: defaultColor },
-		outlineAlpha: { type: "f", value: defaultAlpha }
+		outlineThickness: { value: defaultThickness },
+		outlineColor: { value: defaultColor },
+		outlineAlpha: { value: defaultAlpha }
 	};
 
 	var vertexShaderChunk = [

examples/js/exporters/DracoExporter.js

@@ -0,0 +1,206 @@
+'use strict';
+
+/**
+ * Export draco compressed files from threejs geometry objects.
+ *
+ * Draco files are compressed and usually are smaller than conventional 3D file formats.
+ *
+ * The exporter receives a options object containing
+ *  - decodeSpeed, indicates how to tune the encoder regarding decode speed (0 gives better speed but worst quality)
+ *  - encodeSpeed, indicates how to tune the encoder parameters (0 gives better speed but worst quality)
+ *  - encoderMethod
+ *  - quantization, indicates the presision of each type of data stored in the draco file in the order (POSITION, NORMAL, COLOR, TEX_COORD, GENERIC)
+ *  - exportUvs
+ *  - exportNormals
+ *
+ * @class DRACOExporter
+ * @author tentone
+ */
+
+THREE.DRACOExporter = function () {};
+
+THREE.DRACOExporter.prototype = {
+
+	constructor: THREE.DRACOExporter,
+
+	parse: function ( geometry, options ) {
+
+
+		if ( DracoEncoderModule === undefined ) {
+
+			throw new Error( 'THREE.DRACOExporter: required the draco_decoder to work.' );
+
+		}
+
+		if ( options === undefined ) {
+
+			options = {
+
+				decodeSpeed: 5,
+				encodeSpeed: 5,
+				encoderMethod: THREE.DRACOExporter.MESH_EDGEBREAKER_ENCODING,
+				quantization: [ 16, 8, 8, 8, 8 ],
+				exportUvs: true,
+				exportNormals: true,
+				exportColor: false,
+
+			};
+
+		}
+
+		var dracoEncoder = DracoEncoderModule();
+		var encoder = new dracoEncoder.Encoder();
+		var builder = new dracoEncoder.MeshBuilder();
+		var mesh = new dracoEncoder.Mesh();
+
+		if ( geometry.isGeometry === true ) {
+
+			var bufferGeometry = new THREE.BufferGeometry();
+			bufferGeometry.fromGeometry( geometry );
+			geometry = bufferGeometry;
+
+		}
+
+		if ( geometry.isBufferGeometry !== true ) {
+
+			throw new Error( 'THREE.DRACOExporter.parse(geometry, options): geometry is not a THREE.Geometry or THREE.BufferGeometry instance.' );
+
+		}
+
+		var vertices = geometry.getAttribute( 'position' );
+		builder.AddFloatAttributeToMesh( mesh, dracoEncoder.POSITION, vertices.count, vertices.itemSize, vertices.array );
+
+		var faces = geometry.getIndex();
+
+		if ( faces !== null ) {
+
+			builder.AddFacesToMesh( mesh, faces.count, faces.array );
+
+		} else {
+
+			var faces = new ( vertices.count > 65535 ? Uint32Array : Uint16Array ) ( vertices.count );
+
+			for ( var i = 0; i < faces.length; i ++ ) {
+
+				faces[ i ] = i;
+
+			}
+
+			builder.AddFacesToMesh( mesh, vertices.count, faces );
+
+		}
+
+		if ( options.exportNormals === true ) {
+
+			var normals = geometry.getAttribute( 'normal' );
+
+			if ( normals !== undefined ) {
+
+				builder.AddFloatAttributeToMesh( mesh, dracoEncoder.NORMAL, normals.count, normals.itemSize, normals.array );
+
+			}
+
+		}
+
+		if ( options.exportUvs === true ) {
+
+			var uvs = geometry.getAttribute( 'uv' );
+
+			if ( uvs !== undefined ) {
+
+				builder.AddFloatAttributeToMesh( mesh, dracoEncoder.TEX_COORD, uvs.count, uvs.itemSize, uvs.array );
+
+			}
+
+		}
+
+		if ( options.exportColor === true ) {
+
+			var colors = geometry.getAttribute( 'color' );
+
+			if ( colors !== undefined ) {
+
+				builder.AddFloatAttributeToMesh( mesh, dracoEncoder.COLOR, colors.count, colors.itemSize, colors.array );
+
+			}
+
+		}
+
+		//Compress using draco encoder
+
+		var encodedData = new dracoEncoder.DracoInt8Array();
+
+		//Sets the desired encoding and decoding speed for the given options from 0 (slowest speed, but the best compression) to 10 (fastest, but the worst compression).
+
+		encoder.SetSpeedOptions( options.encodeSpeed || 5, options.decodeSpeed || 5 );
+
+		// Sets the desired encoding method for a given geometry.
+
+		if ( options.encoderMethod !== undefined ) {
+
+			encoder.SetEncodingMethod( options.encoderMethod );
+
+		}
+
+		// Sets the quantization (number of bits used to represent) compression options for a named attribute.
+		// The attribute values will be quantized in a box defined by the maximum extent of the attribute values.
+		if ( options.quantization !== undefined ) {
+
+			for ( var i = 0; i < 5; i ++ ) {
+
+				if ( options.quantization[ i ] !== undefined ) {
+
+					encoder.SetAttributeQuantization( i, options.quantization[ i ] );
+
+				}
+
+			}
+
+		}
+
+		var length = encoder.EncodeMeshToDracoBuffer( mesh, encodedData );
+		dracoEncoder.destroy( mesh );
+
+		if ( length === 0 ) {
+
+			throw new Error( 'THREE.DRACOExporter: Draco encoding failed.' );
+
+		}
+
+		//Copy encoded data to buffer.
+		var outputData = new Int8Array( new ArrayBuffer( length ) );
+
+		for ( var i = 0; i < length; i ++ ) {
+
+			outputData[ i ] = encodedData.GetValue( i );
+
+		}
+
+		dracoEncoder.destroy( encodedData );
+		dracoEncoder.destroy( encoder );
+		dracoEncoder.destroy( builder );
+
+		return outputData;
+
+	}
+
+};
+
+// Encoder methods
+
+THREE.DRACOExporter.MESH_EDGEBREAKER_ENCODING = 1;
+THREE.DRACOExporter.MESH_SEQUENTIAL_ENCODING = 0;
+
+// Geometry type
+
+THREE.DRACOExporter.POINT_CLOUD = 0;
+THREE.DRACOExporter.TRIANGULAR_MESH = 1;
+
+// Attribute type
+
+THREE.DRACOExporter.INVALID = - 1;
+THREE.DRACOExporter.POSITION = 0;
+THREE.DRACOExporter.NORMAL = 1;
+THREE.DRACOExporter.COLOR = 2;
+THREE.DRACOExporter.TEX_COORD = 3;
+THREE.DRACOExporter.GENERIC = 4;

examples/js/exporters/GLTFExporter.js

@@ -1162,9 +1162,22 @@ THREE.GLTFExporter.prototype = {
 			var modifiedAttribute = null;
 			for ( var attributeName in geometry.attributes ) {
 
+				// Ignore morph target attributes, which are exported later.
+				if ( attributeName.substr( 0, 5 ) === 'morph' ) continue;
+
 				var attribute = geometry.attributes[ attributeName ];
 				attributeName = nameConversion[ attributeName ] || attributeName.toUpperCase();
 
+				// Prefix all geometry attributes except the ones specifically
+				// listed in the spec; non-spec attributes are considered custom.
+				var validVertexAttributes =
+						/^(POSITION|NORMAL|TANGENT|TEXCOORD_\d+|COLOR_\d+|JOINTS_\d+|WEIGHTS_\d+)$/;
+				if ( ! validVertexAttributes.test( attributeName ) ) {
+
+					attributeName = '_' + attributeName;
+
+				}
+
 				if ( cachedData.attributes.has( attribute ) ) {
 
 					attributes[ attributeName ] = cachedData.attributes.get( attribute );
@@ -1184,15 +1197,11 @@ THREE.GLTFExporter.prototype = {
 
 				}
 
-				if ( attributeName.substr( 0, 5 ) !== 'MORPH' ) {
+				var accessor = processAccessor( modifiedAttribute || attribute, geometry );
+				if ( accessor !== null ) {
 
-					var accessor = processAccessor( modifiedAttribute || attribute, geometry );
-					if ( accessor !== null ) {
-
-						attributes[ attributeName ] = accessor;
-						cachedData.attributes.set( attribute, accessor );
-
-					}
+					attributes[ attributeName ] = accessor;
+					cachedData.attributes.set( attribute, accessor );
 
 				}
 
@@ -1360,6 +1369,8 @@ THREE.GLTFExporter.prototype = {
 
 					}
 
+					if ( primitive.indices === null ) delete primitive.indices;
+
 				}
 
 				var material = processMaterial( materials[ groups[ i ].materialIndex ] );
@@ -1754,7 +1765,7 @@ THREE.GLTFExporter.prototype = {
 
 			} else if ( object.isLight ) {
 
-				console.warn( 'THREE.GLTFExporter: Only directional, point, and spot lights are supported.' );
+				console.warn( 'THREE.GLTFExporter: Only directional, point, and spot lights are supported.', object );
 				return null;
 
 			}
@@ -2147,7 +2158,7 @@ THREE.GLTFExporter.Utils = {
 				console.warn( 'THREE.GLTFExporter: Morph target interpolation mode not yet supported. Using LINEAR instead.' );
 
 				sourceTrack = sourceTrack.clone();
-				sourceTrack.setInterpolation( InterpolateLinear );
+				sourceTrack.setInterpolation( THREE.InterpolateLinear );
 
 			}
 

examples/js/loaders/GCodeLoader.js

@@ -146,7 +146,7 @@ THREE.GCodeLoader.prototype.parse = function ( data ) {
 		} else if ( cmd === 'G2' || cmd === 'G3' ) {
 
 			//G2/G3 - Arc Movement ( G2 clock wise and G3 counter clock wise )
-			console.warn( 'THREE.GCodeLoader: Arc command not supported' );
+			//console.warn( 'THREE.GCodeLoader: Arc command not supported' );
 
 		} else if ( cmd === 'G90' ) {
 
@@ -170,7 +170,7 @@ THREE.GCodeLoader.prototype.parse = function ( data ) {
 
 		} else {
 
-			console.warn( 'THREE.GCodeLoader: Command not supported:' + cmd );
+			//console.warn( 'THREE.GCodeLoader: Command not supported:' + cmd );
 
 		}
 

examples/js/loaders/LWOLoader.js

@@ -0,0 +1,2466 @@
+/**
+ * @author Lewy Blue https://github.com/looeee
+ *
+ * Load files in LWO3 and LWO2 format
+ *
+ * LWO3 format specification:
+ * 	http://static.lightwave3d.com/sdk/2018/html/filefmts/lwo3.html
+ *
+ * LWO2 format specification:
+ * 	http://static.lightwave3d.com/sdk/2018/html/filefmts/lwo2.html
+ *
+ */
+
+THREE.LWOLoader = ( function () {
+
+	var lwoTree;
+
+	function LWOLoader( manager ) {
+
+		this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+
+	}
+
+	LWOLoader.prototype = {
+
+		constructor: LWOLoader,
+
+		crossOrigin: 'anonymous',
+
+		load: function ( url, onLoad, onProgress, onError ) {
+
+			var self = this;
+
+			var path = ( self.path === undefined ) ? THREE.LoaderUtils.extractUrlBase( url ) : self.path;
+
+			// give the mesh a default name based on the filename
+			var modelName = url.split( path ).pop().split( '.' )[ 0 ];
+
+			var loader = new THREE.FileLoader( this.manager );
+			loader.setPath( self.path );
+			loader.setResponseType( 'arraybuffer' );
+
+			loader.load( url, function ( buffer ) {
+
+				// console.time( 'Total parsing: ' );
+				onLoad( self.parse( buffer, path, modelName ) );
+				// console.timeEnd( 'Total parsing: ' );
+
+			}, onProgress, onError );
+
+		},
+
+		setCrossOrigin: function ( value ) {
+
+			this.crossOrigin = value;
+			return this;
+
+		},
+
+		setPath: function ( value ) {
+
+			this.path = value;
+			return this;
+
+		},
+
+		setResourcePath: function ( value ) {
+
+			this.resourcePath = value;
+			return this;
+
+		},
+
+		parse: function ( iffBuffer, path, modelName ) {
+
+			lwoTree = new IFFParser().parse( iffBuffer );
+
+			// console.log( 'lwoTree', lwoTree );
+
+			var textureLoader = new THREE.TextureLoader( this.manager ).setPath( this.resourcePath || path ).setCrossOrigin( this.crossOrigin );
+
+			return new LWOTreeParser( textureLoader ).parse( modelName );
+
+		}
+
+	};
+
+	// Parse the lwoTree object
+	function LWOTreeParser( textureLoader ) {
+
+		this.textureLoader = textureLoader;
+
+	}
+
+	LWOTreeParser.prototype = {
+
+		constructor: LWOTreeParser,
+
+		parse: function ( modelName ) {
+
+			this.materials = new MaterialParser( this.textureLoader ).parse();
+			this.defaultLayerName = modelName;
+
+			this.meshes = this.parseLayers();
+
+			return {
+				materials: this.materials,
+				meshes: this.meshes,
+			};
+
+		},
+
+		parseLayers() {
+
+			// array of all meshes for building hierarchy
+			var meshes = [];
+
+			// final array containing meshes with scene graph hierarchy set up
+			var finalMeshes = [];
+
+			var geometryParser = new GeometryParser();
+
+			var self = this;
+			lwoTree.layers.forEach( function ( layer ) {
+
+				var geometry = geometryParser.parse( layer.geometry, layer );
+
+				var mesh = self.parseMesh( geometry, layer );
+
+				meshes[ layer.number ] = mesh;
+
+				if ( layer.parent === - 1 ) finalMeshes.push( mesh );
+				else meshes[ layer.parent ].add( mesh );
+
+
+			} );
+
+			this.applyPivots( finalMeshes );
+
+			return finalMeshes;
+
+		},
+
+		parseMesh( geometry, layer ) {
+
+			var mesh;
+
+			var materials = this.getMaterials( geometry.userData.matNames, layer.geometry.type );
+
+			this.duplicateUVs( geometry, materials );
+
+			if ( layer.geometry.type === 'points' ) mesh = new THREE.Points( geometry, materials );
+			else if ( layer.geometry.type === 'lines' ) mesh = new THREE.LineSegments( geometry, materials );
+			else mesh = new THREE.Mesh( geometry, materials );
+
+			if ( layer.name ) mesh.name = layer.name;
+			else mesh.name = this.defaultLayerName + '_layer_' + layer.number;
+
+			mesh.userData.pivot = layer.pivot;
+
+			return mesh;
+
+		},
+
+		// TODO: may need to be reversed in z to convert LWO to three.js coordinates
+		applyPivots( meshes ) {
+
+			meshes.forEach( function ( mesh ) {
+
+				mesh.traverse( function ( child ) {
+
+					var pivot = child.userData.pivot;
+
+					child.position.x += pivot[ 0 ];
+					child.position.y += pivot[ 1 ];
+					child.position.z += pivot[ 2 ];
+
+					if ( child.parent ) {
+
+						var parentPivot = child.parent.userData.pivot;
+
+						child.position.x -= parentPivot[ 0 ];
+						child.position.y -= parentPivot[ 1 ];
+						child.position.z -= parentPivot[ 2 ];
+
+					}
+
+				} );
+
+			} );
+
+		},
+
+		getMaterials( namesArray, type ) {
+
+			var materials = [];
+
+			var self = this;
+
+			namesArray.forEach( function ( name, i ) {
+
+				materials[ i ] = self.getMaterialByName( name );
+
+			} );
+
+			// convert materials to line or point mats if required
+			if ( type === 'points' || type === 'lines' ) {
+
+				materials.forEach( function ( mat, i ) {
+
+					var spec = {
+						color: mat.color,
+					};
+
+					if ( type === 'points' ) {
+
+						spec.size = 0.1;
+						spec.map = mat.map;
+						spec.morphTargets = mat.morphTargets;
+						materials[ i ] = new THREE.PointsMaterial( spec );
+
+					} else if ( type === 'lines' ) {
+
+						materials[ i ] = new THREE.LineBasicMaterial( spec );
+
+					}
+
+				} );
+
+			}
+
+			// if there is only one material, return that directly instead of array
+			var filtered = materials.filter( Boolean );
+			if ( filtered.length === 1 ) return filtered[ 0 ];
+
+			return materials;
+
+		},
+
+		getMaterialByName( name ) {
+
+			return this.materials.filter( function ( m ) {
+
+				return m.name === name;
+
+			} )[ 0 ];
+
+		},
+
+		// If the material has an aoMap, duplicate UVs
+		duplicateUVs( geometry, materials ) {
+
+			var duplicateUVs = false;
+
+			if ( ! Array.isArray( materials ) ) {
+
+				if ( materials.aoMap ) duplicateUVs = true;
+
+			} else {
+
+				materials.forEach( function ( material ) {
+
+					if ( material.aoMap ) duplicateUVs = true;
+
+				} );
+
+			}
+
+			if ( ! duplicateUVs ) return;
+
+			geometry.addAttribute( 'uv2', new THREE.BufferAttribute( geometry.attributes.uv.array, 2 ) );
+
+		},
+
+	};
+
+	function MaterialParser( textureLoader ) {
+
+		this.textureLoader = textureLoader;
+
+	}
+
+	MaterialParser.prototype = {
+
+		constructor: MaterialParser,
+
+		parse: function () {
+
+			var materials = [];
+			this.textures = {};
+
+			for ( var name in lwoTree.materials ) {
+
+				if ( lwoTree.format === 'LWO3' ) {
+
+					materials.push( this.parseMaterial( lwoTree.materials[ name ], name, lwoTree.textures ) );
+
+				} else if ( lwoTree.format === 'LWO2' ) {
+
+					materials.push( this.parseMaterialLwo2( lwoTree.materials[ name ], name, lwoTree.textures ) );
+
+				}
+
+			}
+
+			return materials;
+
+		},
+
+		parseMaterial( materialData, name, textures ) {
+
+			var params = {
+				name: name,
+				side: this.getSide( materialData.attributes ),
+				flatShading: this.getSmooth( materialData.attributes ),
+			};
+
+			var connections = this.parseConnections( materialData.connections, materialData.nodes );
+
+			var maps = this.parseTextureNodes( connections.maps );
+
+			this.parseAttributeImageMaps( connections.attributes, textures, maps, materialData.maps );
+
+			var attributes = this.parseAttributes( connections.attributes, maps );
+
+			this.parseEnvMap( connections, maps, attributes );
+
+			params = Object.assign( maps, params );
+			params = Object.assign( params, attributes );
+
+			var type = connections.attributes.Roughness ? 'Standard' : 'Phong';
+
+			return new THREE[ 'Mesh' + type + 'Material' ]( params );
+
+		},
+
+		parseMaterialLwo2( materialData, name, textures ) {
+
+			var params = {
+				name: name,
+				side: this.getSide( materialData.attributes ),
+				flatShading: this.getSmooth( materialData.attributes ),
+			};
+
+			var attributes = this.parseAttributes( materialData.attributes, {} );
+			params = Object.assign( params, attributes );
+			return new THREE[ 'MeshPhongMaterial' ]( params );
+
+		},
+
+		// Note: converting from left to right handed coords by switching x -> -x in vertices, and
+		// then switching mat FrontSide -> BackSide
+		// NB: this means that THREE.FrontSide and THREE.BackSide have been switched!
+		getSide( attributes ) {
+
+			if ( ! attributes.side ) return THREE.BackSide;
+
+			switch ( attributes.side ) {
+
+				case 0:
+				case 1:
+					return THREE.BackSide;
+				case 2: return THREE.FrontSide;
+				case 3: return THREE.DoubleSide;
+
+			}
+
+		},
+
+		getSmooth( attributes ) {
+
+			if ( ! attributes.smooth ) return true;
+			return ! attributes.smooth;
+
+		},
+
+		parseConnections( connections, nodes ) {
+
+			var materialConnections = {
+				maps: {}
+			};
+
+			var inputName = connections.inputName;
+			var inputNodeName = connections.inputNodeName;
+			var nodeName = connections.nodeName;
+
+			var self = this;
+			inputName.forEach( function ( name, index ) {
+
+				if ( name === 'Material' ) {
+
+					var matNode = self.getNodeByRefName( inputNodeName[ index ], nodes );
+					materialConnections.attributes = matNode.attributes;
+					materialConnections.envMap = matNode.fileName;
+					materialConnections.name = inputNodeName[ index ];
+
+				}
+
+			} );
+
+			nodeName.forEach( function ( name, index ) {
+
+				if ( name === materialConnections.name ) {
+
+					materialConnections.maps[ inputName[ index ] ] = self.getNodeByRefName( inputNodeName[ index ], nodes );
+
+				}
+
+			} );
+
+			return materialConnections;
+
+		},
+
+		getNodeByRefName( refName, nodes ) {
+
+			for ( var name in nodes ) {
+
+				if ( nodes[ name ].refName === refName ) return nodes[ name ];
+
+			}
+
+		},
+
+		parseTextureNodes( textureNodes ) {
+
+			var maps = {};
+
+			for ( var name in textureNodes ) {
+
+				var node = textureNodes[ name ];
+				var path = node.fileName;
+
+				if ( ! path ) return;
+
+				var texture = this.loadTexture( path );
+
+				if ( node.widthWrappingMode !== undefined ) texture.wrapS = this.getWrappingType( node.widthWrappingMode );
+				if ( node.heightWrappingMode !== undefined ) texture.wrapT = this.getWrappingType( node.heightWrappingMode );
+
+				switch ( name ) {
+
+					case 'Color':
+						maps.map = texture;
+						break;
+					case 'Roughness':
+						maps.roughnessMap = texture;
+						maps.roughness = 0.5;
+						break;
+					case 'Specular':
+						maps.specularMap = texture;
+						maps.specular = 0xffffff;
+						break;
+					case 'Luminous':
+						maps.emissiveMap = texture;
+						maps.emissive = 0x808080;
+						break;
+					case 'Metallic':
+						maps.metalnessMap = texture;
+						maps.metalness = 0.5;
+						break;
+					case 'Transparency':
+					case 'Alpha':
+						maps.alphaMap = texture;
+						maps.transparent = true;
+						break;
+					case 'Normal':
+						maps.normalMap = texture;
+						if ( node.amplitude !== undefined ) maps.normalScale = new THREE.Vector2( node.amplitude, node.amplitude );
+						break;
+					case 'Bump':
+						maps.bumpMap = texture;
+						break;
+
+				}
+
+			}
+
+			// LWO BSDF materials can have both spec and rough, but this is not valid in three
+			if ( maps.roughnessMap && maps.specularMap ) delete maps.specularMap;
+
+			return maps;
+
+		},
+
+		// maps can also be defined on individual material attributes, parse those here
+		// This occurs on Standard (Phong) surfaces
+		parseAttributeImageMaps( attributes, textures, maps ) {
+
+			for ( var name in attributes ) {
+
+				var attribute = attributes[ name ];
+
+				if ( attribute.maps ) {
+
+					var mapData = attribute.maps[ 0 ];
+
+					var path = this.getTexturePathByIndex( mapData.imageIndex, textures );
+					if ( ! path ) return;
+
+					var texture = this.loadTexture( path );
+
+					if ( mapData.wrap !== undefined ) texture.wrapS = this.getWrappingType( mapData.wrap.w );
+					if ( mapData.wrap !== undefined ) texture.wrapT = this.getWrappingType( mapData.wrap.h );
+
+					switch ( name ) {
+
+						case 'Color':
+							maps.map = texture;
+							break;
+						case 'Diffuse':
+							maps.aoMap = texture;
+							break;
+						case 'Roughness':
+							maps.roughnessMap = texture;
+							maps.roughness = 1;
+							break;
+						case 'Specular':
+							maps.specularMap = texture;
+							maps.specular = 0xffffff;
+							break;
+						case 'Luminosity':
+							maps.emissiveMap = texture;
+							maps.emissive = 0x808080;
+							break;
+						case 'Metallic':
+							maps.metalnessMap = texture;
+							maps.metalness = 1;
+							break;
+						case 'Transparency':
+						case 'Alpha':
+							maps.alphaMap = texture;
+							maps.transparent = true;
+							break;
+						case 'Normal':
+							maps.normalMap = texture;
+							break;
+						case 'Bump':
+							maps.bumpMap = texture;
+							break;
+
+					}
+
+				}
+
+			}
+
+		},
+
+		parseAttributes( attributes, maps ) {
+
+			var params = {};
+
+			// don't use color data if color map is present
+			if ( attributes.Color && ! maps.map ) {
+
+				params.color = new THREE.Color().fromArray( attributes.Color.value );
+
+			} else params.color = new THREE.Color();
+
+
+			if ( attributes.Transparency && attributes.Transparency.value !== 0 ) {
+
+				params.opacity = 1 - attributes.Transparency.value;
+				params.transparent = true;
+
+			}
+
+			if ( attributes[ 'Bump Height' ] ) params.bumpScale = attributes[ 'Bump Height' ].value * 0.1;
+
+			if ( attributes[ 'Refraction Index' ] ) params.refractionRatio = 1 / attributes[ 'Refraction Index' ].value;
+
+			this.parseStandardAttributes( params, attributes, maps );
+			this.parsePhongAttributes( params, attributes, maps );
+
+			return params;
+
+		},
+
+		parseStandardAttributes( params, attributes, maps ) {
+
+			if ( attributes.Luminous && attributes.Luminous.value !== 0 && attributes[ 'Luminous Color' ] ) {
+
+				var emissiveColor = attributes[ 'Luminous Color' ].value.map( function ( val ) {
+
+					return val * attributes.Luminous.value;
+
+				} );
+
+				params.emissive = new THREE.Color().fromArray( emissiveColor );
+
+			}
+			if ( attributes.Roughness && ! maps.roughnessMap ) params.roughness = attributes.Roughness.value;
+			if ( attributes.Metallic && ! maps.metalnessMap ) params.metalness = attributes.Metallic.value;
+
+		},
+
+		parsePhongAttributes( params, attributes, maps ) {
+
+			if ( attributes.Diffuse ) params.color.multiplyScalar( attributes.Diffuse.value );
+
+			if ( attributes.Reflection ) {
+
+				params.reflectivity = attributes.Reflection.value;
+				params.combine = THREE.AddOperation;
+
+			}
+
+			if ( attributes.Luminosity && ! maps.emissiveMap ) params.emissive = new THREE.Color().setScalar( attributes.Luminosity.value );
+
+			if ( attributes.Glossiness !== undefined ) params.shininess = 5 + Math.pow( attributes.Glossiness.value * 7, 6 );
+
+			// parse specular if there is no roughness - we will interpret the material as 'Phong' in this case
+			if ( ! attributes.Roughness && attributes.Specular && ! maps.specularMap ) params.specular = new THREE.Color().setScalar( attributes.Specular.value * 1.5 );
+
+		},
+
+		parseEnvMap( connections, maps, attributes ) {
+
+			if ( connections.envMap ) {
+
+				var envMap = this.loadTexture( connections.envMap );
+
+				if ( attributes.transparent && attributes.opacity < 0.999 ) {
+
+					envMap.mapping = THREE.EquirectangularRefractionMapping;
+
+					// Reflectivity and refraction mapping don't work well together in Phong materials
+					if ( attributes.reflectivity !== undefined ) {
+
+						delete attributes.reflectivity;
+						delete attributes.combine;
+
+					}
+
+					if ( attributes.metalness !== undefined ) {
+
+						delete attributes.metalness;
+
+					}
+
+				} else envMap.mapping = THREE.EquirectangularReflectionMapping;
+
+				maps.envMap = envMap;
+
+			}
+
+		},
+
+		// get texture defined at top level by its index
+		getTexturePathByIndex( index ) {
+
+			var fileName = '';
+
+			if ( ! lwoTree.textures ) return fileName;
+
+			lwoTree.textures.forEach( function ( texture ) {
+
+				if ( texture.index === index ) fileName = texture.fileName;
+
+			} );
+
+			return fileName;
+
+		},
+
+		loadTexture( path ) {
+
+			if ( ! path ) return null;
+
+			return this.textureLoader.load( this.cleanPath( path ) );
+
+		},
+
+		// Lightwave expects textures to be in folder called Images relative
+		// to the model
+		// Otherwise, the full absolute path is stored: D://some_directory/textures/bumpMap.png
+		// In this case, we'll strip out everything and load 'bumpMap.png' from the same directory as the model
+		cleanPath( path ) {
+
+			if ( path.indexOf( 'Images' ) === 0 ) return './' + path;
+			return path.split( '/' ).pop().split( '\\' ).pop();
+
+		},
+
+		// 0 = Reset, 1 = Repeat, 2 = Mirror, 3 = Edge
+		getWrappingType( num ) {
+
+			switch ( num ) {
+
+				case 0:
+					console.warn( 'LWOLoader: "Reset" texture wrapping type is not supported in three.js' );
+					return THREE.ClampToEdgeWrapping;
+				case 1: return THREE.RepeatWrapping;
+				case 2: return THREE.MirroredRepeatWrapping;
+				case 3: return THREE.ClampToEdgeWrapping;
+
+			}
+
+		},
+
+		getType( nodeData ) {
+
+			if ( nodeData.roughness ) return 'Standard';
+			return 'Phong';
+
+		},
+
+	};
+
+	function GeometryParser() {}
+
+	GeometryParser.prototype = {
+
+		constructor: GeometryParser,
+
+		parse( geoData, layer ) {
+
+			var geometry = new THREE.BufferGeometry();
+
+			geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( geoData.points, 3 ) );
+
+			var indices = this.splitIndices( geoData.vertexIndices, geoData.polygonDimensions );
+			geometry.setIndex( indices );
+
+			this.parseGroups( geometry, geoData );
+
+			geometry.computeVertexNormals();
+
+			this.parseUVs( geometry, layer, indices );
+			this.parseMorphTargets( geometry, layer, indices );
+
+			// TODO: z may need to be reversed to account for coordinate system change
+			geometry.translate( - layer.pivot[ 0 ], - layer.pivot[ 1 ], - layer.pivot[ 2 ] );
+
+			// var userData = geometry.userData;
+			// geometry = geometry.toNonIndexed()
+			// geometry.userData = userData;
+
+			return geometry;
+
+		},
+
+		// split quads into tris
+		splitIndices( indices, polygonDimensions ) {
+
+			var remappedIndices = [];
+
+			var i = 0;
+			polygonDimensions.forEach( function ( dim ) {
+
+				if ( dim < 4 ) {
+
+					for ( var k = 0; k < dim; k ++ ) remappedIndices.push( indices[ i + k ] );
+
+				} else if ( dim === 4 ) {
+
+					remappedIndices.push(
+						indices[ i ],
+						indices[ i + 1 ],
+						indices[ i + 2 ],
+
+						indices[ i ],
+						indices[ i + 2 ],
+						indices[ i + 3 ]
+
+					);
+
+				} else if ( dim > 4 ) {
+
+					for ( var k = 1; k < dim - 1; k ++ ) {
+
+						remappedIndices.push( indices[ i ], indices[ i + k ], indices[ i + k + 1 ] );
+
+					}
+
+					console.warn( 'LWOLoader: polygons with greater than 4 sides are not supported' );
+
+				}
+
+				i += dim;
+
+			} );
+
+			return remappedIndices;
+
+		},
+
+		// NOTE: currently ignoring poly indices and assuming that they are intelligently ordered
+		parseGroups( geometry, geoData ) {
+
+			var tags = lwoTree.tags;
+			var matNames = [];
+
+			var elemSize = 3;
+			if ( geoData.type === 'lines' ) elemSize = 2;
+			if ( geoData.type === 'points' ) elemSize = 1;
+
+			var remappedIndices = this.splitMaterialIndices( geoData.polygonDimensions, geoData.materialIndices );
+
+			var indexNum = 0; // create new indices in numerical order
+			var indexPairs = {}; // original indices mapped to numerical indices
+
+			var prevMaterialIndex;
+
+			var prevStart = 0;
+			var currentCount = 0;
+
+			for ( var i = 0; i < remappedIndices.length; i += 2 ) {
+
+				var materialIndex = remappedIndices[ i + 1 ];
+
+				if ( i === 0 ) matNames[ indexNum ] = tags[ materialIndex ];
+
+				if ( prevMaterialIndex === undefined ) prevMaterialIndex = materialIndex;
+
+				if ( materialIndex !== prevMaterialIndex ) {
+
+					var currentIndex;
+					if ( indexPairs[ tags[ prevMaterialIndex ] ] ) {
+
+						currentIndex = indexPairs[ tags[ prevMaterialIndex ] ];
+
+					} else {
+
+						currentIndex = indexNum;
+						indexPairs[ tags[ prevMaterialIndex ] ] = indexNum;
+						matNames[ indexNum ] = tags[ prevMaterialIndex ];
+						indexNum ++;
+
+					}
+
+					geometry.addGroup( prevStart, currentCount, currentIndex );
+
+					prevStart += currentCount;
+
+					prevMaterialIndex = materialIndex;
+					currentCount = 0;
+
+				}
+
+				currentCount += elemSize;
+
+			}
+
+			// the loop above doesn't add the last group, do that here.
+			if ( geometry.groups.length > 0 ) {
+
+				var currentIndex;
+				if ( indexPairs[ tags[ materialIndex ] ] ) {
+
+					currentIndex = indexPairs[ tags[ materialIndex ] ];
+
+				} else {
+
+					currentIndex = indexNum;
+					indexPairs[ tags[ materialIndex ] ] = indexNum;
+					matNames[ indexNum ] = tags[ materialIndex ];
+
+				}
+
+				geometry.addGroup( prevStart, currentCount, currentIndex );
+
+			}
+
+			// Mat names from TAGS chunk, used to build up an array of materials for this geometry
+			geometry.userData.matNames = matNames;
+
+		},
+
+		splitMaterialIndices( polygonDimensions, indices ) {
+
+			var remappedIndices = [];
+
+			polygonDimensions.forEach( function ( dim, i ) {
+
+				if ( dim <= 3 ) {
+
+					remappedIndices.push( indices[ i * 2 ], indices[ i * 2 + 1 ] );
+
+				} else if ( dim === 4 ) {
+
+					remappedIndices.push( indices[ i * 2 ], indices[ i * 2 + 1 ], indices[ i * 2 ], indices[ i * 2 + 1 ] );
+
+				} else {
+
+					 // ignore > 4 for now
+					for ( var k = 0; k < dim - 2; k ++ ) {
+
+						remappedIndices.push( indices[ i * 2 ], indices[ i * 2 + 1 ] );
+
+					}
+
+				}
+
+			} );
+
+			return remappedIndices;
+
+		},
+
+		// UV maps:
+		// 1: are defined via index into an array of points, not into a geometry
+		// - the geometry is also defined by an index into this array, but the indexes may not match
+		// 2: there can be any number of UV maps for a single geometry. Here these are combined,
+		// 	with preference given to the first map encountered
+		// 3: UV maps can be partial - that is, defined for only a part of the geometry
+		// 4: UV maps can be VMAP or VMAD (discontinuous, to allow for seams). In practice, most
+		// UV maps are defined as partially VMAP and partially VMAD
+		// VMADs are currently not supported
+		parseUVs( geometry, layer ) {
+
+			// start by creating a UV map set to zero for the whole geometry
+			var remappedUVs = Array.from( Array( geometry.attributes.position.count * 2 ), function () {
+
+				return 0;
+
+			} );
+
+			for ( var name in layer.uvs ) {
+
+				var uvs = layer.uvs[ name ].uvs;
+				var uvIndices = layer.uvs[ name ].uvIndices;
+
+				uvIndices.forEach( function ( i, j ) {
+
+					remappedUVs[ i * 2 ] = uvs[ j * 2 ];
+					remappedUVs[ i * 2 + 1 ] = uvs[ j * 2 + 1 ];
+
+				} );
+
+			}
+
+			geometry.addAttribute( 'uv', new THREE.Float32BufferAttribute( remappedUVs, 2 ) );
+
+		},
+
+		parseMorphTargets( geometry, layer ) {
+
+			var num = 0;
+			for ( var name in layer.morphTargets ) {
+
+				var remappedPoints = geometry.attributes.position.array.slice();
+
+				if ( ! geometry.morphAttributes.position ) geometry.morphAttributes.position = [];
+
+				var morphPoints = layer.morphTargets[ name ].points;
+				var morphIndices = layer.morphTargets[ name ].indices;
+				var type = layer.morphTargets[ name ].type;
+
+				morphIndices.forEach( function ( i, j ) {
+
+					if ( type === 'relative' ) {
+
+						remappedPoints[ i * 3 ] += morphPoints[ j * 3 ];
+						remappedPoints[ i * 3 + 1 ] += morphPoints[ j * 3 + 1 ];
+						remappedPoints[ i * 3 + 2 ] += morphPoints[ j * 3 + 2 ];
+
+					} else {
+
+						remappedPoints[ i * 3 ] = morphPoints[ j * 3 ];
+						remappedPoints[ i * 3 + 1 ] = morphPoints[ j * 3 + 1 ];
+						remappedPoints[ i * 3 + 2 ] = morphPoints[ j * 3 + 2 ];
+
+					}
+
+				} );
+
+				geometry.morphAttributes.position[ num ] = new THREE.Float32BufferAttribute( remappedPoints, 3 );
+				geometry.morphAttributes.position[ num ].name = name;
+
+				num ++;
+
+			}
+
+		},
+
+	};
+
+	// parse data from the IFF buffer.
+	// LWO3 files are in IFF format and can contain the following data types, referred to by shorthand codes
+	//
+	// ATOMIC DATA TYPES
+	// ID Tag - 4x 7 bit uppercase ASCII chars: ID4
+	// signed integer, 1, 2, or 4 byte length: I1, I2, I4
+	// unsigned integer, 1, 2, or 4 byte length: U1, U2, U4
+	// float, 4 byte length: F4
+	// string, series of ASCII chars followed by null byte (If the length of the string including the null terminating byte is odd, an extra null is added so that the data that follows will begin on an even byte boundary): S0
+	//
+	//  COMPOUND DATA TYPES
+	// Variable-length Index (index into an array or collection): U2 or U4 : VX
+	// Color (RGB): F4 + F4 + F4: COL12
+	// Coordinate (x, y, z): F4 + F4 + F4: VEC12
+	// Percentage F4 data type from 0->1 with 1 = 100%: FP4
+	// Angle in radian F4: ANG4
+	// Filename (string) S0: FNAM0
+	// XValue F4 + index (VX) + optional envelope( ENVL ): XVAL
+	// XValue vector VEC12 + index (VX) + optional envelope( ENVL ): XVAL3
+	//
+	// The IFF file is arranged in chunks:
+	// CHUNK = ID4 + length (U4) + length X bytes of data + optional 0 pad byte
+	// optional 0 pad byte is there to ensure chunk ends on even boundary, not counted in size
+
+	// Chunks are combined in Forms (collections of chunks)
+	// FORM = string 'FORM' (ID4) + length (U4) + type (ID4) + optional ( CHUNK | FORM )
+
+	// CHUNKS and FORMS are collectively referred to as blocks
+
+	// The entire file is contained in one top level FORM
+	function IFFParser() {}
+
+	IFFParser.prototype = {
+
+		constructor: IFFParser,
+
+		parse: function ( buffer ) {
+
+			// dump the whole buffer as a string for testing
+			// printBuffer( buffer );
+
+			this.reader = new DataViewReader( buffer );
+
+			this.tree = {
+				materials: {},
+				layers: [],
+				tags: [],
+				textures: [],
+			};
+
+			// start out at the top level to add any data before first layer is encountered
+			this.currentLayer = this.tree;
+			this.currentForm = this.tree;
+
+			// parse blocks until end of file is reached
+			while ( ! this.reader.endOfFile() ) this.parseBlock();
+
+			return this.tree;
+
+		},
+
+		parseBlock() {
+
+			var blockID = this.reader.getIDTag();
+			var length = this.reader.getUint32(); // size of data in bytes
+			if ( this.tree.format === 'LWO2' && length > this.reader.dv.byteLength - this.reader.offset ) {
+
+				this.reader.offset -= 4;
+				length = this.reader.getUint16();
+
+			}
+
+
+			// Data types may be found in either LWO2 OR LWO3 spec
+			switch ( blockID ) {
+
+				case 'FORM': // form blocks may consist of sub -chunks or sub-forms
+					this.parseForm( length );
+					break;
+
+					// SKIPPED CHUNKS
+
+				// MISC skipped
+				case 'ICON': // Thumbnail Icon Image
+				case 'VMPA': // Vertex Map Parameter
+				case 'BBOX': // bounding box
+				// case 'VMMD':
+				// case 'VTYP':
+
+				// normal maps can be specified, normally on models imported from other applications. Currently ignored
+				case 'NORM':
+
+				// ENVL FORM skipped
+				case 'PRE ':
+				case 'POST':
+				case 'KEY ':
+				case 'SPAN':
+
+				// CLIP FORM skipped
+				case 'TIME':
+				case 'CLRS':
+				case 'CLRA':
+				case 'FILT':
+				case 'DITH':
+				case 'CONT':
+				case 'BRIT':
+				case 'SATR':
+				case 'HUE ':
+				case 'GAMM':
+				case 'NEGA':
+				case 'IFLT':
+				case 'PFLT':
+
+				// Image Map Layer skipped
+				case 'PROJ':
+				case 'AXIS':
+				case 'AAST':
+				case 'PIXB':
+				case 'STCK':
+
+				// Procedural Textures skipped
+				case 'VALU':
+
+				// Gradient Textures skipped
+				case 'PNAM':
+				case 'INAM':
+				case 'GRST':
+				case 'GREN':
+				case 'GRPT':
+				case 'FKEY':
+				case 'IKEY':
+
+				// Texture Mapping Form skipped
+				case 'CSYS':
+
+					// Surface CHUNKs skipped
+				case 'OPAQ': // top level 'opacity' checkbox
+				case 'CMAP': // clip map
+
+				// Surface node CHUNKS skipped
+				// These mainly specify the node editor setup in LW
+				case 'NLOC':
+				case 'NZOM':
+				case 'NVER':
+				case 'NSRV':
+				case 'NCRD':
+				case 'NMOD':
+				case 'NPRW':
+				case 'NPLA':
+				case 'VERS':
+				case 'ENUM':
+				case 'TAG ':
+
+				// Car Material CHUNKS
+				case 'CGMD':
+				case 'CGTY':
+				case 'CGST':
+				case 'CGEN':
+				case 'CGTS':
+				case 'CGTE':
+				case 'OSMP':
+				case 'OMDE':
+				case 'OUTR':
+					this.reader.skip( length );
+					break;
+
+				case 'FLAG':
+					if ( this.tree.format === 'LWO2' ) {
+
+						this.reader.skip( 4 ); // not suported
+
+					} else {
+
+						this.reader.skip( length );
+
+					}
+					break;
+				// Skipped LWO2 chunks
+				case 'DIFF': // diffuse level, may be necessary to modulate COLR with this
+					if ( this.tree.format === 'LWO2' ) {
+
+						this.currentSurface.diffusePower = this.reader.getFloat32();
+						this.reader.skip( 2 );
+
+					}
+					break;
+				case 'TRNL':
+				case 'GLOS':
+				case 'SHRP':
+				case 'RFOP':
+				case 'RSAN':
+				case 'TROP':
+				case 'RBLR':
+				case 'TBLR':
+				case 'CLRH':
+				case 'CLRF':
+				case 'ADTR':
+				case 'GLOW':
+				case 'LINE':
+				case 'ALPH':
+				case 'VCOL':
+					this.reader.skip( length );
+					break;
+				case 'SURF':
+					if ( this.tree.format === 'LWO2' ) {
+
+						this.parseSurfaceLwo2( length );
+
+					}
+					break;
+				case 'CLIP':
+					if ( this.tree.format === 'LWO2' ) {
+
+						this.parseClipLwo2( length );
+
+					}
+					break;
+				// Texture node chunks (not in spec)
+				case 'IPIX': // usePixelBlending
+				case 'IMIP': // useMipMaps
+				case 'IMOD': // imageBlendingMode
+				case 'AMOD': // unknown
+				case 'IINV': // imageInvertAlpha
+				case 'INCR': // imageInvertColor
+				case 'IAXS': // imageAxis ( for non-UV maps)
+				case 'IFOT': // imageFallofType
+				case 'ITIM': // timing for animated textures
+				case 'IWRL':
+				case 'IUTI':
+				case 'IINX':
+				case 'IINY':
+				case 'IINZ':
+				case 'IREF': // possibly a VX for reused texture nodes
+					if ( length === 4 ) this.currentNode[ blockID ] = this.reader.getInt32();
+					else this.reader.skip( length );
+					break;
+
+				case 'OTAG':
+					this.parseObjectTag();
+					break;
+
+				case 'LAYR':
+					this.parseLayer( length );
+					break;
+
+				case 'PNTS':
+					this.parsePoints( length );
+					break;
+
+				case 'VMAP':
+					this.parseVertexMapping( length );
+					break;
+
+				case 'POLS':
+					this.parsePolygonList( length );
+					break;
+
+				case 'TAGS':
+					this.parseTagStrings( length );
+					break;
+
+				case 'PTAG':
+					this.parsePolygonTagMapping( length );
+					break;
+
+				case 'VMAD':
+					this.parseVertexMapping( length, true );
+					break;
+
+				// Misc CHUNKS
+				case 'DESC': // Description Line
+					this.currentForm.description = this.reader.getString();
+					break;
+
+				case 'TEXT':
+				case 'CMNT':
+				case 'NCOM':
+					this.currentForm.comment = this.reader.getString();
+					break;
+
+					// Envelope Form
+				case 'NAME':
+					this.currentForm.channelName = this.reader.getString();
+					break;
+
+					// Image Map Layer
+
+				case 'WRAP':
+					this.currentForm.wrap = { w: this.reader.getUint16(), h: this.reader.getUint16() };
+					break;
+
+				case 'IMAG':
+					var index = this.reader.getVariableLengthIndex();
+					this.currentForm.imageIndex = index;
+					break;
+
+					// Texture Mapping Form
+
+				case 'OREF':
+					this.currentForm.referenceObject = this.reader.getString();
+					break;
+
+				case 'ROID':
+					this.currentForm.referenceObjectID = this.reader.getUint32();
+					break;
+
+					// Surface Blocks
+
+				case 'SSHN':
+					this.currentSurface.surfaceShaderName = this.reader.getString();
+					break;
+
+				case 'AOVN':
+					this.currentSurface.surfaceCustomAOVName = this.reader.getString();
+					break;
+
+					// Nodal Blocks
+
+				case 'NSTA':
+					this.currentForm.disabled = this.reader.getUint16();
+					break;
+
+				case 'NRNM':
+					this.currentForm.realName = this.reader.getString();
+					break;
+
+				case 'NNME':
+					this.currentForm.refName = this.reader.getString();
+					this.currentSurface.nodes[ this.currentForm.refName ] = this.currentForm;
+					break;
+
+				// Nodal Blocks : connections
+				case 'INME':
+					if ( ! this.currentForm.nodeName ) this.currentForm.nodeName = [];
+					this.currentForm.nodeName.push( this.reader.getString() );
+					break;
+
+				case 'IINN':
+					if ( ! this.currentForm.inputNodeName ) this.currentForm.inputNodeName = [];
+					this.currentForm.inputNodeName.push( this.reader.getString() );
+					break;
+
+				case 'IINM':
+					if ( ! this.currentForm.inputName ) this.currentForm.inputName = [];
+					this.currentForm.inputName.push( this.reader.getString() );
+					break;
+
+				case 'IONM':
+					if ( ! this.currentForm.inputOutputName ) this.currentForm.inputOutputName = [];
+					this.currentForm.inputOutputName.push( this.reader.getString() );
+					break;
+
+				case 'FNAM':
+					this.currentForm.fileName = this.reader.getString();
+					break;
+
+				case 'CHAN': // NOTE: ENVL Forms may also have CHAN chunk, however ENVL is currently ignored
+					if ( length === 4 ) this.currentForm.textureChannel = this.reader.getIDTag();
+					else this.reader.skip( length );
+					break;
+
+					// LWO2 Spec chunks: these are needed since the SURF FORMs are often in LWO2 format
+
+				case 'SMAN':
+					var maxSmoothingAngle = this.reader.getFloat32();
+					this.currentSurface.attributes.smooth = ( maxSmoothingAngle < 0 ) ? false : true;
+					break;
+
+				case 'ENAB':
+					this.currentForm.enabled = this.reader.getUint16();
+					break;
+
+				// LWO2: Basic Surface Parameters
+				case 'COLR':
+					this.currentSurface.attributes.Color = {};
+					this.currentSurface.attributes.Color.value = this.reader.getFloat32Array( 3 );
+					this.reader.skip( 2 ); // VX: envelope
+					break;
+
+				case 'LUMI':
+					this.currentSurface.attributes.luminosityLevel = this.reader.getFloat32();
+					this.reader.skip( 2 );
+					break;
+
+				case 'SPEC':
+					this.currentSurface.attributes.specularLevel = this.reader.getFloat32();
+					this.reader.skip( 2 );
+					break;
+
+				case 'REFL':
+					this.currentSurface.attributes.reflectivity = this.reader.getFloat32();
+					this.reader.skip( 2 );
+					break;
+
+				case 'TRAN':
+					this.currentSurface.attributes.opacity = this.reader.getFloat32();
+					this.reader.skip( 2 );
+					break;
+
+				case 'BUMP':
+					this.currentSurface.attributes.bumpStrength = this.reader.getFloat32();
+					this.reader.skip( 2 );
+					break;
+
+				case 'SIDE':
+					this.currentSurface.attributes.side = this.reader.getUint16();
+					break;
+
+				case 'RIMG':
+					this.currentSurface.attributes.reflectionMap = this.reader.getVariableLengthIndex();
+					break;
+
+				case 'RIND':
+					this.currentSurface.attributes.refractiveIndex = this.reader.getFloat32();
+					this.reader.skip( 2 );
+					break;
+
+				case 'TIMG':
+					this.currentSurface.attributes.refractionMap = this.reader.getVariableLengthIndex();
+					break;
+
+				case 'IMAP':
+					if ( this.tree.format === 'LWO2' ) {
+
+						this.reader.skip( 2 );
+
+					} else {
+
+						this.currentSurface.attributes.imageMapIndex = this.reader.getUint32();
+
+					}
+					break;
+
+				case 'IUVI': // uv channel name
+					this.currentNode.UVChannel = this.reader.getString( length );
+					break;
+
+				case 'IUTL': // widthWrappingMode: 0 = Reset, 1 = Repeat, 2 = Mirror, 3 = Edge
+					this.currentNode.widthWrappingMode = this.reader.getUint32();
+					break;
+				case 'IVTL': // heightWrappingMode
+					this.currentNode.heightWrappingMode = this.reader.getUint32();
+					break;
+
+				// LWO2 USE
+				case 'BLOK':
+					// skip
+					break;
+
+				default:
+					this.parseUnknownCHUNK( blockID, length );
+
+			}
+
+			if ( this.reader.offset >= this.currentFormEnd ) {
+
+				this.currentForm = this.parentForm;
+
+			}
+
+		},
+
+
+		///
+		// FORM PARSING METHODS
+		///
+
+		// Forms are organisational and can contain any number of sub chunks and sub forms
+		// FORM ::= 'FORM'[ID4], length[U4], type[ID4], ( chunk[CHUNK] | form[FORM] ) * }
+		parseForm( length ) {
+
+			var type = this.reader.getIDTag();
+
+			switch ( type ) {
+
+				// SKIPPED FORMS
+				// if skipForm( length ) is called, the entire form and any sub forms and chunks are skipped
+
+				case 'ISEQ': // Image sequence
+				case 'ANIM': // plug in animation
+				case 'STCC': // Color-cycling Still
+				case 'VPVL':
+				case 'VPRM':
+				case 'NROT':
+				case 'WRPW': // image wrap w ( for cylindrical and spherical projections)
+				case 'WRPH': // image wrap h
+				case 'FUNC':
+				case 'FALL':
+				case 'OPAC':
+				case 'GRAD': // gradient texture
+				case 'ENVS':
+				case 'VMOP':
+				case 'VMBG':
+
+				// Car Material FORMS
+				case 'OMAX':
+				case 'STEX':
+				case 'CKBG':
+				case 'CKEY':
+				case 'VMLA':
+				case 'VMLB':
+					this.skipForm( length ); // not currently supported
+					break;
+
+				// if break; is called directly, the position in the lwoTree is not created
+				// any sub chunks and forms are added to the parent form instead
+				case 'META':
+				case 'NODS':
+				case 'NDTA':
+				case 'ADAT':
+				case 'AOVS':
+				case 'BLOK':
+
+				// used by texture nodes
+				case 'IBGC': // imageBackgroundColor
+				case 'IOPC': // imageOpacity
+				case 'IIMG': // hold reference to image path
+				case 'TXTR':
+					// this.setupForm( type, length );
+					break;
+
+				case 'IFAL': // imageFallof
+				case 'ISCL': // imageScale
+				case 'IPOS': // imagePosition
+				case 'IROT': // imageRotation
+				case 'IBMP':
+				case 'IUTD':
+				case 'IVTD':
+					this.parseTextureNodeAttribute( type );
+					break;
+
+				case 'LWO2':
+					this.tree.format = type;
+					break;
+
+				case 'LWO3':
+					this.tree.format = type;
+					break;
+
+				case 'ENVL':
+					this.parseEnvelope( length );
+					break;
+
+					// CLIP FORM AND SUB FORMS
+
+				case 'CLIP':
+					if ( this.tree.format === 'LWO2' ) {
+
+						this.parseForm( length );
+
+					} else {
+
+						this.parseClip( length );
+
+					}
+					break;
+
+				case 'STIL':
+					this.parseImage();
+					break;
+
+				case 'XREF': // clone of another STIL
+					this.reader.skip( 8 ); // unknown
+					this.currentForm.referenceTexture = {
+						index: this.reader.getUint32(),
+						refName: this.reader.getString() // internal unique ref
+					};
+					break;
+
+					// Not in spec, used by texture nodes
+
+				case 'IMST':
+					this.parseImageStateForm( length );
+					break;
+
+					// SURF FORM AND SUB FORMS
+
+				case 'SURF':
+					this.parseSurfaceForm( length );
+					break;
+
+				case 'VALU': // Not in spec
+					this.parseValueForm( length );
+					break;
+
+				case 'NTAG':
+					this.parseSubNode( length );
+					break;
+
+				case 'NNDS':
+					this.setupForm( 'nodes', length );
+					break;
+
+				case 'ATTR': // BSDF Node Attributes
+				case 'SATR': // Standard Node Attributes
+					this.setupForm( 'attributes', length );
+					break;
+
+				case 'NCON':
+					this.parseConnections( length );
+					break;
+
+				case 'SSHA':
+					this.parentForm = this.currentForm;
+					this.currentForm = this.currentSurface;
+					this.setupForm( 'surfaceShader', length );
+					break;
+
+				case 'SSHD':
+					this.setupForm( 'surfaceShaderData', length );
+					break;
+
+				case 'ENTR': // Not in spec
+					this.parseEntryForm( length );
+					break;
+
+					// Image Map Layer
+
+				case 'IMAP':
+					this.parseImageMap( length );
+					break;
+
+				case 'TAMP':
+					this.parseXVAL( 'amplitude', length );
+					break;
+
+					//Texture Mapping Form
+
+				case 'TMAP':
+					this.setupForm( 'textureMap', length );
+					break;
+
+				case 'CNTR':
+					this.parseXVAL3( 'center', length );
+					break;
+
+				case 'SIZE':
+					this.parseXVAL3( 'scale', length );
+					break;
+
+				case 'ROTA':
+					this.parseXVAL3( 'rotation', length );
+					break;
+
+				default:
+					this.parseUnknownForm( type, length );
+
+			}
+
+		},
+
+		setupForm( type, length ) {
+
+			if ( ! this.currentForm ) this.currentForm = this.currentNode;
+
+			this.currentFormEnd = this.reader.offset + length;
+			this.parentForm = this.currentForm;
+
+			if ( ! this.currentForm[ type ] ) {
+
+				this.currentForm[ type ] = {};
+				this.currentForm = this.currentForm[ type ];
+
+
+			} else {
+
+				// should never see this unless there's a bug in the reader
+				console.warn( 'LWOLoader: form already exists on parent: ', type, this.currentForm );
+
+				this.currentForm = this.currentForm[ type ];
+
+			}
+
+
+		},
+
+		skipForm( length ) {
+
+			this.reader.skip( length - 4 );
+
+		},
+
+		parseUnknownForm( type, length ) {
+
+			console.warn( 'LWOLoader: unknown FORM encountered: ' + type, length );
+
+			printBuffer( this.reader.dv.buffer, this.reader.offset, length - 4 );
+			this.reader.skip( length - 4 );
+
+		},
+
+		parseSurfaceForm( length ) {
+
+			this.reader.skip( 8 ); // unknown Uint32 x2
+
+			var name = this.reader.getString();
+
+			var surface = {
+				attributes: {}, // LWO2 style non-node attributes will go here
+				connections: {},
+				name: name,
+				inputName: name,
+				nodes: {},
+				source: this.reader.getString(),
+			};
+
+			this.tree.materials[ name ] = surface;
+			this.currentSurface = surface;
+
+			this.parentForm = this.tree.materials;
+			this.currentForm = surface;
+			this.currentFormEnd = this.reader.offset + length;
+
+		},
+
+		parseSurfaceLwo2( length ) {
+
+			var firstOffset = this.reader.offset;
+			var name = this.reader.getString();
+
+			var surface = {
+				attributes: {}, // LWO2 style non-node attributes will go here
+				connections: {},
+				name: name,
+				nodes: {},
+				source: this.reader.getString(),
+			};
+
+			this.tree.materials[ name ] = surface;
+			this.currentSurface = surface;
+
+			this.parentForm = this.tree.materials;
+			this.currentForm = surface;
+			this.currentFormEnd = this.reader.offset + length;
+
+		},
+
+		parseSubNode( length ) {
+
+			// parse the NRNM CHUNK of the subnode FORM to get
+			// a meaningful name for the subNode
+			// some subnodes can be renamed, but Input and Surface cannot
+
+			this.reader.skip( 8 ); // NRNM + length
+			var name = this.reader.getString();
+
+			var node = {
+				name: name
+			};
+			this.currentForm = node;
+			this.currentNode = node;
+
+			this.currentFormEnd = this.reader.offset + length;
+
+
+		},
+
+		// collect attributes from all nodes at the top level of a surface
+		parseConnections( length ) {
+
+			this.currentFormEnd = this.reader.offset + length;
+			this.parentForm = this.currentForm;
+
+			this.currentForm = this.currentSurface.connections;
+
+		},
+
+		// surface node attribute data, e.g. specular, roughness etc
+		parseEntryForm( length ) {
+
+			this.reader.skip( 8 ); // NAME + length
+			var name = this.reader.getString();
+			this.currentForm = this.currentNode.attributes;
+
+			this.setupForm( name, length );
+
+		},
+
+		// parse values from material - doesn't match up to other LWO3 data types
+		// sub form of entry form
+		parseValueForm() {
+
+			this.reader.skip( 8 ); // unknown + length
+
+			var valueType = this.reader.getString();
+
+			if ( valueType === 'double' ) {
+
+				this.currentForm.value = this.reader.getUint64();
+
+			} else if ( valueType === 'int' ) {
+
+				this.currentForm.value = this.reader.getUint32();
+
+			} else if ( valueType === 'vparam' ) {
+
+				this.reader.skip( 24 );
+				this.currentForm.value = this.reader.getFloat64();
+
+			} else if ( valueType === 'vparam3' ) {
+
+				this.reader.skip( 24 );
+				this.currentForm.value = this.reader.getFloat64Array( 3 );
+
+
+			}
+
+		},
+
+		// holds various data about texture node image state
+		// Data other thanmipMapLevel unknown
+		parseImageStateForm() {
+
+			this.reader.skip( 8 ); // unknown
+
+			this.currentForm.mipMapLevel = this.reader.getFloat32();
+
+		},
+
+		// LWO2 style image data node OR LWO3 textures defined at top level in editor (not as SURF node)
+		parseImageMap( length ) {
+
+			this.currentFormEnd = this.reader.offset + length;
+			this.parentForm = this.currentForm;
+
+			if ( ! this.currentForm.maps ) this.currentForm.maps = [];
+
+			var map = {};
+			this.currentForm.maps.push( map );
+			this.currentForm = map;
+
+			this.reader.skip( 10 ); // unknown, could be an issue if it contains a VX
+
+		},
+
+		parseTextureNodeAttribute( type ) {
+
+			this.reader.skip( 28 ); // FORM + length + VPRM + unknown + Uint32 x2 + float32
+
+			this.reader.skip( 20 ); // FORM + length + VPVL + float32 + Uint32
+
+			switch ( type ) {
+
+				case 'ISCL':
+					this.currentNode.scale = this.reader.getFloat32Array( 3 );
+					break;
+				case 'IPOS':
+					this.currentNode.position = this.reader.getFloat32Array( 3 );
+					break;
+				case 'IROT':
+					this.currentNode.rotation = this.reader.getFloat32Array( 3 );
+					break;
+				case 'IFAL':
+					this.currentNode.falloff = this.reader.getFloat32Array( 3 );
+					break;
+
+				case 'IBMP':
+					this.currentNode.amplitude = this.reader.getFloat32();
+					break;
+				case 'IUTD':
+					this.currentNode.uTiles = this.reader.getFloat32();
+					break;
+				case 'IVTD':
+					this.currentNode.vTiles = this.reader.getFloat32();
+					break;
+
+			}
+
+			this.reader.skip( 2 ); // unknown
+
+
+		},
+
+		// ENVL forms are currently ignored
+		parseEnvelope( length ) {
+
+			this.reader.skip( length - 4 ); // skipping  entirely for now
+
+		},
+
+		///
+		// CHUNK PARSING METHODS
+		///
+
+		// clips can either be defined inside a surface node, or at the top
+		// level and they have a different format in each case
+		parseClip( length ) {
+
+			var tag = this.reader.getIDTag();
+
+			// inside surface node
+			if ( tag === 'FORM' ) {
+
+				this.reader.skip( 16 );
+
+				this.currentNode.fileName = this.reader.getString();
+
+				return;
+
+			}
+
+			// otherwise top level
+			this.reader.setOffset( this.reader.offset - 4 );
+
+			this.currentFormEnd = this.reader.offset + length;
+			this.parentForm = this.currentForm;
+
+			this.reader.skip( 8 ); // unknown
+
+			var texture = {
+				index: this.reader.getUint32()
+			};
+			this.tree.textures.push( texture );
+			this.currentForm = texture;
+
+		},
+
+		parseClipLwo2( length ) {
+
+			var texture = {
+				index: this.reader.getUint32(),
+				fileName: ""
+			};
+
+			var readed = 4;
+			// seach STIL block
+			while ( true ) {
+
+				var tag = this.reader.getIDTag();
+				var n_length = this.reader.getUint16();
+				if ( tag === 'STIL' ) {
+
+					texture.fileName = this.reader.getString();
+					break;
+
+				}
+				readed += 4 + n_length;
+				if ( n_length >= length ) {
+
+					break;
+
+				}
+
+			}
+
+			this.tree.textures.push( texture );
+			this.currentForm = texture;
+
+		},
+
+		parseImage() {
+
+			this.reader.skip( 8 ); // unknown
+			this.currentForm.fileName = this.reader.getString();
+
+		},
+
+		parseXVAL( type, length ) {
+
+			var endOffset = this.reader.offset + length - 4;
+			this.reader.skip( 8 );
+
+			this.currentForm[ type ] = this.reader.getFloat32();
+
+			this.reader.setOffset( endOffset ); // set end offset directly to skip optional envelope
+
+		},
+
+		parseXVAL3( type, length ) {
+
+			var endOffset = this.reader.offset + length - 4;
+			this.reader.skip( 8 );
+
+			this.currentForm[ type ] = {
+				x: this.reader.getFloat32(),
+				y: this.reader.getFloat32(),
+				z: this.reader.getFloat32(),
+			};
+
+			this.reader.setOffset( endOffset );
+
+		},
+
+		// Tags associated with an object
+		// OTAG { type[ID4], tag-string[S0] }
+		parseObjectTag() {
+
+			if ( ! this.tree.objectTags ) this.tree.objectTags = {};
+
+			this.tree.objectTags[ this.reader.getIDTag() ] = {
+				tagString: this.reader.getString()
+			};
+
+		},
+
+		// Signals the start of a new layer. All the data chunks which follow will be included in this layer until another layer chunk is encountered.
+		// LAYR: number[U2], flags[U2], pivot[VEC12], name[S0], parent[U2]
+		parseLayer( length ) {
+
+			var layer = {
+				number: this.reader.getUint16(),
+				flags: this.reader.getUint16(), // If the least significant bit of flags is set, the layer is hidden.
+				pivot: this.reader.getFloat32Array( 3 ), // Note: this seems to be superflous, as the geometry is translated when pivot is present
+				name: this.reader.getString(),
+			};
+
+			this.tree.layers.push( layer );
+			this.currentLayer = layer;
+
+			var parsedLength = 16 + stringOffset( this.currentLayer.name ); // index ( 2 ) + flags( 2 ) + pivot( 12 ) + stringlength
+
+			// if we have not reached then end of the layer block, there must be a parent defined
+			this.currentLayer.parent = ( parsedLength < length ) ? this.reader.getUint16() : - 1; // omitted or -1 for no parent
+
+		},
+
+		// VEC12 * ( F4 + F4 + F4 ) array of x,y,z vectors
+		// Converting from left to right handed coordinate system:
+		// x -> -x and switch material FrontSide -> BackSide
+		parsePoints( length ) {
+
+			this.currentPoints = [];
+			for ( var i = 0; i < length / 4; i += 3 ) {
+
+				// z -> -z to match three.js right handed coords
+				this.currentPoints.push( this.reader.getFloat32(), this.reader.getFloat32(), - this.reader.getFloat32() );
+
+			}
+
+		},
+
+		// parse VMAP or VMAD
+		// Associates a set of floating-point vectors with a set of points.
+		// VMAP: { type[ID4], dimension[U2], name[S0], ( vert[VX], value[F4] # dimension ) * }
+
+		// VMAD Associates a set of floating-point vectors with the vertices of specific polygons.
+		// Similar to VMAP UVs, but associates with polygon vertices rather than points
+		// to solve to problem of UV seams:  VMAD chunks are paired with VMAPs of the same name,
+		// if they exist. The vector values in the VMAD will then replace those in the
+		// corresponding VMAP, but only for calculations involving the specified polygons.
+		// VMAD { type[ID4], dimension[U2], name[S0], ( vert[VX], poly[VX], value[F4] # dimension ) * }
+		parseVertexMapping( length, discontinuous ) {
+
+			var finalOffset = this.reader.offset + length;
+
+			var channelName = this.reader.getString();
+
+			if ( this.reader.offset === finalOffset ) {
+
+				// then we are in a texture node and the VMAP chunk is just a reference to a UV channel name
+				this.currentForm.UVChannel = channelName;
+				return;
+
+			}
+
+			// otherwise reset to initial length and parse normal VMAP CHUNK
+			this.reader.setOffset( this.reader.offset - stringOffset( channelName ) );
+
+			var type = this.reader.getIDTag();
+
+			this.reader.getUint16(); // dimension
+			var name = this.reader.getString();
+
+			var remainingLength = length - 6 - stringOffset( name );
+
+			switch ( type ) {
+
+				case 'TXUV':
+					this.parseUVMapping( name, finalOffset, discontinuous );
+					break;
+				case 'MORF':
+				case 'SPOT':
+					this.parseMorphTargets( name, finalOffset, type ); // can't be discontinuous
+					break;
+				// unsupported VMAPs
+				case 'APSL':
+				case 'NORM':
+				case 'WGHT':
+				case 'MNVW':
+				case 'PICK':
+				case 'RGB ':
+				case 'RGBA':
+					this.reader.skip( remainingLength );
+					break;
+				default:
+					console.warn( 'LWOLoader: unknown vertex map type: ' + type );
+					this.reader.skip( remainingLength );
+
+			}
+
+		},
+
+		parseUVMapping( name, finalOffset, discontinuous ) {
+
+			var uvIndices = [];
+			var polyIndices = [];
+			var uvs = [];
+
+			while ( this.reader.offset < finalOffset ) {
+
+				uvIndices.push( this.reader.getVariableLengthIndex() );
+
+				if ( discontinuous ) polyIndices.push( this.reader.getVariableLengthIndex() );
+
+				uvs.push( this.reader.getFloat32(), this.reader.getFloat32() );
+
+			}
+
+			if ( discontinuous ) {
+
+				if ( ! this.currentLayer.discontinuousUVs ) this.currentLayer.discontinuousUVs = {};
+
+				this.currentLayer.discontinuousUVs[ name ] = {
+					uvIndices: uvIndices,
+					polyIndices: polyIndices,
+					uvs: uvs,
+				};
+
+			} else {
+
+				if ( ! this.currentLayer.uvs ) this.currentLayer.uvs = {};
+
+				this.currentLayer.uvs[ name ] = {
+					uvIndices: uvIndices,
+					uvs: uvs,
+				};
+
+			}
+
+		},
+
+		parseMorphTargets( name, finalOffset, type ) {
+
+			var indices = [];
+			var points = [];
+
+			type = ( type === 'MORF' ) ? 'relative' : 'absolute';
+
+			while ( this.reader.offset < finalOffset ) {
+
+				indices.push( this.reader.getVariableLengthIndex() );
+				// z -> -z to match three.js right handed coords
+				points.push( this.reader.getFloat32(), this.reader.getFloat32(), - this.reader.getFloat32() );
+
+			}
+
+			if ( ! this.currentLayer.morphTargets ) this.currentLayer.morphTargets = {};
+
+			this.currentLayer.morphTargets[ name ] = {
+				indices: indices,
+				points: points,
+				type: type,
+			};
+
+		},
+
+		// A list of polygons for the current layer.
+		// POLS { type[ID4], ( numvert+flags[U2], vert[VX] # numvert ) * }
+		parsePolygonList( length ) {
+
+			var finalOffset = this.reader.offset + length;
+			var type = this.reader.getIDTag();
+
+			var indices = [];
+
+			// hold a list of polygon sizes, to be split up later
+			var polygonDimensions = [];
+
+			while ( this.reader.offset < finalOffset ) {
+
+				var numverts = this.reader.getUint16();
+
+				//var flags = numverts & 64512; // 6 high order bits are flags - ignoring for now
+				numverts = numverts & 1023; // remaining ten low order bits are vertex num
+				polygonDimensions.push( numverts );
+
+				for ( var j = 0; j < numverts; j ++ ) indices.push( this.reader.getVariableLengthIndex() );
+
+			}
+
+			var geometryData = {
+				type: type,
+				vertexIndices: indices,
+				polygonDimensions: polygonDimensions,
+				points: this.currentPoints
+			};
+
+			// Note: assuming that all polys will be lines or points if the first is
+			if ( polygonDimensions[ 0 ] === 1 ) geometryData.type = 'points';
+			else if ( polygonDimensions[ 0 ] === 2 ) geometryData.type = 'lines';
+
+			this.currentLayer.geometry = geometryData;
+
+		},
+
+		// Lists the tag strings that can be associated with polygons by the PTAG chunk.
+		// TAGS { tag-string[S0] * }
+		parseTagStrings( length ) {
+
+			this.tree.tags = this.reader.getStringArray( length );
+
+		},
+
+		// Associates tags of a given type with polygons in the most recent POLS chunk.
+		// PTAG { type[ID4], ( poly[VX], tag[U2] ) * }
+		parsePolygonTagMapping( length ) {
+
+			var finalOffset = this.reader.offset + length;
+			var type = this.reader.getIDTag();
+			if ( type === 'SURF' ) this.parseMaterialIndices( finalOffset );
+			else { //PART, SMGP, COLR not supported
+
+				this.reader.skip( length - 4 );
+
+			}
+
+		},
+
+		parseMaterialIndices( finalOffset ) {
+
+			// array holds polygon index followed by material index
+			this.currentLayer.geometry.materialIndices = [];
+
+			var initialMatIndex;
+
+			while ( this.reader.offset < finalOffset ) {
+
+				var polygonIndex = this.reader.getVariableLengthIndex();
+				var materialIndex = this.reader.getUint16();
+
+				if ( ! initialMatIndex ) initialMatIndex = materialIndex; // set up first mat index
+
+				this.currentLayer.geometry.materialIndices.push( polygonIndex, materialIndex );
+
+			}
+
+		},
+
+		parseUnknownCHUNK( blockID, length ) {
+
+			console.warn( 'LWOLoader: unknown chunk type: ' + blockID + ' length: ' + length );
+
+			// print the chunk plus some bytes padding either side
+			// printBuffer( this.reader.dv.buffer, this.reader.offset - 20, length + 40 );
+
+			var data = this.reader.getString( length );
+
+			this.currentForm[ blockID ] = data;
+
+		}
+
+	};
+
+	function DataViewReader( buffer ) {
+
+		// For testing: dump whole buffer to console as a string
+		// printBuffer( buffer, 0, buffer.byteLength );
+
+		this.dv = new DataView( buffer );
+		this.offset = 0;
+
+	}
+
+	DataViewReader.prototype = {
+
+		constructor: DataViewReader,
+
+		size: function () {
+
+			return this.dv.buffer.byteLength;
+
+		},
+
+		setOffset( offset ) {
+
+			if ( offset > 0 && offset < this.dv.buffer.byteLength ) {
+
+				this.offset = offset;
+
+			} else {
+
+				console.error( 'LWOLoader: invalid buffer offset' );
+
+			}
+
+		},
+
+		endOfFile: function () {
+
+			if ( this.offset >= this.size() ) return true;
+			return false;
+
+		},
+
+		skip: function ( length ) {
+
+			this.offset += length;
+
+		},
+
+		getUint8: function () {
+
+			var value = this.dv.getUint8( this.offset );
+			this.offset += 1;
+			return value;
+
+		},
+
+		getUint16: function () {
+
+			var value = this.dv.getUint16( this.offset );
+			this.offset += 2;
+			return value;
+
+		},
+
+		getInt32: function () {
+
+			var value = this.dv.getInt32( this.offset, false );
+			this.offset += 4;
+			return value;
+
+		},
+
+		getUint32: function () {
+
+			var value = this.dv.getUint32( this.offset, false );
+			this.offset += 4;
+			return value;
+
+		},
+
+		getUint64: function () {
+
+			var low, high;
+
+			high = this.getUint32();
+			low = this.getUint32();
+			return high * 0x100000000 + low;
+
+		},
+
+		getFloat32: function () {
+
+			var value = this.dv.getFloat32( this.offset, false );
+			this.offset += 4;
+			return value;
+
+		},
+
+		getFloat32Array: function ( size ) {
+
+			var a = [];
+
+			for ( var i = 0; i < size; i ++ ) {
+
+				a.push( this.getFloat32() );
+
+			}
+
+			return a;
+
+		},
+
+		getFloat64: function () {
+
+			var value = this.dv.getFloat64( this.offset, this.littleEndian );
+			this.offset += 8;
+			return value;
+
+		},
+
+		getFloat64Array: function ( size ) {
+
+			var a = [];
+
+			for ( var i = 0; i < size; i ++ ) {
+
+				a.push( this.getFloat64() );
+
+			}
+
+			return a;
+
+		},
+
+		// get variable-length index data type
+		// VX ::= index[U2] | (index + 0xFF000000)[U4]
+		// If the index value is less than 65,280 (0xFF00),then VX === U2
+		// otherwise VX === U4 with bits 24-31 set
+		// When reading an index, if the first byte encountered is 255 (0xFF), then
+		// the four-byte form is being used and the first byte should be discarded or masked out.
+		getVariableLengthIndex() {
+
+			var firstByte = this.getUint8();
+
+			if ( firstByte === 255 ) {
+
+				return this.getUint8() * 65536 + this.getUint8() * 256 + this.getUint8();
+
+			}
+
+			return firstByte * 256 + this.getUint8();
+
+		},
+
+		// An ID tag is a sequence of 4 bytes containing 7-bit ASCII values
+		getIDTag() {
+
+			return this.getString( 4 );
+
+		},
+
+		getString: function ( size ) {
+
+			if ( size === 0 ) return;
+
+			// note: safari 9 doesn't support Uint8Array.indexOf; create intermediate array instead
+			var a = [];
+
+			if ( size ) {
+
+				for ( var i = 0; i < size; i ++ ) {
+
+					a[ i ] = this.getUint8();
+
+				}
+
+			} else {
+
+				var currentChar;
+				var len = 0;
+
+				while ( currentChar !== 0 ) {
+
+					currentChar = this.getUint8();
+					if ( currentChar !== 0 ) a.push( currentChar );
+					len ++;
+
+				}
+
+				if ( ! isEven( len + 1 ) ) this.getUint8(); // if string with terminating nullbyte is uneven, extra nullbyte is added
+
+			}
+
+			return THREE.LoaderUtils.decodeText( new Uint8Array( a ) );
+
+		},
+
+		getStringArray: function ( size ) {
+
+			var a = this.getString( size );
+			a = a.split( '\0' );
+
+			return a.filter( Boolean ); // return array with any empty strings removed
+
+		}
+
+	};
+
+	// ************** UTILITY FUNCTIONS **************
+
+	function isEven( num ) {
+
+		return num % 2;
+
+	}
+
+	// calculate the length of the string in the buffer
+	// this will be string.length + nullbyte + optional padbyte to make the length even
+	function stringOffset( string ) {
+
+		return string.length + 1 + ( isEven( string.length + 1 ) ? 1 : 0 );
+
+	}
+
+	// for testing purposes, dump buffer to console
+	// printBuffer( this.reader.dv.buffer, this.reader.offset, length );
+	function printBuffer( buffer, from, to ) {
+
+		console.log( THREE.LoaderUtils.decodeText( new Uint8Array( buffer, from, to ) ) );
+
+	}
+
+	return LWOLoader;
+
+} )();

examples/js/loaders/SVGLoader.js

@@ -56,37 +56,37 @@ THREE.SVGLoader.prototype = {
 
 				case 'path':
 					style = parseStyle( node, style );
-					if ( node.hasAttribute( 'd' ) && isVisible( style ) ) path = parsePathNode( node, style );
+					if ( node.hasAttribute( 'd' ) ) path = parsePathNode( node, style );
 					break;
 
 				case 'rect':
 					style = parseStyle( node, style );
-					if ( isVisible( style ) ) path = parseRectNode( node, style );
+					path = parseRectNode( node, style );
 					break;
 
 				case 'polygon':
 					style = parseStyle( node, style );
-					if ( isVisible( style ) ) path = parsePolygonNode( node, style );
+					path = parsePolygonNode( node, style );
 					break;
 
 				case 'polyline':
 					style = parseStyle( node, style );
-					if ( isVisible( style ) ) path = parsePolylineNode( node, style );
+					path = parsePolylineNode( node, style );
 					break;
 
 				case 'circle':
 					style = parseStyle( node, style );
-					if ( isVisible( style ) ) path = parseCircleNode( node, style );
+					path = parseCircleNode( node, style );
 					break;
 
 				case 'ellipse':
 					style = parseStyle( node, style );
-					if ( isVisible( style ) ) path = parseEllipseNode( node, style );
+					path = parseEllipseNode( node, style );
 					break;
 
 				case 'line':
 					style = parseStyle( node, style );
-					if ( isVisible( style ) ) path = parseLineNode( node, style );
+					path = parseLineNode( node, style );
 					break;
 
 				default:
@@ -96,10 +96,18 @@ THREE.SVGLoader.prototype = {
 
 			if ( path ) {
 
+				if ( style.fill !== undefined && style.fill !== 'none' ) {
+
+					path.color.setStyle( style.fill );
+
+				}
+
 				transformPath( path, currentTransform );
 
 				paths.push( path );
 
+				path.userData = { node: node, style: style };
+
 			}
 
 			var nodes = node.childNodes;
@@ -121,7 +129,6 @@ THREE.SVGLoader.prototype = {
 		function parsePathNode( node, style ) {
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( style.fill );
 
 			var point = new THREE.Vector2();
 			var control = new THREE.Vector2();
@@ -544,7 +551,6 @@ THREE.SVGLoader.prototype = {
 			var h = parseFloat( node.getAttribute( 'height' ) );
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( style.fill );
 			path.moveTo( x + 2 * rx, y );
 			path.lineTo( x + w - 2 * rx, y );
 			if ( rx !== 0 || ry !== 0 ) path.bezierCurveTo( x + w, y, x + w, y, x + w, y + 2 * ry );
@@ -590,7 +596,6 @@ THREE.SVGLoader.prototype = {
 			var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( style.fill );
 
 			var index = 0;
 
@@ -622,7 +627,6 @@ THREE.SVGLoader.prototype = {
 			var regex = /(-?[\d\.?]+)[,|\s](-?[\d\.?]+)/g;
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( style.fill );
 
 			var index = 0;
 
@@ -644,7 +648,6 @@ THREE.SVGLoader.prototype = {
 			subpath.absarc( x, y, r, 0, Math.PI * 2 );
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( style.fill );
 			path.subPaths.push( subpath );
 
 			return path;
@@ -662,7 +665,6 @@ THREE.SVGLoader.prototype = {
 			subpath.absellipse( x, y, rx, ry, 0, Math.PI * 2 );
 
 			var path = new THREE.ShapePath();
-			path.color.setStyle( style.fill );
 			path.subPaths.push( subpath );
 
 			return path;
@@ -691,16 +693,37 @@ THREE.SVGLoader.prototype = {
 
 			style = Object.assign( {}, style ); // clone style
 
-			if ( node.hasAttribute( 'fill' ) ) style.fill = node.getAttribute( 'fill' );
-			if ( node.style.fill !== '' ) style.fill = node.style.fill;
+			function addStyle( svgName, jsName, adjustFunction ) {
 
-			return style;
+				if ( adjustFunction === undefined ) adjustFunction = function copy( v ) { return v; };
 
-		}
+				if ( node.hasAttribute( svgName ) ) style[ jsName ] = adjustFunction( node.getAttribute( svgName ) );
+				if ( node.style[ svgName ] !== '' ) style[ jsName ] = adjustFunction( node.style[ svgName ] );
+
+			}
+
+			function clamp( v ) {
+
+				return Math.max( 0, Math.min( 1, v ) );
+
+			}
+
+			function positive( v ) {
+
+				return Math.max( 0, v );
 
-		function isVisible( style ) {
+			}
+
+			addStyle( 'fill', 'fill' );
+			addStyle( 'fill-opacity', 'fillOpacity', clamp );
+			addStyle( 'stroke', 'stroke' );
+			addStyle( 'stroke-opacity', 'strokeOpacity', clamp );
+			addStyle( 'stroke-width', 'strokeWidth', positive );
+			addStyle( 'stroke-linejoin', 'strokeLineJoin' );
+			addStyle( 'stroke-linecap', 'strokeLineCap' );
+			addStyle( 'stroke-miterlimit', 'strokeMiterLimit', positive );
 
-			return style.fill !== 'none' && style.fill !== 'transparent';
+			return style;
 
 		}
 
@@ -750,7 +773,7 @@ THREE.SVGLoader.prototype = {
 				return null;
 			}
 
-			var transform = parseTransformNode( node );
+			var transform = parseNodeTransform( node );
 
 			if ( transform ) {
 
@@ -767,13 +790,13 @@ THREE.SVGLoader.prototype = {
 
 		}
 
-		function parseTransformNode( node ) {
+		function parseNodeTransform( node ) {
 
 			var transform = new THREE.Matrix3();
 			var currentTransform = tempTransform0;
 			var transformsTexts = node.getAttribute( 'transform' ).split( ' ' );
 
-			for ( var tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex-- ) {
+			for ( var tIndex = transformsTexts.length - 1; tIndex >= 0; tIndex -- ) {
 
 				var transformText = transformsTexts[ tIndex ];
 				var openParPos = transformText.indexOf( "(" );
@@ -920,9 +943,6 @@ THREE.SVGLoader.prototype = {
 
 			var isRotated = isTransformRotated( m );
 
-			var tempV2 = new THREE.Vector2();
-			var tempV3 = new THREE.Vector3();
-
 			var subPaths = path.subPaths;
 
 			for ( var i = 0, n = subPaths.length; i < n; i++ ) {
@@ -1000,9 +1020,13 @@ THREE.SVGLoader.prototype = {
 		var tempTransform1 = new THREE.Matrix3();
 		var tempTransform2 = new THREE.Matrix3();
 		var tempTransform3 = new THREE.Matrix3();
+		var tempV2 = new THREE.Vector2();
+		var tempV3 = new THREE.Vector3();
 
 		var currentTransform = new THREE.Matrix3();
 
+		var scope = this;
+
 		console.time( 'THREE.SVGLoader: DOMParser' );
 
 		var xml = new DOMParser().parseFromString( text, 'image/svg+xml' ); // application/xml
@@ -1011,15 +1035,847 @@ THREE.SVGLoader.prototype = {
 
 		console.time( 'THREE.SVGLoader: Parse' );
 
-		parseNode( xml.documentElement, { fill: '#000' } );
+		parseNode( xml.documentElement, {
+			fill: '#000',
+			fillOpacity: 1,
+			strokeOpacity: 1,
+			strokeWidth: 1,
+			strokeLineJoin: 'miter',
+			strokeLineCap: 'butt',
+			strokeMiterLimit: 4
+		} );
+
+		var data = { paths: paths, xml: xml.documentElement };
 
 		// console.log( paths );
 
 
 		console.timeEnd( 'THREE.SVGLoader: Parse' );
 
-		return paths;
+		return data;
+
+	}
+
+};
+
+THREE.SVGLoader.getStrokeStyle = function ( width, color, opacity, lineJoin, lineCap,  miterLimit ) {
+
+	// Param width: Stroke width
+	// Param color: As returned by THREE.Color.getStyle()
+	// Param opacity: 0 (transparent) to 1 (opaque)
+	// Param lineJoin: One of "round", "bevel", "miter" or "miter-limit"
+	// Param lineCap: One of "round", "square" or "butt"
+	// Param miterLimit: Maximum join length, in multiples of the "width" parameter (join is truncated if it exceeds that distance)
+	// Returns style object
+
+	width = width !== undefined ? width : 1;
+	color = color !== undefined ? color : '#000';
+	opacity = opacity !== undefined ? opacity : 1;
+	lineJoin = lineJoin !== undefined ? lineJoin : 'miter';
+	lineCap = lineCap !== undefined ? lineCap : 'butt';
+	miterLimit = miterLimit !== undefined ? miterLimit : 4;
+
+	return {
+		strokeColor: color,
+		strokeWidth: width,
+		strokeLineJoin: lineJoin,
+		strokeLineCap: lineCap,
+		strokeMiterLimit: miterLimit
+	};
+
+};
+
+THREE.SVGLoader.pointsToStroke = function ( points, style, arcDivisions, minDistance ) {
+
+	// Generates a stroke with some witdh around the given path.
+	// The path can be open or closed (last point equals to first point)
+	// Param points: Array of Vector2D (the path). Minimum 2 points.
+	// Param style: Object with SVG properties as returned by SVGLoader.getStrokeStyle(), or SVGLoader.parse() in the path.userData.style object
+	// Params arcDivisions: Arc divisions for round joins and endcaps. (Optional)
+	// Param minDistance: Points closer to this distance will be merged. (Optional)
+	// Returns BufferGeometry with stroke triangles (In plane z = 0). UV coordinates are generated ('u' along path. 'v' across it, from left to right)
+
+	var vertices = [];
+	var normals = [];
+	var uvs = [];
+
+	if ( THREE.SVGLoader.pointsToStrokeWithBuffers( points, style, arcDivisions, minDistance, vertices, normals, uvs ) === 0 ) {
+
+		return null;
 
 	}
 
+	var geometry = new THREE.BufferGeometry();
+	geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+	geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+	geometry.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
+
+	return geometry;
+
 };
+
+THREE.SVGLoader.pointsToStrokeWithBuffers = function () {
+
+	var tempV2_1 = new THREE.Vector2();
+	var tempV2_2 = new THREE.Vector2();
+	var tempV2_3 = new THREE.Vector2();
+	var tempV2_4 = new THREE.Vector2();
+	var tempV2_5 = new THREE.Vector2();
+	var tempV2_6 = new THREE.Vector2();
+	var tempV2_7 = new THREE.Vector2();
+	var tempV3_1 = new THREE.Vector3();
+	var lastPointL = new THREE.Vector2();
+	var lastPointR = new THREE.Vector2();
+	var point0L = new THREE.Vector2();
+	var point0R = new THREE.Vector2();
+	var currentPointL = new THREE.Vector2();
+	var currentPointR = new THREE.Vector2();
+	var nextPointL = new THREE.Vector2();
+	var nextPointR = new THREE.Vector2();
+	var innerPoint = new THREE.Vector2();
+	var outerPoint = new THREE.Vector2();
+	var tempTransform0 = new THREE.Matrix3();
+	var tempTransform1 = new THREE.Matrix3();
+	var tempTransform2 = new THREE.Matrix3();
+
+	return function ( points, style, arcDivisions, minDistance, vertices, normals, uvs, vertexOffset ) {
+
+		// This function can be called to update existing arrays or buffers.
+		// Accepts same parameters as pointsToStroke, plus the buffers and optional offset.
+		// Param vertexOffset: Offset vertices to start writing in the buffers (3 elements/vertex for vertices and normals, and 2 elements/vertex for uvs)
+		// Returns number of written vertices / normals / uvs pairs
+		// if 'vertices' parameter is undefined no triangles will be generated, but the returned vertices count will still be valid (useful to preallocate the buffers)
+		// 'normals' and 'uvs' buffers are optional
+
+		arcLengthDivisions = arcDivisions !== undefined ? arcDivisions : 12;
+		minDistance = minDistance !== undefined ? minDistance : 0.001;
+		vertexOffset = vertexOffset !== undefined ? vertexOffset : 0;
+
+		// First ensure there are no duplicated points
+		points = removeDuplicatedPoints( points );
+
+		var numPoints = points.length;
+
+		if ( numPoints < 2 ) return 0;
+
+		var isClosed = points[ 0 ].equals( points[ numPoints - 1 ] );
+
+		var currentPoint;
+		var previousPoint = points[ 0 ];
+		var nextPoint;
+
+		var strokeWidth2 = style.strokeWidth / 2;
+
+		var deltaU = 1 / ( numPoints - 1 );
+		var u0 = 0;
+
+		var innerSideModified;
+		var joinIsOnLeftSide;
+		var isMiter;
+		var initialJoinIsOnLeftSide = false;
+
+		var numVertices = 0;
+		var currentCoordinate = vertexOffset * 3;
+		var currentCoordinateUV = vertexOffset * 2;
+
+		// Get initial left and right stroke points
+		getNormal( points[ 0 ], points[ 1 ], tempV2_1 ).multiplyScalar( strokeWidth2 );
+		lastPointL.copy( points[ 0 ] ).sub( tempV2_1 );
+		lastPointR.copy( points[ 0 ] ).add( tempV2_1 );
+		point0L.copy( lastPointL );
+		point0R.copy( lastPointR );
+
+		for ( var iPoint = 1; iPoint < numPoints; iPoint ++ ) {
+
+			currentPoint = points[ iPoint ];
+
+			// Get next point
+			if ( iPoint === numPoints - 1 ) {
+
+				if ( isClosed ) {
+
+					// Skip duplicated initial point
+					nextPoint = points[ 1 ];
+
+				}
+				else nextPoint = undefined;
+
+			}
+			else {
+
+				nextPoint = points[ iPoint + 1 ];
+
+			}
+
+			// Normal of previous segment in tempV2_1
+			var normal1 = tempV2_1;
+			getNormal( previousPoint, currentPoint, normal1 );
+
+			tempV2_3.copy( normal1 ).multiplyScalar( strokeWidth2 );
+			currentPointL.copy( currentPoint ).sub( tempV2_3 );
+			currentPointR.copy( currentPoint ).add( tempV2_3 );
+
+			var u1 = u0 + deltaU;
+
+			innerSideModified = false;
+
+			if ( nextPoint !== undefined ) {
+
+				// Normal of next segment in tempV2_2
+				getNormal( currentPoint, nextPoint, tempV2_2 );
+
+				tempV2_3.copy( tempV2_2 ).multiplyScalar( strokeWidth2 );
+				nextPointL.copy( currentPoint ).sub( tempV2_3 );
+				nextPointR.copy( currentPoint ).add( tempV2_3 );
+
+				joinIsOnLeftSide = true;
+				tempV2_3.subVectors( nextPoint, previousPoint );
+				if ( normal1.dot( tempV2_3 ) < 0 ) {
+
+					joinIsOnLeftSide = false;
+
+				}
+				if ( iPoint === 1 ) initialJoinIsOnLeftSide = joinIsOnLeftSide;
+
+				tempV2_3.subVectors( nextPoint, currentPoint )
+				var maxInnerDistance = tempV2_3.normalize();
+				var dot = Math.abs( normal1.dot( tempV2_3 ) );
+
+				// If path is straight, don't create join
+				if ( dot !== 0 ) {
+
+					// Compute inner and outer segment intersections
+					var miterSide = strokeWidth2 / dot;
+					tempV2_3.multiplyScalar( - miterSide );
+					tempV2_4.subVectors( currentPoint, previousPoint );
+					tempV2_5.copy( tempV2_4 ).setLength( miterSide ).add( tempV2_3 );
+					innerPoint.copy( tempV2_5 ).negate();
+					var miterLength2 = tempV2_5.length();
+					var segmentLengthPrev = tempV2_4.length();
+					tempV2_4.divideScalar( segmentLengthPrev );
+					tempV2_6.subVectors( nextPoint, currentPoint );
+					var segmentLengthNext = tempV2_6.length();
+					tempV2_6.divideScalar( segmentLengthNext );
+					// Check that previous and next segments doesn't overlap with the innerPoint of intersection
+					if ( tempV2_4.dot( innerPoint ) < segmentLengthPrev && tempV2_6.dot( innerPoint ) < segmentLengthNext ) {
+
+						innerSideModified = true;
+
+					}
+					outerPoint.copy( tempV2_5 ).add( currentPoint );
+					innerPoint.add( currentPoint );
+
+					isMiter = false;
+
+					if ( innerSideModified ) {
+
+						if ( joinIsOnLeftSide ) {
+
+							nextPointR.copy( innerPoint );
+							currentPointR.copy( innerPoint );
+
+						}
+						else {
+
+							nextPointL.copy( innerPoint );
+							currentPointL.copy( innerPoint );
+
+						}
+
+					}
+					else {
+
+						// The segment triangles are generated here if there was overlapping
+
+						makeSegmentTriangles();
+
+					}
+
+					switch ( style.strokeLineJoin ) {
+
+						case 'bevel':
+
+							makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u1 );
+
+							break;
+
+						case 'round':
+
+							// Segment triangles
+
+							createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified );
+
+							// Join triangles
+
+							if ( joinIsOnLeftSide ) {
+
+								makeCircularSector( currentPoint, currentPointL, nextPointL, u1, 0 );
+
+							}
+							else {
+
+								makeCircularSector( currentPoint, nextPointR, currentPointR, u1, 1 );
+
+							}
+
+							break;
+
+						case 'miter':
+						case 'miter-clip':
+						default:
+
+							var miterFraction = ( strokeWidth2 * style.strokeMiterLimit ) / miterLength2;
+
+							if ( miterFraction < 1 ) {
+
+								// The join miter length exceeds the miter limit
+
+								if ( style.strokeLineJoin !== 'miter-clip' ) {
+
+									makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u1 );
+									break;
+
+								}
+								else {
+
+									// Segment triangles
+
+									createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified );
+
+									// Miter-clip join triangles
+
+									if ( joinIsOnLeftSide ) {
+
+										tempV2_6.subVectors( outerPoint, currentPointL ).multiplyScalar( miterFraction ).add( currentPointL );
+										tempV2_7.subVectors( outerPoint, nextPointL ).multiplyScalar( miterFraction ).add( nextPointL );
+
+										addVertex( currentPointL, u1, 0 );
+										addVertex( tempV2_6, u1, 0 );
+										addVertex( currentPoint, u1, 0.5 );
+
+										addVertex( currentPoint, u1, 0.5 );
+										addVertex( tempV2_6, u1, 0 );
+										addVertex( tempV2_7, u1, 0 );
+
+										addVertex( currentPoint, u1, 0.5 );
+										addVertex( tempV2_7, u1, 0 );
+										addVertex( nextPointL, u1, 0 );
+
+									}
+									else {
+
+										tempV2_6.subVectors( outerPoint, currentPointR ).multiplyScalar( miterFraction ).add( currentPointR );
+										tempV2_7.subVectors( outerPoint, nextPointR ).multiplyScalar( miterFraction ).add( nextPointR );
+
+										addVertex( currentPointR, u1, 1 );
+										addVertex( tempV2_6, u1, 1 );
+										addVertex( currentPoint, u1, 0.5 );
+
+										addVertex( currentPoint, u1, 0.5 );
+										addVertex( tempV2_6, u1, 1 );
+										addVertex( tempV2_7, u1, 1 );
+
+										addVertex( currentPoint, u1, 0.5 );
+										addVertex( tempV2_7, u1, 1 );
+										addVertex( nextPointR, u1, 1 );
+
+									}
+
+								}
+
+							}
+							else {
+
+								// Miter join segment triangles
+
+								if ( innerSideModified ) {
+
+									// Optimized segment + join triangles
+
+									if ( joinIsOnLeftSide ) {
+
+										addVertex( lastPointR, u0, 1 );
+										addVertex( lastPointL, u0, 0 );
+										addVertex( outerPoint, u1, 0 );
+
+										addVertex( lastPointR, u0, 1 );
+										addVertex( outerPoint, u1, 0 );
+										addVertex( innerPoint, u1, 1 );
+
+									}
+									else {
+
+										addVertex( lastPointR, u0, 1 );
+										addVertex( lastPointL, u0, 0 );
+										addVertex( outerPoint, u1, 1 );
+
+										addVertex( lastPointL, u0, 0 );
+										addVertex( innerPoint, u1, 0 );
+										addVertex( outerPoint, u1, 1 );
+
+									}
+
+
+									if ( joinIsOnLeftSide ) {
+
+										nextPointL.copy( outerPoint );
+
+									}
+									else {
+
+										nextPointR.copy( outerPoint );
+
+									}
+
+
+								}
+								else {
+
+									// Add extra miter join triangles
+
+									if ( joinIsOnLeftSide ) {
+
+										addVertex( currentPointL, u1, 0 );
+										addVertex( outerPoint, u1, 0 );
+										addVertex( currentPoint, u1, 0.5 );
+
+										addVertex( currentPoint, u1, 0.5 );
+										addVertex( outerPoint, u1, 0 );
+										addVertex( nextPointL, u1, 0 );
+
+									}
+									else {
+
+										addVertex( currentPointR, u1, 1 );
+										addVertex( outerPoint, u1, 1 );
+										addVertex( currentPoint, u1, 0.5 );
+
+										addVertex( currentPoint, u1, 0.5 );
+										addVertex( outerPoint, u1, 1 );
+										addVertex( nextPointR, u1, 1 );
+
+									}
+
+								}
+
+								isMiter = true;
+
+							}
+
+							break;
+
+					}
+
+				}
+				else {
+
+					// The segment triangles are generated here when two consecutive points are collinear
+
+					makeSegmentTriangles();
+
+				}
+
+			}
+			else {
+
+				// The segment triangles are generated here if it is the ending segment
+
+				makeSegmentTriangles();
+
+			}
+
+			if ( ! isClosed && iPoint === numPoints - 1 ) {
+
+				// Start line endcap
+				addCapGeometry( points[ 0 ], point0L, point0R, joinIsOnLeftSide, true, u0 );
+
+			}
+
+			// Increment loop variables
+
+			u0 = u1;
+
+			previousPoint = currentPoint;
+
+			lastPointL.copy( nextPointL );
+			lastPointR.copy( nextPointR );
+
+		}
+
+		if ( ! isClosed ) {
+
+			// Ending line endcap
+			addCapGeometry( currentPoint, currentPointL, currentPointR, joinIsOnLeftSide, false, u1 );
+
+		}
+		else if ( innerSideModified && vertices ) {
+
+			// Modify path first segment vertices to adjust to the segments inner and outer intersections
+
+			var lastOuter = outerPoint;
+			var lastInner = innerPoint;
+			if ( initialJoinIsOnLeftSide !== joinIsOnLeftSide) {
+				lastOuter = innerPoint;
+				lastInner = outerPoint;
+			}
+
+			if ( joinIsOnLeftSide ) {
+
+				lastInner.toArray( vertices, 0 * 3 );
+				lastInner.toArray( vertices, 3 * 3 );
+
+				if ( isMiter ) {
+
+					lastOuter.toArray( vertices, 1 * 3 );
+				}
+
+			}
+			else {
+
+				lastInner.toArray( vertices, 1 * 3 );
+				lastInner.toArray( vertices, 3 * 3 );
+
+				if ( isMiter ) {
+
+					lastOuter.toArray( vertices, 0 * 3 );
+				}
+
+			}
+
+		}
+
+		return numVertices;
+
+		// -- End of algorithm
+
+		// -- Functions
+
+		function getNormal( p1, p2, result ) {
+
+			result.subVectors( p2, p1 );
+			return result.set( - result.y, result.x ).normalize();
+
+		}
+
+		function addVertex( position, u, v ) {
+
+			if ( vertices ) {
+
+				vertices[ currentCoordinate ] = position.x;
+				vertices[ currentCoordinate + 1 ] = position.y;
+				vertices[ currentCoordinate + 2 ] = 0;
+
+				if ( normals ) {
+
+					normals[ currentCoordinate ] = 0;
+					normals[ currentCoordinate + 1 ] = 0;
+					normals[ currentCoordinate + 2 ] = 1;
+
+				}
+
+				currentCoordinate += 3;
+
+				if ( uvs ) {
+
+					uvs[ currentCoordinateUV ] = u;
+					uvs[ currentCoordinateUV + 1 ] = v;
+
+					currentCoordinateUV += 2;
+
+				}
+
+			}
+
+			numVertices += 3;
+
+		}
+
+		function makeCircularSector( center, p1, p2, u, v ) {
+
+			// param p1, p2: Points in the circle arc.
+			// p1 and p2 are in clockwise direction.
+
+			tempV2_1.copy( p1 ).sub( center ).normalize();
+			tempV2_2.copy( p2 ).sub( center ).normalize();
+
+			var angle = Math.PI;
+			var dot = tempV2_1.dot( tempV2_2 );
+			if ( Math.abs( dot ) < 1 ) angle = Math.abs( Math.acos( dot ) );
+
+			angle /= arcLengthDivisions;
+
+			tempV2_3.copy( p1 );
+
+			for ( var i = 0, il = arcLengthDivisions - 1; i < il; i++ ) {
+
+				tempV2_4.copy( tempV2_3 ).rotateAround( center, angle );
+
+				addVertex( tempV2_3, u, v );
+				addVertex( tempV2_4, u, v );
+				addVertex( center, u, 0.5 );
+
+				tempV2_3.copy( tempV2_4 );
+			}
+
+			addVertex( tempV2_4, u, v );
+			addVertex( p2, u, v );
+			addVertex( center, u, 0.5 );
+
+		}
+
+		function makeSegmentTriangles() {
+
+			addVertex( lastPointR, u0, 1 );
+			addVertex( lastPointL, u0, 0 );
+			addVertex( currentPointL, u1, 0 );
+
+			addVertex( lastPointR, u0, 1 );
+			addVertex( currentPointL, u1, 1 );
+			addVertex( currentPointR, u1, 0 );
+
+		}
+
+		function makeSegmentWithBevelJoin( joinIsOnLeftSide, innerSideModified, u ) {
+
+			if ( innerSideModified ) {
+
+				// Optimized segment + bevel triangles
+
+				if ( joinIsOnLeftSide ) {
+
+					// Path segments triangles
+
+					addVertex( lastPointR, u0, 1 );
+					addVertex( lastPointL, u0, 0 );
+					addVertex( currentPointL, u1, 0 );
+
+					addVertex( lastPointR, u0, 1 );
+					addVertex( currentPointL, u1, 0 );
+					addVertex( innerPoint, u1, 1 );
+
+					// Bevel join triangle
+
+					addVertex( currentPointL, u, 0 );
+					addVertex( nextPointL, u, 0 );
+					addVertex( innerPoint, u, 0.5 );
+
+				}
+				else {
+
+					// Path segments triangles
+
+					addVertex( lastPointR, u0, 1 );
+					addVertex( lastPointL, u0, 0 );
+					addVertex( currentPointR, u1, 1 );
+
+					addVertex( lastPointL, u0, 0 );
+					addVertex( innerPoint, u1, 0 );
+					addVertex( currentPointR, u1, 1 );
+
+					// Bevel join triangle
+
+					addVertex( currentPointR, u, 1 );
+					addVertex( nextPointR, u, 0 );
+					addVertex( innerPoint, u, 0.5 );
+
+				}
+
+			}
+			else {
+
+				// Bevel join triangle. The segment triangles are done in the main loop
+
+				if ( joinIsOnLeftSide ) {
+
+					addVertex( currentPointL, u, 0 );
+					addVertex( nextPointL, u, 0 );
+					addVertex( currentPoint, u, 0.5 );
+
+				}
+				else {
+
+					addVertex( currentPointR, u, 1 );
+					addVertex( nextPointR, u, 0 );
+					addVertex( currentPoint, u, 0.5 );
+
+				}
+
+			}
+
+		}
+
+		function createSegmentTrianglesWithMiddleSection( joinIsOnLeftSide, innerSideModified ) {
+
+			if ( innerSideModified ) {
+
+				if ( joinIsOnLeftSide ) {
+
+					addVertex( lastPointR, u0, 1 );
+					addVertex( lastPointL, u0, 0 );
+					addVertex( currentPointL, u1, 0 );
+
+					addVertex( lastPointR, u0, 1 );
+					addVertex( currentPointL, u1, 0 );
+					addVertex( innerPoint, u1, 1 );
+
+					addVertex( currentPointL, u0, 0 );
+					addVertex( currentPoint, u1, 0.5 );
+					addVertex( innerPoint, u1, 1 );
+
+					addVertex( currentPoint, u1, 0.5 );
+					addVertex( nextPointL, u0, 0 );
+					addVertex( innerPoint, u1, 1 );
+
+				}
+				else {
+
+					addVertex( lastPointR, u0, 1 );
+					addVertex( lastPointL, u0, 0 );
+					addVertex( currentPointR, u1, 1 );
+
+					addVertex( lastPointL, u0, 0 );
+					addVertex( innerPoint, u1, 0 );
+					addVertex( currentPointR, u1, 1 );
+
+					addVertex( currentPointR, u0, 1 );
+					addVertex( innerPoint, u1, 0 );
+					addVertex( currentPoint, u1, 0.5 );
+
+					addVertex( currentPoint, u1, 0.5 );
+					addVertex( innerPoint, u1, 0 );
+					addVertex( nextPointR, u0, 1 );
+
+				}
+
+			}
+
+		}
+
+		function addCapGeometry( center, p1, p2, joinIsOnLeftSide, start, u ) {
+
+			// param center: End point of the path
+			// param p1, p2: Left and right cap points
+
+			switch ( style.strokeLineCap ) {
+
+				case 'round':
+
+					if ( start ) {
+
+						makeCircularSector( center, p2, p1, u, 0.5 );
+
+					}
+					else {
+
+						makeCircularSector( center, p1, p2, u, 0.5 );
+
+					}
+
+					break;
+
+				case 'square':
+
+					if ( start ) {
+
+						tempV2_1.subVectors( p1, center );
+						tempV2_2.set( tempV2_1.y, - tempV2_1.x );
+
+						tempV2_3.addVectors( tempV2_1, tempV2_2 ).add( center );
+						tempV2_4.subVectors( tempV2_2, tempV2_1 ).add( center );
+
+						// Modify already existing vertices
+						if ( joinIsOnLeftSide ) {
+
+							tempV2_3.toArray( vertices, 1 * 3 );
+							tempV2_4.toArray( vertices, 0 * 3 );
+							tempV2_4.toArray( vertices, 3 * 3 );
+
+						}
+						else {
+
+							tempV2_3.toArray( vertices, 1 * 3 );
+							tempV2_3.toArray( vertices, 3 * 3 );
+							tempV2_4.toArray( vertices, 0 * 3 );
+
+						}
+
+					}
+					else {
+
+						tempV2_1.subVectors( p2, center );
+						tempV2_2.set( tempV2_1.y, - tempV2_1.x );
+
+						tempV2_3.addVectors( tempV2_1, tempV2_2 ).add( center );
+						tempV2_4.subVectors( tempV2_2, tempV2_1 ).add( center );
+
+						var vl = vertices.length;
+
+						// Modify already existing vertices
+						if ( joinIsOnLeftSide ) {
+
+							tempV2_3.toArray( vertices, vl - 1 * 3 );
+							tempV2_4.toArray( vertices, vl - 2 * 3 );
+							tempV2_4.toArray( vertices, vl - 4 * 3 );
+
+						}
+						else {
+
+							tempV2_3.toArray( vertices, vl - 2 * 3 );
+							tempV2_4.toArray( vertices, vl - 1 * 3 );
+							tempV2_4.toArray( vertices, vl - 4 * 3 );
+
+						}
+
+					}
+
+					break;
+
+				case 'butt':
+				default:
+
+					// Nothing to do here
+					break;
+
+			}
+
+		}
+
+		function removeDuplicatedPoints( points ) {
+
+			// Creates a new array if necessary with duplicated points removed.
+			// This does not remove duplicated initial and ending points of a closed path.
+
+			var dupPoints = false;
+			for ( var i = 1, n = points.length - 1; i < n; i ++ ) {
+
+				if ( points[ i ].distanceTo( points[ i + 1 ] ) < minDistance ) {
+
+					dupPoints = true;
+					break;
+
+				}
+
+			}
+
+			if ( ! dupPoints ) return points;
+
+			var newPoints = [];
+			newPoints.push( points[ 0 ] );
+
+			for ( var i = 1, n = points.length - 1; i < n; i ++ ) {
+
+				if ( points[ i ].distanceTo( points[ i + 1 ] ) >= minDistance ) {
+
+					newPoints.push( points[ i ] );
+
+				}
+			}
+
+			newPoints.push( points[ points.length - 1 ] );
+
+			return newPoints;
+
+		}
+	};
+
+}();

examples/js/offscreen/scene.js

@@ -15,6 +15,7 @@ function init( canvas, width, height, pixelRatio, path ) {
 	// we don't use ImageLoader since it has a DOM dependency (HTML5 image element)
 
 	var loader = new THREE.ImageBitmapLoader().setPath( path );
+	loader.setOptions( { imageOrientation: 'flipY' } );
 	loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function ( imageBitmap ) {
 
 		var texture = new THREE.CanvasTexture( imageBitmap );

examples/js/postprocessing/AdaptiveToneMappingPass.js

@@ -117,12 +117,7 @@ THREE.AdaptiveToneMappingPass = function ( adaptive, resolution ) {
 		blending: THREE.NoBlending
 	} );
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
-
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( null );
 
 };
 
@@ -146,35 +141,35 @@ THREE.AdaptiveToneMappingPass.prototype = Object.assign( Object.create( THREE.Pa
 		if ( this.adaptive ) {
 
 			//Render the luminance of the current scene into a render target with mipmapping enabled
-			this.quad.material = this.materialLuminance;
+			this.fsQuad.material = this.materialLuminance;
 			this.materialLuminance.uniforms.tDiffuse.value = readBuffer.texture;
 			renderer.setRenderTarget( this.currentLuminanceRT );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 			//Use the new luminance values, the previous luminance and the frame delta to
 			//adapt the luminance over time.
-			this.quad.material = this.materialAdaptiveLum;
+			this.fsQuad.material = this.materialAdaptiveLum;
 			this.materialAdaptiveLum.uniforms.delta.value = deltaTime;
 			this.materialAdaptiveLum.uniforms.lastLum.value = this.previousLuminanceRT.texture;
 			this.materialAdaptiveLum.uniforms.currentLum.value = this.currentLuminanceRT.texture;
 			renderer.setRenderTarget( this.luminanceRT );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 			//Copy the new adapted luminance value so that it can be used by the next frame.
-			this.quad.material = this.materialCopy;
+			this.fsQuad.material = this.materialCopy;
 			this.copyUniforms.tDiffuse.value = this.luminanceRT.texture;
 			renderer.setRenderTarget( this.previousLuminanceRT );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 
-		this.quad.material = this.materialToneMap;
+		this.fsQuad.material = this.materialToneMap;
 		this.materialToneMap.uniforms.tDiffuse.value = readBuffer.texture;
 
 		if ( this.renderToScreen ) {
 
 			renderer.setRenderTarget( null );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		} else {
 
@@ -182,7 +177,7 @@ THREE.AdaptiveToneMappingPass.prototype = Object.assign( Object.create( THREE.Pa
 
 			if ( this.clear ) renderer.clear();
 
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 
@@ -230,7 +225,7 @@ THREE.AdaptiveToneMappingPass.prototype = Object.assign( Object.create( THREE.Pa
 
 		}
 		//Put something in the adaptive luminance texture so that the scene can render initially
-		this.quad.material = new THREE.MeshBasicMaterial( { color: 0x777777 } );
+		this.fsQuad.material = new THREE.MeshBasicMaterial( { color: 0x777777 } );
 		this.materialLuminance.needsUpdate = true;
 		this.materialAdaptiveLum.needsUpdate = true;
 		this.materialToneMap.needsUpdate = true;

examples/js/postprocessing/AfterimagePass.js

@@ -39,23 +39,10 @@ THREE.AfterimagePass = function ( damp ) {
 
 	} );
 
-	this.sceneComp = new THREE.Scene();
-	this.scene = new THREE.Scene();
+	this.compFsQuad = new THREE.Pass.FullScreenQuad( this.shaderMaterial );
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.camera.position.z = 1;
-
-	var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
-
-	this.quadComp = new THREE.Mesh( geometry, this.shaderMaterial );
-	this.sceneComp.add( this.quadComp );
-
-	var material = new THREE.MeshBasicMaterial( {
-		map: this.textureComp.texture
-	} );
-
-	var quadScreen = new THREE.Mesh( geometry, material );
-	this.scene.add( quadScreen );
+	var material = new THREE.MeshBasicMaterial();
+	this.copyFsQuad = new THREE.Pass.FullScreenQuad( material );
 
 };
 
@@ -68,18 +55,15 @@ THREE.AfterimagePass.prototype = Object.assign( Object.create( THREE.Pass.protot
 		this.uniforms[ "tOld" ].value = this.textureOld.texture;
 		this.uniforms[ "tNew" ].value = readBuffer.texture;
 
-		this.quadComp.material = this.shaderMaterial;
-
 		renderer.setRenderTarget( this.textureComp );
-		renderer.render( this.sceneComp, this.camera );
+		this.compFsQuad.render( renderer );
 
-		renderer.setRenderTarget( this.textureOld );
-		renderer.render( this.scene, this.camera );
+		this.copyFsQuad.material.map = this.textureComp.texture;
 
 		if ( this.renderToScreen ) {
 
 			renderer.setRenderTarget( null );
-			renderer.render( this.scene, this.camera );
+			this.copyFsQuad.render( renderer );
 
 		} else {
 
@@ -87,10 +71,23 @@ THREE.AfterimagePass.prototype = Object.assign( Object.create( THREE.Pass.protot
 
 			if ( this.clear ) renderer.clear();
 
-			renderer.render( this.scene, this.camera );
+			this.copyFsQuad.render( renderer );
 
 		}
 
+		// Swap buffers.
+		var temp = this.textureOld;
+		this.textureOld = this.textureComp;
+		this.textureComp = temp;
+		// Now textureOld contains the latest image, ready for the next frame.
+
+	},
+
+	setSize: function ( width, height ) {
+
+		this.textureComp.setSize( width, height );
+		this.textureOld.setSize( width, height );
+
 	}
 
 } );

examples/js/postprocessing/BloomPass.js

@@ -67,12 +67,7 @@ THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) {
 
 	this.needsSwap = false;
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
-
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( null );
 
 };
 
@@ -86,14 +81,14 @@ THREE.BloomPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 
 		// Render quad with blured scene into texture (convolution pass 1)
 
-		this.quad.material = this.materialConvolution;
+		this.fsQuad.material = this.materialConvolution;
 
 		this.convolutionUniforms[ "tDiffuse" ].value = readBuffer.texture;
 		this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;
 
 		renderer.setRenderTarget( this.renderTargetX );
 		renderer.clear();
-		renderer.render( this.scene, this.camera );
+		this.fsQuad.render( renderer );
 
 
 		// Render quad with blured scene into texture (convolution pass 2)
@@ -103,11 +98,11 @@ THREE.BloomPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 
 		renderer.setRenderTarget( this.renderTargetY );
 		renderer.clear();
-		renderer.render( this.scene, this.camera );
+		this.fsQuad.render( renderer );
 
 		// Render original scene with superimposed blur to texture
 
-		this.quad.material = this.materialCopy;
+		this.fsQuad.material = this.materialCopy;
 
 		this.copyUniforms[ "tDiffuse" ].value = this.renderTargetY.texture;
 
@@ -115,7 +110,7 @@ THREE.BloomPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 
 		renderer.setRenderTarget( readBuffer );
 		if ( this.clear ) renderer.clear();
-		renderer.render( this.scene, this.camera );
+		this.fsQuad.render( renderer );
 
 	}
 

examples/js/postprocessing/BokehPass.js

@@ -66,12 +66,7 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	this.uniforms = bokehUniforms;
 	this.needsSwap = false;
 
-	this.camera2 = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene2 = new THREE.Scene();
-
-	this.quad2 = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad2.frustumCulled = false; // Avoid getting clipped
-	this.scene2.add( this.quad2 );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( this.materialBokeh );
 
 	this.oldClearColor = new THREE.Color();
 	this.oldClearAlpha = 1;
@@ -84,8 +79,6 @@ THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 
 	render: function ( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
 
-		this.quad2.material = this.materialBokeh;
-
 		// Render depth into texture
 
 		this.scene.overrideMaterial = this.materialDepth;
@@ -110,13 +103,13 @@ THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 		if ( this.renderToScreen ) {
 
 			renderer.setRenderTarget( null );
-			renderer.render( this.scene2, this.camera2 );
+			this.fsQuad.render( renderer );
 
 		} else {
 
 			renderer.setRenderTarget( writeBuffer );
 			renderer.clear();
-			renderer.render( this.scene2, this.camera2 );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/postprocessing/DotScreenPass.js

@@ -25,12 +25,7 @@ THREE.DotScreenPass = function ( center, angle, scale ) {
 
 	} );
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
-
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( this.material );
 
 };
 
@@ -43,18 +38,16 @@ THREE.DotScreenPass.prototype = Object.assign( Object.create( THREE.Pass.prototy
 		this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
 		this.uniforms[ "tSize" ].value.set( readBuffer.width, readBuffer.height );
 
-		this.quad.material = this.material;
-
 		if ( this.renderToScreen ) {
 
 			renderer.setRenderTarget( null );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		} else {
 
 			renderer.setRenderTarget( writeBuffer );
 			if ( this.clear ) renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/postprocessing/EffectComposer.js

@@ -28,6 +28,8 @@ THREE.EffectComposer = function ( renderer, renderTarget ) {
 	this.writeBuffer = this.renderTarget1;
 	this.readBuffer = this.renderTarget2;
 
+	this.renderToScreen = true;
+
 	this.passes = [];
 
 	// dependencies
@@ -75,6 +77,22 @@ Object.assign( THREE.EffectComposer.prototype, {
 
 	},
 
+	isLastEnabledPass: function ( passIndex ) {
+
+		for ( var i = passIndex + 1; i < this.passes.length; i ++ ) {
+
+			if ( this.passes[ i ].enabled ) {
+
+				return false;
+
+			}
+
+		}
+
+		return true;
+
+	},
+
 	render: function ( deltaTime ) {
 
 		// deltaTime value is in seconds
@@ -99,6 +117,7 @@ Object.assign( THREE.EffectComposer.prototype, {
 
 			if ( pass.enabled === false ) continue;
 
+			pass.renderToScreen = ( this.renderToScreen && this.isLastEnabledPass( i ) );
 			pass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime, maskActive );
 
 			if ( pass.needsSwap ) {
@@ -187,7 +206,7 @@ THREE.Pass = function () {
 	// if set to true, the pass clears its buffer before rendering
 	this.clear = false;
 
-	// if set to true, the result of the pass is rendered to screen
+	// if set to true, the result of the pass is rendered to screen. This is set automatically by EffectComposer.
 	this.renderToScreen = false;
 
 };
@@ -203,3 +222,45 @@ Object.assign( THREE.Pass.prototype, {
 	}
 
 } );
+
+// Helper for passes that need to fill the viewport with a single quad.
+THREE.Pass.FullScreenQuad = ( function () {
+
+	var camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+	var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
+
+	var FullScreenQuad = function ( material ) {
+
+		this._mesh = new THREE.Mesh( geometry, material );
+
+	};
+
+	Object.defineProperty( FullScreenQuad.prototype, 'material', {
+
+		get: function () {
+
+			return this._mesh.material;
+
+		},
+
+		set: function ( value ) {
+
+			this._mesh.material = value;
+
+		}
+
+	} );
+
+	Object.assign( FullScreenQuad.prototype, {
+
+		render: function ( renderer ) {
+
+			renderer.render( this._mesh, camera );
+
+		}
+
+	} );
+
+	return FullScreenQuad;
+
+} )();

examples/js/postprocessing/FilmPass.js

@@ -26,12 +26,7 @@ THREE.FilmPass = function ( noiseIntensity, scanlinesIntensity, scanlinesCount,
 	if ( scanlinesIntensity !== undefined ) this.uniforms.sIntensity.value = scanlinesIntensity;
 	if ( scanlinesCount !== undefined ) this.uniforms.sCount.value = scanlinesCount;
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
-
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( this.material );
 
 };
 
@@ -44,18 +39,16 @@ THREE.FilmPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ),
 		this.uniforms[ "tDiffuse" ].value = readBuffer.texture;
 		this.uniforms[ "time" ].value += deltaTime;
 
-		this.quad.material = this.material;
-
 		if ( this.renderToScreen ) {
 
 			renderer.setRenderTarget( null );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		} else {
 
 			renderer.setRenderTarget( writeBuffer );
 			if ( this.clear ) renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/postprocessing/GlitchPass.js

@@ -23,12 +23,7 @@ THREE.GlitchPass = function ( dt_size ) {
 		fragmentShader: shader.fragmentShader
 	} );
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
-
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( this.material );
 
 	this.goWild = false;
 	this.curF = 0;
@@ -73,18 +68,17 @@ THREE.GlitchPass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 		}
 
 		this.curF ++;
-		this.quad.material = this.material;
 
 		if ( this.renderToScreen ) {
 
 			renderer.setRenderTarget( null );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		} else {
 
 			renderer.setRenderTarget( writeBuffer );
 			if ( this.clear ) renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/postprocessing/HalftonePass.js

@@ -36,11 +36,7 @@ THREE.HalftonePass = function ( width, height, params ) {
 
 	}
 
- 	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
- 	this.scene = new THREE.Scene();
- 	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
- 	this.quad.frustumCulled = false;
- 	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( this.material );
 
 };
 
@@ -51,18 +47,17 @@ THREE.HalftonePass.prototype = Object.assign( Object.create( THREE.Pass.prototyp
 	render: function ( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
 
  		this.material.uniforms[ "tDiffuse" ].value = readBuffer.texture;
- 		this.quad.material = this.material;
 
  		if ( this.renderToScreen ) {
 
  			renderer.setRenderTarget( null );
- 			renderer.render( this.scene, this.camera );
+ 			this.fsQuad.render( renderer );
 
 		} else {
 
  			renderer.setRenderTarget( writeBuffer );
  			if ( this.clear ) renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/postprocessing/OutlinePass.js

@@ -101,12 +101,7 @@ THREE.OutlinePass = function ( resolution, scene, camera, selectedObjects ) {
 	this.oldClearColor = new THREE.Color();
 	this.oldClearAlpha = 1;
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
-
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( null );
 
 	this.tempPulseColor1 = new THREE.Color();
 	this.tempPulseColor2 = new THREE.Color();
@@ -302,11 +297,11 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 			this.renderScene.background = currentBackground;
 
 			// 2. Downsample to Half resolution
-			this.quad.material = this.materialCopy;
+			this.fsQuad.material = this.materialCopy;
 			this.copyUniforms[ "tDiffuse" ].value = this.renderTargetMaskBuffer.texture;
 			renderer.setRenderTarget( this.renderTargetMaskDownSampleBuffer );
 			renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 			this.tempPulseColor1.copy( this.visibleEdgeColor );
 			this.tempPulseColor2.copy( this.hiddenEdgeColor );
@@ -320,44 +315,44 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 			}
 
 			// 3. Apply Edge Detection Pass
-			this.quad.material = this.edgeDetectionMaterial;
+			this.fsQuad.material = this.edgeDetectionMaterial;
 			this.edgeDetectionMaterial.uniforms[ "maskTexture" ].value = this.renderTargetMaskDownSampleBuffer.texture;
 			this.edgeDetectionMaterial.uniforms[ "texSize" ].value = new THREE.Vector2( this.renderTargetMaskDownSampleBuffer.width, this.renderTargetMaskDownSampleBuffer.height );
 			this.edgeDetectionMaterial.uniforms[ "visibleEdgeColor" ].value = this.tempPulseColor1;
 			this.edgeDetectionMaterial.uniforms[ "hiddenEdgeColor" ].value = this.tempPulseColor2;
 			renderer.setRenderTarget( this.renderTargetEdgeBuffer1 );
 			renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 			// 4. Apply Blur on Half res
-			this.quad.material = this.separableBlurMaterial1;
+			this.fsQuad.material = this.separableBlurMaterial1;
 			this.separableBlurMaterial1.uniforms[ "colorTexture" ].value = this.renderTargetEdgeBuffer1.texture;
 			this.separableBlurMaterial1.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionX;
 			this.separableBlurMaterial1.uniforms[ "kernelRadius" ].value = this.edgeThickness;
 			renderer.setRenderTarget( this.renderTargetBlurBuffer1 );
 			renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 			this.separableBlurMaterial1.uniforms[ "colorTexture" ].value = this.renderTargetBlurBuffer1.texture;
 			this.separableBlurMaterial1.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionY;
 			renderer.setRenderTarget( this.renderTargetEdgeBuffer1 );
 			renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 			// Apply Blur on quarter res
-			this.quad.material = this.separableBlurMaterial2;
+			this.fsQuad.material = this.separableBlurMaterial2;
 			this.separableBlurMaterial2.uniforms[ "colorTexture" ].value = this.renderTargetEdgeBuffer1.texture;
 			this.separableBlurMaterial2.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionX;
 			renderer.setRenderTarget( this.renderTargetBlurBuffer2 );
 			renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 			this.separableBlurMaterial2.uniforms[ "colorTexture" ].value = this.renderTargetBlurBuffer2.texture;
 			this.separableBlurMaterial2.uniforms[ "direction" ].value = THREE.OutlinePass.BlurDirectionY;
 			renderer.setRenderTarget( this.renderTargetEdgeBuffer2 );
 			renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 			// Blend it additively over the input texture
-			this.quad.material = this.overlayMaterial;
+			this.fsQuad.material = this.overlayMaterial;
 			this.overlayMaterial.uniforms[ "maskTexture" ].value = this.renderTargetMaskBuffer.texture;
 			this.overlayMaterial.uniforms[ "edgeTexture1" ].value = this.renderTargetEdgeBuffer1.texture;
 			this.overlayMaterial.uniforms[ "edgeTexture2" ].value = this.renderTargetEdgeBuffer2.texture;
@@ -370,7 +365,7 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 			if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
 
 			renderer.setRenderTarget( readBuffer );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 			renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
 			renderer.autoClear = oldAutoClear;
@@ -379,10 +374,10 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 
 		if ( this.renderToScreen ) {
 
-			this.quad.material = this.materialCopy;
+			this.fsQuad.material = this.materialCopy;
 			this.copyUniforms[ "tDiffuse" ].value = readBuffer.texture;
 			renderer.setRenderTarget( null );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/postprocessing/SAOPass.js

@@ -160,10 +160,7 @@ THREE.SAOPass = function ( scene, camera, depthTexture, useNormals, resolution )
 		blending: THREE.NoBlending
 	} );
 
-	this.quadCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.quadScene = new THREE.Scene();
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quadScene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( null );
 
 };
 
@@ -331,8 +328,8 @@ THREE.SAOPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ),
 
 		}
 
-		this.quad.material = passMaterial;
-		renderer.render( this.quadScene, this.quadCamera );
+		this.fsQuad.material = passMaterial;
+		this.fsQuad.render( renderer );
 
 		// restore original state
 		renderer.autoClear = originalAutoClear;

examples/js/postprocessing/SMAAPass.js

@@ -109,12 +109,7 @@ THREE.SMAAPass = function ( width, height ) {
 
 	this.needsSwap = false;
 
-	this.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
-	this.scene  = new THREE.Scene();
-
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( null );
 
 };
 
@@ -128,36 +123,36 @@ THREE.SMAAPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ),
 
 		this.uniformsEdges[ "tDiffuse" ].value = readBuffer.texture;
 
-		this.quad.material = this.materialEdges;
+		this.fsQuad.material = this.materialEdges;
 
 		renderer.setRenderTarget( this.edgesRT );
 		if ( this.clear ) renderer.clear();
-		renderer.render( this.scene, this.camera );
+		this.fsQuad.render( renderer );
 
 		// pass 2
 
-		this.quad.material = this.materialWeights;
+		this.fsQuad.material = this.materialWeights;
 
 		renderer.setRenderTarget( this.weightsRT );
 		if ( this.clear ) renderer.clear();
-		renderer.render( this.scene, this.camera );
+		this.fsQuad.render( renderer );
 
 		// pass 3
 
 		this.uniformsBlend[ "tColor" ].value = readBuffer.texture;
 
-		this.quad.material = this.materialBlend;
+		this.fsQuad.material = this.materialBlend;
 
 		if ( this.renderToScreen ) {
 
 			renderer.setRenderTarget( null );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		} else {
 
 			renderer.setRenderTarget( writeBuffer );
 			if ( this.clear ) renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/postprocessing/SSAARenderPass.js

@@ -40,11 +40,7 @@ THREE.SSAARenderPass = function ( scene, camera, clearColor, clearAlpha ) {
 		depthWrite: false
 	} );
 
-	this.camera2 = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene2	= new THREE.Scene();
-	this.quad2 = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), this.copyMaterial );
-	this.quad2.frustumCulled = false; // Avoid getting clipped
-	this.scene2.add( this.quad2 );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( this.copyMaterial );
 
 };
 
@@ -133,7 +129,7 @@ THREE.SSAARenderPass.prototype = Object.assign( Object.create( THREE.Pass.protot
 
 			}
 
-			renderer.render( this.scene2, this.camera2 );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/postprocessing/SSAOPass.js

@@ -134,14 +134,7 @@ THREE.SSAOPass = function ( scene, camera, width, height ) {
 		blendEquationAlpha: THREE.AddEquation
 	} );
 
-	//
-
-	this.quadCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.quadScene = new THREE.Scene();
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quadScene.add( this.quad );
-
-	//
+	this.fsQuad = new THREE.Pass.FullScreenQuad( null );
 
 	this.originalClearColor = new THREE.Color();
 
@@ -276,8 +269,8 @@ THREE.SSAOPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ),
 
 		}
 
-		this.quad.material = passMaterial;
-		renderer.render( this.quadScene, this.quadCamera );
+		this.fsQuad.material = passMaterial;
+		this.fsQuad.render( renderer );
 
 		// restore original state
 		renderer.autoClear = originalAutoClear;

examples/js/postprocessing/SavePass.js

@@ -34,12 +34,7 @@ THREE.SavePass = function ( renderTarget ) {
 
 	this.needsSwap = false;
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
-
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( this.material );
 
 };
 
@@ -55,11 +50,9 @@ THREE.SavePass.prototype = Object.assign( Object.create( THREE.Pass.prototype ),
 
 		}
 
-		this.quad.material = this.material;
-
 		renderer.setRenderTarget( this.renderTarget );
 		if ( this.clear ) renderer.clear();
-		renderer.render( this.scene, this.camera );
+		this.fsQuad.render( renderer );
 
 	}
 

examples/js/postprocessing/ShaderPass.js

@@ -29,13 +29,7 @@ THREE.ShaderPass = function ( shader, textureID ) {
 
 	}
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
-
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
-
+	this.fsQuad = new THREE.Pass.FullScreenQuad( this.material );
 };
 
 THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
@@ -50,19 +44,19 @@ THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 
 		}
 
-		this.quad.material = this.material;
+		this.fsQuad.material = this.material;
 
 		if ( this.renderToScreen ) {
 
 			renderer.setRenderTarget( null );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		} else {
 
 			renderer.setRenderTarget( writeBuffer );
 			// TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
 			if ( this.clear ) renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/postprocessing/TAARenderPass.js

@@ -99,7 +99,7 @@ THREE.TAARenderPass.prototype = Object.assign( Object.create( THREE.SSAARenderPa
 
 				renderer.setRenderTarget( this.sampleRenderTarget );
 				if ( this.accumulateIndex === 0 ) renderer.clear();
-				renderer.render( this.scene2, this.camera2 );
+				this.fsQuad.render( renderer );
 
 				this.accumulateIndex ++;
 
@@ -119,7 +119,7 @@ THREE.TAARenderPass.prototype = Object.assign( Object.create( THREE.SSAARenderPa
 			this.copyUniforms[ "tDiffuse" ].value = this.sampleRenderTarget.texture;
 			renderer.setRenderTarget( writeBuffer );
 			renderer.clear();
-			renderer.render( this.scene2, this.camera2 );
+			this.fsQuad.render( renderer );
 
 		}
 
@@ -129,7 +129,7 @@ THREE.TAARenderPass.prototype = Object.assign( Object.create( THREE.SSAARenderPa
 			this.copyUniforms[ "tDiffuse" ].value = this.holdRenderTarget.texture;
 			renderer.setRenderTarget( writeBuffer );
 			if ( accumulationWeight === 0 ) renderer.clear();
-			renderer.render( this.scene2, this.camera2 );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/postprocessing/TexturePass.js

@@ -28,12 +28,7 @@ THREE.TexturePass = function ( map, opacity ) {
 
 	this.needsSwap = false;
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
-
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( null );
 
 };
 
@@ -46,7 +41,7 @@ THREE.TexturePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 		var oldAutoClear = renderer.autoClear;
 		renderer.autoClear = false;
 
-		this.quad.material = this.material;
+		this.fsQuad.material = this.material;
 
 		this.uniforms[ "opacity" ].value = this.opacity;
 		this.uniforms[ "tDiffuse" ].value = this.map;
@@ -54,7 +49,7 @@ THREE.TexturePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 
 		renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
 		if ( this.clear ) renderer.clear();
-		renderer.render( this.scene, this.camera );
+		this.fsQuad.render( renderer );
 
 		renderer.autoClear = oldAutoClear;
 	}

examples/js/postprocessing/UnrealBloomPass.js

@@ -131,14 +131,9 @@ THREE.UnrealBloomPass = function ( resolution, strength, radius, threshold ) {
 	this.oldClearColor = new THREE.Color();
 	this.oldClearAlpha = 1;
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
-
 	this.basic = new THREE.MeshBasicMaterial();
 
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.quad.frustumCulled = false; // Avoid getting clipped
-	this.scene.add( this.quad );
+	this.fsQuad = new THREE.Pass.FullScreenQuad( null );
 
 };
 
@@ -200,12 +195,12 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 
 		if ( this.renderToScreen ) {
 
-			this.quad.material = this.basic;
+			this.fsQuad.material = this.basic;
 			this.basic.map = readBuffer.texture;
 
 			renderer.setRenderTarget( null );
 			renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 
@@ -213,11 +208,11 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 
 		this.highPassUniforms[ "tDiffuse" ].value = readBuffer.texture;
 		this.highPassUniforms[ "luminosityThreshold" ].value = this.threshold;
-		this.quad.material = this.materialHighPassFilter;
+		this.fsQuad.material = this.materialHighPassFilter;
 
 		renderer.setRenderTarget( this.renderTargetBright );
 		renderer.clear();
-		renderer.render( this.scene, this.camera );
+		this.fsQuad.render( renderer );
 
 		// 2. Blur All the mips progressively
 
@@ -225,19 +220,19 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 
 		for ( var i = 0; i < this.nMips; i ++ ) {
 
-			this.quad.material = this.separableBlurMaterials[ i ];
+			this.fsQuad.material = this.separableBlurMaterials[ i ];
 
 			this.separableBlurMaterials[ i ].uniforms[ "colorTexture" ].value = inputRenderTarget.texture;
 			this.separableBlurMaterials[ i ].uniforms[ "direction" ].value = THREE.UnrealBloomPass.BlurDirectionX;
 			renderer.setRenderTarget( this.renderTargetsHorizontal[ i ] );
 			renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 			this.separableBlurMaterials[ i ].uniforms[ "colorTexture" ].value = this.renderTargetsHorizontal[ i ].texture;
 			this.separableBlurMaterials[ i ].uniforms[ "direction" ].value = THREE.UnrealBloomPass.BlurDirectionY;
 			renderer.setRenderTarget( this.renderTargetsVertical[ i ] );
 			renderer.clear();
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 			inputRenderTarget = this.renderTargetsVertical[ i ];
 
@@ -245,18 +240,18 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 
 		// Composite All the mips
 
-		this.quad.material = this.compositeMaterial;
+		this.fsQuad.material = this.compositeMaterial;
 		this.compositeMaterial.uniforms[ "bloomStrength" ].value = this.strength;
 		this.compositeMaterial.uniforms[ "bloomRadius" ].value = this.radius;
 		this.compositeMaterial.uniforms[ "bloomTintColors" ].value = this.bloomTintColors;
 
 		renderer.setRenderTarget( this.renderTargetsHorizontal[ 0 ] );
 		renderer.clear();
-		renderer.render( this.scene, this.camera );
+		this.fsQuad.render( renderer );
 
 		// Blend it additively over the input texture
 
-		this.quad.material = this.materialCopy;
+		this.fsQuad.material = this.materialCopy;
 		this.copyUniforms[ "tDiffuse" ].value = this.renderTargetsHorizontal[ 0 ].texture;
 
 		if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
@@ -265,12 +260,12 @@ THREE.UnrealBloomPass.prototype = Object.assign( Object.create( THREE.Pass.proto
 		if ( this.renderToScreen ) {
 
 			renderer.setRenderTarget( null );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		} else {
 
 			renderer.setRenderTarget( readBuffer );
-			renderer.render( this.scene, this.camera );
+			this.fsQuad.render( renderer );
 
 		}
 

examples/js/renderers/WebGLDeferredRenderer.js

@@ -182,6 +182,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 		rt.texture.generateMipamps = false;
 
 		_compNormalDepth = new THREE.EffectComposer( _this.renderer, rt );
+		_compNormalDepth.renderToScreen = false;
 		_compNormalDepth.addPass( _passNormalDepth );
 
 	}
@@ -202,6 +203,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 		rt.texture.generateMipamps = false;
 
 		_compColor = new THREE.EffectComposer( _this.renderer, rt );
+		_compColor.renderToScreen = false;
 		_compColor.addPass( _passColor );
 
 	}
@@ -226,6 +228,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 		rt.texture.generateMipamps = false;
 
 		_compLight = new THREE.EffectComposer( _this.renderer, rt );
+		_compLight.renderToScreen = false;
 		_compLight.addPass( _passLightFullscreen );
 		_compLight.addPass( _passLight );
 
@@ -247,6 +250,7 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 		rt.texture.generateMipamps = false;
 
 		_compReconstruction = new THREE.EffectComposer( _this.renderer, rt );
+		_compReconstruction.renderToScreen = false;
 		_compReconstruction.addPass( _passReconstruction );
 
 	}
@@ -1068,24 +1072,15 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 		if ( _lightPrePass ) {
 
-			_passForward.renderToScreen = false;
 			_passForward.enabled = false;
-
-			_passCopy.renderToScreen = false;
 			_passCopy.enabled = false;
 
 			if ( _antialias ) {
 
-				_passFinal.renderToScreen = false;
-
-				_passFXAA.renderToScreen = true;
 				_passFXAA.enabled = true;
 
 			} else {
 
-				_passFinal.renderToScreen = true;
-
-				_passFXAA.renderToScreen = false;
 				_passFXAA.enabled = false;
 
 			}
@@ -1096,28 +1091,14 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 				if ( _antialias ) {
 
-					_passFinal.renderToScreen = false;
-
-					_passForward.renderToScreen = false;
 					_passForward.enabled = true;
-
-					_passCopy.renderToScreen = false;
 					_passCopy.enabled = false;
-
-					_passFXAA.renderToScreen = true;
 					_passFXAA.enabled = true;
 
 				} else {
 
-					_passFinal.renderToScreen = false;
-
-					_passForward.renderToScreen = false;
 					_passForward.enabled = true;
-
-					_passCopy.renderToScreen = true;
 					_passCopy.enabled = true;
-
-					_passFXAA.renderToScreen = false;
 					_passFXAA.enabled = false;
 
 				}
@@ -1126,28 +1107,14 @@ THREE.WebGLDeferredRenderer = function ( parameters ) {
 
 				if ( _antialias ) {
 
-					_passFinal.renderToScreen = false;
-
-					_passForward.renderToScreen = false;
 					_passForward.enabled = false;
-
-					_passCopy.renderToScreen = false;
 					_passCopy.enabled = false;
-
-					_passFXAA.renderToScreen = true;
 					_passFXAA.enabled = true;
 
 				} else {
 
-					_passFinal.renderToScreen = true;
-
-					_passForward.renderToScreen = false;
 					_passForward.enabled = false;
-
-					_passCopy.renderToScreen = false;
 					_passCopy.enabled = false;
-
-					_passFXAA.renderToScreen = false;
 					_passFXAA.enabled = false;
 
 				}

examples/js/shaders/DepthLimitedBlurShader.js

@@ -5,14 +5,14 @@ THREE.DepthLimitedBlurShader = {
 		'PERSPECTIVE_CAMERA': 1
 	},
 	uniforms: {
-		'tDiffuse': { type: 't', value: null },
-		'size': { type: 'v2', value: new THREE.Vector2( 512, 512 ) },
-		'sampleUvOffsets': { type: 'v2v', value: [ new THREE.Vector2( 0, 0 ) ] },
-		'sampleWeights': { type: '1fv', value: [ 1.0 ] },
-		'tDepth': { type: 't', value: null },
-		'cameraNear': { type: 'f', value: 10 },
-		'cameraFar': { type: 'f', value: 1000 },
-		'depthCutoff': { type: 'f', value: 10 },
+		'tDiffuse': { value: null },
+		'size': { value: new THREE.Vector2( 512, 512 ) },
+		'sampleUvOffsets': { value: [ new THREE.Vector2( 0, 0 ) ] },
+		'sampleWeights': { value: [ 1.0 ] },
+		'tDepth': { value: null },
+		'cameraNear': { value: 10 },
+		'cameraFar': { value: 1000 },
+		'depthCutoff': { value: 10 },
 	},
 	vertexShader: [
 		"#include <common>",

examples/js/shaders/LuminosityHighPassShader.js

@@ -11,11 +11,11 @@ THREE.LuminosityHighPassShader = {
 
 	uniforms: {
 
-		"tDiffuse": { type: "t", value: null },
-		"luminosityThreshold": { type: "f", value: 1.0 },
-		"smoothWidth": { type: "f", value: 1.0 },
-		"defaultColor": { type: "c", value: new THREE.Color( 0x000000 ) },
-		"defaultOpacity":  { type: "f", value: 0.0 }
+		"tDiffuse": { value: null },
+		"luminosityThreshold": { value: 1.0 },
+		"smoothWidth": { value: 1.0 },
+		"defaultColor": { value: new THREE.Color( 0x000000 ) },
+		"defaultOpacity":  { value: 0.0 }
 
 	},
 

examples/js/shaders/SAOShader.js

@@ -9,23 +9,23 @@ THREE.SAOShader = {
 	},
 	uniforms: {
 
-		'tDepth': { type: 't', value: null },
-		'tDiffuse': { type: 't', value: null },
-		'tNormal': { type: 't', value: null },
-		'size': { type: 'v2', value: new THREE.Vector2( 512, 512 ) },
-
-		'cameraNear': { type: 'f', value: 1 },
-		'cameraFar': { type: 'f', value: 100 },
-		'cameraProjectionMatrix': { type: 'm4', value: new THREE.Matrix4() },
-		'cameraInverseProjectionMatrix': { type: 'm4', value: new THREE.Matrix4() },
-
-		'scale': { type: 'f', value: 1.0 },
-		'intensity': { type: 'f', value: 0.1 },
-		'bias': { type: 'f', value: 0.5 },
-
-		'minResolution': { type: 'f', value: 0.0 },
-		'kernelRadius': { type: 'f', value: 100.0 },
-		'randomSeed': { type: 'f', value: 0.0 }
+		'tDepth': { value: null },
+		'tDiffuse': { value: null },
+		'tNormal': { value: null },
+		'size': { value: new THREE.Vector2( 512, 512 ) },
+
+		'cameraNear': { value: 1 },
+		'cameraFar': { value: 100 },
+		'cameraProjectionMatrix': { value: new THREE.Matrix4() },
+		'cameraInverseProjectionMatrix': { value: new THREE.Matrix4() },
+
+		'scale': { value: 1.0 },
+		'intensity': { value: 0.1 },
+		'bias': { value: 0.5 },
+
+		'minResolution': { value: 0.0 },
+		'kernelRadius': { value: 100.0 },
+		'randomSeed': { value: 0.0 }
 	},
 	vertexShader: [
 		"varying vec2 vUv;",

examples/js/utils/SkeletonUtils.js

@@ -528,6 +528,58 @@ THREE.SkeletonUtils = {
 
 		return bones;
 
+	},
+
+	clone: function ( source ) {
+
+		var sourceLookup = new Map();
+		var cloneLookup = new Map();
+
+		var clone = source.clone();
+
+		parallelTraverse( source, clone, function ( sourceNode, clonedNode ) {
+
+			sourceLookup.set( clonedNode, sourceNode );
+			cloneLookup.set( sourceNode, clonedNode );
+
+		} );
+
+		clone.traverse( function ( node ) {
+
+			if ( ! node.isSkinnedMesh ) return;
+
+			var clonedMesh = node;
+			var sourceMesh = sourceLookup.get( node );
+			var sourceBones = sourceMesh.skeleton.bones;
+
+			clonedMesh.skeleton = sourceMesh.skeleton.clone();
+			clonedMesh.bindMatrix.copy( sourceMesh.bindMatrix );
+
+			clonedMesh.skeleton.bones = sourceBones.map( function ( bone ) {
+
+				return cloneLookup.get( bone );
+
+			} );
+
+			clonedMesh.bind( clonedMesh.skeleton, clonedMesh.bindMatrix );
+
+		} );
+
+		return clone;
+
 	}
 
 };
+
+
+function parallelTraverse ( a, b, callback ) {
+
+	callback( a, b );
+
+	for ( var i = 0; i < a.children.length; i ++ ) {
+
+		parallelTraverse( a.children[ i ], b.children[ i ], callback );
+
+	}
+
+}

examples/js/utils/UVsDebug.js

@@ -83,7 +83,7 @@ THREE.UVsDebug = function ( geometry, size ) {
 				uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
 				uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
 
-				processFace( face, uvs, i );
+				processFace( face, uvs, i / 3 );
 
 			}
 
@@ -101,7 +101,7 @@ THREE.UVsDebug = function ( geometry, size ) {
 				uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
 				uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
 
-				processFace( face, uvs, i );
+				processFace( face, uvs, i / 3 );
 
 			}
 

examples/jsm/exporters/GLTFExporter.js

@@ -10,6 +10,7 @@ import {
 	ClampToEdgeWrapping,
 	DoubleSide,
 	InterpolateDiscrete,
+	InterpolateLinear,
 	LinearFilter,
 	LinearMipMapLinearFilter,
 	LinearMipMapNearestFilter,
@@ -1185,9 +1186,22 @@ GLTFExporter.prototype = {
 			var modifiedAttribute = null;
 			for ( var attributeName in geometry.attributes ) {
 
+				// Ignore morph target attributes, which are exported later.
+				if ( attributeName.substr( 0, 5 ) === 'morph' ) continue;
+
 				var attribute = geometry.attributes[ attributeName ];
 				attributeName = nameConversion[ attributeName ] || attributeName.toUpperCase();
 
+				// Prefix all geometry attributes except the ones specifically
+				// listed in the spec; non-spec attributes are considered custom.
+				var validVertexAttributes =
+						/^(POSITION|NORMAL|TANGENT|TEXCOORD_\d+|COLOR_\d+|JOINTS_\d+|WEIGHTS_\d+)$/;
+				if ( ! validVertexAttributes.test( attributeName ) ) {
+
+					attributeName = '_' + attributeName;
+
+				}
+
 				if ( cachedData.attributes.has( attribute ) ) {
 
 					attributes[ attributeName ] = cachedData.attributes.get( attribute );
@@ -1207,15 +1221,11 @@ GLTFExporter.prototype = {
 
 				}
 
-				if ( attributeName.substr( 0, 5 ) !== 'MORPH' ) {
+				var accessor = processAccessor( modifiedAttribute || attribute, geometry );
+				if ( accessor !== null ) {
 
-					var accessor = processAccessor( modifiedAttribute || attribute, geometry );
-					if ( accessor !== null ) {
-
-						attributes[ attributeName ] = accessor;
-						cachedData.attributes.set( attribute, accessor );
-
-					}
+					attributes[ attributeName ] = accessor;
+					cachedData.attributes.set( attribute, accessor );
 
 				}
 
@@ -1383,6 +1393,8 @@ GLTFExporter.prototype = {
 
 					}
 
+					if ( primitive.indices === null ) delete primitive.indices;
+
 				}
 
 				var material = processMaterial( materials[ groups[ i ].materialIndex ] );
@@ -1777,7 +1789,7 @@ GLTFExporter.prototype = {
 
 			} else if ( object.isLight ) {
 
-				console.warn( 'THREE.GLTFExporter: Only directional, point, and spot lights are supported.' );
+				console.warn( 'THREE.GLTFExporter: Only directional, point, and spot lights are supported.', object );
 				return null;
 
 			}

examples/jsm/pmrem/PMREMCubeUVPacker.d.ts

@@ -0,0 +1,14 @@
+import {
+  CubeTexture,
+  Renderer,
+  ShaderMaterial,
+  WebGLRenderTarget
+} from '../../../src/Three';
+
+export class PMREMCubeUVPacker {
+  CubeUVRenderTarget:WebGLRenderTarget;
+
+  constructor(cubeTextureLods: CubeTexture[]);
+  update(renderer:Renderer): void;
+  dispose(): void;
+}

examples/jsm/pmrem/PMREMCubeUVPacker.js

@@ -0,0 +1,253 @@
+/**
+ * @author Prashant Sharma / spidersharma03
+ * @author Ben Houston / bhouston, https://clara.io
+ *
+ * This class takes the cube lods(corresponding to different roughness values), and creates a single cubeUV
+ * Texture. The format for a given roughness set of faces is simply::
+ * +X+Y+Z
+ * -X-Y-Z
+ * For every roughness a mip map chain is also saved, which is essential to remove the texture artifacts due to
+ * minification.
+ * Right now for every face a PlaneMesh is drawn, which leads to a lot of geometry draw calls, but can be replaced
+ * later by drawing a single buffer and by sending the appropriate faceIndex via vertex attributes.
+ * The arrangement of the faces is fixed, as assuming this arrangement, the sampling function has been written.
+ */
+
+import {
+	BackSide,
+	CubeUVReflectionMapping,
+	LinearFilter,
+	LinearToneMapping,
+	Mesh,
+	NoBlending,
+	OrthographicCamera,
+	PlaneBufferGeometry,
+	RGBEEncoding,
+	RGBM16Encoding,
+	Scene,
+	ShaderMaterial,
+	Vector2,
+	Vector3,
+	WebGLRenderTarget
+} from "../../../build/three.module.js";
+
+var PMREMCubeUVPacker = ( function () {
+
+	var camera = new OrthographicCamera();
+	var scene = new Scene();
+	var shader = getShader();
+
+	var PMREMCubeUVPacker = function ( cubeTextureLods ) {
+
+		this.cubeLods = cubeTextureLods;
+		var size = cubeTextureLods[ 0 ].width * 4;
+
+		var sourceTexture = cubeTextureLods[ 0 ].texture;
+		var params = {
+			format: sourceTexture.format,
+			magFilter: sourceTexture.magFilter,
+			minFilter: sourceTexture.minFilter,
+			type: sourceTexture.type,
+			generateMipmaps: sourceTexture.generateMipmaps,
+			anisotropy: sourceTexture.anisotropy,
+			encoding: ( sourceTexture.encoding === RGBEEncoding ) ? RGBM16Encoding : sourceTexture.encoding
+		};
+
+		if ( params.encoding === RGBM16Encoding ) {
+
+			params.magFilter = LinearFilter;
+			params.minFilter = LinearFilter;
+
+		}
+
+		this.CubeUVRenderTarget = new WebGLRenderTarget( size, size, params );
+		this.CubeUVRenderTarget.texture.name = "PMREMCubeUVPacker.cubeUv";
+		this.CubeUVRenderTarget.texture.mapping = CubeUVReflectionMapping;
+
+		this.objects = [];
+
+		var geometry = new PlaneBufferGeometry( 1, 1 );
+
+		var faceOffsets = [];
+		faceOffsets.push( new Vector2( 0, 0 ) );
+		faceOffsets.push( new Vector2( 1, 0 ) );
+		faceOffsets.push( new Vector2( 2, 0 ) );
+		faceOffsets.push( new Vector2( 0, 1 ) );
+		faceOffsets.push( new Vector2( 1, 1 ) );
+		faceOffsets.push( new Vector2( 2, 1 ) );
+
+		var textureResolution = size;
+		size = cubeTextureLods[ 0 ].width;
+
+		var offset2 = 0;
+		var c = 4.0;
+		this.numLods = Math.log( cubeTextureLods[ 0 ].width ) / Math.log( 2 ) - 2; // IE11 doesn't support Math.log2
+		for ( var i = 0; i < this.numLods; i ++ ) {
+
+			var offset1 = ( textureResolution - textureResolution / c ) * 0.5;
+			if ( size > 16 ) c *= 2;
+			var nMips = size > 16 ? 6 : 1;
+			var mipOffsetX = 0;
+			var mipOffsetY = 0;
+			var mipSize = size;
+
+			for ( var j = 0; j < nMips; j ++ ) {
+
+				// Mip Maps
+				for ( var k = 0; k < 6; k ++ ) {
+
+					// 6 Cube Faces
+					var material = shader.clone();
+					material.uniforms[ 'envMap' ].value = this.cubeLods[ i ].texture;
+					material.envMap = this.cubeLods[ i ].texture;
+					material.uniforms[ 'faceIndex' ].value = k;
+					material.uniforms[ 'mapSize' ].value = mipSize;
+
+					var planeMesh = new Mesh( geometry, material );
+					planeMesh.position.x = faceOffsets[ k ].x * mipSize - offset1 + mipOffsetX;
+					planeMesh.position.y = faceOffsets[ k ].y * mipSize - offset1 + offset2 + mipOffsetY;
+					planeMesh.material.side = BackSide;
+					planeMesh.scale.setScalar( mipSize );
+					this.objects.push( planeMesh );
+
+				}
+				mipOffsetY += 1.75 * mipSize;
+				mipOffsetX += 1.25 * mipSize;
+				mipSize /= 2;
+
+			}
+			offset2 += 2 * size;
+			if ( size > 16 ) size /= 2;
+
+		}
+
+	};
+
+	PMREMCubeUVPacker.prototype = {
+
+		constructor: PMREMCubeUVPacker,
+
+		update: function ( renderer ) {
+
+			var size = this.cubeLods[ 0 ].width * 4;
+			// top and bottom are swapped for some reason?
+			camera.left = - size * 0.5;
+			camera.right = size * 0.5;
+			camera.top = - size * 0.5;
+			camera.bottom = size * 0.5;
+			camera.near = 0;
+			camera.far = 1;
+			camera.updateProjectionMatrix();
+
+			for ( var i = 0; i < this.objects.length; i ++ ) {
+
+				scene.add( this.objects[ i ] );
+
+			}
+
+			var gammaInput = renderer.gammaInput;
+			var gammaOutput = renderer.gammaOutput;
+			var toneMapping = renderer.toneMapping;
+			var toneMappingExposure = renderer.toneMappingExposure;
+			var currentRenderTarget = renderer.getRenderTarget();
+
+			renderer.gammaInput = false;
+			renderer.gammaOutput = false;
+			renderer.toneMapping = LinearToneMapping;
+			renderer.toneMappingExposure = 1.0;
+			renderer.setRenderTarget( this.CubeUVRenderTarget );
+			renderer.render( scene, camera );
+
+			renderer.setRenderTarget( currentRenderTarget );
+			renderer.toneMapping = toneMapping;
+			renderer.toneMappingExposure = toneMappingExposure;
+			renderer.gammaInput = gammaInput;
+			renderer.gammaOutput = gammaOutput;
+
+			for ( var i = 0; i < this.objects.length; i ++ ) {
+
+				scene.remove( this.objects[ i ] );
+
+			}
+
+		},
+
+		dispose: function () {
+
+			for ( var i = 0, l = this.objects.length; i < l; i ++ ) {
+
+				this.objects[ i ].material.dispose();
+
+			}
+
+			this.objects[ 0 ].geometry.dispose();
+
+		}
+
+	};
+
+	function getShader() {
+
+		var shaderMaterial = new ShaderMaterial( {
+
+			uniforms: {
+				"faceIndex": { value: 0 },
+				"mapSize": { value: 0 },
+				"envMap": { value: null },
+				"testColor": { value: new Vector3( 1, 1, 1 ) }
+			},
+
+			vertexShader:
+        "precision highp float;\
+        varying vec2 vUv;\
+        void main() {\
+          vUv = uv;\
+          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
+        }",
+
+			fragmentShader:
+        "precision highp float;\
+        varying vec2 vUv;\
+        uniform samplerCube envMap;\
+        uniform float mapSize;\
+        uniform vec3 testColor;\
+        uniform int faceIndex;\
+        \
+        void main() {\
+          vec3 sampleDirection;\
+          vec2 uv = vUv;\
+          uv = uv * 2.0 - 1.0;\
+          uv.y *= -1.0;\
+          if(faceIndex == 0) {\
+            sampleDirection = normalize(vec3(1.0, uv.y, -uv.x));\
+          } else if(faceIndex == 1) {\
+            sampleDirection = normalize(vec3(uv.x, 1.0, uv.y));\
+          } else if(faceIndex == 2) {\
+            sampleDirection = normalize(vec3(uv.x, uv.y, 1.0));\
+          } else if(faceIndex == 3) {\
+            sampleDirection = normalize(vec3(-1.0, uv.y, uv.x));\
+          } else if(faceIndex == 4) {\
+            sampleDirection = normalize(vec3(uv.x, -1.0, -uv.y));\
+          } else {\
+            sampleDirection = normalize(vec3(-uv.x, uv.y, -1.0));\
+          }\
+          vec4 color = envMapTexelToLinear( textureCube( envMap, sampleDirection ) );\
+          gl_FragColor = linearToOutputTexel( color );\
+        }",
+
+			blending: NoBlending
+
+		} );
+
+		shaderMaterial.type = 'PMREMCubeUVPacker';
+
+		return shaderMaterial;
+
+	}
+
+
+	return PMREMCubeUVPacker;
+
+} )();
+
+export { PMREMCubeUVPacker };

examples/jsm/pmrem/PMREMGenerator.d.ts

@@ -0,0 +1,16 @@
+import {
+  Renderer,
+  RenderTarget,
+  Texture,
+  CubeTexture
+} from '../../../src/Three';
+
+export class PMREMGenerator {
+  cubeLods:CubeTexture[];
+
+  constructor(sourceTexture:Texture, samplesPerLevel?:number, resolution?:number);
+  update(renderer:Renderer): void;
+  renderToCubeMapTarget(renderer:Renderer, renderTarget:any): void;
+  renderToCubeMapTargetFace(renderer:Renderer, renderTarget:RenderTarget, faceIndex:number): void;
+  dispose(): void;
+}

examples/jsm/pmrem/PMREMGenerator.js

@@ -0,0 +1,310 @@
+/**
+ * @author Prashant Sharma / spidersharma03
+ * @author Ben Houston / bhouston, https://clara.io
+ *
+ * To avoid cube map seams, I create an extra pixel around each face. This way when the cube map is
+ * sampled by an application later(with a little care by sampling the centre of the texel), the extra 1 border
+ *	of pixels makes sure that there is no seams artifacts present. This works perfectly for cubeUV format as
+ *	well where the 6 faces can be arranged in any manner whatsoever.
+ * Code in the beginning of fragment shader's main function does this job for a given resolution.
+ *	Run Scene_PMREM_Test.html in the examples directory to see the sampling from the cube lods generated
+ *	by this class.
+ */
+
+import {
+	DoubleSide,
+	GammaEncoding,
+	LinearEncoding,
+	LinearFilter,
+	LinearToneMapping,
+	Mesh,
+	NearestFilter,
+	NoBlending,
+	OrthographicCamera,
+	PlaneBufferGeometry,
+	Scene,
+	ShaderMaterial,
+	WebGLRenderTargetCube,
+	sRGBEncoding
+} from "../../../build/three.module.js";
+
+var PMREMGenerator = ( function () {
+
+	var shader = getShader();
+	var camera = new OrthographicCamera( - 1, 1, 1, - 1, 0.0, 1000 );
+	var scene = new Scene();
+	var planeMesh = new Mesh( new PlaneBufferGeometry( 2, 2, 0 ), shader );
+	planeMesh.material.side = DoubleSide;
+	scene.add( planeMesh );
+	scene.add( camera );
+
+	var PMREMGenerator = function ( sourceTexture, samplesPerLevel, resolution ) {
+
+		this.sourceTexture = sourceTexture;
+		this.resolution = ( resolution !== undefined ) ? resolution : 256; // NODE: 256 is currently hard coded in the glsl code for performance reasons
+		this.samplesPerLevel = ( samplesPerLevel !== undefined ) ? samplesPerLevel : 32;
+
+		var monotonicEncoding = ( this.sourceTexture.encoding === LinearEncoding ) ||
+			( this.sourceTexture.encoding === GammaEncoding ) || ( this.sourceTexture.encoding === sRGBEncoding );
+
+		this.sourceTexture.minFilter = ( monotonicEncoding ) ? LinearFilter : NearestFilter;
+		this.sourceTexture.magFilter = ( monotonicEncoding ) ? LinearFilter : NearestFilter;
+		this.sourceTexture.generateMipmaps = this.sourceTexture.generateMipmaps && monotonicEncoding;
+
+		this.cubeLods = [];
+
+		var size = this.resolution;
+		var params = {
+			format: this.sourceTexture.format,
+			magFilter: this.sourceTexture.magFilter,
+			minFilter: this.sourceTexture.minFilter,
+			type: this.sourceTexture.type,
+			generateMipmaps: this.sourceTexture.generateMipmaps,
+			anisotropy: this.sourceTexture.anisotropy,
+			encoding: this.sourceTexture.encoding
+		};
+
+		// how many LODs fit in the given CubeUV Texture.
+		this.numLods = Math.log( size ) / Math.log( 2 ) - 2; // IE11 doesn't support Math.log2
+
+		for ( var i = 0; i < this.numLods; i ++ ) {
+
+			var renderTarget = new WebGLRenderTargetCube( size, size, params );
+			renderTarget.texture.name = "PMREMGenerator.cube" + i;
+			this.cubeLods.push( renderTarget );
+			size = Math.max( 16, size / 2 );
+
+		}
+
+	};
+
+	PMREMGenerator.prototype = {
+
+		constructor: PMREMGenerator,
+
+		/*
+		 * Prashant Sharma / spidersharma03: More thought and work is needed here.
+		 * Right now it's a kind of a hack to use the previously convolved map to convolve the current one.
+		 * I tried to use the original map to convolve all the lods, but for many textures(specially the high frequency)
+		 * even a high number of samples(1024) dosen't lead to satisfactory results.
+		 * By using the previous convolved maps, a lower number of samples are generally sufficient(right now 32, which
+		 * gives okay results unless we see the reflection very carefully, or zoom in too much), however the math
+		 * goes wrong as the distribution function tries to sample a larger area than what it should be. So I simply scaled
+		 * the roughness by 0.9(totally empirical) to try to visually match the original result.
+		 * The condition "if(i <5)" is also an attemt to make the result match the original result.
+		 * This method requires the most amount of thinking I guess. Here is a paper which we could try to implement in future::
+		 * https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch20.html
+		 */
+		update: function ( renderer ) {
+
+			// Texture should only be flipped for CubeTexture, not for
+			// a Texture created via WebGLRenderTargetCube.
+			var tFlip = ( this.sourceTexture.isCubeTexture ) ? - 1 : 1;
+
+			shader.defines[ 'SAMPLES_PER_LEVEL' ] = this.samplesPerLevel;
+			shader.uniforms[ 'faceIndex' ].value = 0;
+			shader.uniforms[ 'envMap' ].value = this.sourceTexture;
+			shader.envMap = this.sourceTexture;
+			shader.needsUpdate = true;
+
+			var gammaInput = renderer.gammaInput;
+			var gammaOutput = renderer.gammaOutput;
+			var toneMapping = renderer.toneMapping;
+			var toneMappingExposure = renderer.toneMappingExposure;
+			var currentRenderTarget = renderer.getRenderTarget();
+
+			renderer.toneMapping = LinearToneMapping;
+			renderer.toneMappingExposure = 1.0;
+			renderer.gammaInput = false;
+			renderer.gammaOutput = false;
+
+			for ( var i = 0; i < this.numLods; i ++ ) {
+
+				var r = i / ( this.numLods - 1 );
+				shader.uniforms[ 'roughness' ].value = r * 0.9; // see comment above, pragmatic choice
+				// Only apply the tFlip for the first LOD
+				shader.uniforms[ 'tFlip' ].value = ( i == 0 ) ? tFlip : 1;
+				var size = this.cubeLods[ i ].width;
+				shader.uniforms[ 'mapSize' ].value = size;
+				this.renderToCubeMapTarget( renderer, this.cubeLods[ i ] );
+
+				if ( i < 5 ) shader.uniforms[ 'envMap' ].value = this.cubeLods[ i ].texture;
+
+			}
+
+			renderer.setRenderTarget( currentRenderTarget );
+			renderer.toneMapping = toneMapping;
+			renderer.toneMappingExposure = toneMappingExposure;
+			renderer.gammaInput = gammaInput;
+			renderer.gammaOutput = gammaOutput;
+
+		},
+
+		renderToCubeMapTarget: function ( renderer, renderTarget ) {
+
+			for ( var i = 0; i < 6; i ++ ) {
+
+				this.renderToCubeMapTargetFace( renderer, renderTarget, i );
+
+			}
+
+		},
+
+		renderToCubeMapTargetFace: function ( renderer, renderTarget, faceIndex ) {
+
+			shader.uniforms[ 'faceIndex' ].value = faceIndex;
+			renderer.setRenderTarget( renderTarget, faceIndex );
+			renderer.clear();
+			renderer.render( scene, camera );
+
+		},
+
+		dispose: function () {
+
+			for ( var i = 0, l = this.cubeLods.length; i < l; i ++ ) {
+
+				this.cubeLods[ i ].dispose();
+
+			}
+
+		},
+
+	};
+
+	function getShader() {
+
+		var shaderMaterial = new ShaderMaterial( {
+
+			defines: {
+				"SAMPLES_PER_LEVEL": 20,
+			},
+
+			uniforms: {
+				"faceIndex": { value: 0 },
+				"roughness": { value: 0.5 },
+				"mapSize": { value: 0.5 },
+				"envMap": { value: null },
+				"tFlip": { value: - 1 },
+			},
+
+			vertexShader:
+				"varying vec2 vUv;\n\
+				void main() {\n\
+					vUv = uv;\n\
+					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\
+				}",
+
+			fragmentShader:
+				"#include <common>\n\
+				varying vec2 vUv;\n\
+				uniform int faceIndex;\n\
+				uniform float roughness;\n\
+				uniform samplerCube envMap;\n\
+				uniform float mapSize;\n\
+				uniform float tFlip;\n\
+				\n\
+				float GGXRoughnessToBlinnExponent( const in float ggxRoughness ) {\n\
+					float a = ggxRoughness + 0.0001;\n\
+					a *= a;\n\
+					return ( 2.0 / a - 2.0 );\n\
+				}\n\
+				vec3 ImportanceSamplePhong(vec2 uv, mat3 vecSpace, float specPow) {\n\
+					float phi = uv.y * 2.0 * PI;\n\
+					float cosTheta = pow(1.0 - uv.x, 1.0 / (specPow + 1.0));\n\
+					float sinTheta = sqrt(1.0 - cosTheta * cosTheta);\n\
+					vec3 sampleDir = vec3(cos(phi) * sinTheta, sin(phi) * sinTheta, cosTheta);\n\
+					return vecSpace * sampleDir;\n\
+				}\n\
+				vec3 ImportanceSampleGGX( vec2 uv, mat3 vecSpace, float Roughness )\n\
+				{\n\
+					float a = Roughness * Roughness;\n\
+					float Phi = 2.0 * PI * uv.x;\n\
+					float CosTheta = sqrt( (1.0 - uv.y) / ( 1.0 + (a*a - 1.0) * uv.y ) );\n\
+					float SinTheta = sqrt( 1.0 - CosTheta * CosTheta );\n\
+					return vecSpace * vec3(SinTheta * cos( Phi ), SinTheta * sin( Phi ), CosTheta);\n\
+				}\n\
+				mat3 matrixFromVector(vec3 n) {\n\
+					float a = 1.0 / (1.0 + n.z);\n\
+					float b = -n.x * n.y * a;\n\
+					vec3 b1 = vec3(1.0 - n.x * n.x * a, b, -n.x);\n\
+					vec3 b2 = vec3(b, 1.0 - n.y * n.y * a, -n.y);\n\
+					return mat3(b1, b2, n);\n\
+				}\n\
+				\n\
+				vec4 testColorMap(float Roughness) {\n\
+					vec4 color;\n\
+					if(faceIndex == 0)\n\
+						color = vec4(1.0,0.0,0.0,1.0);\n\
+					else if(faceIndex == 1)\n\
+						color = vec4(0.0,1.0,0.0,1.0);\n\
+					else if(faceIndex == 2)\n\
+						color = vec4(0.0,0.0,1.0,1.0);\n\
+					else if(faceIndex == 3)\n\
+						color = vec4(1.0,1.0,0.0,1.0);\n\
+					else if(faceIndex == 4)\n\
+						color = vec4(0.0,1.0,1.0,1.0);\n\
+					else\n\
+						color = vec4(1.0,0.0,1.0,1.0);\n\
+					color *= ( 1.0 - Roughness );\n\
+					return color;\n\
+				}\n\
+				void main() {\n\
+					vec3 sampleDirection;\n\
+					vec2 uv = vUv*2.0 - 1.0;\n\
+					float offset = -1.0/mapSize;\n\
+					const float a = -1.0;\n\
+					const float b = 1.0;\n\
+					float c = -1.0 + offset;\n\
+					float d = 1.0 - offset;\n\
+					float bminusa = b - a;\n\
+					uv.x = (uv.x - a)/bminusa * d - (uv.x - b)/bminusa * c;\n\
+					uv.y = (uv.y - a)/bminusa * d - (uv.y - b)/bminusa * c;\n\
+					if (faceIndex==0) {\n\
+						sampleDirection = vec3(1.0, -uv.y, -uv.x);\n\
+					} else if (faceIndex==1) {\n\
+						sampleDirection = vec3(-1.0, -uv.y, uv.x);\n\
+					} else if (faceIndex==2) {\n\
+						sampleDirection = vec3(uv.x, 1.0, uv.y);\n\
+					} else if (faceIndex==3) {\n\
+						sampleDirection = vec3(uv.x, -1.0, -uv.y);\n\
+					} else if (faceIndex==4) {\n\
+						sampleDirection = vec3(uv.x, -uv.y, 1.0);\n\
+					} else {\n\
+						sampleDirection = vec3(-uv.x, -uv.y, -1.0);\n\
+					}\n\
+					vec3 correctedDirection = vec3( tFlip * sampleDirection.x, sampleDirection.yz );\n\
+					mat3 vecSpace = matrixFromVector( normalize( correctedDirection ) );\n\
+					vec3 rgbColor = vec3(0.0);\n\
+					const int NumSamples = SAMPLES_PER_LEVEL;\n\
+					vec3 vect;\n\
+					float weight = 0.0;\n\
+					for( int i = 0; i < NumSamples; i ++ ) {\n\
+						float sini = sin(float(i));\n\
+						float cosi = cos(float(i));\n\
+						float r = rand(vec2(sini, cosi));\n\
+						vect = ImportanceSampleGGX(vec2(float(i) / float(NumSamples), r), vecSpace, roughness);\n\
+						float dotProd = dot(vect, normalize(sampleDirection));\n\
+						weight += dotProd;\n\
+						vec3 color = envMapTexelToLinear(textureCube(envMap, vect)).rgb;\n\
+						rgbColor.rgb += color;\n\
+					}\n\
+					rgbColor /= float(NumSamples);\n\
+					//rgbColor = testColorMap( roughness ).rgb;\n\
+					gl_FragColor = linearToOutputTexel( vec4( rgbColor, 1.0 ) );\n\
+				}",
+
+			blending: NoBlending
+
+		} );
+
+		shaderMaterial.type = 'PMREMGenerator';
+
+		return shaderMaterial;
+
+	}
+
+	return PMREMGenerator;
+
+} )();
+
+export { PMREMGenerator };

examples/jsm/utils/SkeletonUtils.js

@@ -541,8 +541,60 @@ var SkeletonUtils = {
 
 		return bones;
 
+	},
+
+	clone: function ( source ) {
+
+		var sourceLookup = new Map();
+		var cloneLookup = new Map();
+
+		var clone = source.clone();
+
+		parallelTraverse( source, clone, function ( sourceNode, clonedNode ) {
+
+			sourceLookup.set( clonedNode, sourceNode );
+			cloneLookup.set( sourceNode, clonedNode );
+
+		} );
+
+		clone.traverse( function ( node ) {
+
+			if ( ! node.isSkinnedMesh ) return;
+
+			var clonedMesh = node;
+			var sourceMesh = sourceLookup.get( node );
+			var sourceBones = sourceMesh.skeleton.bones;
+
+			clonedMesh.skeleton = sourceMesh.skeleton.clone();
+			clonedMesh.bindMatrix.copy( sourceMesh.bindMatrix );
+
+			clonedMesh.skeleton.bones = sourceBones.map( function ( bone ) {
+
+				return cloneLookup.get( bone );
+
+			} );
+
+			clonedMesh.bind( clonedMesh.skeleton, clonedMesh.bindMatrix );
+
+		} );
+
+		return clone;
+
 	}
 
 };
 
+
+function parallelTraverse ( a, b, callback ) {
+
+	callback( a, b );
+
+	for ( var i = 0; i < a.children.length; i ++ ) {
+
+		parallelTraverse( a.children[ i ], b.children[ i ], callback );
+
+	}
+
+}
+
 export { SkeletonUtils };

examples/jsm/utils/UVsDebug.js

@@ -87,7 +87,7 @@ var UVsDebug = function ( geometry, size ) {
 				uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
 				uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
 
-				processFace( face, uvs, i );
+				processFace( face, uvs, i / 3 );
 
 			}
 
@@ -105,7 +105,7 @@ var UVsDebug = function ( geometry, size ) {
 				uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
 				uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
 
-				processFace( face, uvs, i );
+				processFace( face, uvs, i / 3 );
 
 			}
 

examples/misc_controls_fly.html

@@ -240,8 +240,6 @@
 				var renderModel = new THREE.RenderPass( scene, camera );
 				var effectFilm = new THREE.FilmPass( 0.35, 0.75, 2048, false );
 
-				effectFilm.renderToScreen = true;
-
 				composer = new THREE.EffectComposer( renderer );
 
 				composer.addPass( renderModel );

examples/misc_controls_transform.html

@@ -15,7 +15,7 @@
 				line-height: 30px;
 				overflow: hidden;
 			}
-			
+
 			#info {
 				position: absolute;
 				top: 0px; width: 100%;
@@ -23,7 +23,7 @@
 				z-index:100;
 				box-sizing: border-box;
 			}
-			
+
 			a {
 				color: white;
 			}

examples/misc_exporter_draco.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - exporter - draco</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				display:block;
+			}
+			#info a {
+				color: #046;
+				font-weight: bold;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - draco<br/><br/>
+			<button onclick="exportFile()">export</button>
+			<button onclick="createGeometry()">geometry</button>
+			<button onclick="createBufferGeometry()">buffer geometry</button>
+		</div>
+
+		<script src="../build/three.js"></script>
+		
+		<script src="js/libs/draco/draco_encoder.js"></script>
+
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/exporters/DRACOExporter.js"></script>
+
+		<script src="js/WebGL.js"></script>
+
+		<script>
+
+			if ( WEBGL.isWebGLAvailable() === false ) {
+
+				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+
+			}
+
+			var scene, camera, renderer, exporter, mesh;
+
+			init();
+			animate();
+
+			function createBufferGeometry() {
+
+				scene.remove( mesh );
+
+				var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.castShadow = true;
+				mesh.position.y = 25;
+				scene.add( mesh );
+
+			}
+
+			function createGeometry() {
+
+				scene.remove( mesh );
+
+				var geometry = new THREE.TorusKnotGeometry( 50, 15, 200, 30 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.castShadow = true;
+				mesh.position.y = 25;
+				scene.add( mesh );
+			}
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( 200, 100, 200 );
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xa0a0a0 );
+				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
+
+				exporter = new THREE.DRACOExporter();
+
+				//
+
+				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				hemiLight.position.set( 0, 200, 0 );
+				scene.add( hemiLight );
+
+				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				directionalLight.position.set( 0, 200, 100 );
+				directionalLight.castShadow = true;
+				directionalLight.shadow.camera.top = 180;
+				directionalLight.shadow.camera.bottom = - 100;
+				directionalLight.shadow.camera.left = - 120;
+				directionalLight.shadow.camera.right = 120;
+				scene.add( directionalLight );
+
+				// ground
+
+				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				ground.rotation.x = - Math.PI / 2;
+				ground.receiveShadow = true;
+				scene.add( ground );
+
+				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
+				grid.material.opacity = 0.2;
+				grid.material.transparent = true;
+				scene.add( grid );
+
+				// export mesh
+
+				var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				mesh = new THREE.Mesh( geometry, material );
+				mesh.castShadow = true;
+				mesh.position.y = 25;
+				scene.add( mesh );
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 25, 0 );
+				controls.update();
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+				renderer.render( scene, camera );
+
+			}
+
+			function exportFile() {
+
+				var result = exporter.parse( mesh.geometry );
+				saveArrayBuffer( result, 'file.drc' );
+
+			}
+
+			var link = document.createElement( 'a' );
+			link.style.display = 'none';
+			document.body.appendChild( link );
+
+			function save( blob, filename ) {
+
+				link.href = URL.createObjectURL( blob );
+				link.download = filename;
+				link.click();
+
+			}
+
+			function saveArrayBuffer( buffer, filename ) {
+
+				save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename );
+
+			}
+
+		</script>
+
+	</body>
+</html>

examples/models/gltf/Tree/README.md

@@ -0,0 +1,5 @@
+# Low Poly Foliage Test
+
+Model by [Splodeman](https://sketchfab.com/3d-models/low-poly-foliage-test-c1ce9830c6af4b5289ee9ecb3c30512f).
+
+The model is license under Creative Commons Attribution.

examples/models/svg/lineJoinsAndCaps.svg

@@ -0,0 +1,428 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="lineJoinsAndCaps.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="1163.5114"
+     inkscape:cy="194.79646"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="fill:#56bef1;fill-opacity:1;stroke:#000000;stroke-width:15.12240791;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:2.0999999;stroke-dasharray:none;stroke-opacity:1"
+       d="M 11.645714,137.94889 32.107527,33.104515 156.65766,13.79107 159.03004,161.95271 94.975687,86.630309 Z"
+       id="path815"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccc" />
+    <path
+       sodipodi:nodetypes="cccccc"
+       inkscape:connector-curvature="0"
+       id="path824"
+       d="M 216.55882,139.23495 237.02062,34.39057 361.57076,15.077128 363.94313,163.23877 299.88879,87.916364 Z"
+       style="fill:#56bef1;fill-opacity:1;stroke:#000000;stroke-width:15.12106323;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:2.0999999;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="fill:#56bef1;fill-opacity:1;stroke:#000000;stroke-width:15.12106323;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:2.0999999;stroke-dasharray:none;stroke-opacity:1"
+       d="M 421.54128,139.9001 442.00309,35.055731 566.55324,15.74229 568.92561,163.90393 504.87126,88.581525 Z"
+       id="path826"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccc" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path830"
+       d="m 26.903642,382.81518 107.927638,29.30033 0.66958,-68.73008"
+       style="fill:none;stroke:#000000;stroke-width:16.19490242;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       sodipodi:nodetypes="ccc" />
+    <path
+       sodipodi:nodetypes="ccc"
+       style="fill:none;stroke:#000000;stroke-width:16.195;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 231.9558,382.81518 107.92806,29.30033 0.66958,-68.73008"
+       id="path4868"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4870"
+       d="m 437.00814,382.81518 107.92806,29.30033 0.66958,-68.73008"
+       style="fill:none;stroke:#000000;stroke-width:16.19499969;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       sodipodi:nodetypes="ccc" />
+    <g
+       aria-label="Square endcap"
+       transform="matrix(0.76997327,0,0,0.76997327,398.16964,271.71599)"
+       style="font-style:normal;font-weight:normal;font-size:18.66666603px;line-height:0;font-family:sans-serif;letter-spacing:0px;word-spacing:4.94999981px;fill:#000000;fill-opacity:1;stroke:none"
+       id="flowRoot4583">
+      <path
+         d="m 24.595875,251.66342 q 0.992,0 1.632,-0.192 0.672,-0.224 1.056,-0.576 0.384,-0.384 0.512,-0.832 0.16,-0.48 0.16,-0.96 0,-0.608 -0.352,-1.088 -0.352,-0.48 -0.896,-0.832 -0.544,-0.384 -1.216,-0.672 -0.672,-0.32 -1.344,-0.576 -0.896,-0.32 -1.856,-0.736 -0.96,-0.416 -1.76,-1.056 -0.768,-0.64 -1.28,-1.568 -0.512,-0.96 -0.512,-2.368 0,-2.784 1.792,-4.352 1.824,-1.568 4.992,-1.568 1.824,0 3.168,0.416 1.376,0.416 2.304,0.928 l -1.152,3.04 q -0.8,-0.448 -1.792,-0.768 -0.96,-0.32 -2.24,-0.32 -3.136,0 -3.136,2.272 0,0.576 0.32,1.024 0.32,0.416 0.8,0.768 0.512,0.32 1.12,0.576 0.64,0.256 1.248,0.48 0.928,0.352 1.92,0.8 1.024,0.416 1.856,1.152 0.864,0.704 1.408,1.792 0.544,1.056 0.544,2.688 0,2.784 -1.824,4.32 -1.792,1.504 -5.472,1.504 -2.464,0 -3.936,-0.512 -1.472,-0.544 -2.208,-0.992 l 1.152,-3.2 q 0.864,0.512 2.048,0.96 1.216,0.448 2.944,0.448 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4642"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 38.163875,247.15142 q 0,2.08 0.672,3.232 0.704,1.12 2.112,1.12 0.672,0 1.248,-0.16 0.608,-0.16 1.056,-0.416 v -8.256 q -0.288,-0.032 -0.8,-0.064 -0.48,-0.064 -1.024,-0.064 -1.632,0 -2.464,1.312 -0.8,1.28 -0.8,3.296 z m -4,-0.128 q 0,-1.728 0.48,-3.168 0.48,-1.472 1.376,-2.496 0.928,-1.024 2.272,-1.6 1.376,-0.576 3.104,-0.576 0.736,0 1.536,0.064 0.832,0.064 1.6,0.192 0.768,0.096 1.44,0.256 0.704,0.128 1.216,0.288 v 19.84 h -3.936 v -5.696 q -0.736,0.352 -1.568,0.544 -0.8,0.224 -1.536,0.224 -1.472,0 -2.592,-0.544 -1.12,-0.576 -1.888,-1.6 -0.736,-1.024 -1.12,-2.464 -0.384,-1.472 -0.384,-3.264 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4644"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 63.187875,254.03142 q -1.088,0.288 -2.656,0.576 -1.536,0.288 -3.36,0.288 -1.856,0 -3.04,-0.512 -1.184,-0.512 -1.888,-1.44 -0.672,-0.96 -0.928,-2.24 -0.256,-1.28 -0.256,-2.816 v -8.384 h 3.936 v 7.872 q 0,2.08 0.48,3.104 0.512,0.992 1.952,0.992 0.896,0 1.792,-0.16 v -11.808 h 3.968 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4646"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 73.203875,251.72742 q 0.64,0 1.248,0 0.608,-0.032 1.056,-0.096 v -3.456 q -0.384,-0.064 -0.928,-0.096 -0.544,-0.064 -0.992,-0.064 -0.608,0 -1.184,0.096 -0.576,0.064 -1.024,0.256 -0.416,0.192 -0.672,0.544 -0.256,0.352 -0.256,0.928 0,1.024 0.768,1.472 0.768,0.416 1.984,0.416 z m -0.352,-12.608 q 1.856,0 3.072,0.448 1.248,0.416 1.984,1.216 0.736,0.768 1.056,1.92 0.32,1.12 0.32,2.528 v 8.96 q -0.864,0.192 -2.56,0.448 -1.696,0.256 -3.808,0.256 -1.44,0 -2.624,-0.256 -1.152,-0.256 -1.984,-0.832 -0.832,-0.608 -1.28,-1.536 -0.448,-0.96 -0.448,-2.336 0,-1.312 0.512,-2.208 0.512,-0.896 1.376,-1.44 0.864,-0.544 1.984,-0.768 1.12,-0.256 2.336,-0.256 1.536,0 2.72,0.256 v -0.48 q 0,-1.12 -0.704,-1.856 -0.704,-0.768 -2.432,-0.768 -1.12,0 -2.176,0.16 -1.024,0.16 -1.664,0.384 l -0.544,-3.168 q 0.736,-0.256 2.08,-0.448 1.344,-0.224 2.784,-0.224 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4648"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 95.155875,243.50342 q -0.384,-0.096 -0.928,-0.192 -0.512,-0.096 -1.056,-0.16 -0.544,-0.096 -1.056,-0.128 -0.512,-0.032 -0.864,-0.032 -0.832,0 -1.632,0.096 -0.8,0.064 -1.632,0.288 v 11.168 h -3.968 v -14.048 q 1.568,-0.576 3.2,-0.928 1.664,-0.352 3.872,-0.352 0.32,0 0.896,0.032 0.608,0.032 1.28,0.128 0.672,0.064 1.344,0.192 0.704,0.096 1.248,0.288 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4650"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 98.163875,247.15142 q 0,-1.984 0.608,-3.488 0.608,-1.504 1.600005,-2.496 0.992,-1.024 2.27199,-1.536 1.28,-0.512 2.62401,-0.512 3.328,0 5.056,1.984 1.72799,1.952 1.72799,5.728 0,0.384 -0.032,0.8 0,0.416 -0.032,0.672 h -9.76001 q 0,1.472 1.21601,2.336 1.216,0.832 3.136,0.832 1.184,0 2.23999,-0.256 1.08801,-0.256 1.824,-0.512 l 0.54401,3.36 q -1.024,0.352 -2.176,0.576 -1.152,0.256 -2.592,0.256 -1.92,0 -3.456,-0.48 -1.50401,-0.512 -2.592,-1.472 -1.056005,-0.992 -1.632005,-2.432 -0.576,-1.44 -0.576,-3.36 z m 10.080005,-1.568 q 0,-0.608 -0.16,-1.152 -0.16001,-0.576 -0.512,-1.024 -0.352,-0.448 -0.896,-0.704 -0.544,-0.288 -1.34401,-0.288 -0.768,0 -1.34399,0.256 -0.544,0.256 -0.928,0.704 -0.352,0.448 -0.57601,1.024 -0.19199,0.576 -0.256,1.184 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4652"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 135.11387,247.15142 q 0,-1.984 0.608,-3.488 0.608,-1.504 1.6,-2.496 0.992,-1.024 2.272,-1.536 1.28,-0.512 2.624,-0.512 3.328,0 5.056,1.984 1.728,1.952 1.728,5.728 0,0.384 -0.032,0.8 0,0.416 -0.032,0.672 h -9.76 q 0,1.472 1.216,2.336 1.216,0.832 3.136,0.832 1.184,0 2.24,-0.256 1.088,-0.256 1.824,-0.512 l 0.544,3.36 q -1.024,0.352 -2.176,0.576 -1.152,0.256 -2.592,0.256 -1.92,0 -3.456,-0.48 -1.504,-0.512 -2.592,-1.472 -1.056,-0.992 -1.632,-2.432 -0.576,-1.44 -0.576,-3.36 z m 10.08,-1.568 q 0,-0.608 -0.16,-1.152 -0.16,-0.576 -0.512,-1.024 -0.352,-0.448 -0.896,-0.704 -0.544,-0.288 -1.344,-0.288 -0.768,0 -1.344,0.256 -0.544,0.256 -0.928,0.704 -0.352,0.448 -0.576,1.024 -0.192,0.576 -0.256,1.184 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4654"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 152.13787,239.98342 q 1.056,-0.288 2.592,-0.544 1.568,-0.256 3.392,-0.256 1.792,0 2.976,0.512 1.184,0.48 1.856,1.408 0.704,0.896 0.992,2.176 0.288,1.248 0.288,2.784 v 8.48 h -3.936 v -7.968 q 0,-2.112 -0.48,-3.04 -0.48,-0.928 -1.952,-0.928 -0.448,0 -0.896,0.032 -0.416,0.032 -0.896,0.096 v 11.808 h -3.936 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4656"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 171.01787,246.92742 q 0,2.016 0.736,3.296 0.768,1.28 2.432,1.28 0.48,0 0.896,-0.032 0.416,-0.032 0.864,-0.096 v -8.192 q -0.448,-0.256 -1.024,-0.416 -0.576,-0.192 -1.216,-0.192 -1.408,0 -2.048,1.12 -0.64,1.12 -0.64,3.232 z m 8.864,7.168 q -1.088,0.352 -2.656,0.576 -1.568,0.224 -3.072,0.224 -3.52,0 -5.344,-2.08 -1.792,-2.08 -1.792,-5.696 0,-3.68 1.504,-5.792 1.536,-2.144 4.512,-2.144 0.8,0 1.568,0.192 0.768,0.16 1.344,0.48 v -6.848 l 3.936,-0.672 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4658"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 183.52987,247.02342 q 0,-1.632 0.512,-3.072 0.512,-1.44 1.568,-2.496 1.056,-1.088 2.656,-1.696 1.632,-0.64 3.872,-0.64 1.344,0 2.432,0.192 1.088,0.192 2.208,0.64 l -0.864,3.168 q -0.64,-0.224 -1.44,-0.384 -0.768,-0.192 -1.984,-0.192 -1.408,0 -2.368,0.352 -0.928,0.32 -1.504,0.928 -0.576,0.576 -0.832,1.408 -0.256,0.832 -0.256,1.792 0,2.08 1.152,3.264 1.184,1.184 4,1.184 0.928,0 1.92,-0.128 1.024,-0.128 1.856,-0.416 l 0.576,3.232 q -0.832,0.32 -2.016,0.512 -1.184,0.224 -2.784,0.224 -2.304,0 -3.968,-0.608 -1.632,-0.608 -2.688,-1.664 -1.056,-1.056 -1.568,-2.496 -0.48,-1.44 -0.48,-3.104 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4660"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 206.15387,251.72742 q 0.64,0 1.248,0 0.608,-0.032 1.056,-0.096 v -3.456 q -0.384,-0.064 -0.928,-0.096 -0.544,-0.064 -0.992,-0.064 -0.608,0 -1.184,0.096 -0.576,0.064 -1.024,0.256 -0.416,0.192 -0.672,0.544 -0.256,0.352 -0.256,0.928 0,1.024 0.768,1.472 0.768,0.416 1.984,0.416 z m -0.352,-12.608 q 1.856,0 3.072,0.448 1.248,0.416 1.984,1.216 0.736,0.768 1.056,1.92 0.32,1.12 0.32,2.528 v 8.96 q -0.864,0.192 -2.56,0.448 -1.696,0.256 -3.808,0.256 -1.44,0 -2.624,-0.256 -1.152,-0.256 -1.984,-0.832 -0.832,-0.608 -1.28,-1.536 -0.448,-0.96 -0.448,-2.336 0,-1.312 0.512,-2.208 0.512,-0.896 1.376,-1.44 0.864,-0.544 1.984,-0.768 1.12,-0.256 2.336,-0.256 1.536,0 2.72,0.256 v -0.48 q 0,-1.12 -0.704,-1.856 -0.704,-0.768 -2.432,-0.768 -1.12,0 -2.176,0.16 -1.024,0.16 -1.664,0.384 l -0.544,-3.168 q 0.736,-0.256 2.08,-0.448 1.344,-0.224 2.784,-0.224 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4662"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 225.12987,247.15142 q 0,-2.016 -0.8,-3.296 -0.8,-1.312 -2.432,-1.312 -0.448,0 -0.96,0.064 -0.512,0.032 -0.864,0.064 v 8.256 q 0.384,0.256 1.024,0.416 0.64,0.16 1.28,0.16 1.408,0 2.08,-1.12 0.672,-1.152 0.672,-3.232 z m 4,-0.128 q 0,1.728 -0.384,3.2 -0.384,1.44 -1.12,2.496 -0.736,1.024 -1.856,1.6 -1.12,0.576 -2.592,0.576 -1.504,0 -3.104,-0.736 v 5.664 h -3.936 v -19.84 q 1.088,-0.352 2.656,-0.576 1.6,-0.224 3.136,-0.224 3.488,0 5.344,2.112 1.856,2.112 1.856,5.728 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4664"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       aria-label="Butt endcap"
+       transform="matrix(0.76997327,0,0,0.76997327,207.21552,271.71599)"
+       style="font-style:normal;font-weight:normal;font-size:18.66666603px;line-height:0;font-family:sans-serif;letter-spacing:0px;word-spacing:4.94999981px;fill:#000000;fill-opacity:1;stroke:none"
+       id="flowRoot4575">
+      <path
+         d="m 32.179875,248.55942 q 0,1.792 -0.608,3.008 -0.608,1.184 -1.664,1.92 -1.024,0.704 -2.464,1.024 -1.408,0.288 -3.04,0.288 -1.312,0 -2.72,-0.16 -1.408,-0.128 -2.784,-0.416 v -19.232 q 1.12,-0.192 2.464,-0.32 1.344,-0.16 2.656,-0.16 2.24,0 3.648,0.48 1.408,0.448 2.208,1.216 0.8,0.736 1.088,1.664 0.288,0.928 0.288,1.856 0,1.408 -0.704,2.496 -0.672,1.088 -1.824,1.728 2.016,0.736 2.72,1.984 0.736,1.248 0.736,2.624 z m -9.344,-2.688 v 5.376 q 0.416,0.064 0.896,0.096 0.512,0.032 0.992,0.032 0.672,0 1.312,-0.096 0.64,-0.128 1.12,-0.416 0.512,-0.32 0.832,-0.864 0.32,-0.576 0.32,-1.44 0,-1.44 -0.928,-2.048 -0.896,-0.64 -2.432,-0.64 z m 1.536,-3.264 q 1.504,0 2.272,-0.64 0.768,-0.672 0.768,-1.824 0,-0.704 -0.224,-1.12 -0.224,-0.448 -0.608,-0.672 -0.384,-0.256 -0.896,-0.32 -0.512,-0.096 -1.056,-0.096 -0.448,0 -0.928,0.032 -0.48,0.032 -0.864,0.096 v 4.544 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4667"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 47.187875,254.03142 q -1.088,0.288 -2.656,0.576 -1.536,0.288 -3.36,0.288 -1.856,0 -3.04,-0.512 -1.184,-0.512 -1.888,-1.44 -0.672,-0.96 -0.928,-2.24 -0.256,-1.28 -0.256,-2.816 v -8.384 h 3.936 v 7.872 q 0,2.08 0.48,3.104 0.512,0.992 1.952,0.992 0.896,0 1.792,-0.16 v -11.808 h 3.968 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4669"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 53.747875,242.76742 h -3.424 v -3.264 h 3.424 v -3.776 l 3.936,-0.64 v 4.416 h 6.304 v 3.264 h -6.304 v 6.08 q 0,0.832 0.16,1.344 0.16,0.512 0.448,0.8 0.288,0.288 0.704,0.384 0.416,0.096 0.928,0.096 0.544,0 0.992,-0.032 0.48,-0.032 0.896,-0.096 0.448,-0.096 0.896,-0.256 0.48,-0.16 1.024,-0.416 l 0.544,3.392 q -1.088,0.448 -2.368,0.64 -1.248,0.192 -2.432,0.192 -1.376,0 -2.432,-0.224 -1.056,-0.224 -1.792,-0.864 -0.736,-0.64 -1.12,-1.792 -0.384,-1.184 -0.384,-3.072 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4671"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 69.747875,242.76742 h -3.424 v -3.264 h 3.424 v -3.776 l 3.936,-0.64 v 4.416 h 6.304 v 3.264 h -6.304 v 6.08 q 0,0.832 0.16,1.344 0.16,0.512 0.448,0.8 0.288,0.288 0.704,0.384 0.416,0.096 0.928,0.096 0.544,0 0.992,-0.032 0.48,-0.032 0.896,-0.096 0.448,-0.096 0.896,-0.256 0.48,-0.16 1.024,-0.416 l 0.544,3.392 q -1.088,0.448 -2.368,0.64 -1.248,0.192 -2.432,0.192 -1.376,0 -2.432,-0.224 -1.056,-0.224 -1.792,-0.864 -0.736,-0.64 -1.12,-1.792 -0.384,-1.184 -0.384,-3.072 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4673"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 103.11387,247.15142 q 0,-1.984 0.608,-3.488 0.608,-1.504 1.6,-2.496 0.992,-1.024 2.272,-1.536 1.28,-0.512 2.624,-0.512 3.328,0 5.056,1.984 1.728,1.952 1.728,5.728 0,0.384 -0.032,0.8 0,0.416 -0.032,0.672 h -9.76 q 0,1.472 1.216,2.336 1.216,0.832 3.136,0.832 1.184,0 2.24,-0.256 1.088,-0.256 1.824,-0.512 l 0.544,3.36 q -1.024,0.352 -2.176,0.576 -1.152,0.256 -2.592,0.256 -1.92,0 -3.456,-0.48 -1.504,-0.512 -2.592,-1.472 -1.056,-0.992 -1.632,-2.432 -0.576,-1.44 -0.576,-3.36 z m 10.08,-1.568 q 0,-0.608 -0.16,-1.152 -0.16,-0.576 -0.512,-1.024 -0.352,-0.448 -0.896,-0.704 -0.544,-0.288 -1.344,-0.288 -0.768,0 -1.344,0.256 -0.544,0.256 -0.928,0.704 -0.352,0.448 -0.576,1.024 -0.192,0.576 -0.256,1.184 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4675"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 120.13787,239.98342 q 1.056,-0.288 2.592,-0.544 1.568,-0.256 3.392,-0.256 1.792,0 2.976,0.512 1.184,0.48 1.856,1.408 0.704,0.896 0.992,2.176 0.288,1.248 0.288,2.784 v 8.48 h -3.936 v -7.968 q 0,-2.112 -0.48,-3.04 -0.48,-0.928 -1.952,-0.928 -0.448,0 -0.896,0.032 -0.416,0.032 -0.896,0.096 v 11.808 h -3.936 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4677"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 139.01787,246.92742 q 0,2.016 0.736,3.296 0.768,1.28 2.432,1.28 0.48,0 0.896,-0.032 0.416,-0.032 0.864,-0.096 v -8.192 q -0.448,-0.256 -1.024,-0.416 -0.576,-0.192 -1.216,-0.192 -1.408,0 -2.048,1.12 -0.64,1.12 -0.64,3.232 z m 8.864,7.168 q -1.088,0.352 -2.656,0.576 -1.568,0.224 -3.072,0.224 -3.52,0 -5.344,-2.08 -1.792,-2.08 -1.792,-5.696 0,-3.68 1.504,-5.792 1.536,-2.144 4.512,-2.144 0.8,0 1.568,0.192 0.768,0.16 1.344,0.48 v -6.848 l 3.936,-0.672 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4679"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 151.52987,247.02342 q 0,-1.632 0.512,-3.072 0.512,-1.44 1.568,-2.496 1.056,-1.088 2.656,-1.696 1.632,-0.64 3.872,-0.64 1.344,0 2.432,0.192 1.088,0.192 2.208,0.64 l -0.864,3.168 q -0.64,-0.224 -1.44,-0.384 -0.768,-0.192 -1.984,-0.192 -1.408,0 -2.368,0.352 -0.928,0.32 -1.504,0.928 -0.576,0.576 -0.832,1.408 -0.256,0.832 -0.256,1.792 0,2.08 1.152,3.264 1.184,1.184 4,1.184 0.928,0 1.92,-0.128 1.024,-0.128 1.856,-0.416 l 0.576,3.232 q -0.832,0.32 -2.016,0.512 -1.184,0.224 -2.784,0.224 -2.304,0 -3.968,-0.608 -1.632,-0.608 -2.688,-1.664 -1.056,-1.056 -1.568,-2.496 -0.48,-1.44 -0.48,-3.104 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4681"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 174.15387,251.72742 q 0.64,0 1.248,0 0.608,-0.032 1.056,-0.096 v -3.456 q -0.384,-0.064 -0.928,-0.096 -0.544,-0.064 -0.992,-0.064 -0.608,0 -1.184,0.096 -0.576,0.064 -1.024,0.256 -0.416,0.192 -0.672,0.544 -0.256,0.352 -0.256,0.928 0,1.024 0.768,1.472 0.768,0.416 1.984,0.416 z m -0.352,-12.608 q 1.856,0 3.072,0.448 1.248,0.416 1.984,1.216 0.736,0.768 1.056,1.92 0.32,1.12 0.32,2.528 v 8.96 q -0.864,0.192 -2.56,0.448 -1.696,0.256 -3.808,0.256 -1.44,0 -2.624,-0.256 -1.152,-0.256 -1.984,-0.832 -0.832,-0.608 -1.28,-1.536 -0.448,-0.96 -0.448,-2.336 0,-1.312 0.512,-2.208 0.512,-0.896 1.376,-1.44 0.864,-0.544 1.984,-0.768 1.12,-0.256 2.336,-0.256 1.536,0 2.72,0.256 v -0.48 q 0,-1.12 -0.704,-1.856 -0.704,-0.768 -2.432,-0.768 -1.12,0 -2.176,0.16 -1.024,0.16 -1.664,0.384 l -0.544,-3.168 q 0.736,-0.256 2.08,-0.448 1.344,-0.224 2.784,-0.224 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4683"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 193.12987,247.15142 q 0,-2.016 -0.8,-3.296 -0.8,-1.312 -2.432,-1.312 -0.448,0 -0.96,0.064 -0.512,0.032 -0.864,0.064 v 8.256 q 0.384,0.256 1.024,0.416 0.64,0.16 1.28,0.16 1.408,0 2.08,-1.12 0.672,-1.152 0.672,-3.232 z m 4,-0.128 q 0,1.728 -0.384,3.2 -0.384,1.44 -1.12,2.496 -0.736,1.024 -1.856,1.6 -1.12,0.576 -2.592,0.576 -1.504,0 -3.104,-0.736 v 5.664 h -3.936 v -19.84 q 1.088,-0.352 2.656,-0.576 1.6,-0.224 3.136,-0.224 3.488,0 5.344,2.112 1.856,2.112 1.856,5.728 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4685"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       aria-label="Round endcap"
+       transform="matrix(0.76997327,0,0,0.76997327,-2.2173295,271.71599)"
+       style="font-style:normal;font-weight:normal;font-size:18.66666603px;line-height:0;font-family:sans-serif;letter-spacing:0px;word-spacing:4.94999981px;fill:#000000;fill-opacity:1;stroke:none"
+       id="flowRoot4567">
+      <path
+         d="m 24.019875,234.51142 q 1.696,0 3.072,0.384 1.376,0.384 2.368,1.184 0.992,0.8 1.504,2.048 0.544,1.216 0.544,2.88 0,1.728 -0.704,3.136 -0.704,1.408 -2.336,2.144 0.544,0.832 1.152,1.856 0.608,0.992 1.184,2.112 0.576,1.088 1.088,2.208 0.544,1.088 0.928,2.08 h -4.128 q -0.736,-1.92 -1.728,-3.68 -0.96,-1.792 -2.08,-3.616 h -2.048 v 7.296 h -3.936 v -19.52 q 0.576,-0.128 1.248,-0.224 0.704,-0.128 1.408,-0.16 0.704,-0.064 1.344,-0.096 0.64,-0.032 1.12,-0.032 z m 3.488,6.464 q 0,-1.568 -0.96,-2.304 -0.96,-0.736 -2.528,-0.736 -0.224,0 -0.544,0.032 -0.32,0 -0.64,0.064 v 5.952 h 0.864 q 2.016,0 2.912,-0.768 0.896,-0.8 0.896,-2.24 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4688"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 48.275875,246.99142 q 0,1.792 -0.512,3.264 -0.512,1.44 -1.44,2.496 -0.928,1.056 -2.24,1.632 -1.28,0.576 -2.88,0.576 -1.6,0 -2.912,-0.576 -1.28,-0.576 -2.24,-1.632 -0.928,-1.056 -1.44,-2.496 -0.512,-1.472 -0.512,-3.264 0,-1.76 0.512,-3.2 0.544,-1.472 1.472,-2.496 0.96,-1.056 2.272,-1.6 1.312,-0.576 2.848,-0.576 1.568,0 2.848,0.576 1.312,0.544 2.24,1.6 0.96,1.024 1.472,2.496 0.512,1.44 0.512,3.2 z m -10.176,0.032 q 0,2.016 0.704,3.264 0.736,1.248 2.336,1.248 1.536,0 2.304,-1.248 0.8,-1.248 0.8,-3.264 0,-2.016 -0.736,-3.232 -0.704,-1.248 -2.304,-1.248 -1.536,0 -2.336,1.248 -0.768,1.216 -0.768,3.232 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4690"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 63.187875,254.03142 q -1.088,0.288 -2.656,0.576 -1.536,0.288 -3.36,0.288 -1.856,0 -3.04,-0.512 -1.184,-0.512 -1.888,-1.44 -0.672,-0.96 -0.928,-2.24 -0.256,-1.28 -0.256,-2.816 v -8.384 h 3.936 v 7.872 q 0,2.08 0.48,3.104 0.512,0.992 1.952,0.992 0.896,0 1.792,-0.16 v -11.808 h 3.968 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4692"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 67.187875,239.98342 q 1.056,-0.288 2.592,-0.544 1.568,-0.256 3.392,-0.256 1.792,0 2.976,0.512 1.184,0.48 1.856,1.408 0.704,0.896 0.992,2.176 0.288,1.248 0.288,2.784 v 8.48 h -3.936 v -7.968 q 0,-2.112 -0.48,-3.04 -0.48,-0.928 -1.952,-0.928 -0.448,0 -0.896,0.032 -0.416,0.032 -0.896,0.096 v 11.808 h -3.936 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4694"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 86.067875,246.92742 q 0,2.016 0.736,3.296 0.768,1.28 2.432,1.28 0.48,0 0.896,-0.032 0.416,-0.032 0.864,-0.096 v -8.192 q -0.448,-0.256 -1.024,-0.416 -0.576,-0.192 -1.216,-0.192 -1.408,0 -2.048,1.12 -0.64,1.12 -0.64,3.232 z m 8.864,7.168 q -1.088,0.352 -2.656,0.576 -1.568,0.224 -3.072,0.224 -3.52,0 -5.344,-2.08 -1.792,-2.08 -1.792,-5.696 0,-3.68 1.504,-5.792 1.536,-2.144 4.512,-2.144 0.8,0 1.568,0.192 0.768,0.16 1.344,0.48 v -6.848 l 3.936,-0.672 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4696"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 119.11387,247.15142 q 0,-1.984 0.608,-3.488 0.608,-1.504 1.6,-2.496 0.992,-1.024 2.272,-1.536 1.28,-0.512 2.624,-0.512 3.328,0 5.056,1.984 1.728,1.952 1.728,5.728 0,0.384 -0.032,0.8 0,0.416 -0.032,0.672 h -9.76 q 0,1.472 1.216,2.336 1.216,0.832 3.136,0.832 1.184,0 2.24,-0.256 1.088,-0.256 1.824,-0.512 l 0.544,3.36 q -1.024,0.352 -2.176,0.576 -1.152,0.256 -2.592,0.256 -1.92,0 -3.456,-0.48 -1.504,-0.512 -2.592,-1.472 -1.056,-0.992 -1.632,-2.432 -0.576,-1.44 -0.576,-3.36 z m 10.08,-1.568 q 0,-0.608 -0.16,-1.152 -0.16,-0.576 -0.512,-1.024 -0.352,-0.448 -0.896,-0.704 -0.544,-0.288 -1.344,-0.288 -0.768,0 -1.344,0.256 -0.544,0.256 -0.928,0.704 -0.352,0.448 -0.576,1.024 -0.192,0.576 -0.256,1.184 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4698"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 136.13787,239.98342 q 1.056,-0.288 2.592,-0.544 1.568,-0.256 3.392,-0.256 1.792,0 2.976,0.512 1.184,0.48 1.856,1.408 0.704,0.896 0.992,2.176 0.288,1.248 0.288,2.784 v 8.48 h -3.936 v -7.968 q 0,-2.112 -0.48,-3.04 -0.48,-0.928 -1.952,-0.928 -0.448,0 -0.896,0.032 -0.416,0.032 -0.896,0.096 v 11.808 h -3.936 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4700"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 155.01787,246.92742 q 0,2.016 0.736,3.296 0.768,1.28 2.432,1.28 0.48,0 0.896,-0.032 0.416,-0.032 0.864,-0.096 v -8.192 q -0.448,-0.256 -1.024,-0.416 -0.576,-0.192 -1.216,-0.192 -1.408,0 -2.048,1.12 -0.64,1.12 -0.64,3.232 z m 8.864,7.168 q -1.088,0.352 -2.656,0.576 -1.568,0.224 -3.072,0.224 -3.52,0 -5.344,-2.08 -1.792,-2.08 -1.792,-5.696 0,-3.68 1.504,-5.792 1.536,-2.144 4.512,-2.144 0.8,0 1.568,0.192 0.768,0.16 1.344,0.48 v -6.848 l 3.936,-0.672 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4702"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 167.52987,247.02342 q 0,-1.632 0.512,-3.072 0.512,-1.44 1.568,-2.496 1.056,-1.088 2.656,-1.696 1.632,-0.64 3.872,-0.64 1.344,0 2.432,0.192 1.088,0.192 2.208,0.64 l -0.864,3.168 q -0.64,-0.224 -1.44,-0.384 -0.768,-0.192 -1.984,-0.192 -1.408,0 -2.368,0.352 -0.928,0.32 -1.504,0.928 -0.576,0.576 -0.832,1.408 -0.256,0.832 -0.256,1.792 0,2.08 1.152,3.264 1.184,1.184 4,1.184 0.928,0 1.92,-0.128 1.024,-0.128 1.856,-0.416 l 0.576,3.232 q -0.832,0.32 -2.016,0.512 -1.184,0.224 -2.784,0.224 -2.304,0 -3.968,-0.608 -1.632,-0.608 -2.688,-1.664 -1.056,-1.056 -1.568,-2.496 -0.48,-1.44 -0.48,-3.104 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4704"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 190.15387,251.72742 q 0.64,0 1.248,0 0.608,-0.032 1.056,-0.096 v -3.456 q -0.384,-0.064 -0.928,-0.096 -0.544,-0.064 -0.992,-0.064 -0.608,0 -1.184,0.096 -0.576,0.064 -1.024,0.256 -0.416,0.192 -0.672,0.544 -0.256,0.352 -0.256,0.928 0,1.024 0.768,1.472 0.768,0.416 1.984,0.416 z m -0.352,-12.608 q 1.856,0 3.072,0.448 1.248,0.416 1.984,1.216 0.736,0.768 1.056,1.92 0.32,1.12 0.32,2.528 v 8.96 q -0.864,0.192 -2.56,0.448 -1.696,0.256 -3.808,0.256 -1.44,0 -2.624,-0.256 -1.152,-0.256 -1.984,-0.832 -0.832,-0.608 -1.28,-1.536 -0.448,-0.96 -0.448,-2.336 0,-1.312 0.512,-2.208 0.512,-0.896 1.376,-1.44 0.864,-0.544 1.984,-0.768 1.12,-0.256 2.336,-0.256 1.536,0 2.72,0.256 v -0.48 q 0,-1.12 -0.704,-1.856 -0.704,-0.768 -2.432,-0.768 -1.12,0 -2.176,0.16 -1.024,0.16 -1.664,0.384 l -0.544,-3.168 q 0.736,-0.256 2.08,-0.448 1.344,-0.224 2.784,-0.224 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4706"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 209.12987,247.15142 q 0,-2.016 -0.8,-3.296 -0.8,-1.312 -2.432,-1.312 -0.448,0 -0.96,0.064 -0.512,0.032 -0.864,0.064 v 8.256 q 0.384,0.256 1.024,0.416 0.64,0.16 1.28,0.16 1.408,0 2.08,-1.12 0.672,-1.152 0.672,-3.232 z m 4,-0.128 q 0,1.728 -0.384,3.2 -0.384,1.44 -1.12,2.496 -0.736,1.024 -1.856,1.6 -1.12,0.576 -2.592,0.576 -1.504,0 -3.104,-0.736 v 5.664 h -3.936 v -19.84 q 1.088,-0.352 2.656,-0.576 1.6,-0.224 3.136,-0.224 3.488,0 5.344,2.112 1.856,2.112 1.856,5.728 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4708"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       aria-label="Miter join"
+       transform="matrix(0.76997327,0,0,0.76997327,421.26899,14.544752)"
+       style="font-style:normal;font-weight:normal;font-size:18.66666603px;line-height:0;font-family:sans-serif;letter-spacing:0px;word-spacing:4.94999981px;fill:#000000;fill-opacity:1;stroke:none"
+       id="flowRoot4559">
+      <path
+         d="m 22.323875,234.73542 q 0.224,0.672 0.544,1.728 0.352,1.056 0.736,2.272 0.384,1.216 0.768,2.464 0.384,1.248 0.736,2.304 0.384,-1.184 0.8,-2.432 0.416,-1.28 0.8,-2.432 0.384,-1.184 0.704,-2.208 0.32,-1.024 0.576,-1.696 h 3.264 q 0.224,2.592 0.416,5.056 0.224,2.464 0.352,4.896 0.16,2.4 0.256,4.864 0.096,2.432 0.16,4.992 h -3.616 l 0.192,-15.392 -2.432,8.384 h -2.88 l -2.336,-8.384 0.16,15.392 h -3.616 q 0.096,-2.432 0.192,-5.056 0.128,-2.624 0.256,-5.216 0.128,-2.592 0.288,-5.024 0.192,-2.432 0.416,-4.512 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4585"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 42.259875,235.18342 q 0,1.152 -0.736,1.824 -0.736,0.672 -1.76,0.672 -1.024,0 -1.76,-0.672 -0.704,-0.672 -0.704,-1.824 0,-1.184 0.704,-1.856 0.736,-0.672 1.76,-0.672 1.024,0 1.76,0.672 0.736,0.672 0.736,1.856 z m 5.856,18.72 q -1.216,0.576 -2.304,0.768 -1.056,0.224 -1.952,0.224 -1.536,0 -2.592,-0.448 -1.024,-0.448 -1.664,-1.28 -0.608,-0.864 -0.864,-2.08 -0.256,-1.216 -0.256,-2.784 v -5.536 h -4.16 v -3.264 h 8.096 v 9.312 q 0,1.344 0.48,2.016 0.512,0.64 1.664,0.64 0.544,0 1.312,-0.128 0.768,-0.16 1.728,-0.608 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4587"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 53.747875,242.76742 h -3.424 v -3.264 h 3.424 v -3.776 l 3.936,-0.64 v 4.416 h 6.304 v 3.264 h -6.304 v 6.08 q 0,0.832 0.16,1.344 0.16,0.512 0.448,0.8 0.288,0.288 0.704,0.384 0.416,0.096 0.928,0.096 0.544,0 0.992,-0.032 0.48,-0.032 0.896,-0.096 0.448,-0.096 0.896,-0.256 0.48,-0.16 1.024,-0.416 l 0.544,3.392 q -1.088,0.448 -2.368,0.64 -1.248,0.192 -2.432,0.192 -1.376,0 -2.432,-0.224 -1.056,-0.224 -1.792,-0.864 -0.736,-0.64 -1.12,-1.792 -0.384,-1.184 -0.384,-3.072 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4589"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 66.163875,247.15142 q 0,-1.984 0.608,-3.488 0.608,-1.504 1.6,-2.496 0.992,-1.024 2.272,-1.536 1.28,-0.512 2.624,-0.512 3.328,0 5.056,1.984 1.728,1.952 1.728,5.728 0,0.384 -0.032,0.8 0,0.416 -0.032,0.672 h -9.76 q 0,1.472 1.216,2.336 1.216,0.832 3.136,0.832 1.184,0 2.24,-0.256 1.088,-0.256 1.824,-0.512 l 0.544,3.36 q -1.024,0.352 -2.176,0.576 -1.152,0.256 -2.592,0.256 -1.92,0 -3.456,-0.48 -1.504,-0.512 -2.592,-1.472 -1.056,-0.992 -1.632,-2.432 -0.576,-1.44 -0.576,-3.36 z m 10.08,-1.568 q 0,-0.608 -0.16,-1.152 -0.16,-0.576 -0.512,-1.024 -0.352,-0.448 -0.896,-0.704 -0.544,-0.288 -1.344,-0.288 -0.768,0 -1.344,0.256 -0.544,0.256 -0.928,0.704 -0.352,0.448 -0.576,1.024 -0.192,0.576 -0.256,1.184 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4591"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 95.155875,243.50342 q -0.384,-0.096 -0.928,-0.192 -0.512,-0.096 -1.056,-0.16 -0.544,-0.096 -1.056,-0.128 -0.512,-0.032 -0.864,-0.032 -0.832,0 -1.632,0.096 -0.8,0.064 -1.632,0.288 v 11.168 h -3.968 v -14.048 q 1.568,-0.576 3.2,-0.928 1.664,-0.352 3.872,-0.352 0.32,0 0.896,0.032 0.608,0.032 1.28,0.128 0.672,0.064 1.344,0.192 0.704,0.096 1.248,0.288 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4593"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 130.92187,253.55142 q 0,1.824 -0.448,3.04 -0.448,1.248 -1.248,1.984 -0.768,0.768 -1.856,1.088 -1.056,0.32 -2.304,0.32 -1.536,0 -2.848,-0.384 -1.312,-0.384 -2.528,-0.992 l 1.216,-3.328 q 0.8,0.448 1.92,0.832 1.152,0.416 2.08,0.416 0.992,0 1.536,-0.608 0.544,-0.576 0.544,-2.176 v -10.976 h -6.08 v -3.264 h 10.016 z m -0.48,-18.368 q 0,1.152 -0.736,1.824 -0.736,0.672 -1.76,0.672 -1.024,0 -1.76,-0.672 -0.704,-0.672 -0.704,-1.824 0,-1.184 0.704,-1.856 0.736,-0.672 1.76,-0.672 1.024,0 1.76,0.672 0.736,0.672 0.736,1.856 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4595"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 149.22587,246.99142 q 0,1.792 -0.512,3.264 -0.512,1.44 -1.44,2.496 -0.928,1.056 -2.24,1.632 -1.28,0.576 -2.88,0.576 -1.6,0 -2.912,-0.576 -1.28,-0.576 -2.24,-1.632 -0.928,-1.056 -1.44,-2.496 -0.512,-1.472 -0.512,-3.264 0,-1.76 0.512,-3.2 0.544,-1.472 1.472,-2.496 0.96,-1.056 2.272,-1.6 1.312,-0.576 2.848,-0.576 1.568,0 2.848,0.576 1.312,0.544 2.24,1.6 0.96,1.024 1.472,2.496 0.512,1.44 0.512,3.2 z m -10.176,0.032 q 0,2.016 0.704,3.264 0.736,1.248 2.336,1.248 1.536,0 2.304,-1.248 0.8,-1.248 0.8,-3.264 0,-2.016 -0.736,-3.232 -0.704,-1.248 -2.304,-1.248 -1.536,0 -2.336,1.248 -0.768,1.216 -0.768,3.232 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4597"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 159.20987,235.18342 q 0,1.152 -0.736,1.824 -0.736,0.672 -1.76,0.672 -1.024,0 -1.76,-0.672 -0.704,-0.672 -0.704,-1.824 0,-1.184 0.704,-1.856 0.736,-0.672 1.76,-0.672 1.024,0 1.76,0.672 0.736,0.672 0.736,1.856 z m 5.856,18.72 q -1.216,0.576 -2.304,0.768 -1.056,0.224 -1.952,0.224 -1.536,0 -2.592,-0.448 -1.024,-0.448 -1.664,-1.28 -0.608,-0.864 -0.864,-2.08 -0.256,-1.216 -0.256,-2.784 v -5.536 h -4.16 v -3.264 h 8.096 v 9.312 q 0,1.344 0.48,2.016 0.512,0.64 1.664,0.64 0.544,0 1.312,-0.128 0.768,-0.16 1.728,-0.608 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4599"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 168.13787,239.98342 q 1.056,-0.288 2.592,-0.544 1.568,-0.256 3.392,-0.256 1.792,0 2.976,0.512 1.184,0.48 1.856,1.408 0.704,0.896 0.992,2.176 0.288,1.248 0.288,2.784 v 8.48 h -3.936 v -7.968 q 0,-2.112 -0.48,-3.04 -0.48,-0.928 -1.952,-0.928 -0.448,0 -0.896,0.032 -0.416,0.032 -0.896,0.096 v 11.808 h -3.936 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4601"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       aria-label="Bevel join"
+       transform="matrix(0.76997327,0,0,0.76997327,219.5351,14.544752)"
+       style="font-style:normal;font-weight:normal;font-size:18.66666603px;line-height:0;font-family:sans-serif;letter-spacing:0px;word-spacing:4.94999981px;fill:#000000;fill-opacity:1;stroke:none"
+       id="flowRoot4551">
+      <path
+         d="m 32.179875,248.55942 q 0,1.792 -0.608,3.008 -0.608,1.184 -1.664,1.92 -1.024,0.704 -2.464,1.024 -1.408,0.288 -3.04,0.288 -1.312,0 -2.72,-0.16 -1.408,-0.128 -2.784,-0.416 v -19.232 q 1.12,-0.192 2.464,-0.32 1.344,-0.16 2.656,-0.16 2.24,0 3.648,0.48 1.408,0.448 2.208,1.216 0.8,0.736 1.088,1.664 0.288,0.928 0.288,1.856 0,1.408 -0.704,2.496 -0.672,1.088 -1.824,1.728 2.016,0.736 2.72,1.984 0.736,1.248 0.736,2.624 z m -9.344,-2.688 v 5.376 q 0.416,0.064 0.896,0.096 0.512,0.032 0.992,0.032 0.672,0 1.312,-0.096 0.64,-0.128 1.12,-0.416 0.512,-0.32 0.832,-0.864 0.32,-0.576 0.32,-1.44 0,-1.44 -0.928,-2.048 -0.896,-0.64 -2.432,-0.64 z m 1.536,-3.264 q 1.504,0 2.272,-0.64 0.768,-0.672 0.768,-1.824 0,-0.704 -0.224,-1.12 -0.224,-0.448 -0.608,-0.672 -0.384,-0.256 -0.896,-0.32 -0.512,-0.096 -1.056,-0.096 -0.448,0 -0.928,0.032 -0.48,0.032 -0.864,0.096 v 4.544 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4604"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 34.163875,247.15142 q 0,-1.984 0.608,-3.488 0.608,-1.504 1.6,-2.496 0.992,-1.024 2.272,-1.536 1.28,-0.512 2.624,-0.512 3.328,0 5.056,1.984 1.728,1.952 1.728,5.728 0,0.384 -0.032,0.8 0,0.416 -0.032,0.672 h -9.76 q 0,1.472 1.216,2.336 1.216,0.832 3.136,0.832 1.184,0 2.24,-0.256 1.088,-0.256 1.824,-0.512 l 0.544,3.36 q -1.024,0.352 -2.176,0.576 -1.152,0.256 -2.592,0.256 -1.92,0 -3.456,-0.48 -1.504,-0.512 -2.592,-1.472 -1.056,-0.992 -1.632,-2.432 -0.576,-1.44 -0.576,-3.36 z m 10.08,-1.568 q 0,-0.608 -0.16,-1.152 -0.16,-0.576 -0.512,-1.024 -0.352,-0.448 -0.896,-0.704 -0.544,-0.288 -1.344,-0.288 -0.768,0 -1.344,0.256 -0.544,0.256 -0.928,0.704 -0.352,0.448 -0.576,1.024 -0.192,0.576 -0.256,1.184 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4606"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 55.379875,254.54342 q -1.44,-2.848 -2.944,-6.656 -1.472,-3.84 -2.816,-8.384 h 4.128 q 0.288,1.216 0.672,2.592 0.416,1.376 0.864,2.784 0.448,1.376 0.896,2.688 0.48,1.312 0.896,2.4 0.416,-1.088 0.928,-2.4 0.512,-1.312 0.992,-2.688 0.512,-1.408 0.96,-2.784 0.48,-1.376 0.768,-2.592 h 4 q -1.344,4.544 -2.976,8.384 -1.632,3.808 -3.072,6.656 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4608"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 66.163875,247.15142 q 0,-1.984 0.608,-3.488 0.608,-1.504 1.6,-2.496 0.992,-1.024 2.272,-1.536 1.28,-0.512 2.624,-0.512 3.328,0 5.056,1.984 1.728,1.952 1.728,5.728 0,0.384 -0.032,0.8 0,0.416 -0.032,0.672 h -9.76 q 0,1.472 1.216,2.336 1.216,0.832 3.136,0.832 1.184,0 2.24,-0.256 1.088,-0.256 1.824,-0.512 l 0.544,3.36 q -1.024,0.352 -2.176,0.576 -1.152,0.256 -2.592,0.256 -1.92,0 -3.456,-0.48 -1.504,-0.512 -2.592,-1.472 -1.056,-0.992 -1.632,-2.432 -0.576,-1.44 -0.576,-3.36 z m 10.08,-1.568 q 0,-0.608 -0.16,-1.152 -0.16,-0.576 -0.512,-1.024 -0.352,-0.448 -0.896,-0.704 -0.544,-0.288 -1.344,-0.288 -0.768,0 -1.344,0.256 -0.544,0.256 -0.928,0.704 -0.352,0.448 -0.576,1.024 -0.192,0.576 -0.256,1.184 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4610"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 96.115875,253.90342 q -0.096,0.064 -0.448,0.224 -0.32,0.16 -0.864,0.352 -0.544,0.16 -1.344,0.288 -0.768,0.128 -1.76,0.128 -2.72,0 -3.968,-1.6 -1.248,-1.632 -1.248,-4.736 v -12.768 h -4.16 v -3.264 h 8.096 v 16.32 q 0,1.536 0.608,2.08 0.608,0.544 1.536,0.544 1.184,0 1.984,-0.32 0.8,-0.32 1.056,-0.416 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4612"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 130.92187,253.55142 q 0,1.824 -0.448,3.04 -0.448,1.248 -1.248,1.984 -0.768,0.768 -1.856,1.088 -1.056,0.32 -2.304,0.32 -1.536,0 -2.848,-0.384 -1.312,-0.384 -2.528,-0.992 l 1.216,-3.328 q 0.8,0.448 1.92,0.832 1.152,0.416 2.08,0.416 0.992,0 1.536,-0.608 0.544,-0.576 0.544,-2.176 v -10.976 h -6.08 v -3.264 h 10.016 z m -0.48,-18.368 q 0,1.152 -0.736,1.824 -0.736,0.672 -1.76,0.672 -1.024,0 -1.76,-0.672 -0.704,-0.672 -0.704,-1.824 0,-1.184 0.704,-1.856 0.736,-0.672 1.76,-0.672 1.024,0 1.76,0.672 0.736,0.672 0.736,1.856 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4614"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 149.22587,246.99142 q 0,1.792 -0.512,3.264 -0.512,1.44 -1.44,2.496 -0.928,1.056 -2.24,1.632 -1.28,0.576 -2.88,0.576 -1.6,0 -2.912,-0.576 -1.28,-0.576 -2.24,-1.632 -0.928,-1.056 -1.44,-2.496 -0.512,-1.472 -0.512,-3.264 0,-1.76 0.512,-3.2 0.544,-1.472 1.472,-2.496 0.96,-1.056 2.272,-1.6 1.312,-0.576 2.848,-0.576 1.568,0 2.848,0.576 1.312,0.544 2.24,1.6 0.96,1.024 1.472,2.496 0.512,1.44 0.512,3.2 z m -10.176,0.032 q 0,2.016 0.704,3.264 0.736,1.248 2.336,1.248 1.536,0 2.304,-1.248 0.8,-1.248 0.8,-3.264 0,-2.016 -0.736,-3.232 -0.704,-1.248 -2.304,-1.248 -1.536,0 -2.336,1.248 -0.768,1.216 -0.768,3.232 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4616"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 159.20987,235.18342 q 0,1.152 -0.736,1.824 -0.736,0.672 -1.76,0.672 -1.024,0 -1.76,-0.672 -0.704,-0.672 -0.704,-1.824 0,-1.184 0.704,-1.856 0.736,-0.672 1.76,-0.672 1.024,0 1.76,0.672 0.736,0.672 0.736,1.856 z m 5.856,18.72 q -1.216,0.576 -2.304,0.768 -1.056,0.224 -1.952,0.224 -1.536,0 -2.592,-0.448 -1.024,-0.448 -1.664,-1.28 -0.608,-0.864 -0.864,-2.08 -0.256,-1.216 -0.256,-2.784 v -5.536 h -4.16 v -3.264 h 8.096 v 9.312 q 0,1.344 0.48,2.016 0.512,0.64 1.664,0.64 0.544,0 1.312,-0.128 0.768,-0.16 1.728,-0.608 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4618"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 168.13787,239.98342 q 1.056,-0.288 2.592,-0.544 1.568,-0.256 3.392,-0.256 1.792,0 2.976,0.512 1.184,0.48 1.856,1.408 0.704,0.896 0.992,2.176 0.288,1.248 0.288,2.784 v 8.48 h -3.936 v -7.968 q 0,-2.112 -0.48,-3.04 -0.48,-0.928 -1.952,-0.928 -0.448,0 -0.896,0.032 -0.416,0.032 -0.896,0.096 v 11.808 h -3.936 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4620"
+         inkscape:connector-curvature="0" />
+    </g>
+    <g
+       aria-label="Round join"
+       transform="matrix(0.76997327,0,0,0.76997327,11.64219,14.544752)"
+       style="font-style:normal;font-weight:normal;font-size:18.66666603px;line-height:0;font-family:sans-serif;letter-spacing:0px;word-spacing:4.94999981px;fill:#000000;fill-opacity:1;stroke:none"
+       id="flowRoot4537">
+      <path
+         d="m 24.019875,234.51142 q 1.696,0 3.072,0.384 1.376,0.384 2.368,1.184 0.992,0.8 1.504,2.048 0.544,1.216 0.544,2.88 0,1.728 -0.704,3.136 -0.704,1.408 -2.336,2.144 0.544,0.832 1.152,1.856 0.608,0.992 1.184,2.112 0.576,1.088 1.088,2.208 0.544,1.088 0.928,2.08 h -4.128 q -0.736,-1.92 -1.728,-3.68 -0.96,-1.792 -2.08,-3.616 h -2.048 v 7.296 h -3.936 v -19.52 q 0.576,-0.128 1.248,-0.224 0.704,-0.128 1.408,-0.16 0.704,-0.064 1.344,-0.096 0.64,-0.032 1.12,-0.032 z m 3.488,6.464 q 0,-1.568 -0.96,-2.304 -0.96,-0.736 -2.528,-0.736 -0.224,0 -0.544,0.032 -0.32,0 -0.64,0.064 v 5.952 h 0.864 q 2.016,0 2.912,-0.768 0.896,-0.8 0.896,-2.24 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4623"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 48.275875,246.99142 q 0,1.792 -0.512,3.264 -0.512,1.44 -1.44,2.496 -0.928,1.056 -2.24,1.632 -1.28,0.576 -2.88,0.576 -1.6,0 -2.912,-0.576 -1.28,-0.576 -2.24,-1.632 -0.928,-1.056 -1.44,-2.496 -0.512,-1.472 -0.512,-3.264 0,-1.76 0.512,-3.2 0.544,-1.472 1.472,-2.496 0.96,-1.056 2.272,-1.6 1.312,-0.576 2.848,-0.576 1.568,0 2.848,0.576 1.312,0.544 2.24,1.6 0.96,1.024 1.472,2.496 0.512,1.44 0.512,3.2 z m -10.176,0.032 q 0,2.016 0.704,3.264 0.736,1.248 2.336,1.248 1.536,0 2.304,-1.248 0.8,-1.248 0.8,-3.264 0,-2.016 -0.736,-3.232 -0.704,-1.248 -2.304,-1.248 -1.536,0 -2.336,1.248 -0.768,1.216 -0.768,3.232 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4625"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 63.187875,254.03142 q -1.088,0.288 -2.656,0.576 -1.536,0.288 -3.36,0.288 -1.856,0 -3.04,-0.512 -1.184,-0.512 -1.888,-1.44 -0.672,-0.96 -0.928,-2.24 -0.256,-1.28 -0.256,-2.816 v -8.384 h 3.936 v 7.872 q 0,2.08 0.48,3.104 0.512,0.992 1.952,0.992 0.896,0 1.792,-0.16 v -11.808 h 3.968 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4627"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 67.187875,239.98342 q 1.056,-0.288 2.592,-0.544 1.568,-0.256 3.392,-0.256 1.792,0 2.976,0.512 1.184,0.48 1.856,1.408 0.704,0.896 0.992,2.176 0.288,1.248 0.288,2.784 v 8.48 h -3.936 v -7.968 q 0,-2.112 -0.48,-3.04 -0.48,-0.928 -1.952,-0.928 -0.448,0 -0.896,0.032 -0.416,0.032 -0.896,0.096 v 11.808 h -3.936 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4629"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 86.067875,246.92742 q 0,2.016 0.736,3.296 0.768,1.28 2.432,1.28 0.48,0 0.896,-0.032 0.416,-0.032 0.864,-0.096 v -8.192 q -0.448,-0.256 -1.024,-0.416 -0.576,-0.192 -1.216,-0.192 -1.408,0 -2.048,1.12 -0.64,1.12 -0.64,3.232 z m 8.864,7.168 q -1.088,0.352 -2.656,0.576 -1.568,0.224 -3.072,0.224 -3.52,0 -5.344,-2.08 -1.792,-2.08 -1.792,-5.696 0,-3.68 1.504,-5.792 1.536,-2.144 4.512,-2.144 0.8,0 1.568,0.192 0.768,0.16 1.344,0.48 v -6.848 l 3.936,-0.672 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4631"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 130.92187,253.55142 q 0,1.824 -0.448,3.04 -0.448,1.248 -1.248,1.984 -0.768,0.768 -1.856,1.088 -1.056,0.32 -2.304,0.32 -1.536,0 -2.848,-0.384 -1.312,-0.384 -2.528,-0.992 l 1.216,-3.328 q 0.8,0.448 1.92,0.832 1.152,0.416 2.08,0.416 0.992,0 1.536,-0.608 0.544,-0.576 0.544,-2.176 v -10.976 h -6.08 v -3.264 h 10.016 z m -0.48,-18.368 q 0,1.152 -0.736,1.824 -0.736,0.672 -1.76,0.672 -1.024,0 -1.76,-0.672 -0.704,-0.672 -0.704,-1.824 0,-1.184 0.704,-1.856 0.736,-0.672 1.76,-0.672 1.024,0 1.76,0.672 0.736,0.672 0.736,1.856 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4633"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 149.22587,246.99142 q 0,1.792 -0.512,3.264 -0.512,1.44 -1.44,2.496 -0.928,1.056 -2.24,1.632 -1.28,0.576 -2.88,0.576 -1.6,0 -2.912,-0.576 -1.28,-0.576 -2.24,-1.632 -0.928,-1.056 -1.44,-2.496 -0.512,-1.472 -0.512,-3.264 0,-1.76 0.512,-3.2 0.544,-1.472 1.472,-2.496 0.96,-1.056 2.272,-1.6 1.312,-0.576 2.848,-0.576 1.568,0 2.848,0.576 1.312,0.544 2.24,1.6 0.96,1.024 1.472,2.496 0.512,1.44 0.512,3.2 z m -10.176,0.032 q 0,2.016 0.704,3.264 0.736,1.248 2.336,1.248 1.536,0 2.304,-1.248 0.8,-1.248 0.8,-3.264 0,-2.016 -0.736,-3.232 -0.704,-1.248 -2.304,-1.248 -1.536,0 -2.336,1.248 -0.768,1.216 -0.768,3.232 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4635"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 159.20987,235.18342 q 0,1.152 -0.736,1.824 -0.736,0.672 -1.76,0.672 -1.024,0 -1.76,-0.672 -0.704,-0.672 -0.704,-1.824 0,-1.184 0.704,-1.856 0.736,-0.672 1.76,-0.672 1.024,0 1.76,0.672 0.736,0.672 0.736,1.856 z m 5.856,18.72 q -1.216,0.576 -2.304,0.768 -1.056,0.224 -1.952,0.224 -1.536,0 -2.592,-0.448 -1.024,-0.448 -1.664,-1.28 -0.608,-0.864 -0.864,-2.08 -0.256,-1.216 -0.256,-2.784 v -5.536 h -4.16 v -3.264 h 8.096 v 9.312 q 0,1.344 0.48,2.016 0.512,0.64 1.664,0.64 0.544,0 1.312,-0.128 0.768,-0.16 1.728,-0.608 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4637"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 168.13787,239.98342 q 1.056,-0.288 2.592,-0.544 1.568,-0.256 3.392,-0.256 1.792,0 2.976,0.512 1.184,0.48 1.856,1.408 0.704,0.896 0.992,2.176 0.288,1.248 0.288,2.784 v 8.48 h -3.936 v -7.968 q 0,-2.112 -0.48,-3.04 -0.48,-0.928 -1.952,-0.928 -0.448,0 -0.896,0.032 -0.416,0.032 -0.896,0.096 v 11.808 h -3.936 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:32px;font-family:'Ubuntu Mono';-inkscape-font-specification:'Ubuntu Mono Bold'"
+         id="path4639"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

examples/models/svg/threejs.svg

@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="threejs.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.25000001"
+     inkscape:cx="533.56472"
+     inkscape:cy="387.42134"
+     inkscape:document-units="mm"
+     inkscape:current-layer="flowRoot886"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1015"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:snap-global="false" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       aria-label="Three.js"
+       transform="matrix(1.4760313,0,0,1.4760313,-85.535562,-805.12602)"
+       style="font-style:normal;font-weight:normal;font-size:18.66666603px;line-height:0;font-family:sans-serif;letter-spacing:0px;word-spacing:4.94999981px;fill:#66b57f;fill-opacity:1;stroke:#192ea7;stroke-width:6.85148048;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="flowRoot886">
+      <path
+         style="opacity:0.93199978;fill:none;fill-opacity:1;stroke:#d5a063;stroke-width:16.33271599;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="M -34.843672,735.8507 A 91.365098,299.21622 83.501293 0 1 227.96853,616.3661 91.365098,299.21622 83.501293 0 1 557.92046,662.5428"
+         id="path849"
+         inkscape:connector-curvature="0" />
+      <path
+         style="opacity:0.93199978;fill:none;fill-opacity:1;stroke:#c6be72;stroke-width:13.32288837;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="M -5.039649,732.2031 A 68.474724,265.65322 83.501293 0 1 229.68767,638.40964 68.474724,265.65322 83.501293 0 1 521.24821,667.80071"
+         id="path852"
+         inkscape:connector-curvature="0" />
+      <path
+         style="opacity:0.93199978;fill:none;fill-opacity:1;stroke:#c6aa72;stroke-width:10.7236681;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="M 17.771095,729.41199 A 48.859142,241.20674 83.501293 0 1 232.35237,656.60683 48.859142,241.20674 83.501293 0 1 495.51719,670.94944"
+         id="path857"
+         inkscape:connector-curvature="0" />
+      <path
+         style="opacity:0.93199978;fill:none;fill-opacity:1;stroke:#c6be72;stroke-width:13.32288837;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 521.24821,667.80071 a 68.474724,265.65322 83.501293 0 1 0.0774,0.16447"
+         id="path854"
+         inkscape:connector-curvature="0" />
+      <path
+         style="opacity:0.93199978;fill:none;fill-opacity:1;stroke:#c6aa72;stroke-width:10.7236681;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="m 495.51719,670.94944 a 48.859142,241.20674 83.501293 0 1 0.26282,0.44309"
+         id="path859"
+         inkscape:connector-curvature="0" />
+      <path
+         style="opacity:1;fill:#506de4;fill-opacity:1;stroke:#72c6c6;stroke-width:13.32288837;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="path825"
+         sodipodi:type="arc"
+         sodipodi:cx="253.33569"
+         sodipodi:cy="704.37823"
+         sodipodi:rx="150.21419"
+         sodipodi:ry="141.25153"
+         sodipodi:start="6.2129773"
+         sodipodi:end="6.1973326"
+         d="M 403.17982,694.46939 A 150.21419,141.25153 0 0 1 264.45925,845.24194 150.21419,141.25153 0 0 1 103.57858,715.38896 150.21419,141.25153 0 0 1 241.04068,563.60065 150.21419,141.25153 0 0 1 402.99663,692.2663"
+         sodipodi:open="true" />
+      <path
+         style="opacity:0.93199978;fill:none;fill-opacity:1;stroke:#c6aa72;stroke-width:10.7236681;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="M 496.15836,672.11609 A 48.859142,241.20674 83.501293 0 1 280.74287,749.14475 48.859142,241.20674 83.501293 0 1 18.98356,733.7558 48.859142,241.20674 83.501293 0 1 17.771095,729.41199"
+         id="path834"
+         inkscape:connector-curvature="0" />
+      <path
+         style="opacity:0.93199978;fill:none;fill-opacity:1;stroke:#c6be72;stroke-width:13.32288837;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="M 521.76824,668.98919 A 68.474724,265.65322 83.501293 0 1 286.2917,769.37635 68.474724,265.65322 83.501293 0 1 -3.522802,739.03402 68.474724,265.65322 83.501293 0 1 -5.039649,732.2031"
+         id="path827"
+         inkscape:connector-curvature="0" />
+      <path
+         style="opacity:0.93199978;fill:none;fill-opacity:1;stroke:#d5a063;stroke-width:16.33271599;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         d="M 558.44409,663.9168 A 91.365098,299.21622 83.501293 0 1 294.93737,792.08838 91.365098,299.21622 83.501293 0 1 -32.974239,744.90661 91.365098,299.21622 83.501293 0 1 -34.843672,735.8507"
+         id="path829"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 29.808444,700.17242 64.851248,-8.46579 1.459387,16.82538 -23.329483,3.04548 6.028117,69.49866 -18.145153,2.36871 -6.028117,-69.49868 -23.376612,3.05162 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:96px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#66b57f;fill-opacity:1;stroke:#192ea7;stroke-width:7.67327881;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path911"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 160.3733,730.55057 3.42029,39.43269 -16.9669,2.21489 -0.55668,-6.41794 -2.05116,-23.64805 q -0.73722,-8.49943 -1.34296,-11.6364 -0.55861,-3.14315 -1.44308,-4.54801 -1.16526,-1.89446 -2.95724,-2.77155 -1.79699,-0.9349 -3.96498,-0.65188 -5.2786,0.68908 -7.85862,6.11311 -2.58504,5.3662 -1.81773,14.21254 l 2.76331,31.85838 -16.87265,2.20259 -7.80345,-89.96667 16.87264,-2.20259 3.00904,34.69153 q 3.32607,-6.16464 7.38424,-9.38419 4.05313,-3.27739 9.23747,-3.95416 9.14327,-1.19358 14.45309,5.07166 5.35695,6.25908 6.49537,19.38405 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:96px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#66b57f;fill-opacity:1;stroke:#192ea7;stroke-width:7.67327881;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path913"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 214.6602,715.68683 q -2.32546,-0.98285 -4.59074,-1.27188 -2.22315,-0.353 -4.43828,-0.0639 -6.50398,0.84905 -9.5924,6.45638 -3.04632,5.54338 -2.21883,15.08355 l 2.58778,29.83469 -16.87263,2.20259 -5.61689,-64.7575 16.87265,-2.20258 0.92277,10.63874 q 2.70032,-6.78464 6.64417,-10.22316 3.98595,-3.50252 9.87722,-4.27157 0.84836,-0.11077 1.84812,-0.12438 0.99474,-0.0713 2.90503,-0.0284 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:96px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#66b57f;fill-opacity:1;stroke:#192ea7;stroke-width:7.67327881;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path915"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 277.09908,722.27137 0.51154,5.89756 -39.44805,5.14961 q 1.2446,7.20523 5.23672,10.36795 3.99211,3.16272 10.59035,2.30138 5.32571,-0.69523 10.72158,-3.32925 5.43799,-2.698 10.98826,-7.39877 l 1.38415,15.95811 q -5.74481,3.55668 -11.61,5.72571 -5.86016,2.22684 -11.84571,3.00819 -14.3276,1.87036 -23.06494,-5.99404 -8.69522,-7.92835 -10.09442,-24.05992 -1.37413,-15.84245 5.61499,-25.93521 7.03626,-10.09893 20.70404,-11.88315 12.44239,-1.62425 20.68637,6.59692 8.29111,8.215 9.62512,23.59491 z M 259.15835,717.655 q -0.51154,-5.89756 -3.65029,-9.1132 -3.09664,-3.27962 -7.62115,-2.68899 -4.90155,0.63986 -7.66912,4.45111 -2.7726,3.75342 -2.97502,10.21198 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:96px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#66b57f;fill-opacity:1;stroke:#192ea7;stroke-width:7.67327881;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path917"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 342.51589,713.73175 0.51153,5.89755 -39.44803,5.14962 q 1.24459,7.20523 5.2367,10.36795 3.99212,3.16272 10.59035,2.30137 5.32572,-0.69523 10.7216,-3.32924 5.43799,-2.698 10.98824,-7.39877 l 1.38416,15.9581 q -5.74481,3.55668 -11.61,5.72571 -5.86017,2.22683 -11.84571,3.0082 -14.3276,1.87035 -23.06493,-5.99404 -8.69522,-7.92836 -10.09443,-24.05992 -1.37413,-15.84246 5.61499,-25.93522 7.03626,-10.09893 20.70403,-11.88314 12.4424,-1.62426 20.68638,6.59692 8.29111,8.21499 9.62512,23.59491 z m -17.94073,-4.61637 q -0.51154,-5.89756 -3.65028,-9.1132 -3.09665,-3.27963 -7.62115,-2.68899 -4.90155,0.63986 -7.66912,4.45111 -2.77261,3.75342 -2.97503,10.21197 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:96px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#66b57f;fill-opacity:1;stroke:#192ea7;stroke-width:7.67327881;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path919"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 357.86753,722.01911 16.9669,-2.21489 1.94083,22.37605 -16.96689,2.21488 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:96px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#66b57f;fill-opacity:1;stroke:#192ea7;stroke-width:7.67327881;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path921"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 389.20928,675.06636 16.87263,-2.20257 5.51658,63.60111 q 1.12839,13.00931 -3.3699,20.49645 -4.49327,7.54494 -14.15498,8.8062 l -8.34206,1.08899 -1.17854,-13.58751 2.92208,-0.38146 q 4.80729,-0.62755 6.36754,-3.52103 1.56026,-2.89347 0.88323,-10.69906 z m -2.18658,-25.20916 16.87264,-2.20258 1.4644,16.8832 -16.87264,2.20259 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:96px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#66b57f;fill-opacity:1;stroke:#192ea7;stroke-width:7.67327881;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path923"
+         inkscape:connector-curvature="0" />
+      <path
+         d="m 463.80349,667.37529 1.3641,15.72681 q -5.6607,-2.06778 -10.824,-2.79712 -5.1633,-0.72936 -9.64068,-0.14486 -4.80728,0.62755 -7.03341,2.43847 -2.18399,1.74696 -1.9182,4.81136 0.21565,2.48624 2.07481,3.58843 1.9063,1.09606 6.5331,1.13527 l 3.01434,0.13277 q 13.13635,0.33173 18.01494,4.37279 4.87858,4.04105 5.73615,13.92814 0.89771,10.34963 -4.87214,16.36548 -5.76984,6.01586 -18.11796,7.6278 -5.23146,0.68292 -10.93024,0.37433 -5.64663,-0.25694 -11.71344,-1.51155 l -1.3641,-15.72682 q 5.30372,2.34828 10.71271,3.1625 5.4561,0.80807 10.92322,0.0944 4.94868,-0.64601 7.30114,-2.64884 2.35248,-2.00285 2.06661,-5.29853 -0.24072,-2.77533 -2.09989,-3.87753 -1.81705,-1.16618 -7.01944,-1.2472 l -3.00933,-0.0749 q -11.41458,-0.26413 -16.34531,-4.35686 -4.93073,-4.09271 -5.75822,-13.63288 -0.89268,-10.29182 4.42592,-16.01487 5.3186,-5.72306 17.19543,-7.27348 4.66588,-0.60909 9.87832,-0.41242 5.21242,0.19667 11.40557,1.25937 z"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:96px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';fill:#66b57f;fill-opacity:1;stroke:#192ea7;stroke-width:7.67327881;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path925"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>

examples/webgl2_loader_gltf.html

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - glTF loader (module version)</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+			}
+			#info a {
+				color: #75ddc1;
+				font-weight: bold;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader (module version)<br />
+			Battle Damaged Sci-fi Helmet by
+			<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
+		</div>
+
+		<script src="js/WebGL.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
+
+			if ( WEBGL.isWebGLAvailable() === false ) {
+
+				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+
+			}
+
+			var container, stats, controls;
+			var camera, scene, renderer;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
+				camera.position.set( - 1.8, 0.9, 2.7 );
+
+				controls = new OrbitControls( camera );
+				controls.target.set( 0, - 0.2, - 0.2 );
+				controls.update();
+
+				scene = new Scene();
+
+				var urls = [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ];
+				var loader = new CubeTextureLoader().setPath( 'textures/cube/Bridge2/' );
+				loader.load( urls, function ( texture ) {
+
+					var pmremGenerator = new PMREMGenerator( texture );
+					pmremGenerator.update( renderer );
+
+					var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					pmremCubeUVPacker.update( renderer );
+
+					var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
+
+					// model
+
+					var loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
+					loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
+
+						gltf.scene.traverse( function ( child ) {
+
+							if ( child.isMesh ) {
+
+								child.material.envMap = envMap;
+
+							}
+
+						} );
+
+						scene.add( gltf.scene );
+
+					} );
+
+					pmremGenerator.dispose();
+					pmremCubeUVPacker.dispose();
+
+					scene.background = texture;
+
+				} );
+
+				renderer = new WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.gammaOutput = true;
+				container.appendChild( renderer.domElement );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				// stats
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				renderer.render( scene, camera );
+
+				stats.update();
+
+			}
+
+		</script>
+
+	</body>
+</html>

examples/webgl2_multisampled_renderbuffers.html

@@ -135,7 +135,6 @@
 
 				var renderPass = new THREE.RenderPass( scene, camera );
 				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
-				copyPass.renderToScreen = true;
 
 				//
 

examples/webgl_animation_multiple.html

@@ -0,0 +1,408 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Multiple animated objects</title>
+		<meta charset="utf-8">
+		<meta content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
+		<style>
+			body {
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="container"></div>
+
+		<div id="info"
+		style="position: absolute; left: 0; top: 0; width: 100%; background-color: white; border: 1px solid black; margin: 10px; padding: 10px;">
+			This demo shows how to load several instances of the same 3D model (same .GLTF file) into the
+			scene, position them at different locations and launch different animations for them.
+			To do it, some tricky cloning of SkinnedMesh, Skeleton and Bone objects is necessary (done by SkeletonUtils.clone().
+			Soldier model from <a href="https://www.mixamo.com" target="_blank" rel="noopener">https://www.mixamo.com</a>.
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/WebGL.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
+		<script src="js/utils/SkeletonUtils.js"></script>
+
+		<script>
+
+			if ( WEBGL.isWebGLAvailable() === false ) {
+
+				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+
+			}
+
+			//////////////////////////////
+			// Global objects
+			//////////////////////////////
+			var worldScene = null; // THREE.Scene where it all will be rendered
+			var renderer = null;
+			var camera = null;
+			var mixers = []; // All the AnimationMixer objects for all the animations in the scene
+			//////////////////////////////
+
+
+			//////////////////////////////
+			// Information about our 3D models and units
+			//////////////////////////////
+
+			// The names of the 3D models to load. One-per file.
+			// A model may have multiple SkinnedMesh objects as well as several rigs (armatures). Units will define which
+			// meshes, armatures and animations to use. We will load the whole scene for each object and clone it for each unit.
+			// Models are from https://www.mixamo.com/
+			var MODELS = [
+				{ name: "Soldier" },
+				{ name: "Parrot" },
+				// { name: "RiflePunch" },
+			];
+
+			// Here we define instances of the models that we want to place in the scene, their position, scale and the animations
+			// that must be played.
+			var UNITS = [
+				{
+					modelName: "Soldier", // Will use the 3D model from file models/gltf/Soldier.glb
+					meshName: "vanguard_Mesh", // Name of the main mesh to animate
+					position: { x: 0, y: 0, z: 0 }, // Where to put the unit in the scene
+					scale: 1, // Scaling of the unit. 1.0 means: use original size, 0.1 means "10 times smaller", etc.
+					animationName: "Idle" // Name of animation to run
+				},
+				{
+					modelName: "Soldier",
+					meshName: "vanguard_Mesh",
+					position: { x: 3, y: 0, z: 0 },
+					scale: 2,
+					animationName: "Walk"
+				},
+				{
+					modelName: "Soldier",
+					meshName: "vanguard_Mesh",
+					position: { x: 1, y: 0, z: 0 },
+					scale: 1,
+					animationName: "Run"
+				},
+				{
+					modelName: "Parrot",
+					meshName: "mesh_0",
+					position: { x: - 4, y: 0, z: 0 },
+					rotation: { x: 0, y: Math.PI, z: 0 },
+					scale: 0.01,
+					animationName: "parrot_A_"
+				},
+				{
+					modelName: "Parrot",
+					meshName: "mesh_0",
+					position: { x: - 2, y: 0, z: 0 },
+					rotation: { x: 0, y: Math.PI / 2, z: 0 },
+					scale: 0.02,
+					animationName: null
+				},
+			];
+
+			//////////////////////////////
+			// The main setup happens here
+			//////////////////////////////
+			var numLoadedModels = 0;
+			initScene();
+			initRenderer();
+			loadModels();
+			animate();
+			//////////////////////////////
+
+
+			//////////////////////////////
+			// Function implementations
+			//////////////////////////////
+			/**
+			 * Function that starts loading process for the next model in the queue. The loading process is
+			 * asynchronous: it happens "in the background". Therefore we don't load all the models at once. We load one,
+			 * wait until it is done, then load the next one. When all models are loaded, we call loadUnits().
+			 */
+			function loadModels() {
+
+				for ( var i = 0; i < MODELS.length; ++ i ) {
+
+					var m = MODELS[ i ];
+
+					loadGltfModel( m, function ( model ) {
+
+						++ numLoadedModels;
+
+						if ( numLoadedModels === MODELS.length ) {
+
+							console.log( "All models loaded, time to instantiate units..." );
+							instantiateUnits();
+
+						}
+
+					} );
+
+				}
+
+			}
+
+			/**
+			 * Look at UNITS configuration, clone necessary 3D model scenes, place the armatures and meshes in the scene and
+			 * launch necessary animations
+			 */
+			function instantiateUnits() {
+
+				var numSuccess = 0;
+
+				for ( var i = 0; i < UNITS.length; ++ i ) {
+
+					var u = UNITS[ i ];
+					var model = getModelByName( u.modelName );
+
+					if ( model ) {
+
+						var clonedScene = THREE.SkeletonUtils.clone( model.scene );
+
+						if ( clonedScene ) {
+
+							// Scene is cloned properly, let's find one mesh and launch animation for it
+							var clonedMesh = clonedScene.getObjectByName( u.meshName );
+
+							if ( clonedMesh ) {
+
+								var mixer = startAnimation( clonedMesh, model.animations, u.animationName );
+
+								if ( mixer ) {
+
+									// Save the animation mixer in the list, will need it in the animation loop
+									mixers.push( mixer );
+									numSuccess ++;
+
+								}
+
+							}
+
+							// Different models can have different configurations of armatures and meshes. Therefore,
+							// We can't set position, scale or rotation to individual mesh objects. Instead we set
+							// it to the whole cloned scene and then add the whole scene to the game world
+							// Note: this may have weird effects if you have lights or other items in the GLTF file's scene!
+							worldScene.add( clonedScene );
+
+							if ( u.position ) {
+
+								clonedScene.position.set( u.position.x, u.position.y, u.position.z );
+
+							}
+
+							if ( u.scale ) {
+
+								clonedScene.scale.set( u.scale, u.scale, u.scale );
+
+							}
+
+							if ( u.rotation ) {
+
+								clonedScene.rotation.x = u.rotation.x;
+								clonedScene.rotation.y = u.rotation.y;
+								clonedScene.rotation.z = u.rotation.z;
+
+							}
+
+					        }
+
+					} else {
+
+						console.error( "Can not find model", u.modelName );
+
+					}
+
+				}
+
+				console.log( `Successfully instantiated ${numSuccess} units` );
+
+			}
+
+			/**
+			 * Start animation for a specific mesh object. Find the animation by name in the 3D model's animation array
+			 * @param skinnedMesh {THREE.SkinnedMesh} The mesh to animate
+			 * @param animations {Array} Array containing all the animations for this model
+			 * @param animationName {string} Name of the animation to launch
+			 * @return {THREE.AnimationMixer} Mixer to be used in the render loop
+			 */
+			function startAnimation( skinnedMesh, animations, animationName ) {
+
+				var mixer = new THREE.AnimationMixer( skinnedMesh );
+				var clip = THREE.AnimationClip.findByName( animations, animationName );
+
+				if ( clip ) {
+
+					var action = mixer.clipAction( clip );
+					action.play();
+
+				}
+
+				return mixer;
+
+			}
+
+			/**
+			 * Find a model object by name
+			 * @param name
+			 * @returns {object|null}
+			 */
+			function getModelByName( name ) {
+
+				for ( var i = 0; i < MODELS.length; ++ i ) {
+
+					if ( MODELS[ i ].name === name ) {
+
+						return MODELS[ i ];
+
+					}
+
+				}
+
+				return null;
+
+			}
+
+			/**
+			 * Load a 3D model from a GLTF file. Use the GLTFLoader.
+			 * @param model {object} Model config, one item from the MODELS array. It will be updated inside the function!
+			 * @param onLoaded {function} A callback function that will be called when the model is loaded
+			 */
+			function loadGltfModel( model, onLoaded ) {
+
+				var loader = new THREE.GLTFLoader();
+				var modelName = "models/gltf/" + model.name + ".glb";
+
+				loader.load( modelName, function ( gltf ) {
+
+					var scene = gltf.scene;
+
+					model.animations = gltf.animations;
+					model.scene = scene;
+
+					// Enable Shadows
+
+					gltf.scene.traverse( function ( object ) {
+
+						if ( object.isMesh ) {
+
+							object.castShadow = true;
+
+						}
+
+					} );
+
+					console.log( "Done loading model", model.name );
+
+					onLoaded( model );
+
+				} );
+
+			}
+
+			/**
+			 * Render loop. Renders the next frame of all animations
+			 */
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				// Get the time elapsed since the last frame
+
+				var mixerUpdateDelta = clock.getDelta();
+
+				// Update all the animation frames
+
+				for ( var i = 0; i < mixers.length; ++ i ) {
+
+					mixers[ i ].update( mixerUpdateDelta );
+
+				}
+
+				renderer.render( worldScene, camera );
+
+			}
+
+			//////////////////////////////
+			// General Three.JS stuff
+			//////////////////////////////
+			// This part is not anyhow related to the cloning of models, it's just setting up the scene.
+
+			/**
+			 * Initialize ThreeJS scene renderer
+			 */
+			function initRenderer() {
+
+				var container = document.getElementById( 'container' );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.gammaOutput = true;
+				renderer.gammaFactor = 2.2;
+				renderer.shadowMap.enabled = true;
+				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				container.appendChild( renderer.domElement );
+
+			}
+
+			/**
+			 * Initialize ThreeJS Scene
+			 */
+			function initScene() {
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.set( 3, 6, - 10 );
+				camera.lookAt( 0, 1, 0 );
+
+				clock = new THREE.Clock();
+
+				worldScene = new THREE.Scene();
+				worldScene.background = new THREE.Color( 0xa0a0a0 );
+				worldScene.fog = new THREE.Fog( 0xa0a0a0, 10, 22 );
+
+				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				hemiLight.position.set( 0, 20, 0 );
+				worldScene.add( hemiLight );
+
+				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				dirLight.position.set( - 3, 10, - 10 );
+				dirLight.castShadow = true;
+				dirLight.shadow.camera.top = 10;
+				dirLight.shadow.camera.bottom = - 10;
+				dirLight.shadow.camera.left = - 10;
+				dirLight.shadow.camera.right = 10;
+				dirLight.shadow.camera.near = 0.1;
+				dirLight.shadow.camera.far = 40;
+				worldScene.add( dirLight );
+
+				// ground
+				var groundMesh = new THREE.Mesh(
+					new THREE.PlaneBufferGeometry( 40, 40 ),
+					new THREE.MeshPhongMaterial( {
+						color: 0x999999,
+						depthWrite: false
+					} )
+				);
+
+				groundMesh.rotation.x = - Math.PI / 2;
+				groundMesh.receiveShadow = true;
+				worldScene.add( groundMesh );
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			/**
+			 * A callback that will be called whenever the browser window is resized.
+			 */
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+		</script>
+
+	</body>
+
+</html>

examples/webgl_clipping_intersection.html

@@ -49,30 +49,32 @@
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
 
-				camera.position.set( - 20, 30, 40 );
+				camera.position.set( - 1.5, 2.5, 3.0 );
 
 				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render ); // use only if there is no animation loop
-				controls.minDistance = 10;
-				controls.maxDistance = 100;
+				controls.minDistance = 1;
+				controls.maxDistance = 10;
 				controls.enablePan = false;
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1 );
+				var light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1.5 );
+				light.position.set( - 1.25, 1, 1.25 );
 				scene.add( light );
 
-				scene.add( new THREE.AmbientLight( 0x505050 ) );
+				// var helper = new THREE.CameraHelper( light.shadow.camera );
+				// scene.add( helper );
 
 				//
 
 				var group = new THREE.Group();
 
-				for ( var i = 1; i < 25; i ++ ) {
+				for ( var i = 1; i <= 30; i += 2 ) {
 
-					var geometry = new THREE.SphereBufferGeometry( i / 2, 48, 24 );
+					var geometry = new THREE.SphereBufferGeometry( i / 30, 48, 24 );
 
 					var material = new THREE.MeshLambertMaterial( {
 
-						color: new THREE.Color( Math.sin( i * 0.5 ) * 0.5 + 0.5, Math.cos( i * 1.5 ) * 0.5 + 0.5, Math.sin( i * 4.5 + 0 ) * 0.5 + 0.5 ),
+						color: new THREE.Color().setHSL( Math.random(), 0.5, 0.5 ),
 						side: THREE.DoubleSide,
 						clippingPlanes: clipPlanes,
 						clipIntersection: params.clipIntersection
@@ -88,10 +90,9 @@
 				// helpers
 
 				var helpers = new THREE.Group();
-				helpers.add( new THREE.AxesHelper( 20 ) );
-				helpers.add( new THREE.PlaneHelper( clipPlanes[ 0 ], 30, 0xff0000 ) );
-				helpers.add( new THREE.PlaneHelper( clipPlanes[ 1 ], 30, 0x00ff00 ) );
-				helpers.add( new THREE.PlaneHelper( clipPlanes[ 2 ], 30, 0x0000ff ) );
+				helpers.add( new THREE.PlaneHelper( clipPlanes[ 0 ], 2, 0xff0000 ) );
+				helpers.add( new THREE.PlaneHelper( clipPlanes[ 1 ], 2, 0x00ff00 ) );
+				helpers.add( new THREE.PlaneHelper( clipPlanes[ 2 ], 2, 0x0000ff ) );
 				helpers.visible = false;
 				scene.add( helpers );
 
@@ -113,7 +114,7 @@
 
 				} );
 
-				gui.add( params, 'planeConstant', - 16, 16 ).step( 1 ).name( 'plane constant' ).onChange( function ( value ) {
+				gui.add( params, 'planeConstant', - 1, 1 ).step( 0.01 ).name( 'plane constant' ).onChange( function ( value ) {
 
 					for ( var j = 0; j < clipPlanes.length; j ++ ) {
 

examples/webgl_geometry_text_stroke.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - Simple text from json</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #f0f0f0;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - Simple text from json fonts.
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/SVGLoader.js"></script>
+
+		<script>
+
+			var camera, scene, renderer;
+
+			init();
+			animate();
+
+			function init( ) {
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.set( 0, - 400, 600 );
+
+				var controls = new THREE.OrbitControls( camera );
+				controls.target.set( 0, 0, 0 );
+				controls.update();
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
+
+				var loader = new THREE.FontLoader();
+				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
+
+					var xMid, text;
+
+					var color = new THREE.Color( 0x006699 );
+
+					var matDark = new THREE.MeshBasicMaterial( {
+						color: color,
+						side: THREE.DoubleSide
+					} );
+
+					var matLite = new THREE.MeshBasicMaterial( {
+						color: color,
+						transparent: true,
+						opacity: 0.4,
+						side: THREE.DoubleSide
+					} );
+
+					var message = "   Three.js\nStroke text.";
+
+					var shapes = font.generateShapes( message, 100 );
+
+					var geometry = new THREE.ShapeBufferGeometry( shapes );
+
+					geometry.computeBoundingBox();
+
+					xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
+
+					geometry.translate( xMid, 0, 0 );
+
+					// make shape ( N.B. edge view not visible )
+
+					text = new THREE.Mesh( geometry, matLite );
+					text.position.z = - 150;
+					scene.add( text );
+
+					// make line shape ( N.B. edge view remains visible )
+
+					var holeShapes = [];
+
+					for ( var i = 0; i < shapes.length; i ++ ) {
+
+						var shape = shapes[ i ];
+
+						if ( shape.holes && shape.holes.length > 0 ) {
+
+							for ( var j = 0; j < shape.holes.length; j ++ ) {
+
+								var hole = shape.holes[ j ];
+								holeShapes.push( hole );
+
+							}
+
+						}
+
+					}
+
+					shapes.push.apply( shapes, holeShapes );
+
+					var style = THREE.SVGLoader.getStrokeStyle( 5, color.getStyle() );
+
+					var strokeText = new THREE.Group();
+
+					for ( var i = 0; i < shapes.length; i ++ ) {
+
+						var shape = shapes[ i ];
+
+						var points = shape.getPoints();
+
+						var geometry = THREE.SVGLoader.pointsToStroke( points, style );
+
+						geometry.translate( xMid, 0, 0 );
+
+						var strokeMesh = new THREE.Mesh( geometry, matDark );
+						strokeText.add( strokeMesh );
+
+					}
+
+					scene.add( strokeText );
+
+				} ); //end load function
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			} // end init
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+			}
+
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>

examples/webgl_gpgpu_water.html

@@ -646,8 +646,11 @@
 						var v = 1 - ( 0.5 * sphere.position.z / BOUNDS_HALF + 0.5 );
 						readWaterLevelShader.uniforms[ "point1" ].value.set( u, v );
 						gpuCompute.doRenderTarget( readWaterLevelShader, readWaterLevelRenderTarget );
+						var previousRenderTarget = renderer.getRenderTarget();
+						renderer.setRenderTarget( readWaterLevelRenderTarget );
 						gl.readPixels( 0, 0, 4, 1, gl.RGBA, gl.UNSIGNED_BYTE, readWaterLevelImage );
 						var pixels = new Float32Array( readWaterLevelImage.buffer );
+						renderer.setRenderTarget( previousRenderTarget );
 
 						// Get orientation
 						waterNormal.set( pixels[ 1 ], 0, - pixels[ 2 ] );
@@ -798,4 +801,4 @@
 
 		</script>
 	</body>
-</html>
+</html>

examples/webgl_lightningstrike.html

@@ -256,7 +256,6 @@
 				outlinePass.edgeThickness = 2.8;
 				outlinePass.visibleEdgeColor = visibleColor;
 				outlinePass.hiddenEdgeColor.set( 0 );
-				outlinePass.renderToScreen = true;
 				composer.addPass( outlinePass );
 
 				scene.userData.outlineEnabled = true;
@@ -580,18 +579,7 @@
 
 					controls.update();
 
-					if ( scene.userData.outlineEnabled ) {
-
-						outlinePass.enabled = true;
-						rayPass.renderToScreen = false;
-
-					}
-					else {
-
-						outlinePass.enabled = false;
-						rayPass.renderToScreen = true;
-
-					}
+					outlinePass.enabled = scene.userData.outlineEnabled;
 
 					composer.render();
 

examples/webgl_lightshafts.html

@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - Light Shafts</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+			}
+			#info a {
+				color: #ffffff;
+				font-weight: bold;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Light Shafts -
+			Model by <a href="https://skfb.ly/6ICER" target="_blank" rel="noopener">Splodeman</a><br />
+		</div>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
+
+		<script src="js/WebGL.js"></script>
+
+		<script type="x-shader/x-vertex" id="vertexShader">
+
+		#include <common>
+
+		uniform float speed;
+		uniform float time;
+		uniform float timeOffset;
+		varying vec2 vUv;
+		varying float vAlpha;
+
+		void main() {
+
+			vec3 pos = position;
+
+			float l = ( time * speed * 0.01 ) + timeOffset;
+			float f = fract( l ); // linear time factor [0,1)
+			float a = f * f; // quadratic time factor [0,1)
+
+			// slightly animate the vertices of light shaft if necessary
+
+			// pos.x += cos( l * 20.0 ) * sin( l * 10.0 );
+
+			vAlpha = saturate( 0.7 + min( 1.0, a * 10.0 ) * ( sin( a * 40.0 ) * 0.25 ) );
+
+		  vUv = uv;
+
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
+
+		}
+
+		</script>
+
+		<script type="x-shader/x-fragment" id="fragmentShader">
+
+		uniform float attenuation;
+		uniform vec3 color;
+		uniform sampler2D texture;
+
+		varying vec2 vUv;
+		varying float vAlpha;
+
+		void main() {
+
+			vec4 textureColor = texture2D( texture, vUv );
+			gl_FragColor = vec4( textureColor.rgb * color.rgb, textureColor.a * vAlpha );
+			gl_FragColor.a *= pow( gl_FragCoord.z, attenuation );
+
+		}
+
+		</script>
+
+		<script>
+
+			if ( WEBGL.isWebGLAvailable() === false ) {
+
+				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+
+			}
+
+			var container, controls, clock;
+			var camera, scene, renderer, uniforms;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.set( 3.2, 3, 3.7 );
+
+				controls = new THREE.OrbitControls( camera );
+				controls.target.set( 0.5, 1.5, 0 );
+				controls.minDistance = 2;
+				controls.maxDistance = 20;
+				controls.update();
+
+				clock = new THREE.Clock();
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xcf8b74 );
+
+				var	light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				light.position.set( 0, 20, 0 );
+				scene.add( light );
+
+				light = new THREE.DirectionalLight( 0xffffff );
+				light.position.set( 0, 20, 10 );
+				scene.add( light );
+
+			 	// light shafts definition
+
+				var textureLoader = new THREE.TextureLoader();
+				var texture = textureLoader.load( 'textures/lightShaft.png' );
+
+				uniforms = {
+					// controls how fast the ray attenuates when the camera comes closer
+					attenuation: {
+						value: 10
+					},
+					// controls the speed of the animation
+					speed: {
+						value: 2
+					},
+					// the color of the ray
+					color: {
+						value: new THREE.Color( 0xdadc9f )
+					},
+					// the visual representation of the ray highly depends on the used texture
+					texture: {
+						value: texture
+					},
+					// global time value for animation
+					time: {
+						value: 0
+					},
+					// individual time offset so rays are animated differently if necessary
+					timeOffset: {
+						value: 0
+					}
+				};
+
+				var lightShaftMaterial = new THREE.ShaderMaterial( {
+					uniforms: uniforms,
+					vertexShader: document.getElementById( 'vertexShader' ).textContent,
+					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
+					blending: THREE.AdditiveBlending,
+					depthWrite: false,
+					transparent: true,
+					side: THREE.DoubleSide
+				} );
+
+				var lightShaftGeometry = new THREE.PlaneBufferGeometry( 0.5, 5 );
+
+				// model
+
+				var loader = new THREE.GLTFLoader().setPath( 'models/gltf/Tree/' );
+				loader.load( 'tree.glb', function ( gltf ) {
+
+					gltf.scene.traverse( function ( child ) {
+
+						if ( child.isMesh )	{
+
+							child.material.transparent = false;
+							child.material.alphaTest = 0.5;
+
+						}
+
+					} );
+
+					scene.add( gltf.scene );
+
+					// when the model is loaded, add light shafts
+
+					for ( var i = 0; i < 5; i ++ ) {
+
+						var lightShaft = new THREE.Mesh( lightShaftGeometry, lightShaftMaterial );
+						lightShaft.position.x = - 1 + 1.5 * Math.sign( ( i % 2 ) );
+						lightShaft.position.y = 2;
+						lightShaft.position.z = - 1.5 + ( i * 0.5 );
+						lightShaft.rotation.y = Math.PI * 0.2;
+						lightShaft.rotation.z = Math.PI * - ( 0.15 + 0.1 * Math.random() );
+						scene.add( lightShaft );
+
+					}
+
+				} );
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.gammaOutput = true;
+				renderer.gammaFactor = 2.2;
+				container.appendChild( renderer.domElement );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				const delta = clock.getDelta();
+
+				uniforms.time.value += delta;
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>

examples/webgl_loader_lwo.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - LWO loader</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				font-family: Monospace;
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+			}
+			#info a {
+				color: #046;
+				font-weight: bold;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - LWOLoader<br />
+			<P>Loader for Lightwave LWO V3 file format</P>
+		</div>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/loaders/LWOLoader.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() );
+
+			}
+
+			var container, stats, controls;
+			var camera, scene, renderer;
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 200 );
+				camera.position.set( 5, 4, 20 );
+
+				controls = new THREE.OrbitControls( camera );
+				controls.target.y = 4;
+				controls.update();
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xa0a0a0 );
+
+				var ambientLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 2 );
+
+				var mainLight = new THREE.DirectionalLight( 0xffffff, 2 );
+				mainLight.position.set( 10, 10, - 10 );
+
+				scene.add( ambientLight, mainLight );
+
+				var grid = new THREE.GridHelper( 200, 20, 0x000000, 0x000000 );
+				grid.material.opacity = 0.2;
+				grid.material.transparent = true;
+				scene.add( grid );
+
+				var loader = new THREE.LWOLoader();
+				loader.load( 'models/lwo/StandardMaterials.lwo', function ( lwo ) {
+
+					const mesh = lwo.meshes[ 0 ];
+
+					mesh.position.set( 3, 6, 0 );
+
+					scene.add( mesh );
+
+				} );
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				renderer.physicallyCorrectLights = true;
+
+				renderer.gammaFactor = 2.2;
+				renderer.gammaOutput = true;
+
+				container.appendChild( renderer.domElement );
+
+				renderer.setAnimationLoop( function () {
+
+					stats.begin();
+
+					renderer.render( scene, camera );
+
+					stats.end();
+
+				} );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				// stats
+				stats = new Stats();
+				container.appendChild( stats.dom );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			init();
+
+		</script>
+
+	</body>
+</html>

examples/webgl_loader_mmd.html

@@ -59,8 +59,15 @@
 
 			var clock = new THREE.Clock();
 
-			init();
-			animate();
+			Ammo().then( function( AmmoLib ) {
+
+				Ammo = AmmoLib;
+
+				init();
+				animate();
+
+			} );
+
 
 			function init() {
 

examples/webgl_loader_mmd_audio.html

@@ -60,8 +60,14 @@
 
 			var clock = new THREE.Clock();
 
-			init();
-			animate();
+			Ammo().then( function( AmmoLib ) {
+
+				Ammo = AmmoLib;
+
+				init();
+				animate();
+
+			} );
 
 			function init() {
 

examples/webgl_loader_mmd_pose.html

@@ -57,8 +57,14 @@
 
 			var vpds = [];
 
-			init();
-			animate();
+			Ammo().then( function( AmmoLib ) {
+
+				Ammo = AmmoLib;
+
+				init();
+				animate();
+
+			} );
 
 			function init() {
 

examples/webgl_loader_sea3d.html

@@ -146,7 +146,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_loader_sea3d_bvh.html

@@ -262,7 +262,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_loader_sea3d_bvh_retarget.html

@@ -211,7 +211,6 @@
 				composer.addPass( vignettePass );
 
 				composer.addPass( copyPass );
-				copyPass.renderToScreen = true;
 
 				// events
 

examples/webgl_loader_sea3d_hierarchy.html

@@ -154,7 +154,6 @@
 				composer.addPass( vignettePass );
 
 				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
-				copyPass.renderToScreen = true;
 				composer.addPass( copyPass );
 
 				// events