由一个二维阵列 - psented一个3维数组再$ P $ [英] 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维的价值对着色器的数据，会怎么做呢？

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?

下面是我的ideas-，我想知道如果我接近它正确的：

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那么你会成为一个2D纹理是64x8，把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.

有这个code视频说明这里这从此示例。

这篇关于由一个二维阵列 - psented一个3维数组再$ P $的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！