Question

我正在将16位图像的z-stack读入javascript（即图像阵列）。我是webgl着色器的新手，我遇到了如何遍历数组的问题。

我希望将整个可变长度的图像列表（最多数百个）放到GPU上。然后，随着z-stack中的每次更改，gpu将呈现新图像。目前，我有以下内容：

<script id="shader-vertex" type="x-shader/x-vertex">
attribute float a_fluxes;
varying float v_flux;
attribute vec2 a_position;
uniform vec2 u_resolution;

void main() {
    vec2 zeroToOne = a_position / u_resolution;
    gl_Position = vec4((zeroToOne * 2.0 - 1.0) * vec2(1, -1), 0, 1);
    v_flux = a_fluxes/256.;
}
</script>
<script id="shader-fragment" type="x-shader/x-fragment">
precision highp float;
varying float v_flux;

void main() {
    gl_FragColor = vec4(v_flux, v_flux, v_flux, 1);
}
</script>

三维图像阵列（x，y和z）应该被转换为进入a_fluxes的1d列表。

如何迭代其中一个z图像的x和y维度？我是否使用循环在顶点着色器中进行迭代，或者我需要将像素的所有可能x，y坐标的数组传递给顶点着色器？我应该真的在片段着色器上进行这些计算吗？

Answer 1

如果您计划使用GPU在它们之间跳转，我认为您可以将纹理放在一个图集（一个图像的二维图像作为一个图像）中。 WebGL不支持体积纹理，如果它确实我建议每个图像使用一个切片 - 但是你可能最好从更大的合成图像的UV空间切出窗口，其中每个窗口对应你的一个子图像。

我在哪个webgl着色器中将数组转换为图像

1 个答案: