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.
How.... 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.
These 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.
Demos are almost always generated and displayed at runtime. The music is composed of samples generated at runtime by additive synthesis which is just adding waveforms of differing frequencies together when you get down to it. It doesn't take many lines of code to produce CD quality instruments that can be arranged as a soundtrack.
Today's 64k intros offload their drawing onto the GPU using shaders and a technique called raymarching which is a form of fixed-step raytracing that can be done in real time. Essentially the objects you see are painted with math: instead of thousands of vertices for a 3d fractal or a complex object, a formula is fed in to the ray marcher and it returns a shape with colors and lighting. Combining shapes using unions and intersections is then done and often the shape formula will take time as a parameter as well. To play with this concept yourself go to https://www.shadertoy.com/browse and see how shader programs are rendered into incredible scenes with astonishingly few lines of code.
For a wonderful look at the creation process, see the grandfather of raymarching Inigo Quilez create a selfie of a girl from scratch using formulas here: https://www.youtube.com/watch?v=8--5LwHRhjk
The way this is traditionally done is by writing a demomaker tool, then writing a player for the procedures (instructions) which the demomaker generates.
One can then generate the instructions to the 3D rendering engine and the highly custom software synthesizer in the player. This information easily fits in (less than) 64 KB. The achievement is not in the final result, but in writing the demomaker.
The German group Farbrausch (former Sanity on the Commodore Amiga) was the first to invent this procedural generation technique. Almost two decades ago, they wrote their own demomaker called .werkzeug (.tool).
Yeah! (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!).
If 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.
One 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.
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.
It 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.
Long 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
The 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.
That'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.
Make 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
doesn'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 :)
A 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.
Blame 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
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.