Merge remote-tracking branch 'arodic/lineBufferGeometry' into dev

35a6c972 · Mr.doob · 5cf24747 · d1645543 · 35a6c972 · 35a6c972
隐藏空白更改
内联并排

Showing with 250 addition and 15 deletion

examples/webgl_buffergeometry_lines.html examples/webgl_buffergeometry_lines.html +176 -0

src/renderers/WebGLRenderer.js src/renderers/WebGLRenderer.js +74 -15

未找到文件。
--- a/examples/webgl_buffergeometry_lines.html
+++ b/examples/webgl_buffergeometry_lines.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - buffergeometry</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: #000000;
+				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">three.js</a> webgl - buffergeometry</div>
+
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var mesh;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 4000 );
+				camera.position.z = 2750;
+
+				scene = new THREE.Scene();
+
+
+        var segments = 10000;
+
+        var geometry = new THREE.BufferGeometry();
+        var material = new THREE.LineBasicMaterial({ vertexColors: true });
+
+        geometry.attributes = {
+          position: {
+            itemSize: 3,
+            array: new Float32Array(segments * 3),
+            numItems: segments * 3
+          },
+          color: {
+            itemSize: 3,
+            array: new Float32Array(segments * 3),
+            numItems: segments * 3
+          }
+        };
+
+        var positions = geometry.attributes.position.array;
+        var colors = geometry.attributes.color.array;
+
+        var r = 800;
+        
+        for (i = 0; i < segments; i++) {
+
+          var lat = i/segments*Math.PI*2;
+          var lon = i/segments*Math.PI*2000;
+
+          x = Math.random()*r-r/2;
+          y = Math.random()*r-r/2;
+          z = Math.random()*r-r/2;
+
+          // positions
+
+          positions[ i*3 ] = x;
+          positions[ i*3 + 1 ] = y;
+          positions[ i*3 + 2 ] = z;
+
+          // colors
+
+          colors[ i*3 ] = ( x / r ) + 0.5;
+          colors[ i*3 + 1 ] = ( y / r ) + 0.5;
+          colors[ i*3 + 2 ] = ( z / r ) + 0.5;
+
+        }
+
+				geometry.computeBoundingSphere();
+
+				mesh = new THREE.Line( geometry, material );
+				scene.add( mesh );
+
+				//
+
+				renderer = new THREE.WebGLRenderer( { antialias: false, clearColor: 0x000000, clearAlpha: 0, alpha: true } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+				renderer.physicallyBasedShading = true;
+
+				container.appendChild( renderer.domElement );
+
+				//
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				container.appendChild( stats.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 );
+
+				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>
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -3647,7 +3647,43 @@ THREE.WebGLRenderer = function ( parameters ) {

 			}

-		}
+		} else if ( object instanceof THREE.Line ) {
+
+			if ( updateBuffers ) {
+
+				// vertices
+
+				var position = geometry.attributes[ "position" ];
+				var positionSize = position.itemSize;
+
+				_gl.bindBuffer( _gl.ARRAY_BUFFER, position.buffer );
+				enableAttribute( attributes.position );
+				_gl.vertexAttribPointer( attributes.position, positionSize, _gl.FLOAT, false, 0, 0 );
+
+				// colors
+
+				var color = geometry.attributes[ "color" ];
+
+				if ( attributes.color >= 0 && color ) {
+
+					var colorSize = color.itemSize;
+
+					_gl.bindBuffer( _gl.ARRAY_BUFFER, color.buffer );
+					enableAttribute( attributes.color );
+					_gl.vertexAttribPointer( attributes.color, colorSize, _gl.FLOAT, false, 0, 0 );
+
+				}
+
+				// render lines
+
+				_gl.drawArrays( _gl.LINE_STRIP, 0, position.numItems / 3 );
+
+				_this.info.render.calls ++;
+				_this.info.render.points += position.numItems;
+
+			}
+
+    }

 	};

@@ -4661,12 +4697,20 @@ THREE.WebGLRenderer = function ( parameters ) {

 				if ( ! geometry.__webglVertexBuffer ) {

-					createLineBuffers( geometry );
-					initLineBuffers( geometry, object );
+					if ( geometry instanceof THREE.Geometry ) {
+
+            createLineBuffers( geometry );
+            initLineBuffers( geometry, object );

-					geometry.verticesNeedUpdate = true;
-					geometry.colorsNeedUpdate = true;
-					geometry.lineDistancesNeedUpdate = true;
+            geometry.verticesNeedUpdate = true;
+            geometry.colorsNeedUpdate = true;
+            geometry.lineDistancesNeedUpdate = true;
+
+          } else if ( geometry instanceof THREE.BufferGeometry ) {
+
+						initDirectBuffers( geometry );
+
+					}

 				}

@@ -4859,21 +4903,36 @@ THREE.WebGLRenderer = function ( parameters ) {

 		} else if ( object instanceof THREE.Line ) {

-			material = getBufferMaterial( object, geometry );
+      if ( geometry instanceof THREE.BufferGeometry ) {

-			customAttributesDirty = material.attributes && areCustomAttributesDirty( material );
+				if ( geometry.verticesNeedUpdate || geometry.colorsNeedUpdate ) {

-			if ( geometry.verticesNeedUpdate || geometry.colorsNeedUpdate || geometry.lineDistancesNeedUpdate || customAttributesDirty ) {
+					setDirectBuffers( geometry, _gl.DYNAMIC_DRAW, !geometry.dynamic );

-				setLineBuffers( geometry, _gl.DYNAMIC_DRAW );
+				}

-			}
+				geometry.verticesNeedUpdate = false;
+				geometry.colorsNeedUpdate = false;

-			geometry.verticesNeedUpdate = false;
-			geometry.colorsNeedUpdate = false;
-			geometry.lineDistancesNeedUpdate = false;
+			} else {

-			material.attributes && clearCustomAttributes( material );
+        material = getBufferMaterial( object, geometry );
+
+        customAttributesDirty = material.attributes && areCustomAttributesDirty( material );
+
+        if ( geometry.verticesNeedUpdate || geometry.colorsNeedUpdate || geometry.lineDistancesNeedUpdate || customAttributesDirty ) {
+
+          setLineBuffers( geometry, _gl.DYNAMIC_DRAW );
+
+        }
+
+        geometry.verticesNeedUpdate = false;
+        geometry.colorsNeedUpdate = false;
+        geometry.lineDistancesNeedUpdate = false;
+
+        material.attributes && clearCustomAttributes( material );
+
+      }

 		} else if ( object instanceof THREE.ParticleSystem ) {