在哪里存储缓存数据以便在顶点着色器中访问？

Question

对于计算一次然后使用多次（即每个顶点）的顶点着色器，是否有合理的位置来存储计算数据？

我正在编写一个遵循 catmull-rom 曲线的着色器，我需要预先计算（只需一次！）沿曲线的一系列均匀分布的位置，以便我可以正确绘制文本字形。计算后，我打算使用均匀间隔的位置数组作为快速查找。

此缓存中可能有数百个 vec3 或 vec4 点，具体取决于样条曲线切成弧长的精细程度。

这样的数据最好统一放置吗？质地？还有别的吗？

Answer 1

这个问题很宽泛，但如果您正在考虑在 GPU 中执行计算，那么您正在寻找 THREE.WebGLRenderTarget。您可以将着色器渲染到 RenderTarget，而不是将着色器渲染到 <canvas>，它将结果存储在纹理中，稍后您可以将其附加到其他材质。

Take a look at this example,

他们在片段着色器中执行位置计算
这些位置存储在 RenderTarget 的纹理中
然后将纹理传递到平面以置换 vertex.y 个位置。

这里有一些关于如何实现它的伪代码：

// Create renderTarget
const renderTarget = new THREE.WebGLRenderTarget(width, height);

// Perform GPU calculations, store result in renderTarget.texture
renderer.setRenderTarget(renderTarget);
renderer.render(calculationScene, calculationCamera);

// Resulting texture can now be assigned to materials
object.material.map = renderTarget.texture;

// Now we render to canvas as usual
renderer.setRenderTarget(null);
renderer.render(scene, camera);

如果您分别使用 RGB 或 RGBA 通道，则可以使用此纹理数据代替 vec3 或 vec4。

在哪里存储缓存数据以便在顶点着色器中访问？

Where to store cached data for access within vertex shader?

shader

webgl

three.js