
Show HN: A simple infinite world in WebGL - erkaman
https://erkaman.github.io/wireframe-world/www/demo.html
======
erkaman
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](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...](https://github.com/Erkaman/wireframe-world/blob/gh-
pages/wireframe_world.js). It is relatively well-commented, so it should be
easy to understand, I hope.

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

~~~
robotmlg
Node

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

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

------
xigency
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](https://news.ycombinator.com/item?id=12183383)

~~~
erkaman
Thanks for the tip!

~~~
xigency
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.

------
dinosaurs
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.

~~~
leeoniya
for those who've never had the pleasure:
[https://www.youtube.com/watch?v=c6nY0QkG9nQ](https://www.youtube.com/watch?v=c6nY0QkG9nQ)

------
dlubarov
I made a similar demo: [http://dlubarov.github.io/webgl-infinite-terrain-
demo/](http://dlubarov.github.io/webgl-infinite-terrain-demo/)

Source code: [https://github.com/dlubarov/webgl-infinite-terrain-
demo](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.

------
ComodoHacker
Reminds me
[https://en.wikipedia.org/wiki/The_Thirteenth_Floor](https://en.wikipedia.org/wiki/The_Thirteenth_Floor)

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

------
tomc1985
Anyone remember that old Excel easter egg?

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

------
joakleaf
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?

~~~
Baristan
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.

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

------
taternuts
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!

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

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

------
d33
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.

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

------
andybak
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...

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

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

------
pavel_lishin
Looks like a Perturbator cover.

------
oldboyFX
I'll just leave this here
[https://i.ytimg.com/vi/KEkrWRHCDQU/maxresdefault.jpg](https://i.ytimg.com/vi/KEkrWRHCDQU/maxresdefault.jpg)

