6 ms·

Ray tracing Voxels made out of Glass

83 points by beefman 4y ago

beefman 4y ago
Video: https://twitter.com/VoxelChain/status/1584184198834769920 https://twitter.com/VoxelChain/status/1584184198834769920
- lastdong 4y ago
  Thank you
yoyopa 4y ago
it's nice but the plot is kind of lacking and i didn't care much for the protagonist.
Twirrim 4y ago
Doesn't seem to work correctly for me on Firefox (on Windows, with an Nvidia 1060 ti), fine on Chrome. On firefox I get an orange triangle in the lower right corner, and that's about it. Moving around causes the texture to build up in that triangle.
- LordHeini 4y ago
  Can confirm. Got an RTX 2070.
- massinstall 4y ago
  Same here.
coldcode 4y ago
My browser is not supported. Maybe they should tell me why.
- red_trumpet 4y ago
  Yeah, they tell me "WebGL is not available", but https://get.webgl.org/ https://get.webgl.org/ seems to differ in that opinion...
  - crispyalmond 4y ago
    Same here, I've tried a couple different browsers but none of them worked. I'm on Linux with a fairly recent AMD GPU.
  - jb1991 4y ago
    Same here, WebGL compliance passes for me, but this site says I do not have WebGL.
  - JoyrexJ9 4y ago
    Same. I've been doing a bunch of WebGL side project stuff and yet this site claims I can't run it. There's some broken detection code I think
  - martyvis 4y ago
    Ditto for Chrome on Android 13 on Pixel 6
- csdreamer7 4y ago
  On Linux Firefox with Intel Alder Lake Mobile graphics I get a "Your browser is not supported" error.
- warning26 4y ago
  Same result on Firefox on Mac.
- felipellrocha 4y ago
  Seems like they're using some features that are not available in all browsers, and failing with a single error message instead of explaining which feature is missing.
- peaslock 4y ago
  My Firefox is now stuck with a note at the top of the screen saying something like "voxelchain.app is controlling your mouse cursor. Please press ESC to take over."
offByJuan 4y ago
Warning. This link brought my aging laptop to lock up. I’m on Firefox.
bugfix-66 4y ago
If you're ray-tracing voxels on a GPU, one technique is to use a single bit per voxel (so 32 voxels per uint32_t: a 0 bit means empty, a 1-bit means filled) and then put the whole voxel space into a Morton space-filling curve like this: https://bugfix-66.com/e2d9aaf5b7f285b4d35c46e87fcf6f7e25d338d7315b16ef2138022930129e2d https://bugfix-66.com/e2d9aaf5b7f285b4d35c46e87fcf6f7e25d338... You can then cast rays through 3D space mapped onto 1D space, with one ray per GPU thread. The space-filling curve gives you locality of reference (just like an octree), and the simple linear nature of the data means you can use a sparse bit vector to represent it. Huge regions without voxels are represented implicitly: https://bugfix-66.com/7256e0772dc3b02d72abf15b171731c933fd44d67de074d679f1e4cb7bb20f79 https://bugfix-66.com/7256e0772dc3b02d72abf15b171731c933fd44... Of course, you want a much larger branching factor (to get a shallower tree) for rendering. You can step your ray through the space without deinterleaving the bits, like this: https://bugfix-66.com/d6907b4d3eb6330241128ffbaeef6194ddeecc6e0d18f7e7057f7b58206e9f2e https://bugfix-66.com/d6907b4d3eb6330241128ffbaeef6194ddeecc... This technique allows extremely detailed (and real-time editable!) voxel worlds with tiny code.
- gfodor 4y ago
  Damn, thanks for this info
- lwansbrough 4y ago
  Do you have a demonstration of this or can you point to anyone using this method?
  - bugfix-66 4y ago
    I used this technique commercially (about 5 years ago) to build voxel representations of the world in real-time from lidar data (Velodyne VLP-32C). Each lidar return (a 3D point) provides a line of empty voxels from the lidar origin to the location where the laser hit a surface. Because you know the light followed that line uninterrupted, you know all the voxels on the line are empty. The lidar is giving you thousands of points per second and the lines (derived from the points) carve the voxel space. The voxel space is rendered continuously. It's very satisfying to watch the space being carved out. I don't know of anyone else using this technique before me, and I don't know of anyone doing it now.
