イントロイントロ

デモシーンは、リアルタイムで動作するクールな作品を作成することです（「コンピューターを回転させる」ように）。それらはデモと呼ばれます。それらのいくつかは本当に小さく、たとえば64k以下です-これらはイントロと呼ばれます。名前は、広告またはクラックされたプログラムの提示に由来します（クラックイントロ）。そのため、イントロはほんの少しのデモです。

多くの人がデモシーンに興味を持っていることに気付きましたが、実際にデモがどのように行われるのかはわかりません。この記事では、新しいイントロGuberniyaの頭脳ダンプと死後解剖について説明します。初心者とベテランの両方にとって興味深いものになることを願っています。この記事では、デモで使用されるほぼすべての手法を取り上げており、それらの作成方法についての良いアイデアを提供します。この記事では、 ステージ上で受け入れられるものであるため、ニックネームで人々を呼び出します。

Windows バイナリ： guberniya_final.zip（61.8 kB）（AMDカードで少し故障）

一言で言えばGuberniya

これは、デモRevision 2017でリリースされた64kのイントロです。いくつかの数字：

C ++およびOpenGL、GUIの親愛なるimgui
Windows用62976バイトバイナリ、 kkrunchyパック
基本的に、レイマーチング（ rakecastingオプション -約per。 ）
6人のグループ
- 一人のアーティスト:)
4か月で完了
〜8300行のC ++、ライブラリコードとスペースを含まない
4840行のGLSLシェーダー
〜350 gitコミット

開発

デモは通常、demopatiで公開され、視聴者がデモを見て勝者に投票します。デモパーティーの問題は、締め切りがしっかりしていて、熱心な視聴者がいるため、良いモチベーションになります。私たちの場合、それは伝統的にイースターの週末に行われる大きなデモパーティーであるRevision 2017でした。いくつかの写真を見て、イベントのアイデアをつかむことができます。

1週間あたりのコミット数。 最大の急増は、締め切り前に緊急にハッキングすることです。 最後の2列は、demopatの後の最終バージョンの変更です。

1月上旬にデモの作業を開始し、イベント中の4月のイースターにリリースしました。希望する場合は、競技全体の記録を見ることができます:)

私たちのチームは、cce（私です）、 varko 、 noby 、 branch 、msqrt、goatmanの6人で構成されていました。

デザインと影響

曲はかなり早い段階で準備ができていたので、私はその動機に基づいて何かを描いてみました。記憶に残る部分を備えた大きくて映画的なものが必要であることは明らかでした。

最初の視覚的なアイデアは、ワイヤーとその使用を中心に展開されました。私はViktor Antonovの作品が本当に好きなので、最初のドラフトは主にHalf-Life 2からコピーされています：

要塞の塔と野心的な人間のキャラクターの最初のスケッチ。 フルサイズ。

Half-Life 2： Vising RatonのViktor Antonovのコンセプトワーク

類似点は非常に明白です。風景シーンでは、Anthony ShimesのEldion Passagewayのムードも伝えようとしました。

風景は、アイスランドに関するこの素晴らしいビデオとコヤアニスカッツィからインスピレーションを受けたと思います。ストーリーボードに描かれたストーリーの大きな計画がありました。

このストーリーボードは、イントロの最終バージョンとは異なります。 たとえば、残忍な建築は切り取られました。 完全な絵コンテ。

もう一度やるなら、気分を決めてくれる写真を2、3枚に限定していたでしょう。だから、仕事が減り、想像力が生まれます。しかし、少なくとも絵を描くことで考えを整理することができました。

船

nobyによって設計された宇宙船。これは、幾何学的プリミティブと交差する多数のマンデルブロフラクタルの組み合わせです。船の設計は少し不完全なままでしたが、最終バージョンでは触らない方が良いと思われました。

宇宙船は、他のすべてのものと同様に、距離のレイマーチングフィールドです。

イントロに入らない別のシップシェーダーがありました。今、私はデザインを見て、それは非常にクールであり、それのための場所がなかったことは残念です。

ブランチからの宇宙船の設計。 フルサイズ。

実装

古いフェロモンのイントロ（ YouTube ）のコードベースから始めました。基本的なトリミング機能と、標準OpenGL関数のライブラリと、 bin2hを使用してデータディレクトリから実行可能ファイルにファイルをパックするファイルシステムユーティリティがありbin2h 。

作業プロセス

VS2015ではコンパイルされなかったため、Visual Studio 2013を使用してプロジェクトをコンパイルしました。標準ライブラリの置換は、更新されたコンパイラではうまく機能せず、次のようなおかしなエラーが発生しました。

Visual Studio 2015はコードベースとうまくいきませんでした

何らかの理由で、私たちはまだエディターとしてVS2015に固執し、v120プラットフォームツールを使用してプロジェクトをコンパイルしました。

デモでの私の作業のほとんどは次のように見えました。シェーダーは1つのウィンドウで開かれており、コンソール出力の最終結果は他のウィンドウにあります。 フルサイズ。

CTRL + Sの組み合わせを検出した場合、すべてのシェーダーを再ロードする単純なグローバルキーストロークキャプチャを行いました。

 // Listen to CTRL+S. if (GetAsyncKeyState(VK_CONTROL) && GetAsyncKeyState('S')) { // Wait for a while to let the file system finish the file write. if (system_get_millis() - last_load > 200) { Sleep(100); reloadShaders(); } last_load = system_get_millis(); }

それは本当にクールに機能し、リアルタイムでシェーダーを編集することははるかに興味深いものになりました。ファイルシステムイベントなどを傍受する必要はありません。

GNU Rocket

アニメーションと制作には、 GNU RocketのフォークであるGround Controlを使用しました。 Rocketは、アニメーションカーブを編集するためのプログラムであり、TCPソケットを介してデモに接続します。参照フレームは、デモのリクエストで送信されます。これは、エディターを閉じずに、同期位置を失うことなく、デモを編集および再コンパイルできるため、非常に便利です。最終バージョンでは、参照フレームはバイナリ形式でエクスポートされます。ただし、いくつかの迷惑な制限があります。

楽器

マウスとキーボードを使用して視点を変更すると、カメラの角度を選択するのに非常に便利です。 シンプルなGUIでも、ささいなことが重要な場合に役立ちます。

一部とは異なり、デモ用のツールがなかったため、作業中に作成する必要がありました。すばらしい親愛なるimguiライブラリにより、必要に応じて機能を簡単に追加できます。

たとえば、色パラメーターを制御するためにいくつかのスライダーを追加する必要があります-必要なことは、これらの行をレンダリングサイクルに追加するだけです（個別のGUIコードではありません ）。

  imgui::Begin("Postprocessing"); imgui::SliderFloat("Bloom blur", &postproc_bloom_blur_steps, 1, 5); imgui::SliderFloat("Luminance", &postproc_luminance, 0.0, 1.0, "%.3f", 1.0); imgui::SliderFloat("Threshold", &postproc_threshold, 0.0, 1.0, "%.3f", 3.0); imgui::End();

最終結果：

これらのスライダーは簡単に追加できました。

F6を押すと、カメラの位置を.cppファイルに保存できるため、次のコンパイル後にデモに表示されます。これにより、個別のデータ形式と対応するシリアル化コードが不要になりますが、そのようなソリューションはかなりずさんなものになることもあります。

小さなバイナリを作成する

バイナリを最小化する主なことは、標準ライブラリを破棄し、コンパイルされたバイナリを圧縮することです。独自のライブラリ実装の基礎として、Mike_VのTiny C Runtime Libraryを使用しました。

Kkrunchyは、この目的のために作成されたツールであるバイナリの圧縮に取り組んでいます。個々の実行可能ファイルで動作するため、C ++、Rust、Object Pascalなどでデモを作成できます。正直に言うと、サイズは大したことではありませんでした。画像などのバイナリデータを大量に保存しなかったため、操作の余地がありました。シェーダーからコメントを削除する必要さえありませんでした！

浮動小数点

浮動小数点コードは、存在しない標準ライブラリの関数を呼び出すことで頭痛の種になりました。それらのほとんどは、 /arch:IA32コンパイラスイッチでSSEベクトル化を無効にし、 /QIfstフラグを使用してftol呼び出しを削除することで解決されました。これは、切り捨てモードのFPUフラグを保存しないコードを生成します。これは問題ではありません。PeterSchoffhauserの次のコードを使用して、プログラムの先頭で浮動小数点の切り捨てモードを設定できるためです。

 // set rounding mode to truncate // from http://www.musicdsp.org/showone.php?id=246 static short control_word; static short control_word2; inline void SetFloatingPointRoundingToTruncate() { __asm { fstcw control_word // store fpu control word mov dx, word ptr [control_word] or dx, 0x0C00 // rounding: truncate mov control_word2, dx fldcw control_word2 // load modfied control word } }

benshoof.orgでそのようなことについてもっと読むことができます。

捕虜

pow呼び出しは、まだ存在しない__CIpow内部関数への呼び出しを生成します。署名を自分で理解することはできませんでしたが、Wineのntdll.dllで実装を見つけました- レジスターに 2つの倍精度数を期待していることが明らかになりました。その後、独自のpow実装を呼び出すラッパーを作成することが可能になりました。

 double __cdecl _CIpow(void) { // Load the values from registers to local variables. double b, p; __asm { fstp qword ptr p fstp qword ptr b } // Implementation: http://www.mindspring.com/~pfilandr/C/fs_math/fs_math.c return fs_pow(b, p); }

これに対処する最善の方法を知っている場合は、お知らせください。

ウィナピ

SDLなどを当てにできない場合は、画面にウィンドウを表示するために必要な操作に純粋なWinAPIを使用する必要があります。問題がある場合は、次のことが役立ちます。

WinAPIウィンドウ作成の例
OpenGL初期化の例、 glext.hおよびwglext.hが必要

最後の例では、実際にビジネスで使用されるOpenGL関数の関数ポインターのみをロードすることに注意してください。これを自動化することをお勧めします。実行可能ファイルに保存されている文字列識別子とともに関数にアクセスする必要があるため、ロードされる関数が少ないほど、より多くのスペースが節約されます。プログラム全体の最適化オプションを使用すると、未使用の文字列リテラルをすべて削除できますが、memcpyに問題があるため使用しません。

レンダリング技術

レンダリングは主にレイマーチング法によって行われ、便宜上、 hg_sdfライブラリを使用しました。 Inigo Quilez （以降、単にiqと呼ぶ）は、このテクニックや他の多くのテクニックについて多くのことを書いています。 ShaderToyにアクセスしたことがある場合は、これに精通している必要があります。

さらに、深度バッファーの値であるラスターを発行しました。これにより、SDF（符号距離フィールド）をラスター内のジオメトリと結合し、後処理効果を適用することもできます。

シェーディング

GGXを少し使用して、標準のシェーディングUnreal Engine 4（説明付きの大きなPDF ）を使用しました。これはあまり目立ちませんが、重要な点で重要です。当初から、レイマーチングフォームとラスタライズフォームの両方に同じ照明を使用することを計画していました。アイデアは、遅延レンダリングとシャドウマップを使用することでしたが、それはまったく機能しませんでした。

シャドウカードのオーバーレイを使用した最初の実験の1つ。 タワーとワイヤの両方がレイマーチンググラウンドに影を落とし、正しく交差していることに注意してください。 フルサイズ。

画面と影のマップとテクセルの比率が大幅にスキップされているなどの精度の問題のため、シャドウマップで大きな領域を正しくレンダリングするのは非常に困難です。また、カスケードシャドウマップを使用した実験を開始する意欲もありませんでした。さらに、異なる角度から同じシーンをレイマーチングするのは本当に遅いです。そのため、同じ照明のシステム全体を削ることにしました。これは後に、ラスタライズされたワイヤの照明とシーンのレイマーチングジオメトリを相関させようとしたときに大きな問題になることが判明しました。

地形

レイマーチング地形は、解析的微分を伴う数値ノイズによって生成されました。 ¹ もちろん、生成された導関数は、シャドウを適用するために使用されましたが、iqの例のように、滑らかな輪郭のレイトラバースを加速するためにレイ間隔を制御するためにも使用されました。詳細を知りたい場合は、このテクニックに関する古い記事を読むか、ShaderToyのクールな熱帯雨林のシーンで遊んでください。 msqrtが指数関数的に分布するノイズを実装すると、ランドスケープの高さマップがより現実的になりました。

数値ノイズの私自身の実装の最初のテスト。

彼らが使用しないことにしたブランチからのエリアの実装。 理由は覚えていません。 フルサイズ。

ランドスケープ効果は、シャドウと反射をブルートフォースするため、非常にゆっくりと計算されます。シャドウの使用は、シャドウの小さなハックです。シャドウでは、半影のサイズは、シャドウビームを回るときに遭遇した最短距離によって決定されます。彼らはアクションでかなりよく見えます。また、バイセクショントレースを使用して効果を高速化することも試みましたが、生成されるアーティファクトが多すぎます。一方、 Mercuryのレイマーチングトリック（別のデモグループ）は、速度を落とすことなく品質を少し改善するのに役立ちました。

通常のレイマーチング（右）と比較して、改善された固定小数点反復を使用した地形レンダリング（左）。 右側の図にある不快なリップルアーティファクトに注意してください。

空は、スライド43のiqからの高度で説明したものとほぼ同じ手法で生成されます。ビーム方向ベクトルのいくつかの単純な関数。太陽はフレームバッファで非常に大きな値（100以上）を生成するため、色の自然さもいくらか加わります。

車線シーン

これは、ファンホーの写真の影響を受けて作成されたビューです。最初のジオメトリは非常に単純ですが、後処理効果により、実際にソリッドシーンを作成できました。

いくつかの繰り返しフラグメントがあるい距離フィールド。 フルサイズ。

距離が指数関数的に変化する霧を追加しました。 フルサイズ。

ワイヤーを使用すると、シーンがより面白くリアルになります。 フルサイズ。

最終バージョンでは、距離フィールドに少しのノイズを追加して、レンガの壁の印象を作成します。 フルサイズ。

後処理で色のグラデーション、彩度、色収差、グレアが追加された場合。 フルサイズ。

距離フィールドを使用したモデリング

B-52爆撃機は、SDFを使用したシミュレーションの良い例です。開発段階でははるかに簡単でしたが、最終リリースに持ち込みました。遠くから見ると、かなり説得力があります。

爆撃機は遠くでは正常に見えます。 フルバージョン。

ただし、これは単なるカプセルの束です。確かに、いくつかの3Dパッケージでそれらをシミュレートする方が簡単ですが、適切なツールが手元になかったため、より高速な方法を選択しました。参考までに、距離フィールドシェーダーはbomber_sdf.glslのようになります。

ただし、実際には非常に単純です。 フルサイズ。

キャラクター

ヤギアニメーションの最初の4フレーム。

アニメーション化された文字は、1ビットのビットマップだけで圧縮されています。再生中、フレームはスムーズに移行します。神秘的なヤギ飼いが提供するもの。

コゾパスと友達。

後処理

後処理効果はvarkoによって作成されました。システムは次のとおりです。

Gバッファからシャドウを貼り付けます。
被写界深度を計算します。
色の明るい部分を削除します。
N個のガウスぼかし操作を個別に実行します。
フェイクレンズフレアとスポットライトフレアを計算します。
すべてまとめてください。
FXAAで滑らかな輪郭を作成します（ mudlordに感謝）。
色補正。
ガンマ補正と軽い粒子。

レンズフレアは、ジョンチャップマンが説明した手法に多くの方法で従います。彼らと仕事をするのは難しいこともありましたが、最終的な結果が得られました。

被写界深度の効果を審美的に使用しようとしました。 フルサイズ。

被写界深度効果（ DICEテクニックに基づく）は3つのパスで実行されます。最初は、各ピクセルの混乱の円のサイズを計算し、他の2つのパスは、回転領域から2つのスポットを重ねます。また、必要に応じて、いくつかの反復で改善を行います（特に、多数のガウスぼかしを適用します）。この実装は私たちにとってうまく機能し、遊ぶのは楽しかったです。

アクションの被写界深度効果。 赤い写真は、DOFスポットの計算されたシャープネス円を示しています。

色補正

Rocketにはアニメーション化されたpp_indexパラメーターがあり、これを使用して色補正プロファイルを切り替えます。各プロファイルは、後処理シェーダーの大規模ブランチオペレーターの異なるブランチです。

 vec3 cl = getFinalColor(); if (u_GradeId == 1) { cl.gb *= UV.y * 0.7; cl = pow(cl, vec3(1.1)); } else if (u_GradeId == 2) { cl.gb *= UV.y * 0.6; cl.g = 0.0+0.6*smoothstep(-0.05,0.9,cl.g*2.0); cl = 0.005+pow(cl, vec3(1.2))*1.5; } /* etc.. */

それは非常に単純ですが、非常にうまく機能します。

物理モデリング

デモには、ワイヤーと鳥の群れの2つのシミュレーションシステムがあります。彼らはまた、バルコによって書かれました。

ワイヤー

ワイヤーはシーンにリアリズムを追加します。 フルサイズ。

ワイヤは一連のバネと見なされます。それらは、計算シェーダーを使用してGPUでモデル化されます。ここで使用する数値積分のVerlet法は不安定であるため、このシミュレーションを多くの小さなステップで実行しています。計算シェーダーは、ワイヤーのジオメトリ（一連の三角プリズム）も頂点バッファーに出力します。残念ながら、何らかの理由で、AMDカードではシミュレーションが機能しません。

鳥の群れ

鳥はスケール感を与えます。

群れモデルは512羽の鳥で構成され、最初の128羽はリーダーと見なされます。リーダーは渦巻くノイズパターンで動き、他のリーダーはそれらに従います。実生活では、鳥は最も近い隣人の動きに従うが、この単純化もかなり良いように見えると思う。群れはGL_POINTsとしてレンダリングされ、そのサイズは翼の羽ばたきの印象を与えるために調整されました。このレンダリング手法はHalf-Life 2でも使用されたと思います。

ミュージック

通常、64kイントロの音楽はVSTプラグインを使用して作成されます。これは、ミュージシャンが通常の楽器を使用して音楽を作成する方法です。このアプローチの典型的な例は、farbrauschのV2 Synthesizerです。

それは問題でした。ある種の既成のシンセサイザーは使いたくありませんでしたが、以前の失敗した実験から、自分の仮想楽器を作成するには多くの作業が必要であることを知っていました。 paulstretchedが用意したアンビエントミュージックテーマでブランチが行った要素/ジェスチャー61％デモの雰囲気が本当に好きだったことを覚えています。これにより、4kまたは64kの量でこれを実現することになりました。

ポールストレッチ

Paulstretchは、本当にクレイジーなストレッチ音楽に最適なツールです。彼のことを聞いたことがないのであれば、Windows 98のあいさつの音から彼が何ができるかを必ず聞くべきです。その内部アルゴリズムは著者とのこのインタビューで説明されており、彼はオープンソースでもあります。

AudacityのPaulstretchエフェクトを使用して作成されたオリジナルサウンド（上）とストレッチサウンド（下）。 また、周波数がスペクトル（垂直軸）で塗りつぶされていることに注意してください。

基本的に、元の信号を引き伸ばすとともに、周波数空間で位相を揺らします。そのため、金属のアーティファクトの代わりに、不自然なエコーが得られます。これには多くのフーリエ変換が必要であり、元のアプリケーションはこれにKiss FFTライブラリを使用します。外部ライブラリに依存したくなかったので、最終的には単純な離散フーリエ変換を実装しました

O （ N^{2} ）

$O（N ^ 2）$ GPUで。それを正しくするのに長い時間がかかりましたが、最終的には価値がありました。 GLSLシェーダーの実装は、ブルートフォースの性質にもかかわらず、非常にコンパクトで非常に高速に動作します。

トラッカーモジュール

ソースデータとして意味のある音があれば、周囲のバズのコイルを巻くことが可能になりました。そこで、実績のあるテスト済みのテクノロジーであるトラッカーミュージックを使用することにしました。 MIDI ^2によく似ています^。ただし、サンプルを含むファイルにパックされています。たとえば、エリートグループ（ YouTube ）のkasparovデモは、リバーブを追加したモジュールを使用しています。これが17年前に機能していたら、なぜ今はどうでしょうか。

gm.dls組み込みのWindows MIDIサウンドバンク（これも古いトリックです）を使用し、XMモジュールの形式でMilkyTrackerを使用して曲を作成しました。この形式は、90年代のMS-DOSの多くのデモで使用されていました。

MilkyTrackerを使用して元の曲を作成しました。 最終的なモジュールファイルから機器サンプルがクリアされ、代わりにgm.dlsからのオフセットと長さのパラメーターgm.dls

gm.dlsは、1996年のローランドの楽器が非常に古風で音質が悪いことです。しかし、大量のリバーブに浸しても問題ないことがわかりました！以下は、短いテストソングが最初に再生され、続いてストレッチバージョンが再生される例です。

驚くほどアトモフェルノ、同意しますか？そう、私はハリウッドの音楽をまねた曲を作りました。これは一般的に音楽的な側面についてすべてです。

謝辞

この記事の技術的な詳細のいくつかを手伝ってくれたvarkoに感謝します。

追加資料

Logicoma Ferrisが64kのデモツールキットを披露
- Engageを最初に見ることを忘れないでください。私たちが参加した同じコンペでの彼らの作品
いくつかのデモのソースCtrl-Alt-Test
- 4kと64kのコードがあります。
- また、イントロもあります： H-Immersion

1.グラディエントノイズの分析導関数を計算できます： https : //mobile.twitter.com/iquilezles/status/863692824100782080↑

2.最初の考えは、トラッカーモジュールの代わりに単にMIDIを使用することでしたが、曲をWindowsオーディオバッファに単純にレンダリングする方法とは思われませんでした。どうやら、DirectMusic APIを使用してどういうわけかこれが可能ですが、私はその方法を見つけることができません。 ↑

64kでイントロを行う方法