三个 JS - 在片段着色器中获取 "existing" 颜色

Question

对 ThreeJS 有点陌生。我有一堆实例化网格并为它们中的每一个执行 setColorAt。我将它们的材质设置为带有 vertexShader 和 fragmentShader 的 ShaderMaterial。

我想尝试编写顶点着色器，但保留现有的网格颜色。我的片段着色器：

        void main() {

            gl_FragColor = /* How do I get the "existing" or whatever the color used to be?

        }

据我了解，“现有”颜色在渲染管道的这一部分不可用，因此实际上没有办法执行 gl_FragColor=gl_FragColor 或诸如此类。

根据我从其他帖子中读到的内容，检索它们设置的现有颜色的唯一方法是使用常规 MeshStandardMaterial 渲染一次，将渲染写入纹理，然后创建一个 composer pass并将纹理传递给通过 fragmentShader 的纹理。

是否有使用此技术的任何好的简单示例？我有一个特定的算法来设置每个网格的颜色，所以我希望能够在修改顶点时保留这些颜色。另外，如果有一种方法可以简单地忽略 fragmentShader 并且只使用 vertexShader 我也可以接受，只要我仍然可以为每个网格自定义颜色。

Answer 1

我对这个问题有点困惑。所以之前您使用 setColorAt 方法将颜色传递给实例化网格？如果我没看错，那么将相同颜色传递给片段着色器的最简单方法就是将值作为统一传递给着色器。您可以将统一值从 javascript 传递到 ShaderMaterial 并在着色器中使用这些值。

https://threejs.org/docs/#api/en/core/Uniform

希望这有助于澄清一些事情

Answer 2

实例只能通过几何属性自定义（可以拆分 per-vertex/instance），而制服是全局的，将应用于网格的每个 vertex/instance（实例化只是绘制单个多次网格化，因此您可以将其作为单个网格进行交互）。

InstancedMesh.setColorAt will set a per "instance" color via geometry attributes, similar to how you would with vertex colors. In threejs, you can access this via instanceColor in your vertex shader or InstancedMesh.instanceColor 通过三个。

Some more reading on WebGLPrograms and built-ins.

Answer 3

终于想通了。

instanceColor 可用于顶点着色器。所以只需制作一个varying vec3来存储它并传递给fragmentShader。

三个 JS - 在片段着色器中获取 "existing" 颜色

ThreeJS - Getting the "existing" color in a FragmentShader

three.js