Utilizing THREE.PointCloud for optimum performance, I aim to animate 100,000 objects. However, I am facing an issue with setting different textures for particles.
How can I incorporate uniforms with various textures in this code?
Is it possible to pass shaderMaterial as an array with the same number of particles but with differing textures?
Alternatively, in the fragment shader, how can I assign distinct textures?
var uniforms = {
amplitude: {
type: "f",
value: 1.0
},
color: {
type: "c",
value: new THREE.Color("#fff")
},
texture: {
type: "t",
value: new THREE.TextureLoader().load("./images/shape1.png")
// Need to set random shapes here
}
};
var 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 * ( 300.0 / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
`;
var 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 );
}
`;
var shaderMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader,
blending: THREE.AdditiveBlending,
depthTest: true,
transparent: false
});
var particles = new THREE.BufferGeometry();
particles.addAttribute('position', new THREE.BufferAttribute(positions, 3));
particles.addAttribute('customColor', new THREE.BufferAttribute(colors, 3));
particles.addAttribute('size', new THREE.BufferAttribute(sizes, 1));
particleSystem = new THREE.PointCloud(particles, shaderMaterial);