CODEWITHSUNDEEP
memorynumberswebgl
springrules
springrules

Reputation: 41

WebGl out of memory

I'm trying to render some 3D model in webgl, I have 52 slices of some object of size 750x750, so it is very large number of data.

I'm trying to put all vertices (750 x 750 x 52 = 29250000 x 3, for x, y, z coordinates for all of them) in array, and info's about intensities of vertices in other array (750 x 750 x 52 = 29250000) and I get some strange error "uncaught exception: out of memory",

I'm using plane WEBGL without any library. Anybody have some idea how I can render such big amount of data, is there some limitation of number of vertices in WEBGL?

Upvotes: 1

Views: 1414

Answers (1)

LJᛃ
LJᛃ

Reputation: 8153

This are about 1.7GB of data you're trying to push into graphics memory there, does your graphics card even has that much memory?

You're talking about slices, so you may want to visualize some volumetric data?

If so you could generate one 750x750 vertex grid and then use a rgba texture to offset the individual vertices inside the vertexshader where rgb represent xyz offset from the center of the vertex and 'a' the intensity you want to store, this would actually bring you down to a memory footprint around 19.3 MB for the vertex data + 111 MB for texture data.

You would then render each slice with the same vertexbuffer, and the appropriate texture bound.

Downside is that your offsets and intensity then have a precision of 8bit so not that precise, if this is feasible depends on your use case.

If its not and you're representing 2D data slices you could even use an RGB texture where RG are xy offsets and B is your intensity. In case you need additional precision you can use a RGBA texture, bitshift via multiplication inside the shader to use 12 bits for x and 12 bits for y by packing the data across the three RGB channels and let the alpha channel store the intensity.

EDIT: To achieve the above mentioned memory footprint you would need to derive your texturecoordinates from the vertex positions by dividing xy by 750

vec2 texcoord = pos.xy / 750.0;

or when creating the grid "centered" using

vec2 texcoord = (pos.xy + vec2(375.0)) / 750.0;

Upvotes: 1

Related Questions