Three.js ParticleSystem 투명도 문제

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

텍스처가 원하지만 난 알파를 설정,이 같은 : gl_FragColor.a = alpha, 내 텍스처 검은 색 사각형의 원이 되려면 알파 수준은 괜찮지 만 사각형이 필요없고 원만이 필요합니다. 알파를 설정하지 않으면 사각형이 나타나지 않습니다. 제공된 텍스처에 대해 알파를 올바르게 설정하는 방법은 무엇입니까?

Answer 1

이것 좀보세요 : three.js - Adjusting opacity of individual particles는

당신은 변수 알파와 ParticleSystem에 대한 ShaderMaterial을 사용하는 페이지의 어딘가에 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); 

... 또는 1 개 라인 :

변수 만 쓰기는 읽기에서 변수로 가지고 보통이 아니다

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