3

我正在使用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 呢？

4

1 回答 1

3

看看这个：three.js - 调整单个粒子的不透明度

ShaderMaterial您可以在用于ParticleSystem变量 alpha的页面中的某处找到 jsfiddle ：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);
于 2013-10-19T10:37:29.810 回答