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
Post a Comment