javascript - Three.js Particle System different texture for each particle -


in three.js have 1000 particles , 2 different textures loaded in.

var particlecount = 1000; var texture1 = three.imageutils.loadtexture( 'texture1.png' ); var texture2 = three.imageutils.loadtexture( 'texture2.png' );  var customuniforms = {     texture:   {type: "t", value: texture1} // how set value per particle? };  var customattributes = {     customcolor:   {type: "c", value: []},     customsize: {type: "f", value: []} };  for(var p = 0; p < particlecount; p++ ) {     customattributes.customcolor.value[p] = new three.color(0xffffff * math.random());     customattributes.customsize.value[p] = size;      //  .. place particle , push particles code }  var shadermaterial = new three.shadermaterial({         uniforms:       customuniforms,         attributes:     customattributes,         vertexshader:   document.getelementbyid( 'vertexshader' ).textcontent,         fragmentshader: document.getelementbyid( 'fragmentshader' ).textcontent,         transparent: true,         alphatest: 0.5 }); 

here fragment shader:

uniform sampler2d texture; varying vec3 vcolor; void main() {     // calculates color particle     gl_fragcolor = vec4( vcolor, 1.0 );     // sets particle texture desired color     gl_fragcolor = gl_fragcolor * texture2d( texture, gl_pointcoord ); } 

how send different texture each particle's fragment shader?

hmm... send index of texture via attribute.

each particle single point. (point sprite)
each point have position (via attribute) , other properties. (via attributes or uniforms)
position type of vec3 (x, y, z) transformed vec4(position, 1.0).
i don't know three.js using fourth element ('w' vec4) can try send texture index via that.

vertex:

attribute vec4 vertpos; //x, y, z, w = texture index (you can use own, custom attribute) varying float texindex; ... texindex = vertpos.w; ... 

fragment:

... if(texindex == 0) tex = texture2d(texture0, gl_pointcoord); else tex = texture2d(texture1, gl_pointcoord); ... 

i didn't test that.
i have never used library.


Comments

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -