Show HN: VoxelChain – An Experimental Voxel Engine(voxelchain.app)
voxelchain.app
Show HN: VoxelChain – An Experimental Voxel Engine
https://voxelchain.app/
40 comments
Pretty neat work. I was looking at voxels for a while when working on a 3d engine for a side project. There are a lot of very compelling math & performance reasons to go down this path.
That said, I wonder if newer tech like nanite has started to displace these techniques. When you get to a point where you can rasterize triangles that are smaller than a single pixel at interactive frame rates, one starts to wonder what unique advantages voxels still bring to the table.
That said, I wonder if newer tech like nanite has started to displace these techniques. When you get to a point where you can rasterize triangles that are smaller than a single pixel at interactive frame rates, one starts to wonder what unique advantages voxels still bring to the table.
A few days ago there was actually a Keynote [0] by Brian Karis talking about his experiments with voxels while he was working on Nanite.
- [0] https://www.youtube.com/watch?v=NRnj_lnpORU
- [0] https://www.youtube.com/watch?v=NRnj_lnpORU
Rendering is maybe not the only aspect of 3d engine. The robustness and ease of implementation of boolean operations or other kind of volumetric analysis has for me been one of the reasons to invest time in an open source procedural geometric analysis framework using voxels.
The live demo doesn't work for me on Firefox on macOS (FF 105, macOS 12.4, M1) with a "WebGL is not available" error message.
Console error shows:
Console error shows:
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.Thanks for the report! I've tried to tackle this issue multiple times now, but found that for some reason on MacOS M1, FireFox's WebGL implementation is severely broken on multiple features that the WebGL specification guarantees to be working.
I can't test if this is just for the M1 or also other Mac devices, but Chrome definitely works!
I get "WebGL is not available" on an Intel Mac Pro, macOS 12.5.1, Firefox Developer 105.0b8. ("Intel Mac Pro" is redundant at the time of this writing, but hopefully not for long!)
On the same Mac, I get "Your browser is not supported" for Safari 15.6.1, and Safari Technology Preview R152 (Safari 16.0) with "WebGL 2.0" and "WebGL Draft Extensions" enabled under "Experimental Features."
Using Ungoogled Chromium 105.0.5195.102 (I refuse to use Chrome), the site actually seems to leave the GPU in a messed-up state, going on to cause severe rendering problems in other applications. I'm not sure if this is a Chromium bug or a macOS bug or both.
On the same Mac, I get "Your browser is not supported" for Safari 15.6.1, and Safari Technology Preview R152 (Safari 16.0) with "WebGL 2.0" and "WebGL Draft Extensions" enabled under "Experimental Features."
Using Ungoogled Chromium 105.0.5195.102 (I refuse to use Chrome), the site actually seems to leave the GPU in a messed-up state, going on to cause severe rendering problems in other applications. I'm not sure if this is a Chromium bug or a macOS bug or both.
Just to add that I'm seeing the same error on Fedora 36 with FF 103.0.2 64-bit
Does Chrome work for you?
I am on Fedora 36 and it doesn't run in Firefox either, however it does run in Chrome.
Don't have it installed but if I can find time I'll give it a go
fwiw, it worked on Firefox for Windows.
I get same error on ff 105.0a1 (2022-08-01) (64-bit) running on Ubuntu 22.04 ... however I know WebGL runs fine on this setup
on same laptop using chrome Version 106.0.5249.21 (Official Build) dev (64-bit) get error
[.WebGL-0x1b80018ed800]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: Source and destination textures of the draw are the same.
again this same chrome browser runs other WebGL just fine
on same laptop using chrome Version 106.0.5249.21 (Official Build) dev (64-bit) get error
[.WebGL-0x1b80018ed800]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: Source and destination textures of the draw are the same.
again this same chrome browser runs other WebGL just fine
The optimizations that went into this must be pretty impressive for it to run as well as it does on my Framework laptop (11th gen, no dGPU). I did have to run it in Chrome since Firefox gets the "unsupported browser" error[0]. Glad I tried it out since typically "I made a voxel engine" wouldn't catch my attention. ;)
[0] console: "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."; Firefox 104.0.1; openSUSE Leap 15.4
[0] console: "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."; Firefox 104.0.1; openSUSE Leap 15.4
I've actually spent the majority of development time on optimization rather than actually working on the overall product. The choice to create this project in the browser instead of native certainly made this more challenging! :>
And thanks for the report, I'm gonna give this another try to fix, and otherwise gonna forward this to the Firefox devs.
I understand the depth of field is cool, but the demos (https://voxelchain.app/previewer/Demo.html) are excessively blurry to the point of unusability, and rapidly changes so often it gives me a headache (https://imgur.com/a/bSEFuX7).
Otherwise nice work!
Otherwise nice work!
Yes the DOF definitely needs some more work. For screenshots it somewhat works, but when actively exploring a scene, it's actually more confusing than useful.
EDIT: Reduced the DOF intensity
EDIT: Reduced the DOF intensity
Same with the chromatic aberration
I work on a personal project - a vtt (link in bio) - from time to time that uses webgl2 to render simple objects. Rendering is done in javascript (transpiled from golang) and does fairly well. I am not doing anything quite as intensive as raytracing but I do cast rays in order to generate 3D shadows.
Would you mind explaining what approaches are available for debugging webgl running in webassembly?
Did you chose webassembly for a specific reason rather than just using javascript?
What webgl2 apis do you recommend using to keep FPS reasonably high? I've been using instancing for most of what I render as it is said to be highly efficient.
Just curious!
EDIT: Just looking at your youtube channel and your project is really impressive!
Would you mind explaining what approaches are available for debugging webgl running in webassembly?
Did you chose webassembly for a specific reason rather than just using javascript?
What webgl2 apis do you recommend using to keep FPS reasonably high? I've been using instancing for most of what I render as it is said to be highly efficient.
Just curious!
EDIT: Just looking at your youtube channel and your project is really impressive!
Great to see the project on the front page of HN - congrats on launching!
The author's got tons of video demos on their YouTube channel[0] as well.
[0] https://www.youtube.com/c/xima1
The author's got tons of video demos on their YouTube channel[0] as well.
[0] https://www.youtube.com/c/xima1
Thank you! I've already tried to make a post a couple days ago, but it got immediately hit by the spam filters. Big thanks to the HN support for resolving this so quickly :>
Looks great, congrats on launching!
Are any of the demos interactive, apart from moving the camera? Two of them seem to have buttons, but they don't respond to clicks.
Are any of the demos interactive, apart from moving the camera? Two of them seem to have buttons, but they don't respond to clicks.
You should be able to click on the buttons with a left mouse click. Currently worlds that are exported as HTML doesn't contain any editing functionality except being able to interact with voxels.
Tried this on chrome and it's pretty awesome!
Unfortunately it doesn't work on Firefox on Ubuntu 20.04 with an NVIDIA GTX 3090Ti. :(
Unfortunately it doesn't work on Firefox on Ubuntu 20.04 with an NVIDIA GTX 3090Ti. :(
Working on Firefox 104.0.2 under Windows 11.
Amazing! I was looking to experiment in the voxel space and I will check out the API!
For someone naive to making games with voxel's, are there any resources that you would recommend (rendering, mathematics, ...)? My thought was to look at resources similar to how Noita simulated their pixels (GDC talks) and attempt to scale that into 3D.
For someone naive to making games with voxel's, are there any resources that you would recommend (rendering, mathematics, ...)? My thought was to look at resources similar to how Noita simulated their pixels (GDC talks) and attempt to scale that into 3D.
Reminds me of Voxel Quest from a few years ago. https://www.voxelquest.com Unfortunately that project petered out...
Edit: Changed link from Kickstarter page to project website.
Edit: Changed link from Kickstarter page to project website.
I feel like a lot of the early VoxelQuest community are now working on Veloren. (https://veloren.net/)
Wonderful work! I love how it looks, especially the lighting and indirect voxel radiance, which is gorgeous.
Can you please describe the cellular automata rules you're using, what your goals and techniques were, and what inspired you?
Can you please describe the cellular automata rules you're using, what your goals and techniques were, and what inspired you?
For the lighting I'm using a mix of ray tracing and stochastic cone tracing. Cone tracing mainly because it's very cache friendly and almost doesn't introduce any noise.
I'm not really using a regular cellular automata or rules, it's just similar on the aspect that the simulation is based on neighbors.
I took some inspiration from Noita and Sandspiel, but I found that falling sand simulations aren't flexible enough and I was thinking about how a system could be created to visually program the behaviour of circuits or stuff like falling sand yourself. Also Noita is single buffered, while my simulation is double buffered which actually makes a huge difference in the possible features you can realize. Single buffering is faster but much more chaotic and "random", while with double buffering you get very precise behaviour. Also the simulation was designed from the ground up to be run on the GPU, while Noita and Sandspiel are CPU-based. Here's [0] a video of a previous 2D prototype doing falling sand on the GPU
- [0] https://www.youtube.com/watch?v=aWLPEzngkOo
I took some inspiration from Noita and Sandspiel, but I found that falling sand simulations aren't flexible enough and I was thinking about how a system could be created to visually program the behaviour of circuits or stuff like falling sand yourself. Also Noita is single buffered, while my simulation is double buffered which actually makes a huge difference in the possible features you can realize. Single buffering is faster but much more chaotic and "random", while with double buffering you get very precise behaviour. Also the simulation was designed from the ground up to be run on the GPU, while Noita and Sandspiel are CPU-based. Here's [0] a video of a previous 2D prototype doing falling sand on the GPU
- [0] https://www.youtube.com/watch?v=aWLPEzngkOo
Are you planning to release the source? I want to learn wasm + webgl and this seems like an great project to learn from. If not would love to hear what resources you recommend for learning
I have no plans to open-source the engine, but there is a WIP effort [0] to allow programming with the public API that the engine exposes in the editor on the website. Currently the API is mostly used for procedurally generating worlds.
- [0] https://github.com/VoxelChain/voxelchain-programming
- [0] https://github.com/VoxelChain/voxelchain-programming
Are there any resources you recommend for learning webgl + wasm?
Instead of WebGL, I'd recommend to give WebGPU a try first, as it's a much better designed API. I'd even say that once you've learned the few core concepts of WebGPU (such as command buffers), it's an easier to learn API than the notable chaos that WebGL/OpenGL introduces.
In Firefox : « Your browser is not supported - WebGL is not available. »
Meh.
Meh.
[deleted]
C -> WebGL -> WASM.
Exactly the setup for my next project. Great to see someone else having success with such a workflow.
What is the end goal? I see there is logic included, does that mean it will be a full game engine? Or maybe a fantasy console?
At the current stage, the project is more like an editor and playground for designers and coders. But I'm planning on adding a player and entity system, which would allow creators to build actual tiny games with this.
Not a developer but I'm really impressed with the quality and high fps.
Following to keep updated. Good luck!
Nice work!
Technology wise, I'm using WebGL2 for the rendering and the simulation is coded in C89 and gets compiled to WebAssembly (with multi-threading) using Clang. The simulation is basically a custom cellular automaton and is fully parallelized. Once WebGPU is released, I'm planning to run the simulation on the GPU, instead of the CPU, which will give a massive speed up.
I've been working on this project full-time for over a year now, and finally came to the point of realising a public version of it to play with. There is already some really cool stuff that the community has built, and it's super fun to see how everything evolves!
Let me know what you think and feel free to ask any questions :>