Refactored handling of continuous lines: now they are rendered using...

Refactored handling of continuous lines: now they are rendered using LINE_STRIP primitive. Added example for this. Also renamed associated constant to THREE.LineStrip (was THREE.LineContinuous).

Refactored handling of continuous lines: now they are rendered using...
Refactored handling of continuous lines: now they are rendered using LINE_STRIP primitive. Added example for this. Also renamed associated constant to THREE.LineStrip (was THREE.LineContinuous).
bbe2a3bf · alteredq · f90bc532 · bbe2a3bf · bbe2a3bf · bbe2a3bf
6 changed file
--- a/build/Three.js
+++ b/build/Three.js
--- a/build/ThreeDebug.js
+++ b/build/ThreeDebug.js
--- a/build/ThreeExtras.js
+++ b/build/ThreeExtras.js
--- a/examples/lines_cubes_gl.html
+++ b/examples/lines_cubes_gl.html
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - lines - cubes - webgl</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background-color: #000000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			a {
+				color:#0078ff;
+			}
+			
+			#info {
+				position: absolute;
+				top: 10px; width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family: Monospace;
+				font-size: 13px;
+				text-align: center;
+				z-index:100;
+			}
+
+			#oldie {
+				font-family:monospace;
+				font-size:13px;
+
+				text-align:center;
+				background:rgb(50,0,0);
+				color:#fff;
+				padding:1em;
+
+				width:475px;
+				margin:5em auto 0;
+
+				display:none;
+			}
+			
+			a {
+				color: orange;
+				text-decoration: none;
+			}
+
+			a:hover {
+				color: #0080ff;
+			}
+			
+		</style>
+	</head>
+	<body>
+	
+		<div id="info">
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - lines WebGL demo
+		</div>
+
+		<center>
+		<div id="oldie">
+			Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>
+			<br/>
+			Please try in
+			<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
+			<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
+			<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
+		</div>
+		</center>
+
+
+		<script type="text/javascript" src="../build/Three.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="text/javascript">
+		
+			if ( !is_browser_compatible() ) {
+
+				document.getElementById( "oldie" ).style.display = "block";
+
+			}
+
+			var mouseX = 0, mouseY = 0,
+
+			windowHalfX = window.innerWidth / 2,
+			windowHalfY = window.innerHeight / 2,
+
+			camera, scene, renderer,
+
+			stats;
+
+			init();
+			setInterval( loop, 1000 / 60 );
+
+			function init() {
+
+				var i, material, container;
+
+				container = document.createElement('div');
+				document.body.appendChild(container);
+
+				camera = new THREE.Camera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 800;
+
+				scene = new THREE.Scene();
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				var vector, geometry_sphere = new THREE.Geometry(), geometry_cube = new THREE.Geometry();
+
+				for ( i = 0; i < 1500; i ++ ) {
+
+					vector = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );					
+					vector.multiplyScalar( Math.random() * 10 + 250 );
+					geometry_cube.vertices.push( new THREE.Vertex( vector ) );
+
+					vector = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );					
+					vector.normalize();
+					vector.multiplyScalar( Math.random() * 10 + 250 );
+					geometry_sphere.vertices.push( new THREE.Vertex( vector ) );
+
+				}
+
+				// lines
+
+				var line, p, scale = 0.3, d = 125, c1 = 0x553300, c2 = 0x555555, c3 = 0x552800, g1 = geometry_cube, g2 = geometry_sphere,
+					parameters = [ [ c3, scale*0.5,     [0,0,0],  g1 ], [ c2, scale*0.5, [d, 0, 0],  g1 ], [ c2, scale*0.5, [-d, 0, 0],  g1 ], 
+								   [ c2, scale*0.5, [0,d,0],  g1 ], [ c2, scale*0.5, [d, d, 0],  g1 ], [ c2, scale*0.5, [-d, d, 0],  g1 ],
+								   [ c2, scale*0.5, [0,-d,0], g1 ], [ c2, scale*0.5, [d, -d, 0], g1 ], [ c2, scale*0.5, [-d, -d, 0], g1 ],
+								   
+								   [ c1, scale*0.5, [2*d, 0, 0],  g1 ], [ c1, scale*0.5, [-2*d, 0, 0],  g1 ],
+								   [ c1, scale*0.5, [2*d, d, 0],  g1 ], [ c1, scale*0.5, [-2*d, d, 0],  g1 ],
+								   [ c1, scale*0.5, [2*d, -d, 0], g1 ], [ c1, scale*0.5, [-2*d, -d, 0], g1 ],							   
+								   ];
+				
+				for ( i = 0; i < parameters.length; ++i ) {
+				
+					p = parameters[ i ];
+					line = new THREE.Line( p[ 3 ], new THREE.LineBasicMaterial( { color: p[ 0 ], opacity: 1, blending: THREE.AdditiveBlending } ) );
+					line.scale.x = line.scale.y = line.scale.z =  p[ 1 ];
+					line.position.x = p[ 2 ][ 0 ];
+					line.position.y = p[ 2 ][ 1 ];
+					line.position.z = p[ 2 ][ 2 ];
+					scene.addObject( line );
+					
+				}
+
+				/*
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild(stats.domElement);
+				*/
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
+				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
+			}
+
+			//
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = event.clientX - windowHalfX;
+				mouseY = event.clientY - windowHalfY;
+			}
+
+			function onDocumentTouchStart( event ) {
+
+				if ( event.touches.length > 1 ) {
+
+					event.preventDefault();
+
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+				}
+			}
+
+			function onDocumentTouchMove( event ) {
+
+				if ( event.touches.length == 1 ) {
+
+					event.preventDefault();
+
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
+				}
+			}
+
+			//
+
+			function loop() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
+				camera.updateMatrix();
+
+				var time = new Date().getTime() * 0.001;
+				
+				for( var i = 0; i<scene.objects.length; i++ ) {
+				
+					scene.objects[i].rotation.y = time * ( i % 2 ? 1 : -1);
+					
+				}
+
+				renderer.render(scene, camera);
+
+				//stats.update();
+			}
+
+			function is_browser_compatible() {
+
+				// WebGL support
+
+				try { var test = new Float32Array(1); } catch(e) { return false; }
+
+				return true;
+
+			}
+
+		</script>
+	</body>
+</html>
--- a/src/objects/Line.js
+++ b/src/objects/Line.js
@@ -13,7 +13,7 @@ THREE.Line = function ( geometry, materials, type ) {

 };

