Added handling of custom attributes for ParticleSystems.

2014fb8b · alteredq · f1559f01 · 2014fb8b · 2014fb8b · 2014fb8b
5 changed file
--- a/build/Three.js
+++ b/build/Three.js
--- a/build/custom/ThreeWebGL.js
+++ b/build/custom/ThreeWebGL.js
--- a/examples/textures/sprites/spark1.png
+++ b/examples/textures/sprites/spark1.png
--- a/examples/webgl_custom_attributes_particles.html
+++ b/examples/webgl_custom_attributes_particles.html
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>three.js webgl - custom attributes [particles]</title>
+		<style>
+			body {
+				color: #ffffff;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				font-weight: bold;
+
+				background-color: #000000;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				color: #fff;
+				background-color: rgba( 0, 0, 0, 0.75 );
+				position: relative;
+				top: 0px; width: 100%;
+				padding: 5px;
+				z-index:100;
+				width:33em;
+				margin:0 auto -2em;
+			}
+			a { color: #ff0000 }
+		</style>
+	</head>
+
+	<body>
+		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - custom attributes example - particles</div>
+		<div id="container"></div>
+
+		<script src="../build/Three.js"></script>
+
+		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
+		<script type="text/javascript" src="js/Stats.js"></script>
+
+		<script type="x-shader/x-vertex" id="vertexshader">
+
+			uniform float amplitude;
+			attribute float size;
+			attribute vec3 customColor;
+
+			varying vec3 vColor;
+
+			void main() {
+
+				vColor = customColor;
+
+				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+
+				//gl_PointSize = size;
+				gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
+
+				gl_Position = projectionMatrix * mvPosition;
+
+			}
+
+		</script>
+
+		<script type="x-shader/x-fragment" id="fragmentshader">
+
+			uniform vec3 color;
+			uniform sampler2D texture;
+
+			varying vec3 vColor;
+
+			void main() {
+
+				gl_FragColor = vec4( color * vColor, 1.0 );
+				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
+
+			}
+
+		</script>
+
+
+		<script type="text/javascript">
+
+		var renderer, scene, camera, stats;
+
+		var sphere, uniforms, attributes;
+
+		var noise = [];
+
+		var WIDTH = window.innerWidth,
+			HEIGHT = window.innerHeight;
+
+		init();
+		animate();
+
+		function init() {
+
+			camera = new THREE.Camera( 40, WIDTH / HEIGHT, 1, 10000 );
+			camera.position.z = 300;
+
+			scene = new THREE.Scene();
+
+			attributes = {
+
+				size: {	type: 'f', value: [] },
+				customColor: { type: 'c', value: [] }
+
+			};
+
+			uniforms = {
+
+				amplitude: { type: "f", value: 1.0 },
+				color:     { type: "c", value: new THREE.Color( 0xffffff ) },
+				texture:   { type: "t", value: 0, texture: THREE.ImageUtils.loadTexture( "textures/sprites/spark1.png" ) },
+
+			};
+
+			var shaderMaterial = new THREE.MeshShaderMaterial( {
+
+				uniforms: 		uniforms,
+				attributes:     attributes,
+				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
+				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
+
+				blending: 		THREE.AdditiveBlending,
+				depthTest: 		false,
+				transparent:	true
+
+			});
+
+
+			var radius = 200;
+			var geometry = new THREE.Geometry();
+
+			for ( var i = 0; i < 100000; i++ ) {
+
+				vector = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
+				vector.multiplyScalar( radius );
+
+				geometry.vertices.push( new THREE.Vertex( vector ) );
+
+			}
+
+			sphere = new THREE.ParticleSystem( geometry, shaderMaterial );
+
+			sphere.dynamic = true;
+			//sphere.sortParticles = true;
+
+			var vertices = sphere.geometry.vertices;
+			var values_size = attributes.size.value;
+			var values_color = attributes.customColor.value;
+
+
+			for( var v = 0; v < vertices.length; v++ ) {
+
+				values_size[ v ] = 10;
+				values_color[ v ] = new THREE.Color( 0xffaa00 );
+
+				if ( vertices[ v ].position.x < 0 )
+					values_color[ v ].setHSV( 0.5 + 0.1 * ( v / vertices.length ), 0.7, 0.9 );
+				else
+					values_color[ v ].setHSV( 0.0 + 0.1 * ( v / vertices.length ), 0.9, 0.9 );
+
+			}
+
+			scene.addChild( sphere );
+
+			renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
+			renderer.setSize( WIDTH, HEIGHT );
+
+			var container = document.getElementById( 'container' );
+			container.appendChild( renderer.domElement );
+
+			stats = new Stats();
+			stats.domElement.style.position = 'absolute';
+			stats.domElement.style.top = '0px';
+			container.appendChild( stats.domElement );
+
+		}
+
+		function cap( x, a, b ) {
+
+			return ( x < a ) ? a : ( ( x > b ) ? b : x );
+
+		}
+
+		var i, value;
+
+		function animate() {
+
+			requestAnimationFrame( animate );
+
+			render();
+			stats.update();
+
+		}
+
+		function render() {
+
+			var time = new Date().getTime() * 0.005;
+
+			sphere.rotation.z = 0.01 * time;
+
+			for( i = 0; i < attributes.size.value.length; i++ ) {
+
+				attributes.size.value[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );
+
+
+			}
+
+			attributes.size.needsUpdate = true;
+
+			renderer.render( scene, camera );
+
+		}
+
+
+	</script>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -569,7 +569,7 @@ THREE.WebGLRenderer = function ( parameters ) {

 	};

-	function initParticleBuffers ( geometry ) {
+	function initParticleBuffers ( geometry, object ) {

 		var nvertices = geometry.vertices.length;

@@ -580,6 +580,72 @@ THREE.WebGLRenderer = function ( parameters ) {

 		geometry.__webglParticleCount = nvertices;

+		geometry.__materials = object.materials;
+
+		// custom attributes
+
+		var m, ml, material;
+
+		for ( m = 0, ml = object.materials.length; m < ml; m ++ ) {
+
+			material = object.materials[ m ];
+
+			if ( material.attributes ) {
+
+				if ( geometry.__webglCustomAttributes === undefined ) {
+
+					geometry.__webglCustomAttributes = {};
+
+				}
+
+				for ( a in material.attributes ) {
+
+					// Do a shallow copy of the attribute object so different geometryGroup chunks use different
+					// attribute buffers which are correctly indexed in the setMeshBuffers function
+
+					// Not sure how to best translate this into non-indexed arrays
+					// used for particles, as there are no geometry chunks here
+					// Probably could be simplified
+
+					originalAttribute = material.attributes[ a ];
+
+					attribute = {};
+
+					for ( property in originalAttribute ) {
+
+						attribute[ property ] = originalAttribute[ property ];
+
+					}
+
+					if( !attribute.__webglInitialized || attribute.createUniqueBuffers ) {
+
+						attribute.__webglInitialized = true;
+
+						size = 1;		// "f" and "i"
+
+						if( attribute.type === "v2" ) size = 2;
+						else if( attribute.type === "v3" ) size = 3;
+						else if( attribute.type === "v4" ) size = 4;
+						else if( attribute.type === "c"  ) size = 3;
+
+						attribute.size = size;
+						attribute.array = new Float32Array( nvertices * size );
+						attribute.buffer = _gl.createBuffer();
+						attribute.buffer.belongsToAttribute = a;
+
+						originalAttribute.needsUpdate = true;
+						attribute.__original = originalAttribute;
+
+					}
+
+					geometry.__webglCustomAttributes[ a ] = attribute;
+
+				}
+
+			}
+
+		}
+
 	};

 	function initMeshBuffers ( geometryGroup, object ) {
@@ -713,7 +779,11 @@ THREE.WebGLRenderer = function ( parameters ) {

 			if ( material.attributes ) {

-				geometryGroup.__webglCustomAttributes = {};
+				if ( geometryGroup.__webglCustomAttributes === undefined ) {
+
+					geometryGroup.__webglCustomAttributes = {};
+
+				}

 				for ( a in material.attributes ) {

@@ -1386,6 +1456,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 									customAttribute.array[ offset_custom + 3 ] = customAttribute.value[ offset_customSrc + 3 ];

 									customAttribute.offsetSrc += 4;
+
 								}

 								customAttribute.offset += 4;
@@ -1416,6 +1487,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 									v4 = customAttribute.value[ offset_customSrc + 3 ];

 									customAttribute.offsetSrc += 4;
+
 								}


@@ -2079,7 +2151,22 @@ THREE.WebGLRenderer = function ( parameters ) {

 		dirtyVertices = geometry.__dirtyVertices,
 		dirtyElements = geometry.__dirtyElements,
-		dirtyColors = geometry.__dirtyColors;
+		dirtyColors = geometry.__dirtyColors,
+
+		customAttributes = geometry.__webglCustomAttributes,
+		a, ca, cal, v1,
+		offset_custom,
+		customAttribute;
+
+		if ( customAttributes ) {
+
+			for ( a in customAttributes ) {
+
+				customAttributes[ a ].offset = 0;
+
+			}
+
+		}

 		if ( object.sortParticles ) {

@@ -2096,7 +2183,7 @@ THREE.WebGLRenderer = function ( parameters ) {

 			}

-			sortArray.sort( function(a,b) { return b[0] - a[0]; } );
+			sortArray.sort( function( a, b ) { return b[ 0 ] - a[ 0 ]; } );

 			for ( v = 0; v < vl; v++ ) {

@@ -2122,6 +2209,76 @@ THREE.WebGLRenderer = function ( parameters ) {

 			}

+			if ( customAttributes ) {
+
+				for ( a in customAttributes ) {
+
+					customAttribute = customAttributes[ a ];
+
+					cal = customAttribute.value.length;
+
+					for ( ca = 0; ca < cal; ca ++ ) {
+
+						index = sortArray[ca][1];
+
+						offset_custom = customAttribute.offset;
+
+						if ( customAttribute.size === 1 ) {
+
+							if ( customAttribute.boundTo === undefined || customAttribute.boundTo === "vertices" ) {
+
+								customAttribute.array[ offset_custom ] = customAttribute.value[ index ];
+
+							}
+
+						} else {
+
+							if ( customAttribute.boundTo === undefined || customAttribute.boundTo === "vertices" ) {
+
+								v1 = customAttribute.value[ index ];
+
+							}
+
+							if ( customAttribute.size === 2 ) {
+
+								customAttribute.array[ offset_custom ] 	   = v1.x;
+								customAttribute.array[ offset_custom + 1 ] = v1.y;
+
+							} else if ( customAttribute.size === 3 ) {
+
+								if ( customAttribute.type === "c" ) {
+
+									customAttribute.array[ offset_custom ] 	   = v1.r;
+									customAttribute.array[ offset_custom + 1 ] = v1.g;
+									customAttribute.array[ offset_custom + 2 ] = v1.b;
+
+								} else {
+
+									customAttribute.array[ offset_custom ] 	   = v1.x;
+									customAttribute.array[ offset_custom + 1 ] = v1.y;
+									customAttribute.array[ offset_custom + 2 ] = v1.z;
+
+								}
+
+							} else {
+
+								customAttribute.array[ offset_custom ] 		= v1.x;
+								customAttribute.array[ offset_custom + 1  ] = v1.y;
+								customAttribute.array[ offset_custom + 2  ] = v1.z;
+								customAttribute.array[ offset_custom + 3  ] = v1.w;
+
+							}
+
+						}
+
+						customAttribute.offset += customAttribute.size;
+
+					}
+
+				}
+
+			}
+

 		} else {

@@ -2157,6 +2314,79 @@ THREE.WebGLRenderer = function ( parameters ) {

 			}

+			if ( customAttributes ) {
+
+				for ( a in customAttributes ) {
+
+					customAttribute = customAttributes[ a ];
+
+					if ( customAttribute.__original.needsUpdate ) {
+
+						cal = customAttribute.value.length;
+
+						for ( ca = 0; ca < cal; ca ++ ) {
+
+							offset_custom = customAttribute.offset;
+
+							if ( customAttribute.size === 1 ) {
+
+								if ( customAttribute.boundTo === undefined || customAttribute.boundTo === "vertices" ) {
+
+									customAttribute.array[ offset_custom ] = customAttribute.value[ ca ];
+
+								}
+
+							} else {
+
+								if ( customAttribute.boundTo === undefined || customAttribute.boundTo === "vertices" ) {
+
+									v1 = customAttribute.value[ ca ];
+
+								}
+
+								if ( customAttribute.size === 2 ) {
+
+									customAttribute.array[ offset_custom ] 	   = v1.x;
+									customAttribute.array[ offset_custom + 1 ] = v1.y;
+
+								} else if ( customAttribute.size === 3 ) {
+
+									if ( customAttribute.type === "c" ) {
+
+										customAttribute.array[ offset_custom ] 	   = v1.r;
+										customAttribute.array[ offset_custom + 1 ] = v1.g;
+										customAttribute.array[ offset_custom + 2 ] = v1.b;
+
+
+									} else {
+
+										customAttribute.array[ offset_custom ] 	   = v1.x;
+										customAttribute.array[ offset_custom + 1 ] = v1.y;
+										customAttribute.array[ offset_custom + 2 ] = v1.z;
+
+									}
+
+								} else {
+
+									customAttribute.array[ offset_custom ] 		= v1.x;
+									customAttribute.array[ offset_custom + 1  ] = v1.y;
+									customAttribute.array[ offset_custom + 2  ] = v1.z;
+									customAttribute.array[ offset_custom + 3  ] = v1.w;
+
+								}
+
+							}
+
+							customAttribute.offset += customAttribute.size;
+
+						}
+
+					}
+
+				}
+
+			}
+
 		}

 		if ( dirtyVertices || object.sortParticles ) {
@@ -2173,6 +2403,24 @@ THREE.WebGLRenderer = function ( parameters ) {

 		}

+		if ( customAttributes ) {
+
+			for ( a in customAttributes ) {
+
+				customAttribute = customAttributes[ a ];
+
+				if ( customAttribute.__original.needsUpdate || object.sortParticles ) {
+
+					_gl.bindBuffer( _gl.ARRAY_BUFFER, customAttribute.buffer );
+					_gl.bufferData( _gl.ARRAY_BUFFER, customAttribute.array, hint );
+
+				}
+
+			}
+
+		}
+
+
 	};

 	function setMaterialShaders( material, shaders ) {
@@ -4100,7 +4348,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 			if ( ! geometry.__webglVertexBuffer ) {

 				createParticleBuffers( geometry );
-				initParticleBuffers( geometry );
+				initParticleBuffers( geometry, object );

 				geometry.__dirtyVertices = true;
 				geometry.__dirtyColors = true;
@@ -4242,7 +4490,9 @@ THREE.WebGLRenderer = function ( parameters ) {

 			geometry = object.geometry;

-			if ( geometry.__dirtyVertices || geometry.__dirtyColors || object.sortParticles ) {
+			customAttributeDirty = areCustomAttributesDirty( geometry );
+
+			if ( geometry.__dirtyVertices || geometry.__dirtyColors || object.sortParticles || customAttributeDirty ) {

 				setParticleBuffers( geometry, _gl.DYNAMIC_DRAW, object );

@@ -4251,6 +4501,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 			geometry.__dirtyVertices = false;
 			geometry.__dirtyColors = false;

+			clearCustomAttributes( geometry );
+
 		}/* else if ( THREE.MarchingCubes !== undefined && object instanceof THREE.MarchingCubes ) {

 			// it updates itself in render callback