Three.js ParticleSystem透明度问题

我使用的是Three.js，我有ParticleSystem，其中每个粒子可能具有不同的透明度和颜色。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; 
}

纹理是一个圆，但是当我设置的α，这样的：gl_FragColor.a = alpha，我的质地在一个黑色的方块中变成一个圆圈，alpha级别没问题，但我不需要方块，只需要圆圈如果我没有设置alpha，square就不会出现。那么如何正确设置提供的纹理alpha？

来源

2013-10-18 Sergey

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

你可以在某个地方找到的jsfiddle在使用ShaderMaterial为ParticleSystem可变阿尔法页：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-19 10:37:29

谢谢，像你在例子中做的方式是我需要的。我简化了我的代码，只在vertexshader中设置了alpha。 – Sergey

Three.js ParticleSystem透明度问题

回答

相关问题