s9w 4y ago
mcbuilder 4y ago
Works great in Chrome on a Titan XP under Linux, decent FPS.
jeroenhd 4y ago
Only works in Chrome. Meh. Seems like it uses a WebGL feature that Firefox doesn't support? Whatever the boolean "isManualMipMappingSupported" refers to probably doesn't work in my browser (because EXT_color_buffer_float is supported by Firefox and so is normal WebGL and those are the three checks that make "WebGL is not available" appear). At least the detection is done based on feature detection rather than simple user agent filtering, so this demo should work when Firefox eventually adds whatever feature this site is relying on. There's a line in the console that says "https://stackoverflow.com/questions/71247789/how-do-you-render-to-an-integer-renderbuffer-in-webgl https://stackoverflow.com/questions/71247789/how-do-you-rend...". This leads me to https://stackoverflow.com/questions/71247789/how-do-you-render-to-an-integer-renderbuffer-in-webgl https://stackoverflow.com/questions/71247789/how-do-you-rend... which appears to be a Firefox bug? GNOME Web gives me a completely blank page so whatever version of WebKit that's running is utterly unsupported as well... Looks like WebGL isn't as broadly supported as I thought!
- olliej 4y ago
  Of course, we're in the era where a browser is either chrome, or it's wrong. For pretty much exactly the same reasons that we used to have "this site requires IE" obnoxiousness.
- Razengan 4y ago
  Worked for me in Safari (Ventura) by changing the User Agent.
  - pindab0ter 4y ago
    Worked for me on Monterey, too.
b34r 4y ago
Doesn’t work in Safari on an iPhone.
- dezmou 4y ago
  Just make a list of things that actualy work on Safari IOS, it will be faster
juunpp 4y ago
I mostly see a red-glowing triangle on the bottom-right of the screen. Is this broken?
dahart 4y ago
Totally awesome rendering, but how do I keep from dropping through the floor? I’m on a laptop+Chrome. The shift keys seem to be the only way to change elevation and both go down. Would be nice if Q & E would go up down, since they’re in the locus of the WASD controls. Is this really ray tracing the glass bits? The way it turns on & off when passing through the glass surface hints at some hybrid shader tricks, perhaps?
DonHopkins 4y ago
I would love to see somebody code this up to run in the browser -- it's from 2003, so I bet it could now run really fast with lots of voxels. It will steal your face right off your head. Happy Halloween! https://www.youtube.com/watch?v=9SplEU05z64 https://www.youtube.com/watch?v=9SplEU05z64 Using Deformations for Browsing Volumetric Data 1,367 views Jul 31, 2009: A prototype user interface for browsing volume data. Presented at IEEE VIS 2003 by Michael J. McGuffin, Liviu Tancau, and Ravin Balakrishnan. For more information, see https://profs.etsmtl.ca/mmcguffin/research/#mcguffin_vis2003 https://profs.etsmtl.ca/mmcguffin/research/#mcguffin_vis2003 https://profs.etsmtl.ca/mmcguffin/research/volumetricBrowsing/ https://profs.etsmtl.ca/mmcguffin/research/volumetricBrowsin...
stoplying1 4y ago
I really don't get why people munge very specific, detailed errors into something so generic as to be outright misleading. WebGL is absolutely available in my browser. The issue, unlike what the site logs to console and does not tell the user (in this case), is: > WebGL warning: readPixels: Format and type RGBA_INTEGER/UNSIGNED_BYTE incompatible with this RGBA8UI attachment. This framebuffer requires either RGBA_INTEGER/UNSIGNED_INT or getParameter(IMPLEMENTATION_COLOR_READ_FORMAT/_TYPE) RGBA_INTEGER/UNSIGNED_INT. Which is gibberish to me, but in fact less confusing than the presented error.

