4 ms·
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 foun
by erkaman 10y ago
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/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