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

时间:2012-09-09 08:38:17

标签: three.js point-clouds particle-system

我试图根据它们与飞机的距离来改变粒子的不透明度。

This issue描述了我的问题,一年前的答案基本上是“你不能”。不透明度显然是材料的参数,而不是元素,因此单个粒子的不透明度是不可能的。

有什么改变,有什么方法可以达到这个目的吗?如果可以进行单独的粒子着色,我想这并非遥不可及。

干杯

2 个答案:

答案 0 :(得分:25)

ParticleSystem已重命名为PointCloud,然后重命名为Points

是的,您可以创建一个Point Cloud并动态地改变每个粒子颜色的alpha值。

在three.js中,您可以将Point Cloud的材质设置为ShaderMaterial,其属性等于每个粒子所需的alpha值。

如果ShaderMaterials,顶点着色器和片段着色器对您来说是新的,这里有一个非常简单的小提琴,它实现了带有动态alphas的Point Cloud:http://jsfiddle.net/8mrH7/266/

编辑:更新小提琴

three.js r.84

答案 1 :(得分:0)

不知道为什么,但是建议的解决方案对我不起作用。我使用了一些棘手的阴影使点变得圆且边缘模糊。因此,应该认为点的角是透明的,但它们看起来是黑色的:http://jsfiddle.net/5kz64ero/1/

片段着色器的相关部分:

npm audit fix

我认为传统上这是通过深度排序来解决的(最远的点在前),并且我发现一些证据表明“三”中/** * Provide an array of SweetAlert2 parameters to show multiple popups, one popup after another. * * @param steps The steps' configuration. */ function queue<T>(steps: readonly (SweetAlertOptions | string)[]): Promise<T>; 的某些较旧的实现包含// Distance from 0.0 to 0.5 from the center of the point float d = distance(gl_PointCoord, vec2(0.5, 0.5)); // Applying sigmoid to smoothen the edge float opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25))); gl_FragColor = vec4(opacity * vColor, opacity); 属性。但是现在不存在了。在我的情况下,排序实际上涉及到每次相机位置发生变化时都要重做。相反,我设置了ParticleSystem,它似乎解决了这个问题。

结果:http://jsfiddle.net/5kz64ero/6/