Volumetric Rendering in WebGL

Question

I have a 3D array dataset of scientific data that is to be rendered using WebGL. This is the code that I have wrote and this is the result that I have achieved so far.

I am clueless for two things that are happening to the output canvas:

1. gl.clearcolor(0.4, 0.4, 0.5, 1); is not working when screen render the output

   ---

2. sometimes on drawScene call the code throws error and warning. I believe that warning is vocal to that error but I couldn't debug that is causing that:

warning: WebGL: INVALID_OPERATION: texImage3D: ArrayBufferView not big enough for the request

error : error in texImage3D(TEXTURE_3D{WebGLTexture("unnamed")}, 0, R8, 64, 64, 64, 0, RED, UNSIGNED_BYTE, Uint8Array(65536)): INVALID_OPERATION

---

3)The expected output of the rendered output is:

---

and

---

but the rendered output is not showing the required colormap output.

This is a live demo:

online demo

This is the output if this snippet does not load for any case:

PS: if the snippet does not load slide the slider on the top right.

Answer 1

First issue

gl.texImage3D(gl.TEXTURE_3D, 0, gl.R8, 64, 64, 64, 0, RED, UNSIGNED_BYTE, Uint8Array(65536)): INVALID_OPERATION

R8 with 64 * 64 * 64 = 262144 bytes but the array you are passing is only 65536 bytes big.

Second issue

When the code uploads the lookup map it only takes red

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, gl.RED, gl.UNSIGNED_BYTE, image);

You probably wanted

    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB8, gl.RGB, gl.UNSIGNED_BYTE, image);

Third issue

As for the clear color, WebGL by default, clears the canvas every time it composites it with the page. Because you clear the canvas, then load data asynchronously, then draw the data the flow is

1. clear the drawingbuffer to some color
2. load data async
3. browser composites the canvas's drawingbuffer with your cleared color to the page
4. browser clears the canvas drawingbuffer to 0,0,0,0
5. data finishes loading
6. you draw with WebGL on the cleared drawingbuffer
7. browser composites the canvas's drawingbuffer to the page.

This is why you see it flicker. If you move the call to gl.clear into loadData it will work.