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

【问题标题】：three.js - Adjusting opacity of individual particlesthree.js - 调整单个粒子的不透明度
【发布时间】：2012-09-02 11:47:54
【问题描述】：

我正在尝试根据粒子与平面的距离来改变粒子的不透明度。

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

有什么变化吗，有什么办法可以实现吗？如果单个粒子着色是可能的，我想这并非遥不可及。

干杯

【问题讨论】：

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

【解决方案1】：

编辑 - 此答案显示如何使用自定义 ShaderMaterial 设置每点不透明度。有关使用 PointsMaterial 的方法，请参阅 https://stackoverflow.com/a/67892506/1461008。

ParticleSystem 已重命名为 PointCloud，然后重命名为 Points。

是的，您可以创建点云并动态改变每个粒子颜色的 alpha 值。

在 three.js 中，您可以通过将点云的材质设置为 ShaderMaterial 来做到这一点，其属性等于每个粒子所需的 alpha 值。

如果ShaderMaterials、顶点着色器和片段着色器对您来说是新的，那么这里是一个非常简单实现具有动态 alpha 的点云的 Fiddle：http://jsfiddle.net/8mrH7/266/。

编辑：更新小提琴

three.js r.129

【讨论】：

谢谢！我目前的材质如下： pMaterial = new THREE.ParticleBasicMaterial({ size: 0.2, map: THREE.ImageUtils.loadTexture( "images/particle.png" ), blending: THREE.AdditiveBlending, vertexColors: true, transparent: true, depthWrite: false, //需要？});如何使用这种方法保持加法混合纹理？
Alpha 在示例中似乎不再起作用。我猜想在 three.js 中一定有什么变化导致了这个？
好的，修好了。我只需要在 ShaderMaterial 设置“透明：真”。 jsfiddle.net/yfSwK/27
你知道控制台中gl.getProgramInfoLog() WARNING: Could not find vertex shader attribute 'position' to match BindAttributeLocation request.是什么意思吗？我也很好奇这个 position 是什么，但我从其他来源看到它是 THREE.js “提供”的东西。
顺便说一句，如果您从另一个数组设置 attributes.alpha.value，使用 = otherArray.slice() 比使用 for 循环要快得多

【解决方案2】：

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

片段着色器的相关部分：

// 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 实现包含sortParticles 属性。但它已经不存在了。在我的情况下，排序确实涉及每次相机位置变化时重做。相反，我设置了depthWrite: false，它似乎解决了这个问题。

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

【讨论】：

这种方法的缺点是应该在后面渲染的点会根据角度在前面渲染。