Three.js Particle System为每个粒子提供不同的纹理

Question

在Three.js中我加载了1000个粒子和2个不同的纹理。

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 do you set this value per a 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
});

这是片段着色器：

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 );
}

如何向每个粒子的片段着色器发送不同的纹理？

Answer 1

嗯...通过属性发送纹理索引。

每个粒子都是单点。 （点精灵）
每个点都有位置（通过属性）和其他属性。 （通过属性或制服）
位置通常是转换为vec4（位置，1.0）的vec3（x，y，z）的类型。
我不知道是使用第四个元素（来自vec4的'w'）的three.js，但你可以尝试通过它发送纹理索引。

顶点：

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

片段：

...
if(texIndex == 0) tex = texture2D(texture0, gl_PointCoord);
else tex = texture2D(texture1, gl_PointCoord);
...

我没有测试过。 我从未使用过这个图书馆。