SoftwareRenderer: Fully support BufferGeometry

examples/js/renderers/SoftwareRenderer.js

@@ -540,7 +540,7 @@ THREE.SoftwareRenderer = function ( parameters ) {
 
 				} else {
 
-					if ( material.vertexColors === THREE.FaceColors ) {
+					if ( material.vertexColors === THREE.FaceColors || material.vertexColors === THREE.VertexColors ) {
 
 						string = [
 							'var colorOffset = offset * 4;',

examples/software_lines_splines.html

@@ -66,9 +66,7 @@
 
 			function init() {
 
-				var i, container;
-
-				container = document.createElement( 'div' );
+				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
 				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
@@ -81,38 +79,51 @@
 
 				container.appendChild( renderer.domElement );
 
-				var geometry = new THREE.Geometry(),
-					geometry2 = new THREE.Geometry(),
-					geometry3 = new THREE.Geometry(),
-					points = hilbert3D( new THREE.Vector3(), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 ),
-					colors = [], colors2 = [], colors3 = [];
+				//
+
+				var hilbertPoints = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+
+				var geometry1 = new THREE.BufferGeometry();
+				var geometry2 = new THREE.BufferGeometry();
+				var geometry3 = new THREE.BufferGeometry();
 
 				var subdivisions = 6;
 
-				var spline = new THREE.CatmullRomCurve3( points );
+				var vertices = [];
+				var colors1 = [];
+				var colors2 = [];
+				var colors3 = [];
+
 				var point = new THREE.Vector3();
+				var color = new THREE.Color();
+
+				var spline = new THREE.CatmullRomCurve3( hilbertPoints );
+
+				for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
 
-				for ( i = 0; i < points.length * subdivisions; i ++ ) {
+					var t = i / ( hilbertPoints.length * subdivisions );
+					spline.getPoint( t, point );
 
-					var t = i / ( points.length * subdivisions );
-					geometry.vertices[ i ] = spline.getPoint( t );
+					vertices.push( point.x, point.y, point.z );
 
-					colors[ i ] = new THREE.Color( 0xffffff );
-					colors[ i ].setHSL( 0.6, 1.0, Math.max( 0, - point.x / 200 ) + 0.5 );
+					color.setHSL( 0.6, 1.0, Math.max( 0, - point.x / 200 ) + 0.5 );
+					colors1.push( color.r, color.g, color.b );
 
-					colors2[ i ] = new THREE.Color( 0xffffff );
-					colors2[ i ].setHSL( 0.9, 1.0, Math.max( 0, - point.y / 200 ) + 0.5 );
+					color.setHSL( 0.9, 1.0, Math.max( 0, - point.y / 200 ) + 0.5 );
+					colors2.push( color.r, color.g, color.b );
 
-					colors3[ i ] = new THREE.Color( 0xffffff );
-					colors3[ i ].setHSL( i / ( points.length * subdivisions ), 1.0, 0.5 );
+					color.setHSL( i / ( hilbertPoints.length * subdivisions ), 1.0, 0.5 );
+					colors3.push( color.r, color.g, color.b );
 
 				}
 
-				geometry2.vertices = geometry3.vertices = geometry.vertices;
+				geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry2.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry3.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
-				geometry.colors = colors;
-				geometry2.colors = colors2;
-				geometry3.colors = colors3;
+				geometry1.addAttribute( 'color', new THREE.Float32BufferAttribute( colors1, 3 ) );
+				geometry2.addAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3 ) );
+				geometry3.addAttribute( 'color', new THREE.Float32BufferAttribute( colors3, 3 ) );
 
 				// lines
 
@@ -120,12 +131,12 @@
 
 				var line, p, scale = 0.3, d = 225;
 				var parameters = [
-					[ material, scale * 1.5, [ - d, 0, 0 ], geometry ],
+					[ material, scale * 1.5, [ - d, 0, 0 ], geometry1 ],
 					[ material, scale * 1.5, [ 0, 0, 0 ], geometry2 ],
 					[ material, scale * 1.5, [ d, 0, 0 ], geometry3 ]
 				];
 
-				for ( i = 0; i < parameters.length; ++ i ) {
+				for ( var i = 0; i < parameters.length; ++ i ) {
 
 					p = parameters[ i ];
 					line = new THREE.Line( p[ 3 ], p[ 0 ] );

examples/software_sandbox.html

@@ -7,14 +7,31 @@
 		<style>
 			body {
 				font-family: Monospace;
-				background-color: #f0f0f0;
 				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;
+			}
 		</style>
 	</head>
 	<body>
 
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - software renderer</br>
+			drag to change the point of view
+		</div>
+
 		<script src="../build/three.js"></script>
 		<script src="js/geometries/hilbert3D.js"></script>
 		<script src="js/controls/TrackballControls.js"></script>
@@ -23,9 +40,7 @@
 		<script src="js/libs/stats.min.js"></script>
 		<script>
 
-			var container, stats;
-
-			var camera, controls, scene, renderer;
+			var camera, controls, scene, renderer, stats;
 
 			var torus, cube, texCube;
 
@@ -36,17 +51,9 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				var info = document.createElement( 'div' );
-				info.style.position = 'absolute';
-				info.style.top = '10px';
-				info.style.width = '100%';
-				info.style.textAlign = 'center';
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js<a/> - software renderer<br/>drag to change the point of view';
-				container.appendChild( info );
-
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 600;
 
@@ -55,34 +62,47 @@
 				scene = new THREE.Scene();
 
 				// Torus
-				var geometry = new THREE.TorusKnotGeometry( 150 );
+				var torusGeometry = new THREE.TorusKnotBufferGeometry( 150, 10 );
+				torusGeometry = torusGeometry.toNonIndexed();
 
-				for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
+				var colors = [];
+				var color = new THREE.Color();
 
-					geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
+				for ( var i = 0; i < torusGeometry.attributes.position.count; i ++ ) {
+
+					color.setHex( Math.random() * 0xffffff );
+					colors.push( color.r, color.g, color.b );
 
 				}
 
-				torus = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.FaceColors } ) );
+				torusGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+
+				torus = new THREE.Mesh( torusGeometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.VertexColors } ) );
 				scene.add( torus );
 
 				// Cube
