Show HN: A simple infinite world in WebGL | Hacker News Reader

Show HN: A simple infinite world in WebGL

erkaman.github.io

181 pointserkaman56 comments

In this demo, I implemented an infinitely continuing, vaporwave-like world in WebGL. If you can't run it for some reason, a recorded gif of the demo can be found here: https://github.com/Erkaman/wireframe-world.

As for the implementation, it is not very difficult stuff; I divide up the world into chunks(just like in Minecraft), and as the camera traverses the world, the chunks that become out of range are thrown away and are no longer rendered. And in the far away horizon I keep adding new chunks, to give the illusion that the world is infinite.

So it is not very complicated stuff; the source code is only ~450LOC, which can be found here: https://github.com/Erkaman/wireframe-world/blob/gh-pages/wir.... It is relatively well-commented, so it should be easy to understand, I hope.

It is really nice. Thanks for sharing.

Is there any particular reason you did this?

I just wanted to try making something vaporwave-like. I really like the aesthetics of it.

>var f = 0.0015974 Where did this number come from? Is it arbitrary?

Just arbitrary hand-tweaking. It was chosen because I though it looked good. When doing procedural generation like this, you basically just tweak constants 'til it looks good. There's no deeper reason behind it.

I'm hoping that this kind of interaction will be part of one of our first encounters with aliens, sometime in the far future. The aliens would ask why we had done something a certain way and the human answer would be: "Because it looks good".

Another example: bootstrap

Next step is to extract these constants for user to play with.

It starts visually glitching out after 10 seconds or so, for me. Doesn't really ruin the experience, but as it appears to get more pronounced with time, I don't think we'll reach infinity. :)

After some time the glitches are reset and the process restarts.

It's very cool up until everything starts going a bit see through - although it does still look good even then.

Funny when I read the word "glitching" I assumed it would be a framerate hitch, which might be cause by GC, but I did a quick timeline grab and it seems OK for desktop. Collects about 12MB every 10-12 seconds. That might have more of an impact on mobile of course, especially Android.

I'm having that kind of issue with a game I'm working on - in my case I'm being way too cowboy about creating and throwing away JS objects for particles (only in 2D on a canvas) and it's causing GC framerate glitches on Android.

From what I've experienced and read about, it seems the best approach is not to create/destroy objects at run time since it can be an expensive operation and cause frame rate issues. It's better to hide them and build as many as you can when the app is started up.

Yes, object pools are a good solution for elements like bullets in bullet hell games and similar applications.

"If you can't run it for some reason, a recorded gif of the demo can be found here"

WebGL in a nutshell.

The .js file is over 10,000 lines of code. How did it get so bloated from your 450 lines of code?

Node

While the tooling uses Node, the bloat comes from the bundle which includes canvas-fit, regl, and gl-mat4.

Since when do libraries used in your code classify as 'bloat'?

It's probably a bundled JS file containing all of his dependencies.

It includes imported libraries, primarily regl[1] which is 8228 lines long.

[1]: https://github.com/mikolalysenko/regl/blob/gh-pages/dist/reg...

I didn't spend much time optimising the size. I thought it loaded fast enough for me. But maybe it doesn't load as fast on a slow connection...

If you can, you should really turn on anisotropic filtering, so that the grid-lines on the horizontal surfaces don't go all blurry.

Might I recommend some fine CC-BY (vapor|synth|retro)wave music to accompany it?

* https://stratfordct.bandcamp.com/album/airglow-memory-bank

* http://stratfordct.bandcamp.com/album/stratford-ct-melior

* http://stratfordct.bandcamp.com/album/stratford-ct-lux-aesti...

* http://stratfordct.bandcamp.com/album/stratford-ct-secret-se...

* http://stratfordct.bandcamp.com/album/stratford-ct-1-yr-anni...

* http://stratfordct.bandcamp.com/album/stratford-ct-aestas

* http://stratfordct.bandcamp.com/album/literature-prose-ep

Thanks for these! My personal favorite retro-synth mix right now: https://soundcloud.com/quicksexfm/qsfm25

I blindly clicked this at work. Big mistake.

haha. same think happened to me. But I took my headphone out and started to listen to this. It turned out to be good one. :)

Thank you for the links! Since I did not really know where to find CC-licensed music, I did include any music.

You absolutely should – the music made this a lot more awesome :).

