fix line geometry segments

examples/jsm/lines/LineGeometry.js

@@ -16,18 +16,16 @@ class LineGeometry extends LineSegmentsGeometry {
 
 		// converts [ x1, y1, z1,  x2, y2, z2, ... ] to pairs format
 
-		const length = array.length - 3;
-		const points = new Float32Array( 2 * length );
+				const length = array.length - 3;
+				const points = new Float32Array( 2 * length );
 
-		for ( let i = 0; i < length; i += 3 ) {
+		const count = array.length / 3 - 1;
+		const points = new Float32Array( 6 * count );
 
-			points[ 2 * i ] = array[ i ];
-			points[ 2 * i + 1 ] = array[ i + 1 ];
-			points[ 2 * i + 2 ] = array[ i + 2 ];
+		for ( let i = 0; i < count; i ++ ) {
 
-			points[ 2 * i + 3 ] = array[ i + 3 ];
-			points[ 2 * i + 4 ] = array[ i + 4 ];
-			points[ 2 * i + 5 ] = array[ i + 5 ];
+			points.set( array.slice( 3 * i, 3 * ( i + 1 ) ), 6 * i );
+			points.set( array.slice( 3 * ( i + 1 ), 3 * ( i + 2 ) ), 6 * i + 3 );
 
 		}
 
@@ -40,19 +38,13 @@ class LineGeometry extends LineSegmentsGeometry {
 	setColors( array ) {
 
 		// converts [ r1, g1, b1,  r2, g2, b2, ... ] to pairs format
+		const count = array.length / 3 - 1;
+		const colors = new Float32Array( 6 * count );
 
-		const length = array.length - 3;
-		const colors = new Float32Array( 2 * length );
+		for ( let i = 0; i < count; i ++ ) {
 
-		for ( let i = 0; i < length; i += 3 ) {
-
-			colors[ 2 * i ] = array[ i ];
-			colors[ 2 * i + 1 ] = array[ i + 1 ];
-			colors[ 2 * i + 2 ] = array[ i + 2 ];
-
-			colors[ 2 * i + 3 ] = array[ i + 3 ];
-			colors[ 2 * i + 4 ] = array[ i + 4 ];
-			colors[ 2 * i + 5 ] = array[ i + 5 ];
+			colors.set( array.slice( 3 * i, 3 * ( i + 1 ) ), 6 * i );
+			colors.set( array.slice( 3 * ( i + 1 ), 3 * ( i + 2 ) ), 6 * i + 3 );
 
 		}
 
@@ -66,18 +58,21 @@ class LineGeometry extends LineSegmentsGeometry {
 
 		// converts a vector3 or vector2 array to pairs format
 
-		const length = points.length - 1;
-		const positions = new Float32Array( 6 * length );
+		const count = points.length - 1;
+		const positions = new Float32Array( 6 * count );
+
+		for ( let i = 0; i < count; i ++ ) {
 
-		for ( let i = 0; i < length; i ++ ) {
+			const start = points[ i ];
+			const end = points[ i + 1 ];
 
-			positions[ 6 * i ] = points[ i ].x;
-			positions[ 6 * i + 1 ] = points[ i ].y;
-			positions[ 6 * i + 2 ] = points[ i ].z || 0;
+			positions[ 6 * i ] = start.x;
+			positions[ 6 * i + 1 ] = start.y;
+			positions[ 6 * i + 2 ] = start.z || 0;
 
-			positions[ 6 * i + 3 ] = points[ i + 1 ].x;
-			positions[ 6 * i + 4 ] = points[ i + 1 ].y;
-			positions[ 6 * i + 5 ] = points[ i + 1 ].z || 0;
+			positions[ 6 * i + 3 ] = end.x;
+			positions[ 6 * i + 4 ] = end.y;
+			positions[ 6 * i + 5 ] = end.z || 0;
 
 		}
 

examples/webgpu_lines_fat.html

@@ -27,7 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color } from 'three/tsl';
+			import { color, float, uniform } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -114,6 +114,8 @@
 
 				} );
 
+				matLine.opacityNode = uniform( float( 0.5 ) );
+
 				line = new Line2( geometry, matLine );
 				line.computeLineDistances();
 				line.scale.set( 1, 1, 1 );
@@ -213,7 +215,8 @@
 					'dashed': false,
 					'dash offset': 0,
 					'dash scale': 1,
-					'dash / gap': 1
+					'dash / gap': 1,
+					'alpha': 1
 				};
 
 				gui.add( param, 'line type', { 'LineGeometry': 0, '"line-strip"': 1 } ).onChange( function ( val ) {
@@ -313,6 +316,12 @@
 
 				} );
 
+				gui.add( param, 'alpha', 0, 1 ).onChange( function ( val ) {
+
+					matLine.opacityNode.value = val;
+
+				} );
+
 			}
 
 		</script>