Three.js Points，BufferGeometry：渲染点为圆

Question

我对three.js和着色器都很陌生。 我需要创建一个粒子球体，它像波浪一样在表面上移动，但这不是问题。现在我得到了这样的东西。

这是我需要的结果。

那么，如何将每个点渲染为圆形或者渲染纹理？现在我的片段着色器是

<h1>Example 1</h1>
<p class="push">This is some text</p>
<p>This is text #2</p>
<hr>
<p>Not Aligned</p>
<p>Not Aligned</p>

<br><br>

<h1>Example 2</h1>
<p class="push">This is some text</p>
<p>This is text #2</p>
<hr>
<p class="push">"Aligned"</p>
<p>"Aligned"</p>
<br>
<p>These are not "aligned" properly, and don't match up perfectly.</p>

Ofc我试图渲染gl_FragColor = tex，但它似乎不起作用。我的纹理只是一个粒子。

Answer 1

你是什么意思gl_FragColor = tex没有用？

如果你想使用纹理，代码应该是

uniform sampler2D texture;

void main() {
  gl_FragColor = texture2D(texture, gl_PointCoord);
}

你应该开启混合并将其设置为预乘alpha并确保你的纹理使用预乘alpha并且深度测试关闭。