6 ms·

Show HN: WebGL Voxel Engine

113 points by nergal 9y ago

robinduckett 9y ago
Cool, lacking the ability to strafe.
- fatbird 9y ago
  This. Make A and D strafe instead of turn, relying on the mouse to aim, and it'll be very playable. As it is, not so much. But still pretty cool.
- cirowrc 9y ago
  Totally
swiley 9y ago
It's almost playable with no hardware accelerated graphics.
macawfish 9y ago
Here is my wishlist: Something like GVDB that runs in WebGL and can handle arbitrary dimensional volumes. It's a very tall order!
- saltcured 9y ago
  By arbitrary dimensional, do you really mean N-dimensional, or just 3D with more channels of data (than just RGBA), or just larger 3D spans? The OpenGL and WebGL primitives aren't really suited for N-dimensional data since there are specific buffer types and intrinsics for 1D, 2D, and 3D texture handling. You can fake more than 4 channels using more than one texture. You can't really get around the per-axis size limits because these are points of portability and also directly related to resource allocation limits in practice, i.e. GPU RAM is consumed as the cube of 3D texture span. You can abuse WebGL textures a little bit by turning off interpolation and using nearest sampling as if it were a basic array access. But then you still have to write your own array packer and N-dimensional array addressing arithmetic to map the ND coordinate into the 3D coordinate needed by the texture sampler. And you still have to live with such tiny texture size limits that it seems quite pointless except as an academic exercise. I've used this to fit larger 1D arrays into a 3D texture without exceeding a 1024 or 2048 per-axis limit. Actual ND techniques are more feasible in a GPGPU language like OpenCL, where you have more basic memory access and SIMD intrinsics. But I think it will be quite some time before these capabilities are exposed in a web language and also with sufficiently high resource limits to do anything non-trivial.
  - macawfish 9y ago
    I do :) I've written a tool that bakes out clifford algebra functions into glsl (using sympy/sage to generate the clifford algebra). I want to use it to play with volumetric data... in the web browser! Obviously that's very lofty... foolish even. If it's even possible, it'd be hard. I don't have the chops at the moment, and neither does chrome! "But I think it will be quite some time before these capabilities are exposed in a web language and also with sufficiently high resource limits to do anything non-trivial." Realistically, that's probably more what I'm actually waiting for. And GVDB could be perfect, except for its super awkward licensing and platform lock. Ugh! I think there are some other realtime VDB projects out there, so I might check into those some time. In the meanwhile, when I get around to it, I'll probably end up doing low poly ("low-simplex") stuff. A more realistic goal for the browser of today (and for my skillset) is something that can intersect lower dimensional manifolds with simplices embedded in higher dimensions. Dealing with normals will be mind bending. But I believe it can be done! My project is to play with 4D (and higher) Moebius transformations of animated polygon scenes. First, the animated polygons need to be converted into 4d polytopes. Using the intersection tool described above, the 4d scene can be "scrubbed" in a time-like way by transforming the intersecting manifold. Except that now it's possible to apply conformal transformations to the 4d polytopes before scrubbing through! This is an old demo of 3d Moebius transformations applied to key-framed polygons: http://hyperspectives.wondering.xyz/moebius/hyperhorse.html http://hyperspectives.wondering.xyz/moebius/hyperhorse.html Except that now I'm wondering about what 4d Moebius transformations look like. How do they deform animation? I'm pretty sure that under a 4d moebius transformation, all four of the horse's legs could be running at different rates without ever interfering with one another. Of course they'd all be different sizes too. Also, spatial dimensions of the horse geometry would melt into the time dimension, depending on what kind of manifold was doing the time-slicing. What would it look like??! I want to see! I might actually be able to get away with using stereographic projection/rejection for time-slicing instead of intersections, but I need to think that through very, very hard. I think it'd probably result in some gnarly polygons. By the way, another thing I'm really looking into is this: https://link.springer.com/chapter/10.1007/978-3-642-54382-1_17 https://link.springer.com/chapter/10.1007/978-3-642-54382-1_... I've managed to implement these clifford-bezier surface patches in Sage, haven't gotten around to OpenGL. EDIT: By the way, in case you're curious, the idea that the horse's legs could move at different frequencies without intersecting one another is very much related to "spacetime dilation" in the theory relativity. The principle that would keep the hyper-horse from self intersecting is conformal invariance, which is closely related to Lorentz invariance.
