From a2d4337a31a02ae13ca9ac4e4d3142c9ac24b770 Mon Sep 17 00:00:00 2001
From: Mugen87 <michael.herzog@human-interactive.org>
Date: Wed, 7 Feb 2018 10:46:38 +0100
Subject: [PATCH 1/2] Examples: Add demo for indexed BufferGeometry

---
 docs/api/core/BufferGeometry.html          |   4 +-
 examples/files.js                          |   1 +
 examples/webgl_buffergeometry_indexed.html | 206 +++++++++++++++++++++
 3 files changed, 209 insertions(+), 2 deletions(-)
 create mode 100644 examples/webgl_buffergeometry_indexed.html
diff --git a/docs/api/core/BufferGeometry.html b/docs/api/core/BufferGeometry.html
index 54361bdc84603e..7a85f17894932e 100644
--- a/docs/api/core/BufferGeometry.html
+++ b/docs/api/core/BufferGeometry.html
@@ -43,8 +43,8 @@ <h2>Example</h2>
 		var mesh = new THREE.Mesh( geometry, material );
 		</code>
 		<div>
-			[example:webgl_buffergeometry Complex mesh with non-indexed faces]<br />
-			[example:webgl_buffergeometry_uint Complex mesh with indexed faces]<br />
+			[example:webgl_buffergeometry Mesh with non-indexed faces]<br />
+			[example:webgl_buffergeometry_indexed Mesh with indexed faces]<br />
 			[example:webgl_buffergeometry_lines Lines]<br />
 			[example:webgl_buffergeometry_lines_indexed Indexed Lines]<br />
 			[example:webgl_buffergeometry_custom_attributes_particles Particles]<br />
diff --git a/examples/files.js b/examples/files.js
index c2a76f4f16547d..2443256a6af2fa 100644
--- a/examples/files.js
+++ b/examples/files.js
@@ -273,6 +273,7 @@ var files = {
 		"webgl_buffergeometry_constructed_from_geometry",
 		"webgl_buffergeometry_custom_attributes_particles",
 		"webgl_buffergeometry_drawcalls",
+		"webgl_buffergeometry_indexed",
 		"webgl_buffergeometry_instancing",
 		"webgl_buffergeometry_instancing2",
 		"webgl_buffergeometry_instancing_billboards",
diff --git a/examples/webgl_buffergeometry_indexed.html b/examples/webgl_buffergeometry_indexed.html
new file mode 100644
index 00000000000000..fb6558bc150e3f
--- /dev/null
+++ b/examples/webgl_buffergeometry_indexed.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - buffergeometry - indexed</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 {
+				color: #cccccc;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+
+				background-color: #050505;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
+
+			a {
+				color: #0080ff;
+			}
+
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - indexed</div>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+		<script src="./js/libs/dat.gui.min.js"></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var camera, scene, renderer, stats;
+
+			var mesh;
+
+			init();
+			animate();
+
+			function init() {
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
+				camera.position.z = 64;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
+
+				//
+
+				var ambientLight = new THREE.AmbientLight( 0xcccccc );
+				scene.add( ambientLight );
+
+				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				light1.position.set( 1, 1, 1 );
+				scene.add( light1 );
+
+				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				light2.position.set( 0, -1, 0 );
+				scene.add( light2 );
+
+				//
+
+				var geometry = new THREE.BufferGeometry();
+
+				var indices = [];
+
+				var vertices = [];
+				var normals = [];
+				var colors = [];
+
+				var size = 20;
+				var segments = 10;
+
+				var halfSize = size / 2;
+				var segmentSize = size / segments;
+
+				// generate vertices, normals and color data for a simple grid geometry
+
+				for ( var i = 0; i <= segments; i ++ ) {
+
+					var y = ( i * segmentSize ) - halfSize;
+
+					for ( var j = 0; j <= segments; j ++ ) {
+
+						var x = ( j * segmentSize ) - halfSize;
+
+						vertices.push( x, - y, 0 );
+						normals.push( 0, 0, 1 );
+
+						var r = ( x / size ) + 0.5;
+						var g = ( y / size ) + 0.5;
+
+						colors.push( r, g, 1 );
+
+					}
+
+				}
+
+				// generate indices (data for element array buffer)
+
+				for ( var i = 0; i < segments; i ++ ) {
+
+					for ( var j = 0; j < segments; j ++ ) {
+
+						var a = i * ( segments + 1 ) + ( j + 1 );
+						var b = i * ( segments + 1 ) + j;
+						var c = ( i + 1 ) * ( segments + 1 ) + j;
+						var d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );
+
+						// generate two faces (triangles) per iteration
+
+						indices.push( a, b, d ); // face one
+						indices.push( b, c, d ); // face two
+
+					}
+
+				}
+
+				//
+
+				geometry.setIndex( indices );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+
+				var material = new THREE.MeshPhongMaterial( {
+					specular: 0xffffff, shininess: 250,
+					side: THREE.DoubleSide, vertexColors: THREE.VertexColors
+				} );
+
+				mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+				//
+
+				var gui = new dat.GUI()
+				gui.add( material, 'wireframe' );
+
+				//
+
+				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 );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var time = Date.now() * 0.001;
+
+				mesh.rotation.x = time * 0.25;
+				mesh.rotation.y = time * 0.5;
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>

From 9137bb7660fd978298cabd594baa977d473e8221 Mon Sep 17 00:00:00 2001
From: Mugen87 <michael.herzog@human-interactive.org>
Date: Wed, 7 Feb 2018 17:06:20 +0100
Subject: [PATCH 2/2] Examples: Improved lighting for
 webgl_buffergeometry_indexed

---
 examples/webgl_buffergeometry_indexed.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/webgl_buffergeometry_indexed.html b/examples/webgl_buffergeometry_indexed.html
index fb6558bc150e3f..2e9f6ac6638e5b 100644
--- a/examples/webgl_buffergeometry_indexed.html
+++ b/examples/webgl_buffergeometry_indexed.html
@@ -62,15 +62,15 @@
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc );
+				var ambientLight = new THREE.AmbientLight( 0x222222 );
 				scene.add( ambientLight );
 
 				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
-				light2.position.set( 0, -1, 0 );
+				var light2 = new THREE.DirectionalLight( 0xffffff, 1 );
+				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
 				//
@@ -139,7 +139,7 @@
 				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 				var material = new THREE.MeshPhongMaterial( {
-					specular: 0xffffff, shininess: 250,
+					specular: 0x111111, shininess: 250,
 					side: THREE.DoubleSide, vertexColors: THREE.VertexColors
 				} );
 