Thanks for posting. This brings back a lot of fond memories for me. The good old days when I was still teaching myself DirectX and OpenGL. Copying and updating ancient demoscene tutorials. These sorts of vector terrain flythroughs, infinite wormholes, looping roller coasters, dancing sinewave text animations and eternally zooming julia sets were my bread and better for understanding geometry and shading. The Moment of Zen here is, as you noted, how little actual code is required to build a world. Keep going ;)

Indeed, keep going, and you may reach this level of awesome:

https://www.youtube.com/watch?v=_YWMGuh15nE

(Quite realistic terrain generated by a 4 kilobyte binary, along with music. Source code and its discussion here: https://news.ycombinator.com/item?id=11848097)

The author then went on to produce a WebGL version in ShaderToy: https://www.shadertoy.com/view/MdX3Rr

He also wrote ShaderToy...

Inigio Quillez' homepage has lots of cool articles about this kind of stuff, so please check it out: http://www.iquilezles.org/www/index.htm

This is really cool! I think it might look a bit cleaner if you changed the filtering on your shader to be nearest, instead of linear.

I posted this previously but I didn't want to distract from your submission, so I made my own submission to a similar thing I created: https://news.ycombinator.com/item?id=12183383

Thanks for the tip!

I think the code for regl for filtering is here: tex: regl.texture({ min: 'linear mipmap linear', mag: 'linear', wrap: 'repeat', data: makeWireframeTexture() }),

So the change would be to use 'linear' or 'nearest'. It's actually the mipmaps that are making things look blurry. Basically, the graphics card is scaling down the image and scaling it back up, which makes it blurry.

Very nice. This reminded me of the flight simulator easter egg in old versions of MS Excel.

Does anyone have some good resources on getting started with WebGL or graphics programming in general? I know the libraries (like Three.JS) but I wouldn't know where to start or how to use them. I see Three.JS being used in fancy websites all the time now and would like to stay up to date.

for those who've never had the pleasure: https://www.youtube.com/watch?v=c6nY0QkG9nQ

Source code: https://github.com/dlubarov/webgl-infinite-terrain-demo

It's also Perlin noise, but with multiple layers and finer granularity, so it appears more detailed. You can control the camera with WASD and the mouse.

Reminds me https://en.wikipedia.org/wiki/The_Thirteenth_Floor

Yes !

Yeah, that kind of thing was exactly what I was trying to achieve in this demo.

Anyone remember that old Excel easter egg?

Your cool little project reminds me of this: https://www.youtube.com/watch?v=c6nY0QkG9nQ

There seems to be some missing triangles after a while (10-20 sec.) on Chrome on OSX

Are these caused by some z-buffer issues caused by increasingly large coordinates?

I think it has something to do with the z-buffer. My other theory is that WebGL is not given enough time to upload all the geometry, as the camera traverses the world and adds more chunks. I am not really sure what causes it...

It does looks like float32 errors from moving the camera too far in a scene.

Seen it before while trying to create an infinite city in WebGL. I ended up creating a world offset for each sector, and every time the camera's position was more than a sector length, reposition the camera in the scene and adjust the sector offsets. May not be the best solution, but it was quick and worked.

You can use fixed-point math to avoid this, but it doesn't get all the cool language support.

The 10k LOC behind this kind of belie the 'simple' adjective in the title. I guess this is simple if you are familiar with WebGL? Anyways, very cool stuff!

This guy's source is terse and clean. I like it.

Thank you. I spent lots of time cleaning it up and writing comments, so I appreciate that.

I only get a blank page and the following in the console:

demo.js:10655 Uncaught SyntaxError: Unexpected token {

Tested on Chromium 48.0.2564.116, available under Fedora.

For anyone using Safari, if you're seeing a blank page, try Safari Technology Preview. It works there.

Crikey. I have never heard of 'vaporwave' and it's been around for 5 years and has a Wikipedia page. God I feel old sometimes.

Can someone tell me if Dubstep has jumped the shark yet? Does anyone even still say 'jumped the shark'?

/me shuffles off to play The Dead Kennedys on his 8-track...

the best part of this was it created illusion of moving forward. Nice one. Adding a sound to this can help more.

Oh, my dear, what are you doing to me! +1

Looks like a Perturbator cover.

I'll just leave this here https://i.ytimg.com/vi/KEkrWRHCDQU/maxresdefault.jpg

Reply on news.ycombinator.com