83 points by beefman 4y ago

Video: https://twitter.com/VoxelChain/status/1584184198834769920 https://twitter.com/VoxelChain/status/1584184198834769920

lastdong 4y ago
Thank you

yoyopa 4y ago

it's nice but the plot is kind of lacking and i didn't care much for the protagonist.

Twirrim 4y ago

Doesn't seem to work correctly for me on Firefox (on Windows, with an Nvidia 1060 ti), fine on Chrome. On firefox I get an orange triangle in the lower right corner, and that's about it. Moving around causes the texture to build up in that triangle.

LordHeini 4y ago
Can confirm. Got an RTX 2070.
massinstall 4y ago
Same here.

coldcode 4y ago

My browser is not supported. Maybe they should tell me why.

red_trumpet 4y ago
Yeah, they tell me "WebGL is not available", but https://get.webgl.org/ https://get.webgl.org/ seems to differ in that opinion...
- crispyalmond 4y ago
  Same here, I've tried a couple different browsers but none of them worked. I'm on Linux with a fairly recent AMD GPU.
- jb1991 4y ago
  Same here, WebGL compliance passes for me, but this site says I do not have WebGL.
- JoyrexJ9 4y ago
  Same. I've been doing a bunch of WebGL side project stuff and yet this site claims I can't run it. There's some broken detection code I think
- martyvis 4y ago
  Ditto for Chrome on Android 13 on Pixel 6
csdreamer7 4y ago
On Linux Firefox with Intel Alder Lake Mobile graphics I get a "Your browser is not supported" error.
warning26 4y ago
Same result on Firefox on Mac.
felipellrocha 4y ago
Seems like they're using some features that are not available in all browsers, and failing with a single error message instead of explaining which feature is missing.
peaslock 4y ago
My Firefox is now stuck with a note at the top of the screen saying something like "voxelchain.app is controlling your mouse cursor. Please press ESC to take over."

offByJuan 4y ago

Warning. This link brought my aging laptop to lock up. I’m on Firefox.

bugfix-66 4y ago

If you're ray-tracing voxels on a GPU, one technique is to use a single bit per voxel (so 32 voxels per uint32_t: a 0 bit means empty, a 1-bit means filled) and then put the whole voxel space into a Morton space-filling curve like this: https://bugfix-66.com/e2d9aaf5b7f285b4d35c46e87fcf6f7e25d338d7315b16ef2138022930129e2d https://bugfix-66.com/e2d9aaf5b7f285b4d35c46e87fcf6f7e25d338... You can then cast rays through 3D space mapped onto 1D space, with one ray per GPU thread. The space-filling curve gives you locality of reference (just like an octree), and the simple linear nature of the data means you can use a sparse bit vector to represent it. Huge regions without voxels are represented implicitly: https://bugfix-66.com/7256e0772dc3b02d72abf15b171731c933fd44d67de074d679f1e4cb7bb20f79 https://bugfix-66.com/7256e0772dc3b02d72abf15b171731c933fd44... Of course, you want a much larger branching factor (to get a shallower tree) for rendering. You can step your ray through the space without deinterleaving the bits, like this: https://bugfix-66.com/d6907b4d3eb6330241128ffbaeef6194ddeecc6e0d18f7e7057f7b58206e9f2e https://bugfix-66.com/d6907b4d3eb6330241128ffbaeef6194ddeecc... This technique allows extremely detailed (and real-time editable!) voxel worlds with tiny code.

gfodor 4y ago
Damn, thanks for this info
lwansbrough 4y ago
Do you have a demonstration of this or can you point to anyone using this method?
- bugfix-66 4y ago
  I used this technique commercially (about 5 years ago) to build voxel representations of the world in real-time from lidar data (Velodyne VLP-32C). Each lidar return (a 3D point) provides a line of empty voxels from the lidar origin to the location where the laser hit a surface. Because you know the light followed that line uninterrupted, you know all the voxels on the line are empty. The lidar is giving you thousands of points per second and the lines (derived from the points) carve the voxel space. The voxel space is rendered continuously. It's very satisfying to watch the space being carved out. I don't know of anyone else using this technique before me, and I don't know of anyone doing it now.

