Question

我正在使用Three.js并且我有ParticleSystem，其中每个粒子可能具有不同的透明度和颜色。

代码：

var shaderMaterial = new THREE.ShaderMaterial({
    uniforms: customUniforms,
    attributes: customAttributes,
    vertexShader: document.getElementById('vertexshader').textContent,
    fragmentShader: document.getElementById('fragmentshader').textContent,
    transparent: true,
    alphaTest: 0.5
});


particles = new THREE.ParticleSystem(geometry, shaderMaterial);
particles.dynamic = true;

顶点着色器：

attribute float size;
attribute vec3 color;

varying vec3 vColor;

void main() {

    vColor = color;

    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

    //gl_PointSize = size;
    gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );

    gl_Position = projectionMatrix * mvPosition;

}

片段着色器：

uniform sampler2D texture;
uniform float alpha;
varying vec3 vColor;

void main() {
    gl_FragColor = vec4(vColor, 100);
    vec4 textureColor =  texture2D( texture, gl_PointCoord );
    gl_FragColor = gl_FragColor *  textureColor;
    gl_FragColor.a = alpha;
}

纹理是一个圆圈但是当我设置alpha时，像这样：gl_FragColor.a = alpha，我的纹理变成黑色正方形的圆圈，alpha级别没问题，但我不需要正方形，只需圆圈即可我没有设置alpha，方块没有出现。那么如何为提供的纹理正确设置alpha？

Answer 1

看看这个：three.js - Adjusting opacity of individual particles

您可以在页面中的某个地方找到jsfiddle，ShaderMaterial使用ParticleSystem变量alpha：http://jsfiddle.net/yfSwK/27/

此外，至少更改片段着色器，gl_FragColor应该是只写变量，通常不会将它作为读取变量：

vec4 col = vec4(vColor, 100);
vec4 tex = texture2D( texture, gl_PointCoord );
gl_FragColor = vec4( (col*tex).rgb, alpha );

......或在一行中：

gl_FragColor = vec4( (vec4(vColor, 100) *  texture2D( texture, gl_PointCoord )).rgb, alpha);

Three.js ParticleSystem透明度问题

1 个答案: