Condition: A 64KB WebGL Intro

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.

[0]: https://thebookofshaders.com/ [1]: https://www.iquilezles.org/www/index.htm

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).

https://weblogs.asp.net/fbouma/162232

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!).

oh boy... type "demoscene" into google and go down the rabbit hole.

> For the demo, the Final Versions didn't work for me

Me neither. I just see this: https://i.imgur.com/qzP0Qwb.png

Not that insane actually,

https://www.musictech.net/guides/essential-guide/how-fm-synt...

https://github.com/askeksa/Cinter

Going into more modern examples,

https://docs.microsoft.com/en-us/windows/win32/xaudio2/xaudi...

"Realtime GPU Audio" - 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.

> 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.

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

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.

Try "open in a new tab", worked for me.

Here's the list of some of his inspirations: https://twitter.com/FMS_Cat/status/1379090489488470018

'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

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

iOS browsers are miles behind. Sorry.

Here's a nickel kid, get a real browser </dilbert> :)

See:

https://i.pinimg.com/originals/6a/09/f4/6a09f4c78c82187da893...