9 ms·
Condition: A 64KB WebGL Intro
- sxp 6y agoThe minified version is broken for me with "VM9:2 WebGL: too many errors, no more errors will be reported to the console for this context" and the source is unreadable. But the dev build at https://fms-cat.com/condition/pages/condition_640x360_dev.html https://fms-cat.com/condition/pages/condition_640x360_dev.ht... works.
- zamadatix 6y agoThat's just a warning telling you no more warnings will be printed. It's still more time before the page will change to "click me" where you can start the demo. The dev version is unpacked so you don't have to wait for this.
- chrisco255 6y agoFor the demo, the Final Versions didn't work for me, but the Dev Builds did: https://fms-cat.com/condition/pages/ https://fms-cat.com/condition/pages/ Pretty impressive though!
- BugsJustFindMe 6y ago> For the demo, the Final Versions didn't work for me Me neither. I just see this: https://i.imgur.com/qzP0Qwb.png https://i.imgur.com/qzP0Qwb.png
- Asdrubalini 6y agoI also get gibberish both on Brave and Chrome on Linux.
- deleted 6y ago[deleted]
- ev1 6y agoIf you have a slightly slower connection, it's not really gibberish. It's a page that has a ton of binary data in it, and then some JS to introspect itself and evaluate it.
- hdjfktntn 6y agoI think that's by design (minimization technique). Leave the page open for a minute or so, and it will advance. It did the same for me.
- BugsJustFindMe 6y agoHmm. Interesting. Only in Chrome though?
- coder543 6y agoIt worked in Firefox for me, just took a moment to get past the gibberish text
- darkwater 6y agoIt works (after a while) in Chromium on Linux for me but Firefox 87 for Linux just displays the gibberish
- XiZhao 6y agoWow! This is so impressive, I get old school PS2 / Kingdom Hearts / DDR vibes from this.
- sprash 6y agoThe attention to detail and the pace is impressive. Very Japanese demo style indeed.
- SavantIdiot 6y agoVery well done! This was clearly inspired by Gantz Graf by Autechre: https://www.youtube.com/watch?v=ev3vENli7wQ https://www.youtube.com/watch?v=ev3vENli7wQ
- mrdoob2 6y agoHere's the list of some of his inspirations: https://twitter.com/FMS_Cat/status/1379090489488470018 https://twitter.com/FMS_Cat/status/1379090489488470018
- danwills 6y ago'Glitch' by Kewlers was out around a similar time as Gantz Graf, and has some similar vibrations: http://www.pouet.net/prod.php?which=10058 http://www.pouet.net/prod.php?which=10058
- ghusbands 6y agoA central rotating/pulsating object and some surrounding graphical effects, timed with music, has been done in the demo scene for decades. It's doubtful Gantz Graf was inspiration for this or most other such demos.
- SavantIdiot 6y agoThank you, oh expert on rotating/pulsating objects and some surrounding graphical effects, timed with music. I am humbled.
- FractalHQ 6y agoHow.... did you do this. I must learn. Did you really just code all of it? Or did you make it in blender and export to gltf? I’m a music producer and a blender user who has been learning webgl using pixiJS and babylonJS. I want to know how to get to this level.
- dkarras 6y agooh boy... type "demoscene" into google and go down the rabbit hole.
- Annatar 6y agoOf course; we have a long tradition, as we have existed for many decades now.
- dorkwood 6y agoThese demos tend to make heavy use of raymarching, which is an alternative way of representing geometry that doesn't rely on polygons. This is why these demos are often so small; they generate 3D scenes using what are known as 'distance field' equations, rather than loading in the polygon data from some external file (like a gltf). Basically, you'll need to learn to write shader code if you want to replicate this. A good place for beginners to start is The Book of Shaders[0]. It doesn't mention raymarching specifically, but it will give you the building blocks to understand it later. Once you have a basic understanding of shaders, check out the site of Inigo Quilez[1] to learn more about raymarching and distance fields. [0]: https://thebookofshaders.com/ https://thebookofshaders.com/ [1]: https://www.iquilezles.org/www/index.htm https://www.iquilezles.org/www/index.htm
- danwills 6y agoYeah! (only an aspiring 'scener here) but I think "you really just code all of it" is a very nice summary of one of the core ideas of the demoscene. In "full size" demos there are often many exceptions to that: Non-procedural assets (some exported from other software) like soundtrack, models, textures, animation and so on, which really expands the possibilities, it's really just the tiny size categories that squeezes them out (maybe also that compression ends up slightly less interesting/useful than creative reconstruction?). There's also strong respects paid for achieving something that previously required a large blob of data, using a tiny amount of code, like all the cool voice synth stuff that was used to add lyrics to 64kb intros years ago (eg: Candytron by Farbrausch that was released at Breakpoint in 2003!).
- geuis 6y agoMmm none of these work for me on iOS Safari. Just loads gibberjish.
- silly-silly 6y agoHere's a nickel kid, get a real browser </dilbert> :) See: https://i.pinimg.com/originals/6a/09/f4/6a09f4c78c82187da893f311ee48f5e3.png https://i.pinimg.com/originals/6a/09/f4/6a09f4c78c82187da893...
- greggman3 6y agoBlame Apple. Safari still doesn't support the Web Audio API in a standard compliant way. it's been 10 yrs since the Web Audio API shipped and it's still only available in Safari as "webkitAudioContext" instead of just "AudioContext" My guess is that's not the only place Safari falls short for this demo. You also need WebGL2 which Apple has only shipped behind a flag this year. Firefox and Google shipped without a flag 4 years ago
- londons_explore 6y agoiOS browsers are miles behind. Sorry.
- GuB-42 6y agoI was there when it was shown. Awesome. For the context, this intro got third place at Revision PC 64k competition. Revision is the largest "pure" demoparty, and its competitions are of the highest level, especially this year. The PC 64k category is one of the most demanding, as nowadays, you are expected to make a full demo, with good sounding music, direction, multiple scenes, etc... but with the 64k constraint, which, in practice, means that everything has to be procedurally generated. And FMS_Cat did all that by himself! Code, graphics and music. He also manages to stay humble about it. Big thumbs up.
- adamredwoods 6y agoMake sure your gfx card is good enough. For me, not so much: glcat.module.js:1109 Uncaught Error: GLCat.getExtension: The extension "EXT_disjoint_timer_query_webgl2" is not supported at GLCat.getExtension (glcat.module.js:1110) at new GPUTimer (GPUTimer.ts:17) at new Component (Component.ts:115) at new Quad
- bane 6y agoThe entries this year at Revision were almost definitely a technical and artistic high-note for the scene. The demo More by mfx was also in Javascript I believe and was also quite incredible. https://www.pouet.net/prod.php?which=88631 https://www.pouet.net/prod.php?which=88631 For people interested, check out https://www.pouet.net/party.php?which=1550&when=2021 https://www.pouet.net/party.php?which=1550&when=2021 for the list of entries and results and https://www.youtube.com/c/RevisionCaptures/videos https://www.youtube.com/c/RevisionCaptures/videos for video captures of all the entries. Some incredible stuff, including a GPU powered synth.
- polm23 6y agoFMS Cat also shared a list of some of his inspirations for this demo on Twitter. https://twitter.com/FMS_Cat/status/1379090489488470018 https://twitter.com/FMS_Cat/status/1379090489488470018
- Synaesthesia 6y agoThe music was fantastic, as were the visuals. Damn
- 29athrowaway 6y agoOne of the cool aspects of this demo is that it is open source. Not many demos are, in fact, most are not. Some technical aspects are revealed in talks and workshops, but rarely the source is given. The music is done with a shader, which is in itself insane. https://github.com/FMS-Cat/condition/blob/dev/src/music/music.vert https://github.com/FMS-Cat/condition/blob/dev/src/music/musi...
- pjmlp 6y agoNot that insane actually, https://www.musictech.net/guides/essential-guide/how-fm-synthesis-works/ https://www.musictech.net/guides/essential-guide/how-fm-synt... https://github.com/askeksa/Cinter https://github.com/askeksa/Cinter Going into more modern examples, https://docs.microsoft.com/en-us/windows/win32/xaudio2/xaudio2-introduction https://docs.microsoft.com/en-us/windows/win32/xaudio2/xaudi... "Realtime GPU Audio" - https://queue.acm.org/detail.cfm?id=2484010 https://queue.acm.org/detail.cfm?id=2484010 Because WebGL doesn't expose compute shaders, one is stuck misusing the vertex shader for the same purpose.
- londons_explore 6y ago> The music is done with a shader, which is in itself insane. I don't really see any advantage/disadvantage to doing music with a shader Vs CPU. No modern CPU would struggle with the computation for this code, and nor would a GPU. It seems it's just a matter of the programmer being more familiar with the world of graphics.
- postalrat 6y agoI've heard a GPU synth can be smaller. Not familiar with them enough to know exactly why.
- pjmlp 6y agoIt looks great, but the startup time, oh boy it takes ages beyond loading 64KB demos on Amiga and MS-DOS PC, then one wonders why WebGL games don't take off.
- zokier 6y agoLong startup time are norm in size-limited entries. E.g. the winning 64k entry had about 10-15s load time on the very high end party computer, and it is a native windows executable: https://youtu.be/6INL_pxX8L4 https://youtu.be/6INL_pxX8L4
- pjmlp 6y ago27 seconds on the Youtube video for the first pixel drawing. On this ThinkPad P15 G1 workstation, it took about 2 minutes on Firefox and makes the browser unresponsive to anything other than the click me text. Not at all comparable.
- tech-no-logical 6y agodoesn't work in firefox-beta / linux for me (dev version errors about GL functions). sort of works on chrome, but stutters... (amd ryzen pro 4750u / ubuntu 20.10) from what I _can_ see it looks cool. I used to love demos in the old days on my 386 with gravis ultrasound :)
- trollied 6y agoThis is my favourite demo from the same competition: https://www.youtube.com/watch?v=O3T1-nadehU https://www.youtube.com/watch?v=O3T1-nadehU
- dkarras 6y agoThat was awesome!
- fctorial 6y agoFor some reason I'm getting a PNG file if I curl this url: https://fms-cat.com/condition/pages/condition_1920x1080_final.html https://fms-cat.com/condition/pages/condition_1920x1080_fina...
- deleted 6y ago[deleted]