ハクソク

世界を動かす技術を、日本語で。

イニゴ・キレス：コンピュータグラフィックス、数学、シェーダー、フラクタル、デモシーン

372日前原文(iquilezles.org)

概要

  • このページは コンピュータグラフィックス のテキストチュートリアルを集約
  • ビデオチュートリアル や追加リソースはランディングページで案内
  • チュートリアルは 個人の時間 で執筆、内容の誤りや不正確さもあり得る
  • PatreonやPayPal でサポート可能
  • コードスニペットは MITライセンス のため再利用が容易

コンピュータグラフィックスのテキストチュートリアル案内

  • このページには 文章によるチュートリアル のみを掲載
  • ビデオチュートリアルや追加資料 はランディングページで確認すること
  • 全ての内容は 個人の余暇時間 で執筆、誤りや不正確な部分が含まれる可能性を理解すること
  • 気に入った場合は PatreonまたはPayPal にて支援すること
  • 掲載されている コードスニペット はMITライセンスで提供、自由に再利用・改変・配布すること

主要なインデックスおよびカテゴリ一覧

  • 有用な関数インデックス

    • Remapping関数, 3D SDF, 2D SDF, 2D SDFと勾配, L∞ノルムの2D SDF, レイ-サーフェス交差関数, Sphere関数, Box関数, Smoothstep関数, 三角関数, フィルタ可能なプロシージャル

  • プロシージャルノイズとドメインワーピング

    • FBM, グラディエントノイズ導関数, バリューノイズ導関数, ドメインワーピング, Voronoise, Smooth Voronoi, Voronoiエッジ

  • レイトレーシング技法

    • 1時間でのPath-tracing, Sphereソフトシャドウ, オールドスクールレイトレーシング, シンプルGPUレイトレーシング, タイル単位のトレーシング, SSEによるCPUトレーサ, 初めてのレイトレーサ

  • ポイントクラウドとスプラッティング

    • Volumetricソート, Voxel, Voxelラインとオクルージョン, シンプルボクセル

  • 圧縮技法

    • 遺伝的アルゴリズム, メッシュ圧縮, ウェーブレット圧縮, 3Dモデルストレージ, サイズコーディング

  • 4KBグラフィックス制作

    • Elevatedの舞台裏, シンプルなカラーパレット, 浮動小数点数のコンパクトストレージ, ミニマルスプラインコード, ミニマルフラスタムカリング, 小さいテクスチャのコンパイル, 4KB内でのファイルオープン, 4KBのキャラクター, 64Kデモ技法

  • SDFとレイマーチング

    • SDFのレイマーチング, SDFのスムーズ最小値, ドメインリピート, ソフトシャドウ, SDFの数値法線, スムーズなラウンデッドボックス, インテリアSDF, SDFのXOR演算, SDFバウンディングボリューム, SDF用バイナリサーチレイキャスティング, SDFのFBMディテール, 楕円体SDF, 暗黙曲線への距離近似, Mengerフラクタル, 地形のレイマーチング, レイマーチングによるデプスバッファ, SDFレイマーチング入門

  • テクスチャリングとフィルタリング

    • Premultiplied Alphaの数学, バイプラナーマッピング, テクスチャリピート, プロシージャルテクスチャのフィルタリング, レイディファレンシャル, アナリティックチェッカー・パターンフィルタリング, 改良バイリニアフィルタリング, ハードウェア補間改良, シリンダーシーム

  • ライティング技法

    • 屋外ライティング, 改良フォグ, マルチレゾリューションAO, ディレクショナル導関数, スクリーンスペースAO, 頂点毎AO, シンプルなグローバルイルミネーション

  • レンダラー／エンジン関連

    • GPUコンディショナル, 三角関数回避I-III, ティックでのタイミング, フラスタムカリング修正, 有理数レンダリング, C++カプセル化, レイ-トライアングルインターセクタ, ステレオレンダリング, 基本VR, ガンマ補正ブラー

  • オールドスクール表現技法

    • 2Dダイナミッククラウド, シンプルな水面, プレーン変形, フィードバック効果, Voronoi効果, ゲームオブライフ, QBasicでの立方体レンダリング

  • 有用な数学的手法

    • 三角関数なしのIK, Sphere AO, Box AO, Sphere密度, Sphere可視性, Sphere投影, 逆バイリニア補間, 三角形への距離, ベジエバウンディングボックス, 円/円柱バウンディングボックス, 楕円への距離, 楕円の扱い, 多角形の法線/面積, 三角形の面積, メッシュ法線計算, パッチ球, フーリエ級数, Smoothstep積分, 反射とクリップ, FM合成, クォータニオン思考, GLSLでの高速三等分, 逆Smoothstep, 浮動小数点とランダム

  • フラクタル＆複素力学系

    • 連続イテレーションカウント, Mandelbrot集合のM1/M2バルブ, M1領域, 対称性, Mandelbrot集合入門, フラクタルのSDF計算, Mandelbulb, 3D Julia集合, 3Dオービットトラップ, プロシージャルオービットトラップ, ビットマップオービットトラップ, 幾何学的オービットトラップ, Budhabrot, Popcorn画像, IFSフラクタル, ライアプノフフラクタル, アイコン画像

  • レクリエーション数学

    • 3数の最大値, Prof. Jame Grime's Dice, 二乗最適化, Ekain's numbers

利用上の注意

  • 内容やコードの正確性 は保証されないため、自己責任で利用・確認すること
  • 質問やフィードバック は各連絡先やPatreon/PayPal経由で送信すること

Hackerたちの意見