aeorgnoieang 9y ago
I'm (slowly) working on my own game largely inspired by a previous version of this engine. The repo with the previous version: - [Lallassu/Qake: Qake voxel-engine demo](https://github.com/Lallassu/Qake https://github.com/Lallassu/Qake) I was really floored by how much functionality was possible with what seems like so little code.
- nergal 9y ago
  I'm glad to hear that someone uses my work! Perhaps you have something to share, a demo/screenshots? :)
  - aeorgnoieang 9y ago
    Thanks for the work! I had started an earlier version in Unity but I really dislike fighting what feels like a giant extraneous system. I was blown away by your demo; in particular the environmental damage. You 'sold' me on writing something similar. I'm probably yak shaving now but it feels so much more right to be programming instead of fighting Unity.
- ixtli 9y ago
  There needs to be more of this. I know how hard it is to work on a stylized video game all by yourself: just remember its a marathon not a sprint so pace yourself and keep at it! <3
  - aeorgnoieang 9y ago
    > just remember its a marathon not a sprint so pace yourself and keep at it! Thanks! This really is the best sentiment for personal passion projects. Tho an occasional sprint can be fun too! This 'isn't my first rodeo'. I've been partially implementing ambitious software projects for years!
harel 9y ago
This is really nice work and the code is very readable and clear! Thank you
soup10 9y ago
Very cool, controls are a bit awkward though.
- sgt 9y ago
  Controls (WASD) are way too quick on my computer. I can only tap it slightly and it already moves quite a number of degrees, usually past the point I wanted it to move. Also, having the world rotate around you makes me nauseous. That being said, very clever and I am really impressed with how smooth this game is.
wybiral 9y ago
Very cool looking game! What's the purpose of the node server in the code (as opposed to just opening the HTML document in a browser)? Do you have plans to use websockets or something to add multiplayer?
- nergal 9y ago
  Thanks! No it's just a simple way of running the game locally without a real webserver and without issues with x-origin.
Geee 9y ago
After playing one round this completely froze my Macbook Pro and I had to force boot.
- nergal 9y ago
  Strange, I've developed it on my Macbook pro mostly and I never had such issues. I've used google-chrome.
  - hutzlibu 9y ago
    Probably a WebGL-Issue and not much you can do about it ...
  - Geee 9y ago
    I have 2017 MBP with touch bar. The sound kept playing, but mouse and keyboard didn't respond to anything. The game canvas was black. Couldn't quit browser or switch window from keyboard so only option was to force boot.
- rasz 9y ago
  Your laptop is broken. Apple doesnt like cooling, and cooks discrete GPUs by default. Throttling starts at some ridiculous temperature like 80 or 100 C! This is why they were twice now forced to do massive recalls due to bad GPUs.
ixtli 9y ago
i think the degree to which Three.JS has allowed programmers access to the world of modern 3d is severely understated. If you haven't tried it, go to threejs.org/examples/ and copy and paste some source, it's _incredibly_ simple to start hacking.
- ixtli 9y ago
  Though i think to fully appreciate this you would have had to have bashed your head against the wall of platform dependent opengl in the past...
  - cirowrc 9y ago
    When I was still going to computer graphics classes the ThreeJS source code helped me learn a bunch - the code is pretty straightforward when it comes to the basic to at least get a scene and an OBJ loader working with some shaders.
- aidos 9y ago
  It's a world I'd like to enter more myself but I've found it's a little hard to get started. With a degree in maths / comp sci, I have a pretty good understanding of linear algebra. 20 years experience coding means I'm quite happy to hack away. Thing I've struggled with is all the background. People talk about shaders and launch straight into the details, but I've barely been able to find any background information that sets the scene. Last night I made a game with Unity, which was fun and pretty simple to start with and I'd like to understand more about it all. Where does someone with plenty of comp and maths knowledge but no 3D experience (other than tinkering with the likes of Blender) go to learn about it quickly?
  - HammadB 9y ago
    To learn about shaders, I've found that some reading up on the graphics pipeline. Along with https://thebookofshaders.com/ https://thebookofshaders.com/ was been very helpful on giving me a foundation for shader programming. I was also like you, solid bg in CS/Linear Algebra but intimidated by the seemingly steep learning curve of graphics. I dabbled with Unity and now I've started to play more with shader programming and understanding GPU's.
consto 9y ago
Needs a loading indicator, I thought it was broken until the assets started popping in.
- felipemnoa 9y ago
  Agree. Had I not read your comment before opening the link I would have quit before it fully loaded.
felipemnoa 9y ago
This is a very nice looking game. Congrats! Love the ambience of the game. It is very immersive.
lichenwarp 9y ago
wasd = colemak hell
0x4a42 9y ago
It's unplayable on an AZERTY keyboard. On such layout the controls should be: ZQSD instead of WASD. AZERTY layout: https://en.wikipedia.org/wiki/AZERTY#/media/File:KB_France.svg https://en.wikipedia.org/wiki/AZERTY#/media/File:KB_France.s...

