StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There're so many ways to go about this, but I'll suggest the following...</p> <p>As it's pretty much down to writing one single shader, I'd choose [GLOW][1] in favor of Three.js but that's entirely up to you - both will work, I think, but I think GLOW will turn out cleaner. (Actually, not sure Three.js supports drawArrays, which is more or less necessary in my suggestion. Read on.)</p> <p>For data I'd use 4 images (PNG as it's lossless) that is...</p> <ul> <li>128x128 pixels</li> <li>Each pixel has (RGBA) 4x8=32 bits</li> <li>Each bit represents a voxel</li> <li>You need 128/32=4 128x128 images to represent 128x128x128</li> </ul> <p>You simply make one shader which you, between draw calls, switch texture and move a position (which is added to the vertex) up/down. </p> <p>There are a couple of ways to go about creating the vertices for the voxel boxes. There's one straight forward method: you create vertex/normal attributes for each voxel box, and a parallell attribute with UVs+bit (basically a 3D UV-coordinate, if you like) to sample the right bit. This will be huge, memory wise, but probably quite fast.</p> <p>On less straight forward method: Possibly you could survive with just the 3D UV-coordinate attribute plus some kind of vertex index (stored in .w in a vec4 attribute), and in the vertex shader calculate a vertex/normals on the fly. I leave it there, cause it's so much explaining and you can probably figure it out yourself ;) </p> <p>The shader will require vertex textures, as you need to sample the textures described above in the vertex shader. Most computers support this, but not all, unfortunately. </p> <p>If the bit is set, you simply project the vertex as you normally do. If it's not set, you place it behind the near clipping plane and WebGL pipeline will remove it for you. </p> <p>Note that bit operations in WebGL is more or less a pain (shift/and/or aren't available) and you should avoid using ints as these aren't supported on some Mac drivers. I've successfully done it before, so it's very doable.</p> <p>...something like that might work ;D</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload