3 ms·

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 blen

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.

dkarras 6y ago
oh boy... type "demoscene" into google and go down the rabbit hole.
- Annatar 6y ago
  Of course; we have a long tradition, as we have existed for many decades now.
dorkwood 6y ago
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/ https://thebookofshaders.com/ [1]: https://www.iquilezles.org/www/index.htm https://www.iquilezles.org/www/index.htm
danwills 6y ago
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!).
Annatar 6y ago
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 https://weblogs.asp.net/fbouma/162232
- royjacobs 6y ago
  To be pedantic, Farbrausch definitely popularized using a custom tool but they were being built in years prior, as well. Source: Wrote a tool in 1998 for our not-great-looking 64k intro "Pure" by demogroup Quad.
  - Annatar 6y ago
    To be pedantic, Red Sector Inc. ("RSI") was the first with the "RSI demomaker" back in 1990 / 1991, which predates everybody and their brother. Just don't retort with 711's intro designer III (https://csdb.dk/release/?id=21021 https://csdb.dk/release/?id=21021), because that's not a demo maker and then we'll have to go back even further to "Demo Demon" (https://csdb.dk/release/?id=174097 https://csdb.dk/release/?id=174097, https://csdb.dk/release/?id=2700 https://csdb.dk/release/?id=2700)...
dominicjj 6y ago
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 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 https://www.youtube.com/watch?v=8--5LwHRhjk

dkarras 6y ago

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

Annatar 6y ago
Of course; we have a long tradition, as we have existed for many decades now.

dorkwood 6y ago

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/ https://thebookofshaders.com/ [1]: https://www.iquilezles.org/www/index.htm https://www.iquilezles.org/www/index.htm

danwills 6y ago

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

Annatar 6y ago

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 https://weblogs.asp.net/fbouma/162232

royjacobs 6y ago
To be pedantic, Farbrausch definitely popularized using a custom tool but they were being built in years prior, as well. Source: Wrote a tool in 1998 for our not-great-looking 64k intro "Pure" by demogroup Quad.
- Annatar 6y ago
  To be pedantic, Red Sector Inc. ("RSI") was the first with the "RSI demomaker" back in 1990 / 1991, which predates everybody and their brother. Just don't retort with 711's intro designer III (https://csdb.dk/release/?id=21021 https://csdb.dk/release/?id=21021), because that's not a demo maker and then we'll have to go back even further to "Demo Demon" (https://csdb.dk/release/?id=174097 https://csdb.dk/release/?id=174097, https://csdb.dk/release/?id=2700 https://csdb.dk/release/?id=2700)...

dominicjj 6y ago

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 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 https://www.youtube.com/watch?v=8--5LwHRhjk