113 points by nergal 9y ago

robinduckett 9y ago

Cool, lacking the ability to strafe.

fatbird 9y ago
This. Make A and D strafe instead of turn, relying on the mouse to aim, and it'll be very playable. As it is, not so much. But still pretty cool.
cirowrc 9y ago
Totally

swiley 9y ago

It's almost playable with no hardware accelerated graphics.

macawfish 9y ago

Here is my wishlist: Something like GVDB that runs in WebGL and can handle arbitrary dimensional volumes. It's a very tall order!

saltcured 9y ago
By arbitrary dimensional, do you really mean N-dimensional, or just 3D with more channels of data (than just RGBA), or just larger 3D spans? The OpenGL and WebGL primitives aren't really suited for N-dimensional data since there are specific buffer types and intrinsics for 1D, 2D, and 3D texture handling. You can fake more than 4 channels using more than one texture. You can't really get around the per-axis size limits because these are points of portability and also directly related to resource allocation limits in practice, i.e. GPU RAM is consumed as the cube of 3D texture span. You can abuse WebGL textures a little bit by turning off interpolation and using nearest sampling as if it were a basic array access. But then you still have to write your own array packer and N-dimensional array addressing arithmetic to map the ND coordinate into the 3D coordinate needed by the texture sampler. And you still have to live with such tiny texture size limits that it seems quite pointless except as an academic exercise. I've used this to fit larger 1D arrays into a 3D texture without exceeding a 1024 or 2048 per-axis limit. Actual ND techniques are more feasible in a GPGPU language like OpenCL, where you have more basic memory access and SIMD intrinsics. But I think it will be quite some time before these capabilities are exposed in a web language and also with sufficiently high resource limits to do anything non-trivial.
- macawfish 9y ago
  I do :) I've written a tool that bakes out clifford algebra functions into glsl (using sympy/sage to generate the clifford algebra). I want to use it to play with volumetric data... in the web browser! Obviously that's very lofty... foolish even. If it's even possible, it'd be hard. I don't have the chops at the moment, and neither does chrome! "But I think it will be quite some time before these capabilities are exposed in a web language and also with sufficiently high resource limits to do anything non-trivial." Realistically, that's probably more what I'm actually waiting for. And GVDB could be perfect, except for its super awkward licensing and platform lock. Ugh! I think there are some other realtime VDB projects out there, so I might check into those some time. In the meanwhile, when I get around to it, I'll probably end up doing low poly ("low-simplex") stuff. A more realistic goal for the browser of today (and for my skillset) is something that can intersect lower dimensional manifolds with simplices embedded in higher dimensions. Dealing with normals will be mind bending. But I believe it can be done! My project is to play with 4D (and higher) Moebius transformations of animated polygon scenes. First, the animated polygons need to be converted into 4d polytopes. Using the intersection tool described above, the 4d scene can be "scrubbed" in a time-like way by transforming the intersecting manifold. Except that now it's possible to apply conformal transformations to the 4d polytopes before scrubbing through! This is an old demo of 3d Moebius transformations applied to key-framed polygons: http://hyperspectives.wondering.xyz/moebius/hyperhorse.html http://hyperspectives.wondering.xyz/moebius/hyperhorse.html Except that now I'm wondering about what 4d Moebius transformations look like. How do they deform animation? I'm pretty sure that under a 4d moebius transformation, all four of the horse's legs could be running at different rates without ever interfering with one another. Of course they'd all be different sizes too. Also, spatial dimensions of the horse geometry would melt into the time dimension, depending on what kind of manifold was doing the time-slicing. What would it look like??! I want to see! I might actually be able to get away with using stereographic projection/rejection for time-slicing instead of intersections, but I need to think that through very, very hard. I think it'd probably result in some gnarly polygons. By the way, another thing I'm really looking into is this: https://link.springer.com/chapter/10.1007/978-3-642-54382-1_17 https://link.springer.com/chapter/10.1007/978-3-642-54382-1_... I've managed to implement these clifford-bezier surface patches in Sage, haven't gotten around to OpenGL. EDIT: By the way, in case you're curious, the idea that the horse's legs could move at different frequencies without intersecting one another is very much related to "spacetime dilation" in the theory relativity. The principle that would keep the hyper-horse from self intersecting is conformal invariance, which is closely related to Lorentz invariance.

aeorgnoieang 9y ago

I'm (slowly) working on my own game largely inspired by a previous version of this engine. The repo with the previous version: - [Lallassu/Qake: Qake voxel-engine demo](https://github.com/Lallassu/Qake https://github.com/Lallassu/Qake) I was really floored by how much functionality was possible with what seems like so little code.