-THREE.LineContinuous = 0;
+THREE.LineStrip = 0;
 THREE.LinePieces = 1;

 THREE.Line.prototype = new THREE.Object3D();

--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -127,19 +127,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			vertex = vertices[ v ].position;
 			vertexArray.push( vertex.x, vertex.y, vertex.z );
 			
-			if ( object.type == THREE.LineContinuous ) {
-				
-				if ( v < ( vl - 1 ) ) {
-					
-					lineArray.push( v, v + 1 );
-					
-				}
-				
-			} else {
-				
-				lineArray.push( v );
-				
-			}
+			lineArray.push( v );
 			
 		}
 			
@@ -455,7 +443,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 	
 	this.renderBuffer = function ( camera, lights, fog, material, geometryChunk ) {

-		var program, u, identifiers, attributes, parameters, vector_lights, maxLightCount, linewidth;
+		var program, u, identifiers, attributes, parameters, vector_lights, maxLightCount, linewidth, primitives;

 		if ( !material.program ) {

@@ -611,9 +599,11 @@ THREE.WebGLRenderer = function ( parameters ) {
 			linewidth = material.wireframe_linewidth !== undefined ? material.wireframe_linewidth : 
 					    material.linewidth !== undefined ? material.linewidth : 1;
 			
+			primitives = material instanceof THREE.LineBasicMaterial && geometryChunk.type == THREE.LineStrip ? _gl.LINE_STRIP : _gl.LINES;
+			
 			_gl.lineWidth( linewidth );
 			_gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, geometryChunk.__webGLLineBuffer );
-			_gl.drawElements( _gl.LINES, geometryChunk.__webGLLineCount, _gl.UNSIGNED_SHORT, 0 );
+			_gl.drawElements( primitives, geometryChunk.__webGLLineCount, _gl.UNSIGNED_SHORT, 0 );

 		// render triangles