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.
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".
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. :)
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.
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 ;)
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.
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.
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
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.
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.
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!
60 comments
[ 3.1 ms ] story [ 131 ms ] threadAs 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.
Is there any particular reason you did this?
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.
WebGL in a nutshell.
[1]: https://github.com/mikolalysenko/regl/blob/gh-pages/dist/reg...
* 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
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)
He also wrote ShaderToy...
Are these caused by some z-buffer issues caused by increasingly large coordinates?
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.
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.
demo.js:10655 Uncaught SyntaxError: Unexpected token {
Tested on Chromium 48.0.2564.116, available under Fedora.
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
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.
Your cool little project reminds me of this: 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.
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...