由 2 维数组表示的 3 维数组 - [英] A 3 dimensional array represented by a 2 dimensional array-

问题描述

所以在 WebGL 中，我可以存储最多 2 维的纹理 - 并在着色器中使用 texture2D(无论)读取它；

So in WebGL, I can store a texture in up to 2 dimensions- and read it in the shader using texture2D(whatever);

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

If i wanted to store a 3 dimensional texture so that I can read 3-dimensions worth of data on the shader, how would I do it?

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

Here are my ideas- and I am wondering if I am approaching it correctly:

在 JavaScript 中:

In 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 纹理中使用行主序的效果如何?想法?

Something to the effect of using row major order within a 2d texture? Thoughts?

提前致谢！

推荐答案

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

You can simulate a 3d texture by storing each plane of the 3d texture in a 2d texture

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

Then a function like this will let you use it as a 3d texture

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

If your 3d texture was 8x8x8 then you'd make a 2d texture that is 64x8 and put each plane of the 3d texture in your 2d texture. Then, knowing that was originally 8x8x8 you'd pass in 8.0 for the size to 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);
}

注意:上面的函数假设您想要平面之间的双线性过滤.如果你不这样做，你可以简化函数.

Note: the function above assumes you want bilinear filtering between the planes. If you don't you can simplify the function.

这里有一段代码视频说明，来自此示例.

这篇关于由 2 维数组表示的 3 维数组 -的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！