0

因此，在 WebGL 中，我可以存储最多 2 个维度的纹理，并使用 texture2D(whatever) 在着色器中读取它；

如果我想存储一个 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;

在二维纹理中使用行主要顺序的效果？想法？

提前致谢！

4

1 回答 1

5

您可以通过将 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);
}

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

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

于 2013-11-13T01:17:05.420 回答