7 ms·
Show HN: A simple infinite world in WebGL
- d33 10y agoI 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.
- erkaman 10y agoIn 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/wireframe_world.js https://github.com/Erkaman/wireframe-world/blob/gh-pages/wir.... It is relatively well-commented, so it should be easy to understand, I hope.
- mkishi 10y agoIt 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. :)
- _nalply 10y agoAfter some time the glitches are reset and the process restarts.
- bartread 10y agoIt'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.
- deejbee 10y agoFrom 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.
- asimuvPR 10y agoIt is really nice. Thanks for sharing. Is there any particular reason you did this?
- erkaman 10y agoI just wanted to try making something vaporwave-like. I really like the aesthetics of it.
- jackfrodo 10y ago>var f = 0.0015974 Where did this number come from? Is it arbitrary?
- erkaman 10y agoJust 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.
- Eyght 10y agoI'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".
- tonmoy 10y agoAnother example: bootstrap
- ReFruity 10y agoNext step is to extract these constants for user to play with.
- ben_jones 10y ago"If you can't run it for some reason, a recorded gif of the demo can be found here" WebGL in a nutshell.
- mwiedmann 10y agoThe .js file is over 10,000 lines of code. How did it get so bloated from your 450 lines of code?
- robotmlg 10y agoNode
- klodolph 10y agoWhile the tooling uses Node, the bloat comes from the bundle which includes canvas-fit, regl, and gl-mat4.
- whostolemyhat 10y agoSince when do libraries used in your code classify as 'bloat'?
- eshyong 10y agoIt's probably a bundled JS file containing all of his dependencies.
- evan_ 10y agoIt includes imported libraries, primarily regl[1] which is 8228 lines long. [1]: https://github.com/mikolalysenko/regl/blob/gh-pages/dist/regl.js https://github.com/mikolalysenko/regl/blob/gh-pages/dist/reg...
- erkaman 10y agoI 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...
- thristian 10y agoIf you can, you should really turn on anisotropic filtering, so that the grid-lines on the horizontal surfaces don't go all blurry.
- abetusk 10y agoMight I recommend some fine CC-BY (vapor|synth|retro)wave music to accompany it? * https://stratfordct.bandcamp.com/album/airglow-memory-bank https://stratfordct.bandcamp.com/album/airglow-memory-bank * http://stratfordct.bandcamp.com/album/stratford-ct-melior http://stratfordct.bandcamp.com/album/stratford-ct-melior * http://stratfordct.bandcamp.com/album/stratford-ct-lux-aestiva http://stratfordct.bandcamp.com/album/stratford-ct-lux-aesti... * http://stratfordct.bandcamp.com/album/stratford-ct-secret-selection-1-10 http://stratfordct.bandcamp.com/album/stratford-ct-secret-se... * http://stratfordct.bandcamp.com/album/stratford-ct-1-yr-anniversary-compilation http://stratfordct.bandcamp.com/album/stratford-ct-1-yr-anni... * http://stratfordct.bandcamp.com/album/stratford-ct-aestas http://stratfordct.bandcamp.com/album/stratford-ct-aestas * http://stratfordct.bandcamp.com/album/literature-prose-ep http://stratfordct.bandcamp.com/album/literature-prose-ep
- degenerate 10y agoThanks for these! My personal favorite retro-synth mix right now: https://soundcloud.com/quicksexfm/qsfm25 https://soundcloud.com/quicksexfm/qsfm25
- bottled_poe 10y agoI blindly clicked this at work. Big mistake.
- govindpatel 10y agohaha. same think happened to me. But I took my headphone out and started to listen to this. It turned out to be good one. :)
- erkaman 10y agoThank you for the links! Since I did not really know where to find CC-licensed music, I did include any music.
- chronial 10y ago
- fitzwatermellow 10y agoThanks 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 ;)
- userbinator 10y agoIndeed, keep going, and you may reach this level of awesome: https://www.youtube.com/watch?v=_YWMGuh15nE 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 https://news.ycombinator.com/item?id=11848097)
- david-given 10y agoThe author then went on to produce a WebGL version in ShaderToy: https://www.shadertoy.com/view/MdX3Rr https://www.shadertoy.com/view/MdX3Rr He also wrote ShaderToy...
- erkaman 10y agoInigio Quillez' homepage has lots of cool articles about this kind of stuff, so please check it out: http://www.iquilezles.org/www/index.htm http://www.iquilezles.org/www/index.htm
- eridius 10y agoFor anyone using Safari, if you're seeing a blank page, try Safari Technology Preview. It works there.
- pavel_lishin 10y agoLooks like a Perturbator cover.
- joakleaf 10y agoThere 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?
- erkaman 10y agoI 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...
- Baristan 10y agoIt 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 10y agoYou can use fixed-point math to avoid this, but it doesn't get all the cool language support.
- joshkpeterson 10y agoI don't think it's webgl, but reminded me of this: http://procedural-generation.tumblr.com/post/147955954018/the-worm-room-the-triennale-game-collection-is-a http://procedural-generation.tumblr.com/post/147955954018/th...
- ComodoHacker 10y agoReminds me https://en.wikipedia.org/wiki/The_Thirteenth_Floor https://en.wikipedia.org/wiki/The_Thirteenth_Floor
- deleted 10y ago[deleted]
- dc2 10y agoThis guy's source is terse and clean. I like it.
- erkaman 10y agoThank you. I spent lots of time cleaning it up and writing comments, so I appreciate that.
- dinosaurs 10y agoVery 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 10y agofor those who've never had the pleasure: https://www.youtube.com/watch?v=c6nY0QkG9nQ https://www.youtube.com/watch?v=c6nY0QkG9nQ
- safeharbourio 10y agoOh, my dear, what are you doing to me! +1
- xigency 10y agoThis 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 10y agoThanks for the tip!
- xigency 10y agoI 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.
- tomc1985 10y agoAnyone 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
- oldboyFX 10y agoI'll just leave this here https://i.ytimg.com/vi/KEkrWRHCDQU/maxresdefault.jpg https://i.ytimg.com/vi/KEkrWRHCDQU/maxresdefault.jpg
- dlubarov 10y agoI 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.
- deleted 10y ago[deleted]
- govindpatel 10y agothe best part of this was it created illusion of moving forward. Nice one. Adding a sound to this can help more.
- andybak 10y agoCrikey. 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...
- taternuts 10y agoThe 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!