Show HN: Procedural Voxel Rendering in WebGL | Hacker News Reader

Show HN: Procedural Voxel Rendering in WebGL

guillaumechereau.github.io

141 pointsguillaumec19 comments

Lovely! Reminds me of L-Systems such as the 2D Context-Free Art http://www.contextfreeart.org/gallery/ and the 3D Structure Synth https://www.flickr.com/groups/structuresynth/

I had planned to use such a system one day for a Ludum Dare entry :)

Yes, the syntax is directly inspired by ContextFreeArt. I didn't know about Structure Synth, it looks very cool.

Doesn't work here:

    Blocked loading mixed active content "http://bootswatch.com/slate/bootstrap.min.css"
    Blocked loading mixed active content ...

You may want to include your JavaScript via "//bootswatch.com/..." instead of hard-coding unencrypted HTTP via "http://bootswatch.com/..."

Thanks, I just put the js in the webpage directly. That should fix it.

Needs more Comanche ;-)

Is this actually voxel rendering, or is it voxels rendered with polygon rendering techniques?

https://en.wikipedia.org/wiki/Voxel#Rendering

Huh? What is "actual voxel rendering"?

I mean, short of using special hardware and raycasting methods, everything is going to be reduced to triangles of some form. Even the more specialized stuff that NVIDIA has been working on.

I mean, short of using special hardware and raycasting methods, everything is going to be reduced to triangles of some form

The state of the art practice is to reduce everything to triangles. But in the 90's, voxels were more proposed as a more "pure" way of viewing complicated/spatial/geometric scientific datasets. If I recall correctly, there were specialized raycasting methods involved.

Not everything has to be drawn as a triangle. You can apply a fragment shader symmetrically to every pixel in a framebuffer, instead of using geometry to apply different fragment shaders within each triangle.

This technique is commonly used to post-process already-rendered scenes, like with a tone mapping shader or depth of field effects. But for simple scenes you can also put an entire rendering engine in the fragment shader, typically using ray marching.

Here are some examples of this technique being used to draw voxels:

https://www.shadertoy.com/results?query=voxel

That is a very good point, I forgot about that option.

Do you think this will be a realistic option at some point for wide-spread use? The stuff I saw from NVIDIA looked like they think a hybrid approach (voxels are shoveled to the GPU in a octree arrangement to handle ray marching, but the output is traditional triangles) would work best for efficiency reasons.

Looks like "voxel" in the classical sense -- i.e., "volumetric pixel" -- rather than the newfangled notion of low fidelity 3D modeling with large, textured cubes (à la Minecraft).

Voxel data is just a bunch of points, the rendering mechanism makes it no more or less 'voxely'. Ultimately you have some scheme to take your voxel data and turn it into triangles that you can display if your goal is 3d. If you use plain cubes, you will get Minecraft-esque things, at least if you get close enough to the surface. If you use a technique like marching cubes or tetrahedron you can make very fluid or blobby looking things but it is very hard to make a flat surface or a sharp corner. There are methods like dual-contouring which can do both sharp corners and fluid surfaces, but are a more complex, and require combining various densities of voxel data to render fine details. Stitching the voxels of different densities has its own challenges, at least without creating gross artifacts at the edges.

I hadn't thought about it that way before. Thanks for the information!

Ultimately you have some scheme to take your voxel data and turn it into triangles that you can display if your goal is 3d.

This assumption is false, which is precisely the point I was trying to make. The only readily available commercial hardware requires the program to turn everything into triangles to be hardware accelerated. But there are means of rendering that can use the voxels directly.

since he's using gl I'd bet on that he's using polygons under the surface.

Nice! What shader (I guess?) is used to make the cube borders looking a bit rounded?

Author here: this is simply using a bump texture.

Very cool and powered by emscripten!

Works on my phone!

Reply on news.ycombinator.com