原生的WebGL粒子系统透明度的问题 [英] Native WebGL particle system opacity issue
问题描述
我想呈现质感的颗粒和我有问题。 质地透明像素做奇怪的事情与渲染。 貌似被behing最近的（相机）颗粒不呈现在所有粒子。 但并非总是如此，他们中的一些渲染和外观的预期。 我试图玩弄深度和混合选项，但没有结果。
I am trying to render textured particles and i have the problem. Transparent pixels of texture doing a weird thing with render. Looks like particles that are behing nearest (to camera) particles are not rendering at all. But not always, some of them are rendering and look expected. I was tried to play around with depth and blend options but without result.
或许是一个解决方案，可以通过修改这部分code被发现。
Perhaps that a solution can be found by modifying this part code.
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
下面的变体是修复我的问题，但并没有给我需要的结果。粒子变得透明和相互重叠。
Variant below are fixes my problem, but does not give me needed result. Particles becomes transparent and overlap each other.
// gl.enable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
因此，这里是的jsfiddle 与我的问题。
推荐答案
现在的问题是Z缓冲和深度测试。
The problem is z-buffering and the depth test.
您正在绘制的有效随机深度顺序四边形。所以，你画一个亲密的粒子第一，它绘制透明像素的快乐的脸的角落，并设置zbuffer这些像素。后来一些粒子的背后拿得出，但zbuffer说不要画他们。
You're drawing quads in effectively a random depth order. So, you draw a close particle first, it draws the transparent pixels on the corners of the happy face and sets the zbuffer for those pixels. Later some particles behind get drawn but the zbuffer says not to draw them.
几个解决方案，每个都有自己的问题
A few solutions, each with their own issues
-
排序的所有透明的东西，你画再画最远到最近的一刻。
Sort all the transparent stuff you're drawing then draw furthest to closest.
加：它的工作原理
减：这是很慢的，尤其是对于成千上万的颗粒
Minus: It's really slow, especially for thousands of particles.
使用添加剂或其他混合模式。
Use an additive or other blending mode.
加：作品的某些情况下，像火，可能是烟雾
Plus: works for certain cases like fire and possibly smoke
缺点：仅适用于某些情况下，像火和烟
Minus: only works for certain cases like fire and smoke
弃透明像素
更改您的着色器丢弃透明像素像这样
Change your shader to discard transparent pixels like this
无效的主要（）{ 浮alphaThreshold = 0.1; vec4色=的Texture2D（u_sampler，gl_PointCoord）; 如果（color.a＆LT; = alphaThreshold）{ 丢弃; } gl_FragColor =颜色; }
void main() { float alphaThreshold = 0.1; vec4 color = texture2D(u_sampler, gl_PointCoord); if (color.a <= alphaThreshold) { discard; } gl_FragColor = color; }
加：工作不透明纹理100％透明像素
Plus: Works for opaque textures with 100% transparent pixels
减：不真正的抗锯齿低于100％透明像素的工作
Minus: Doesn't truly work for anti-aliased less than 100% transparent pixels.
如果您尝试＃3你的样品，你会看到它主要是工作但是当粒子真正的大，你仍然可以看到在半透明像素的问题仍然通过 alphaThreshold 测试。您可以更改 alphaThreshold 向更高一些丢弃的像素越多，它看起来更好或更坏。
If you try #3 on your sample you'll see it mostly works but when particles are really large you can still see the issue on the semi-transparent pixels that still pass the alphaThreshold test. You can change the alphaThreshold to a higher number to discard more pixels and it might look better or worse.
也只是供参考：请注意，GL有多大点的实现依赖限制可以是这样打算的许多实现你的样品将无法正常工作。您可能要考虑切换到<一个href="http://stackoverflow.com/questions/23048899/particle-system-using-webgl/23056518#23056518">quad基于粒子的。
Also just FYI: Be aware that GL has an implementation dependent limit on how large POINTS can be so your sample will not work as intended on many implementations. You might want to consider switching to quad based particles.
这篇关于原生的WebGL粒子系统透明度的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
