I have a scene in Three.js with 1000 particles and I've loaded 2 different textures.
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 can I assign unique textures to each 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 and push to 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
});
This is the fragment shader:
uniform sampler2D texture;
varying vec3 vColor;
void main()
{
// calculates a color for the particle
gl_FragColor = vec4( vColor, 1.0 );
// sets particle texture to desired color
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}
How can I assign a different texture to each particle's fragment shader?