-				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				var boxGeometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				boxGeometry = boxGeometry.toNonIndexed();
 
-				for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
+				colors = [];
 
-					geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
+				for ( var i = 0; i < boxGeometry.attributes.position.count; i ++ ) {
+
+					color.setHex( Math.random() * 0xffffff );
+					colors.push( color.r, color.g, color.b );
 
 				}
 
-				cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.FaceColors } ) );
+				boxGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+
+				cube = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.VertexColors } ) );
 				scene.position.set( 100, 0, 0 );
 				scene.add( cube );
 
 				// Cube with texture
 				var loader = new THREE.TextureLoader();
 				var map = loader.load( 'textures/brick_diffuse.jpg' );
-				texCube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: map } ) );
+				texCube = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { map: map } ) );
 				texCube.position.set( - 300, 0, 0 );
 				scene.add( texCube );
 
@@ -101,22 +121,31 @@
 				scene.add( texSprite );
 
 				// Line
-				var points = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
-				var spline = new THREE.CatmullRomCurve3( points );
-				var n_sub = 6, colors = [];
+				var hilbertPoints = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+
+				var lineGeometry = new THREE.BufferGeometry();
+				var subdivisions = 6;
+
+				var vertices = [];
+				colors = [];
 
-				var lineGeometry = new THREE.Geometry();
-				var vertices = lineGeometry.vertices;
+				var point = new THREE.Vector3();
+				color.setHex( 0x88aaff );
 
-				for ( var i = 0; i < points.length * n_sub; i ++ ) {
+				var spline = new THREE.CatmullRomCurve3( hilbertPoints );
 
-					var t = i / ( points.length * n_sub );
-					vertices[ i ] = spline.getPoint( t );
-					colors[ i ] = new THREE.Color( 0x88aaff );
+				for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
+
+					var t = i / ( hilbertPoints.length * subdivisions );
+					spline.getPoint( t, point );
+
+					vertices.push( point.x, point.y, point.z );
+					colors.push( color.r, color.g, color.b );
 
 				}
 
-				lineGeometry.colors = colors;
+				lineGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				lineGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 				var material = new THREE.LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
 				var line = new THREE.Line( lineGeometry, material );
@@ -124,6 +153,8 @@
 				line.position.set( 0, - 200, 0 );
 				scene.add( line );
 
+				//
+
 				renderer = new THREE.SoftwareRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );