Difference between revisions of "4K Intro"

Revision as of 02:06, 17 April 2024

Introduction

This category is dedicated to modern 4K Intro development for Windows / Win32, which consist of a small OpenGL/D3D/DX Framework, a softsynth and 1 or more pixelshaders. As such this won't be discussion legacy mesh techniques as few 4k intros make use of those techniques anymore.

Most Windows 4K Intros will be setup using C, sometimes in combination with assembler, or in some cases pure assembler. In general writing everything in assembler should give you a little more freedom in pushing/popping your function arguments and register usage.

Graphics are usualy done using OpenGL / GLSL or Direct3D/DX11.

Tools

There are a couple of options for tools, but generally these tools are often used

Visual Studio / Vscode / GCC Compiler
Crinkler or other external packer for compression ( https://crinkler.net )
Shader minifier ( https://github.com/laurentlb/Shader_Minifier )
Optional / Alternatively: NASM Assembler ( https://nasm.us/ )
Optional: Local/Online GLSL Shader editing environment (e.g. Shadertoy, Kodelife, bonzo, etc.)
Optional: Timeline/Camera tooling
Optional: gnuRocket for timing.

Intro design

When designing a 4k intro, it is best practice to consider each of the following aspects seperately:

How much size budget do you want to allocate to render pipeline, sound, scene building, (post)shading, progression?
Abstract vs organic vs scene/world-building
Single scene vs multiple scenes
Ray-Intersections or Ray Marching
What kind of softsynth to use, or writing your own
Render pipeline - Single or multipass (post/audio)shaders.
Scene, Camera and progression handling
Text - Do you want to include text and if so: Are you using WindowsGlyphs texture or SDF

Design pitfalls

Here are a few design pitfalls you should try to avoid if necessary.

Undirected raymarch experiments

Wiggly domain repetition shadertoy experiments, with or without walking glows, might be sufficient for a shaderjam or shader-showdown, but usually make a sub-par 4k intro. Don't do it, even if it has the compofiller banner on the slide.

The Rebranded cornell box - Just a shiny sphere bro!

Its great as a rendertest reference for your PBR / pathtracing tests, but it doesn't make a compelling intro. The times you still see a reflective/pathtraced sphere and/or box with music mask as a 4k intro is staggering. Sadly sceners still accept these rebranded cornell boxes as legit and even winning/cdc receiving intros, because shineys. But my intuition says these will be looked upon like the countless early 2000s goa+bended sphers/torus intros that fail to stand the test of time.

Shitty synths

There are a few great intros out there that have great visuals but are ruined by glopawful synths or music. If you are not good at music yourself, find yourself a musician to work with.

Size Budgeting

A general rule of thumb is to work above the target size for most of the development and work your way down when the production is closer to completion.

There are many ways to split the same bytes, here are the top-5 4K Intros at Revision 2024 that have made wildly different choices.

Ranking	Intro Title	Progression / Storytelling	Object complexity	Graphics Fidelity	Sound	Notes	Link
1	Drifting Shore	Low	Low	Very-High	Low	Ray-Intersection + Pathtracing	https://demozoo.org/productions/342196/
2	Dubplate	Medium	Low	High	Very-High	SDF Text	https://demozoo.org/productions/342202/
3	Return to nature	High	High	Low	Low	-	https://demozoo.org/productions/342200/
4	Brainfiller	Low	Medium	High	High	GLSL Softsynth	https://demozoo.org/productions/342203/
5	Once Upon A Time In A Datacenter	High	Very-High	Low	Low	Custom CPU synthcode	https://demozoo.org/productions/342199/

Graphics fidelity

TBA

Music budget

Got a musician to work with you and deliver a great tune? Don't accept it right out of the gate and feel free to argue about possible optimisations that can be done to the tune that will not affect the end-result massively. This is done by all of the better-known 4k intro developers and a good musician will be open to discussion and aware of the different limitation and choices that have to be made when it comes to size budgeting.

Setting up your framework

A 4k framework / intro can be setup in either C or Assembler, or a combination of both. You can either go with an existing framework (some of them are quite capable) or build your own taylored to your own needs. Also remember that even though there are many more ways to save size than in for example a 1k intro, that every byte saved here is one you can spent / budget elsewhere.

The groundlevel basics of a framework are discussed on the 1K Intro wiki at http://www.sizecoding.org/wiki/1K_Intro
From here you can setup your audiobuffer add a softsynth of choice, or write your own (either in GLSL or Software)
Most likely you'll like to add a few more function imports to properly pass uniforms to your shader.
Optionally: Add another render-pass by feeding the output of the main shader to a post-shading process. This adds a few more texture calls to the framework
Optionally: Add an init pass where you prepare (glyph) textures and other buffers you'd like to feed into your main shader.
Optionally: Hook up a Scene/Camera/Timing system during development

Graphics

Once you've budgeted and designed your intro, it is time to go to work.

Prebuild your scene in an external tool

For convenience and turn-around time, its perfectly fine to use external online/offline tools like Shadertoy, Posh-Brolly, Kodelife, Bonzo or others to setup you main scene(s) / effects.

Ray-Intersetions vs Raymarching

In theory ideally you'd like to have multi-sample, multiple bounces, highly flexible, highly accurate raymarching But in practice this is as of year (2024) still impossible to do realtime on most systems, therefore a choice has to be made between exact interesctions of primitives / raytracing vs ray marching. What are the differences in usecases and what are their pros and cons:

Description	Raymarching	Ray-Intersection	Examples
Domain-Repetition	Yes	No	TBA
Fast Multi-Sample	No	Yes	TBA
Twisting & Blending	Yes	No	TBA
Shape-Blending	Yes	?	TBA

Post processing: Don't miss the low-hanging fruit

Having a proper post processing step can greatly improve the overall visual quality of your intro. So in 4k space i would suggest a postshader pass at minimum, which depending on your size budget you can use for things like Vignetting, DOF, tone-mapping, anti-aliasing, chromatic abberation, etc.

But even if your 4k intro doesn't have a seperate post-shader pass, adding a bit of in-shader vignetting / gamma correction / tone-mapping to your intro are relative easy/cheap ways to improve visual quality of your intro, so why leave those options off the table? For inspiration, You can check out the article at Here is an article at https://30fps.net/pages/post-processing/ for a few things you can do to improve your visuals in post.

Sound

Here is an overview of various Synths / Music options. Depending on the exact track, you are looking at approx 1k - 1.5k compressed for music for most 4k intros.

Synth	Type	Description	Size overhead	Link
4klang	Subtractive	Most popular softsynth	Medium (1 note, 1 instrument at 620b)	https://github.com/gopher-atz/4klang
Sointu	Subtractive	4klang fork with improvements	Medium (1 note, 1 instrument at 562b )	https://github.com/vsariola/sointu/
Oidos	Additive	-	Medium (1 note, 1 instrument at 600b)	https://github.com/askeksa/Oidos
Clinkster	FM	-	Medium (1 note, 1 instrument at 590b)	http://crinkler.net/Clinkster.zip
GLSL Softsynth	-	Write it yourself	Small/Medium (depends on usecase)	-
MIDI Player	MIDI	Using default Windows midi sounds	Small	-

Compression

Crinkler is the most commonly used compression at the moment for 4K intros. It maximizes compression by taking over the linking process, setting up the windows header for you and if needed re-arrange the different segments of the code.

Crinkler reports

When using the /REPORT:intro_report.html feature, crinkler will generate a report and heatmap for your intro binary. This is helpful to see how well your (shader)code compresses and where you can maybe gain a few more bytes.

Word about the resulting executable

Please note that when using crinkler in TINYHEADER mode, the resulting windows header will most likely trigger virus scanners / Microsoft Defender and mark it as suspicious content, which is a side-effect in recent years. Just exclude your work directory from this scan during development. Compo machines will run without these scanners too, but it is good practice to include a (slightly larger) safe version too in the final archive.

@@ Line 1: / Line 1: @@
 == Introduction ==
-This category is dedicated to 4K Intros for Windows Win32
+This category is dedicated to modern 4K Intro development for [[Windows|Windows / Win32]], which consist of a small OpenGL/D3D/DX Framework, a softsynth and 1 or more pixelshaders. As such this won't be discussion legacy mesh techniques as few 4k intros make use of those techniques anymore.
-Windows 4K Intros can be setup in C or Assembler, or a combination of both, with only the few windows calls that are used being linked in.
+Most Windows 4K Intros will be setup using C, sometimes in combination with assembler, or in some cases pure assembler. In general writing everything in assembler should give you a little more freedom in pushing/popping your function arguments and register usage.
-In general writing everything in assembler should give you a little more freedom in pushing/popping your function arguments and register usage, but in the past quality intros have been written in both languages.
-Graphics are usualy done using OpenGL / GLSL, but there are 4K intros out there that have used D3D/DX11 instead.
+Graphics are usualy done using OpenGL / GLSL or Direct3D/DX11.
 === Tools ===
 There are a couple of options for tools, but generally these tools are often used
 * Visual Studio / Vscode / GCC Compiler
-* Crinkler or other external packer for compression
+* Crinkler or other external packer for compression ( https://crinkler.net )
-* Shader minifier
+* Shader minifier ( https://github.com/laurentlb/Shader_Minifier )
-* Optional / Alternatively: NASM Assembler
+* Optional / Alternatively: NASM Assembler ( https://nasm.us/ )
 * Optional: Local/Online GLSL Shader editing environment (e.g. Shadertoy, Kodelife, bonzo, etc.)
+* Optional: Timeline/Camera tooling
+* Optional: gnuRocket for timing.
 == Intro design ==
@@ Line 20: / Line 20: @@
 * How much size budget do you want to allocate to render pipeline, sound, scene building, (post)shading, progression?
-* Abstract vs scene-buildin
+* Abstract vs organic vs scene/world-building
+* Single scene vs multiple scenes
 * Ray-Intersections or Ray Marching
-* What kind of softsynth to use
+* What kind of softsynth to use, or writing your own
-* Render pipeline - Single or multi (post)shader,
+* Render pipeline - Single or multipass (post/audio)shaders.
+* Scene, Camera and progression handling
 * Text - Do you want to include text and if so: Are you using WindowsGlyphs texture or SDF
+=== Design pitfalls ===
+Here are a few design pitfalls you should try to avoid if necessary.
-== Setup ==
+==== Undirected raymarch experiments ====
+Wiggly domain repetition shadertoy experiments, with or without walking glows, might be sufficient for a shaderjam or shader-showdown, but usually make a sub-par 4k intro. Don't do it, even if it has the compofiller banner on the slide.
+====  The Rebranded cornell box - Just a shiny sphere bro! ====
+Its great as a rendertest reference for your PBR / pathtracing tests, but it doesn't make a compelling intro.
+The times you still see a reflective/pathtraced sphere and/or box with music mask as a 4k intro is staggering.
+Sadly sceners still accept these rebranded cornell boxes as legit and even winning/cdc receiving intros, because shineys.
+But my intuition says these will be looked upon like the countless early 2000s goa+bended sphers/torus intros that fail to stand the test of time.
+====  Shitty synths ====
+There are a few great intros out there that have great visuals but are ruined by glopawful synths or music. If you are not good at music yourself, find yourself a musician to work with.
+== Size Budgeting ==
+A general rule of thumb is to work above the target size for most of the development and work your way down when the production is closer to completion.
+There are many ways to split the same bytes, here are the top-5 4K Intros at Revision 2024 that have made wildly different choices.
+{| class="wikitable"
+|-
+! Ranking !! Intro Title !! Progression / Storytelling !! Object complexity || Graphics Fidelity !! Sound !! Notes !! Link
+|-
+| 1 || Drifting Shore || Low || Low || Very-High || Low || Ray-Intersection + Pathtracing || https://demozoo.org/productions/342196/
+|-
+| 2 || Dubplate || Medium || Low || High || Very-High || SDF Text || https://demozoo.org/productions/342202/
+|-
+| 3 || Return to nature || High || High || Low || Low || - || https://demozoo.org/productions/342200/
+|-
+| 4 || Brainfiller || Low || Medium || High || High || GLSL Softsynth || https://demozoo.org/productions/342203/
+|-
+| 5 || Once Upon A Time In A Datacenter || High || Very-High || Low || Low || Custom CPU synthcode || https://demozoo.org/productions/342199/
+|}
+==== Graphics fidelity ====
+TBA
+==== Music budget ====
+Got a musician to work with you and deliver a great tune? Don't accept it right out of the gate and feel free to argue about possible optimisations that can be done to the tune that will not affect the end-result massively. This is done by all of the better-known 4k intro developers and a good musician will be open to discussion and aware of the different limitation and choices that have to be made when it comes to size budgeting.
+== Setting up your framework ==
 A 4k framework / intro can be setup in either C or Assembler, or a combination of both.
+You can either go with an existing framework (some of them are quite capable) or build your own taylored to your own needs.
+Also remember that even though there are many more ways to save size than in for example a 1k intro, that every byte saved here is one you can spent / budget elsewhere.
+* The groundlevel basics of a framework are discussed on the 1K Intro wiki at http://www.sizecoding.org/wiki/1K_Intro
+* From here you can setup your audiobuffer add a softsynth of choice, or write your own (either in GLSL or Software)
+* Most likely you'll like to add a few more function imports to properly pass uniforms to your shader.
+* Optionally: Add another render-pass by feeding the output of the main shader to a post-shading process. This adds a few more texture calls to the framework
+* Optionally: Add an init pass where you prepare (glyph) textures and other buffers you'd like to feed into your main shader.
+* Optionally: Hook up a Scene/Camera/Timing system during development
+== Graphics ==
+Once you've budgeted and designed your intro, it is time to go to work.
-=== Graphics ===
+==== Prebuild your scene in an external tool ====
-* Setting up a OpenGL Window
+For convenience and turn-around time, its perfectly fine to use external online/offline tools like Shadertoy, Posh-Brolly, Kodelife, Bonzo or others to setup you main scene(s) / effects.
-* Initialising GLSL Shader
-*
-=== Sound ===
+==== Ray-Intersetions vs Raymarching ====
-* Softsynth - Sointu ( https://github.com/vsariola/sointu/ )
+In theory ideally you'd like to have multi-sample, multiple bounces, highly flexible, highly accurate raymarching
-* Softsynth - 4klang ( http://4klang.untergrund.net/ )
+But in practice this is as of year (2024) still impossible to do realtime on most systems, therefore a choice has to be made between exact interesctions of primitives / raytracing vs ray marching. What are the differences in usecases and what are their pros and cons:
-* Softsynth - Oidos ( https://github.com/askeksa/Oidos )
-* Softsynth - Clinkster ( https://demozoo.org/productions/96592/ )
-* GLSL Softsynth
-* Win32 MIDI
-=== Compression ===
+{| class="wikitable"
+|-
+! Description !! Raymarching !! Ray-Intersection !! Examples
+|-
+| Domain-Repetition || Yes || No || TBA
+|-
+| Fast Multi-Sample || No || Yes || TBA
+|-
+| Twisting & Blending || Yes || No || TBA
+|-
+| Shape-Blending || Yes || ? || TBA
+|}
+==== Post processing: Don't miss the low-hanging fruit ====
+Having a proper post processing step can greatly improve the overall visual quality of your intro. So in 4k space i would suggest a postshader pass at minimum, which depending on your size budget you can use for things like Vignetting, DOF, tone-mapping, anti-aliasing, chromatic abberation, etc.
+But even if your 4k intro doesn't have a seperate post-shader pass, adding a bit of in-shader vignetting / gamma correction / tone-mapping to your intro are relative easy/cheap ways to improve visual quality of your intro, so why leave those options off the table?
+For inspiration, You can check out the article at Here is an article at https://30fps.net/pages/post-processing/ for a few things you can do to improve your visuals in post.
+== Sound ==
+Here is an overview of various Synths / Music options.
+Depending on the exact track, you are looking at approx 1k - 1.5k compressed for music for most 4k intros.
+{| class="wikitable"
+|-
+! Synth !! Type !! Description !! Size overhead !! Link
+|-
+| 4klang || Subtractive || Most popular softsynth || Medium (1 note, 1 instrument at 620b) || https://github.com/gopher-atz/4klang
+|-
+| Sointu || Subtractive || 4klang fork with improvements || Medium (1 note, 1 instrument at 562b )|| https://github.com/vsariola/sointu/
+|-
+| Oidos || Additive || - || Medium (1 note, 1 instrument at 600b) || https://github.com/askeksa/Oidos
+|-
+| Clinkster || FM || - || Medium (1 note, 1 instrument at 590b) || http://crinkler.net/Clinkster.zip
+|-
+| GLSL Softsynth || - || Write it yourself || Small/Medium (depends on usecase) || -
+|-
+| MIDI Player || MIDI || Using default Windows midi sounds || Small || -
+|-
+|}
+== Compression ==
 Crinkler is the most commonly used compression at the moment for 4K intros. It maximizes compression by taking over the linking process, setting up the windows header for you and if needed re-arrange the different segments of the code.
@@ Line 55: / Line 143: @@
 Please note that when using crinkler in TINYHEADER mode, the resulting windows header will most likely trigger virus scanners / Microsoft Defender and mark it as suspicious content, which is a side-effect in recent years. Just exclude your work directory from this scan during development. Compo machines will run without these scanners too, but it is good practice  to include a (slightly larger) safe version too in the final archive.
-== Frameworks ==
+== Resources ==
+==== Frameworks ====
 * [https://github.com/armak/Leviathan-2.0 Leviathan 2.0]
 * [https://github.com/in4k/isystem1k4k IQ's 1k/4k frameworks]
 * [https://github.com/psycholns/TinyDX11 Psycho's 1k/4k framework]
 * [http://www.kameli.net/compofillerstudio/ Compofiller studio]
 * [https://github.com/yosshin4004/minimal_gl Minimal gl framework]
+==== Raymarching ====
+* [https://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions/ Introduction to Raymarching]
+* [https://iquilezles.org/articles/distfunctions/ IQ's distance functions page]
+* [https://mercury.sexy/hg_sdf/ Mercury's SDF toolbox]
+==== High Quality 4K intros for Windows ====
+* [https://demozoo.org/productions/311778/ Stahlbeton (2022)]
+* [https://demozoo.org/productions/278629/ The Vanishing of Ashlar (2020)]
+* [https://demozoo.org/productions/266556/ Eisenerz (2019)]
+* [https://demozoo.org/productions/185233/ Oscar's Chair (2018)]
+* [https://demozoo.org/productions/174689/ Unprogress (2017)]
+* [https://demozoo.org/productions/178895/ Waillee (2017)]
+* [https://demozoo.org/productions/170744/ Horizon Machine (2017)]
+* [https://demozoo.org/productions/91680/ Neuron (2013)]
+* [https://demozoo.org/productions/102/ Elevated (2009)]
+* [https://demozoo.org/productions/4846/ Atrium (2008)]
-== 4K intros for Windows ==
+==== 4K intros for Windows with Sourcecode ====
-* [https://demozoo.org/productions/200150/ TBA]
+* [https://github.com/vsariola/every-datapoint Every Datapoint has a soul (2024)]
+* [https://github.com/Krafpy/Island/tree/master/ Island (2024)]
+* [https://github.com/LeStahL/ontrack-4k physics girl (2023)]
+* [https://github.com/vsariola/fluxerator Fluxerator (2023)]
+* [https://github.com/LeStahL/abstraction-confusion Abstraction Confusion (2021)]
+* [https://github.com/w23/nwep nwep (2017)]
+* [https://github.com/keensky/hal4000 Hall4000 (2017)]
+* [https://github.com/in4k/rgba_tbc_elevated_source Elevated (2009)]
+==== Seminars ====
+* [https://www.youtube.com/watch?v=S-VDVgCBy-M Shader minification for 4k - 64k intros (2023)]
+* [https://www.youtube.com/watch?v=xLhT06lwaig 4klang 101 - Basics (2019)]
+* [https://www.youtube.com/watch?v=Ir0vcmHkIm0 nstalling and trying out different synths for 4kb intros (2017)]
+* [https://www.youtube.com/watch?v=9BqKH0XNN-g Size Restricted music isn't Rocketscience (2017)]
+* [https://www.youtube.com/watch?v=wP__g_9FT4M Sound Design with 4klang, by Wayfinder (2015)]
-== Other Resources ==
+==== Articles ====
-* [https://www.codeslow.com/2020/07/writing-winning-4k-intro-in-rust.html] Article about writing a 4k intro using Rust
+* [ftp://ftp.untergrund.net/users/thygrion/sosp.zip Music in 4 Kilobytes - Size Optimized Synthesizer Programming]
-* [https://in4k.github.io/wiki/aulds-4k-synth] Article about writing a softsynth
+* [https://iquilezles.org/articles/function2009/function2009.pdf Behind Elevated]
+* [https://in4k.github.io/html_articles/Amietia%20%E2%80%A2%20The%20Making%20Of%20Oscar's%20Chair.html Making of Oscar's chair]
+* [https://www.codeslow.com/2020/07/writing-winning-4k-intro-in-rust.html Article about writing a 4k intro using Rust]
+* [https://in4k.github.io/wiki/aulds-4k-synth Article about writing a softsynth]

Difference between revisions of "4K Intro"

Revision as of 02:06, 17 April 2024

Contents

Introduction

Tools

Intro design

Design pitfalls

Undirected raymarch experiments

The Rebranded cornell box - Just a shiny sphere bro!

Shitty synths

Size Budgeting

Graphics fidelity

Music budget

Setting up your framework

Graphics

Prebuild your scene in an external tool

Ray-Intersetions vs Raymarching

Post processing: Don't miss the low-hanging fruit

Sound

Compression

Crinkler reports

Word about the resulting executable

Resources

Frameworks

Raymarching

High Quality 4K intros for Windows

4K intros for Windows with Sourcecode

Seminars

Articles

Navigation menu

Personal tools

Namespaces

Variants

Views

More

Search

Navigation

Tools