Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I went through the google I/O video but did not get exactly how to do it. If somebody could point me to a simple 3D texture implementation using webgl, it would be helpful.

i basically have a volume, a cube, i want to fill it up with pixel data, which comes from a stack of images along the x-y axis. How do i do that?

share|improve this question

Here's the GLSL function copied directly from the Google I/O talk

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);

If you want a 8x8x8 3D texture you'd make 64x8 texture and put each slice of the cube across the texture


Then make a sampler2D uniform in your shader and call

sampleAs3DTexture(yourSampler, your3DTexCoord, size)

where size the size of your cube (in the example size = 8)

share|improve this answer
thanks @gman for your answer! how is it possible to change the code, so that we can have a e.g. 8x8x5 texture instead? It seems that this doesn't work properly: ` vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float size, vec2 texDimensions) { float sliceSize = 1.0 / size; float slicePixelSize = sliceSize / texDimensions.x; float sliceInnerSize = slicePixelSize * (texDimensions.x - 1.0);` Or what does "space of size pixels" mean? – dforce Jan 16 '13 at 13:33
if you make your slices 8x5 so that your cube is 8x5x8 and your 2D version of that texture is width=8*8, height=5 it should just work. No Changes. – gman Jan 17 '13 at 19:23

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.