リック・アンド・モーティのSDFアニメーションプログラミング

 (danielchasehooper.com)
2 ポイント 投稿者 GN⁺ 2025-02-08 | 1件のコメント | WhatsAppで共有

シェーダープログラミングを学ぶ

  • RickとMortyのアニメーション制作: このアニメーションは240行のコードで作られており、ライブラリや画像を使わずに、GPUシェーダーと符号付き距離場を使って動画、ビデオゲーム、または娯楽のためのアニメーションを作る方法を説明している。
  • ライブコーディングエディタ: ページに組み込まれたライブコーディングエディタを通じて、サンプルを実行して修正できる。

シェーダーの基礎

  • GLSLの使用: OpenGL Shading Language（GLSL）で書かれたコードで、各ピクセルに対してGPU上で実行されるcolor_for_pixel関数が必要となる。
  • ピクセルの色の決定: 時間に応じてピクセルの色を決める関数が、アニメーション制作の中核となる。

基本図形を描く

  • 円を描く: ピクセルの中心からの距離を可視化することで円を描ける。
  • 符号付き距離場（SDF）: 図形の内部の距離は負、外部は正として表し、さまざまな効果を与えられる。

さまざまな図形関数

  • ベジェ曲線、星、角丸長方形: さまざまなSDF関数を使って複雑な図形を描ける。

Rickを描く

  • 顔の再現: Rickの顔をコードで再現するために多くの試行錯誤を重ね、参照画像を使って正確さを高めている。
  • 輪郭線の追加: 符号付き距離関数を使って図形の輪郭線を描ける。

図形の結合とミラーリング

  • 図形の結合: 2つの図形を結合して輪郭線を描く際にはmin()関数を使う。
  • ミラーリング: abs()関数を使って図形を軸基準で対称にできる。

高度なテクニック

  • ドメインワーピング: ピクセル位置をランダムにオフセットして図形を歪ませられる。
  • アニメーション効果: ドメインワーピングをアニメーション化することで、ユニークな視覚効果を作れる。

無限の歯を描く

  • 放物線の使用: 放物線を使って歯の形を描け、複数の歯を描く際のコード重複を避けられる。

この記事は、シェーダープログラミングによって複雑なアニメーションを作る方法を説明し、さまざまな技法やツールを活用して創造的な成果物を得られることを示している。

関連記事

1件のコメント

 
GN⁺ 2025-02-08
Hacker Newsの意見

  • 本当に素晴らしい仕事で、記事も उत्कृष्ट。SDFで滑らかなアンチエイリアシングを実現するには aastep を使うとよい

  • シェーダー開発は本当に別次元。浮動小数点を変更して結果をすぐ確認できる過程が非常に満足感がある

  • とても良い記事。Inigo Quilez の関連 YouTube 再生リストがおすすめ

  • 仕事の質、説明の質、そして読者に与える挑戦課題のすべてが最高水準。共有してくれてありがとう

  • GLSLについて非常によく構成された導入だった。Vulkan や WebGPU/WebGL ではどうなのか気になる

  • 8か月かけてこのアニメーションを完成させたのは、並外れた忍耐力を物語っている

  • 開発過程で小数値を調整する反復作業をしたのか、それとも何かエディタを使ったのか気になる。240行分の適切な小数値を見つける過程は時間がかかるかもしれない

  • ページの完成度には驚かされる

  • シェーダープログラミングは別次元。アニメーションを作るのに入る労力と細部への注意が驚異的。従来の開発よりはるかに手間がかかる

  • この仕事がどれほど印象的かを表現するのは難しい