nergal 9y ago
I'm glad to hear that someone uses my work! Perhaps you have something to share, a demo/screenshots? :)
- aeorgnoieang 9y ago
  Thanks for the work! I had started an earlier version in Unity but I really dislike fighting what feels like a giant extraneous system. I was blown away by your demo; in particular the environmental damage. You 'sold' me on writing something similar. I'm probably yak shaving now but it feels so much more right to be programming instead of fighting Unity.
ixtli 9y ago
There needs to be more of this. I know how hard it is to work on a stylized video game all by yourself: just remember its a marathon not a sprint so pace yourself and keep at it! <3
- aeorgnoieang 9y ago
  > just remember its a marathon not a sprint so pace yourself and keep at it! Thanks! This really is the best sentiment for personal passion projects. Tho an occasional sprint can be fun too! This 'isn't my first rodeo'. I've been partially implementing ambitious software projects for years!

harel 9y ago

This is really nice work and the code is very readable and clear! Thank you

soup10 9y ago

Very cool, controls are a bit awkward though.

sgt 9y ago
Controls (WASD) are way too quick on my computer. I can only tap it slightly and it already moves quite a number of degrees, usually past the point I wanted it to move. Also, having the world rotate around you makes me nauseous. That being said, very clever and I am really impressed with how smooth this game is.

wybiral 9y ago

Very cool looking game! What's the purpose of the node server in the code (as opposed to just opening the HTML document in a browser)? Do you have plans to use websockets or something to add multiplayer?

nergal 9y ago
Thanks! No it's just a simple way of running the game locally without a real webserver and without issues with x-origin.

Geee 9y ago

After playing one round this completely froze my Macbook Pro and I had to force boot.

nergal 9y ago
Strange, I've developed it on my Macbook pro mostly and I never had such issues. I've used google-chrome.
- hutzlibu 9y ago
  Probably a WebGL-Issue and not much you can do about it ...
- Geee 9y ago
  I have 2017 MBP with touch bar. The sound kept playing, but mouse and keyboard didn't respond to anything. The game canvas was black. Couldn't quit browser or switch window from keyboard so only option was to force boot.
rasz 9y ago
Your laptop is broken. Apple doesnt like cooling, and cooks discrete GPUs by default. Throttling starts at some ridiculous temperature like 80 or 100 C! This is why they were twice now forced to do massive recalls due to bad GPUs.

ixtli 9y ago

i think the degree to which Three.JS has allowed programmers access to the world of modern 3d is severely understated. If you haven't tried it, go to threejs.org/examples/ and copy and paste some source, it's _incredibly_ simple to start hacking.

ixtli 9y ago
Though i think to fully appreciate this you would have had to have bashed your head against the wall of platform dependent opengl in the past...
- cirowrc 9y ago
  When I was still going to computer graphics classes the ThreeJS source code helped me learn a bunch - the code is pretty straightforward when it comes to the basic to at least get a scene and an OBJ loader working with some shaders.
aidos 9y ago
It's a world I'd like to enter more myself but I've found it's a little hard to get started. With a degree in maths / comp sci, I have a pretty good understanding of linear algebra. 20 years experience coding means I'm quite happy to hack away. Thing I've struggled with is all the background. People talk about shaders and launch straight into the details, but I've barely been able to find any background information that sets the scene. Last night I made a game with Unity, which was fun and pretty simple to start with and I'd like to understand more about it all. Where does someone with plenty of comp and maths knowledge but no 3D experience (other than tinkering with the likes of Blender) go to learn about it quickly?
- HammadB 9y ago
  To learn about shaders, I've found that some reading up on the graphics pipeline. Along with https://thebookofshaders.com/ https://thebookofshaders.com/ was been very helpful on giving me a foundation for shader programming. I was also like you, solid bg in CS/Linear Algebra but intimidated by the seemingly steep learning curve of graphics. I dabbled with Unity and now I've started to play more with shader programming and understanding GPU's.

consto 9y ago

Needs a loading indicator, I thought it was broken until the assets started popping in.

felipemnoa 9y ago
Agree. Had I not read your comment before opening the link I would have quit before it fully loaded.

felipemnoa 9y ago

This is a very nice looking game. Congrats! Love the ambience of the game. It is very immersive.

lichenwarp 9y ago

wasd = colemak hell

0x4a42 9y ago

It's unplayable on an AZERTY keyboard. On such layout the controls should be: ZQSD instead of WASD. AZERTY layout: https://en.wikipedia.org/wiki/AZERTY#/media/File:KB_France.svg https://en.wikipedia.org/wiki/AZERTY#/media/File:KB_France.s...