イニゴは伝説だよ。ぜひチェックしてみて。

彼の「数学でキャラクターを描く」[1] (2020)も見てみて、すごく面白い動画だよ。 [1] https://www.youtube.com/watch?v=8--5LwHRhjk

└

もっと長い動画が見たいなら、数週間前にWookashポッドキャストでインタビューされてたよ[1]、そこで「数学で描くこと」についても話してた。 [1] https://www.youtube.com/watch?v=F1ax1iJTHFs

シェーダートイのお気に入りの半分はiqだね。

└

リストを見たら、思わず「WOW」って声に出しちゃった。

└

iqはShaderToyのクリエイターの一人でもあるし、彼は本当に伝説だよ。

最近は無料で手に入る学習素材の質が本当にすごいし、便利にパッケージされてるのが驚き。イニゴに感謝だね。

ピクサーでiqと出会うことができて、めちゃくちゃラッキーだった。僕はインターンで、彼が『ブレイブ』のためにWondermossの手続き型植生システムを開発している時だったんだ。インターン仲間の何人かは彼のデモシーンの作品のファンで、これを知った彼は特別に手続き型グラフィックスとWondermossの仕事についての講義を開いてくれたんだ。それは今まで見た中で最高で、衝撃的な講義の一つだった。彼が講義で話すたびに、目の前でデモをライブコーディングしてくれたんだ（ShaderToyが存在する前のことだから、ライブコーディングなんて誰も見たことがなかった）。講義の途中で、彼が使っていたテキストエディタがリアルタイムのライブ編集グラフィックスシステムの上に構築されていることを明かして、ライブコーディングもできるって言ってた。彼が見せてくれたのは、最終的にBeautyPiのテックデモになる初期バージョンだった[0]。これが今でも素晴らしい見た目をしていることを考えると、iqは14年前にインターンのためにリアルタイムでデモをしてくれたんだ。Wondermossは本当に素晴らしい技術だった。『ブレイブ』のすべての森のシーンや植生はWondermossを使って作られていて、すべて手続き型だった。Menv30で『ブレイブ』のショットを開くと、キャラクターと地面しか見えなくて、レンダリングを始めると、巨大で豊かな森が現れるんだ。さらにすごいのは、『ブレイブ』がまだREYES RenderManを使っていたから、iqはREYESアルゴリズムのストリーミング特性を利用して、Wondermossが植生を生成するだけでなく、リアルタイムで捨てることもできるようにしたんだ。つまり、Wondermossはほとんどメモリを使わなかった。確か、Wondermossは各レンダリングに対して数十MB程度のメモリ使用量を追加するだけだったと思うけど、それはすごいことで、各フレームの視覚的な複雑さの95%を担っていたんだ。Wondermossの面白いところは、デフォルトのランダムシードがiqの電話番号だったことで、それが数年の間ずっと残っていたから、彼の電話番号は2010年代のほぼすべてのピクサーの映画に永遠に刻まれているんだ。iqは僕が今まで出会った中で最も賢くて、インスパイアされる人の一人だよ。 [0] https://www.youtube.com/watch?v=_9CZ9UgrcZU

└

これすごいね、シェアしてくれてありがとう！

└

電話番号の話のオチは、彼が電話番号を変えたときに、シーンを再レンダリングしたら突然すべての植生が変わったことだよ。

└

iqが人生で犯した唯一のミスは、彼の素晴らしい動画のYouTubeコメントを読むことだった。

└

ワンダーモスはどんな技術やテクニックを使ってたの？ポリゴンを生成してたのかな？

人にイントロが何かを見せたり、デモシーンについてちょっと話したりしたいときは、たいてい2009年のBreakpointでPC 4kコンペに勝ったイントロ「Elevated」を見せるんだ。これを見れば、Iqやその制作に関わった他の人たちの才能が本当にわかるよ。たった4キロバイトでこんなことができるなんて、マジですごい！ Elevated by Rgba & TBC: https://www.youtube.com/watch?v=jB0vBmiTr6o IqのElevatedイントロに関するスライド: https://iquilezles.org/articles/function2009/function2009.pd... ソースコード: https://files.scene.org/view/resources/code/sources/rgba_tbc...

└

彼はElevatedをShaderToyに移植したから、リアルタイムでコードいじれるよ。 https://www.shadertoy.com/view/MdX3Rr もし4kbデモに興味があれば、最近リリースされたLJのHexerをチェックしてみてね。 https://pouet.net/prod.php?which=103982

子供の頃、デモシーンの大ファンだったし、IQは最高の一人だよ。息子が小さいとき、彼はYouTubeでデモを見るのが大好きだった（オタク版のベビーアインシュタインだね）！このシーンが大好きだから、今度出すナarrativeゲーム「Outsider」でも明確に言及してるよ（https://store.steampowered.com/app/3040110/Outsider/）。主人公は90年代のBBS/海賊シーンのアクティブメンバーで、デモシーンの大ファンでもあるんだ！

イニゴ、もしこれを読んでたら、あなたの記事に感謝って言っておいて。腫瘍治療中にあなたの資料を読んでめっちゃ楽しんで、人生がすごく楽しくなったんだ。ガリシアに来ることがあったら、無料のディナーを用意するよ！本当にありがとう！

僕のお気に入りのウェブサイトの一つ。よく彼のことを人に話すんだ。彼のYouTubeチャンネルが成功することを本当に願ってるよ。

イニゴが最近ウーカッシュポッドキャストに出てたよ。通勤中に聞くのにぴったり！: https://youtu.be/F1ax1iJTHFs