由 2 维数组表示的 3 维数组 -

Question

因此，在 WebGL 中，我可以存储最多 2 维的纹理 - 并使用 texture2D（无论如何）在着色器中读取它；

如果我想存储一个 3 维纹理，以便我可以在着色器上读取 3 维数据，我该怎么做？

这是我的想法 - 我想知道我是否正确地接近它：

在 JavaScript 中：

var info = [];

for (var x = 0; x < 1; x+=.1) {
     for (var y = 0; y < 1; y+=.1) {
          for (var z = 0; z < 1; z+=.1) {

               info.push (x*y*z); 
               info.push(0);
               info.push(0);
               info.push(0);

          }
     }
}

//bind texture here- whatever

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 10, 100, 0,
                  gl.RGBA, gl.FLOAT, data_on_shader);

//other texture stuff

在着色器上：

uniform sampler data_on_shader;
x= texture.r//
y = texture.g//
z = texture.b//

xfixed = floor(x*10.)/10. + .5;
yfixed = floor(y*10.)/10. + .5;
zfixed = floor(z*10.)/10. + .5;

float data_received = texture2D(data_on_shader, vec2(xfixed, yfixed*10. + zfixed)).r;

在 2d 纹理中使用行主序会产生什么影响？想法？

提前致谢！

Answer 1

您可以通过将 3d 纹理的每个平面存储在 2d 纹理中来模拟 3d 纹理

然后像这样的函数将让您将其用作 3d 纹理

vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float size) {
    float sliceSize = 1.0 / size;                         // space of 1 slice
    float slicePixelSize = sliceSize / size;              // space of 1 pixel
    float sliceInnerSize = slicePixelSize * (size - 1.0); // space of size pixels
    float zSlice0 = min(floor(texCoord.z * size), size - 1.0);
    float zSlice1 = min(zSlice0 + 1.0, size - 1.0);
    float xOffset = slicePixelSize * 0.5 + texCoord.x * sliceInnerSize;
    float s0 = xOffset + (zSlice0 * sliceSize);
    float s1 = xOffset + (zSlice1 * sliceSize);
    vec4 slice0Color = texture2D(tex, vec2(s0, texCoord.y));
    vec4 slice1Color = texture2D(tex, vec2(s1, texCoord.y));
    float zOffset = mod(texCoord.z * size, 1.0);
    return mix(slice0Color, slice1Color, zOffset);
 }

如果您的 3d 纹理是 8x8x8，那么您将制作一个 64x8 的 2d 纹理，并将 3d 纹理的每个平面放入您的 2d 纹理中。然后，知道最初是 8x8x8 你会传入8.0大小sampleAs3DTexture

precision mediump float;
uniform sampler2D u_my3DTexture;
varying vec3 v_texCoord;

...

#define CUBE_SIZE 8.0

void main() {
  gl_FragColor = sampleAs3DTexture(u_my3DTexture, v_texCoord, CUBE_SIZE);
}

注意：上面的函数假设您想要平面之间的双线性过滤。如果不这样做，您可以简化该功能。

这里有一段这段代码的视频解释，来自这个示例。