s9w 4y ago

mcbuilder 4y ago

Works great in Chrome on a Titan XP under Linux, decent FPS.

jeroenhd 4y ago

Only works in Chrome. Meh. Seems like it uses a WebGL feature that Firefox doesn't support? Whatever the boolean "isManualMipMappingSupported" refers to probably doesn't work in my browser (because EXT_color_buffer_float is supported by Firefox and so is normal WebGL and those are the three checks that make "WebGL is not available" appear). At least the detection is done based on feature detection rather than simple user agent filtering, so this demo should work when Firefox eventually adds whatever feature this site is relying on. There's a line in the console that says "https://stackoverflow.com/questions/71247789/how-do-you-render-to-an-integer-renderbuffer-in-webgl https://stackoverflow.com/questions/71247789/how-do-you-rend...". This leads me to https://stackoverflow.com/questions/71247789/how-do-you-render-to-an-integer-renderbuffer-in-webgl https://stackoverflow.com/questions/71247789/how-do-you-rend... which appears to be a Firefox bug? GNOME Web gives me a completely blank page so whatever version of WebKit that's running is utterly unsupported as well... Looks like WebGL isn't as broadly supported as I thought!

olliej 4y ago
Of course, we're in the era where a browser is either chrome, or it's wrong. For pretty much exactly the same reasons that we used to have "this site requires IE" obnoxiousness.
Razengan 4y ago
Worked for me in Safari (Ventura) by changing the User Agent.
- pindab0ter 4y ago
  Worked for me on Monterey, too.

b34r 4y ago

Doesn’t work in Safari on an iPhone.

dezmou 4y ago
Just make a list of things that actualy work on Safari IOS, it will be faster

juunpp 4y ago

I mostly see a red-glowing triangle on the bottom-right of the screen. Is this broken?

dahart 4y ago

Totally awesome rendering, but how do I keep from dropping through the floor? I’m on a laptop+Chrome. The shift keys seem to be the only way to change elevation and both go down. Would be nice if Q & E would go up down, since they’re in the locus of the WASD controls. Is this really ray tracing the glass bits? The way it turns on & off when passing through the glass surface hints at some hybrid shader tricks, perhaps?

DonHopkins 4y ago

I would love to see somebody code this up to run in the browser -- it's from 2003, so I bet it could now run really fast with lots of voxels. It will steal your face right off your head. Happy Halloween! https://www.youtube.com/watch?v=9SplEU05z64 https://www.youtube.com/watch?v=9SplEU05z64 Using Deformations for Browsing Volumetric Data 1,367 views Jul 31, 2009: A prototype user interface for browsing volume data. Presented at IEEE VIS 2003 by Michael J. McGuffin, Liviu Tancau, and Ravin Balakrishnan. For more information, see https://profs.etsmtl.ca/mmcguffin/research/#mcguffin_vis2003 https://profs.etsmtl.ca/mmcguffin/research/#mcguffin_vis2003 https://profs.etsmtl.ca/mmcguffin/research/volumetricBrowsing/ https://profs.etsmtl.ca/mmcguffin/research/volumetricBrowsin...

stoplying1 4y ago

I really don't get why people munge very specific, detailed errors into something so generic as to be outright misleading. WebGL is absolutely available in my browser. The issue, unlike what the site logs to console and does not tell the user (in this case), is: > WebGL warning: readPixels: Format and type RGBA_INTEGER/UNSIGNED_BYTE incompatible with this RGBA8UI attachment. This framebuffer requires either RGBA_INTEGER/UNSIGNED_INT or getParameter(IMPLEMENTATION_COLOR_READ_FORMAT/_TYPE) RGBA_INTEGER/UNSIGNED_INT. Which is gibberish to me, but in fact less confusing than the presented error.