diff --git a/examples/webgl_multiple_elements.html b/examples/webgl_multiple_elements.html
new file mode 100644
index 0000000000000000000000000000000000000000..1107c239f5adf91e2af07e0c12cc0febf03f83e6
--- /dev/null
+++ b/examples/webgl_multiple_elements.html
@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - multiple elements</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			* {
+				box-sizing: border-box;
+				-moz-box-sizing: border-box;
+			}
+
+			body {
+				color: #000;
+				font-family:Monospace;
+				font-size:13px;
+
+				background-color: #fff;
+				margin: 0px;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+				text-align:center;
+			}
+
+			#content {
+				position: absolute;
+				top: 0px; width: 100%;
+				z-index: 1;
+				padding: 2em;
+			}
+
+			a {
+
+				color: #0080ff;
+			}
+
+			#c {
+				position: fixed;
+				left: 0px;
+				width: 100%;
+				height: 100%;
+			}
+
+			.list-item {
+				margin: 1em;
+				padding: 2em;
+				display: -webkit-flex;
+				display: flex;
+				flex-direction: row;
+				-webkit-flex-direction: row;
+			}
+
+			.list-item .scene {
+				width: 200px;
+				height: 200px;
+				flex: 0 0 auto;
+				-webkit-flex: 0 0 auto;
+			}
+			.list-item .description {
+				font-family: sans-serif;
+				font-size: large;
+				padding-left: 2em;
+				flex: 1 1 auto;
+				-webkit-flex: 1 1 auto;
+			}
+
+			@media only screen and (max-width : 600px) {
+				#content {
+					width: 100%;
+				}
+				.list-item {
+					margin: 0.5em;
+					padding: 0.5em;
+					flex-direction: column;
+					-webkit-flex-direction: column;
+				}
+				.list-item .description {
+					padding-left: 0em;
+				}
+			}
+		</style>
+	</head>
+	<body>
+
+		<canvas id="c"></canvas>
+		<div id="content">
+			<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - multiple elements - webgl</div>
+		</div>
+
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/Detector.js"></script>
+
+		<script id="template" type="notjs">
+			<div class="scene"></div>
+			<div class="description">some random text about this object, scene, whatever</div>
+		</script>
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var canvas;
+
+			var scenes = [], camera, renderer, emptyScene;
+
+			init();
+			animate();
+
+			function init() {
+
+				canvas = document.getElementById( "c" );
+
+				camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 100 );
+				camera.position.z = 1.5;
+
+				var geometries = [
+					new THREE.BoxGeometry( 1, 1, 1 ),
+					new THREE.SphereGeometry( 0.5, 12, 12 ),
+					new THREE.DodecahedronGeometry( 0.5 ),
+					new THREE.CylinderGeometry( 0.5, 0.5, 1, 12 ),
+				];
+
+				var template = document.getElementById("template").text;
+				var content = document.getElementById("content");
+
+				var emptyScene = new THREE.Scene();
+
+				var numScenes = 100;
+
+				for ( var ii =  0; ii < numScenes; ++ii ) {
+
+					var scene = new THREE.Scene();
+
+					// make a list item.
+					var element = document.createElement( "div" );
+					element.innerHTML = template;
+					element.className = "list-item";
+
+					// Look up the element that represents the area
+					// we want to render the scene
+					scene.element = element.querySelector(".scene");
+					content.appendChild(element);
+
+					// add one random mesh to each scene
+					var geometry = geometries[ geometries.length * Math.random() | 0 ];
+					var material = new THREE.MeshLambertMaterial( { color: randColor() } );
+
+					scene.add( new THREE.Mesh( geometry, material ) );
+
+					light = new THREE.DirectionalLight( 0xffffff );
+					light.position.set( 0.5, 0.8, 1 );
+					scene.add( light );
+
+					light = new THREE.DirectionalLight( 0xffffff );
+					light.position.set( -0.5, -0.8, -1 );
+					scene.add( light );
+
+					scenes.push( scene );
+				}
+
+
+				renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
+				renderer.setClearColor( 0xFFFFFF );
+
+			}
+
+			function updateSize() {
+
+				var width = canvas.clientWidth;
+				var height = canvas.clientHeight;
+
+				if ( canvas.width !== width || canvas.height != height ) {
+
+					renderer.setSize ( width, height, false );
+
+				}
+
+			}
+
+			function animate() {
+
+				render();
+
+				requestAnimationFrame( animate );
+			}
+
+			function render() {
+
+				updateSize();
+
+				renderer.setClearColor( 0xFFFFFF );
+				renderer.clear( true );
+				renderer.setClearColor( 0xE0E0E0 );
+
+				renderer.enableScissorTest( true );
+				scenes.forEach( function( scene ) {
+					// so something moves
+					scene.children[0].rotation.x = Date.now() * 0.00111;
+					scene.children[0].rotation.z = Date.now() * 0.001;
+
+					// get the element that is a place holder for where we want to
+					// draw the scene
+					var element = scene.element;
+
+					// get its position relative to the page's viewport
+					var rect = element.getBoundingClientRect();
+
+					// check if it's offscreen. If so skip it
+					if ( rect.bottom < 0 || rect.top  > renderer.domElement.clientHeight ||
+						 rect.right  < 0 || rect.left > renderer.domElement.clientWidth ) {
+					  return;  // it's off screen
+					}
+
+					// set the viewport
+					var width  = rect.right - rect.left;
+					var height = rect.bottom - rect.top;
+					var left   = rect.left;
+					var bottom = renderer.domElement.clientHeight - rect.bottom;
+
+					camera.aspect = width / height;
+					camera.updateProjectionMatrix();
+					renderer.setViewport( left, bottom, width, height );
+					renderer.setScissor( left, bottom, width, height );
+					renderer.render( scene, camera );
+
+				} );
+				renderer.enableScissorTest( false );
+
+			}
+
+			function rand( min, max ) {
+				if ( max == undefined ) {
+					max = min;
+					min = 0;
+				}
+
+				return Math.random() * ( max - min ) + min;
+			}
+
+			function randColor() {
+				var colors = [ rand( 256 ), rand ( 256 ), rand( 256 ) ];
+				colors[ Math.random() * 3 | 0 ] = 255;
+				return ( colors[0] << 16 ) |
+					   ( colors[1] <<  8 ) |
+					   ( colors[2] <<  0 ) ;
+			}
+
+		</script>
+
+	</body>
+</html>
