このページは

• シェーダを勉強している時に書き留めた個人的なメモやリンク集

はじめに

ざっくりとした歴史

グラフィックス API / シェーダ言語 / ゲームエンジン / モバイル端末をとりまく時系列：

• 参考リンク：
  • Microsoft DirectX - Wikipedia
  • OpenGL - Wikipedia
  • OpenGL ES - Wikipedia
  • Metal (API) - Wikipedia
  • Vulkan (API) - Wikipedia
  • Unity (ゲームエンジン) - Wikipedia
  • Unreal Engine - Wikipedia

基礎知識

• よく使うのは頂点シェーダとフラグメントシェーダ
  • （OpenGL ではフラグメントシェーダ、DirectX ではピクセルシェーダと呼ぶ）
• Unity では ShaderLab という枠組みの中で、専ら HLSL でシェーダを実装する
  • Unity が各プラットフォーム向けに最適化したものに変換してくれる
  • 時々 Cg/HLSL のように表現されることがあるが、Cg は NVIDIA とマイクロソフトが共同開発したシェーダ言語で、HLSL とよく似ている
    • Cg と HLSL は同じものと捉えてしまって差し支えなさそう：
      • Unityで使用するシェーダー言語 - Unity マニュアル
• Unity にある Surface Shader というのは、ライティングとかを考慮しなくてよいお手軽シェーダ
  • 内部的には Unity によって頂点シェーダ / フラグメントシェーダに変換されている

---

• 参考リンク：
  • シェーダー - Wikipedia
  • Cg (プログラミング言語) - Wikipedia

情報源

書籍

シェーダの本に関しては近年、日本語の書籍で出版社から出ているものは少ないが、同人で書かれているものがいくつかある。 （主に Unity 向け）：

• Unity Graphics Programming vol.1 | Indie Visual…
  • 2019-11 時点で vol.4 まで / 1 冊 2000 円
• Unityシェーダープログラミングの教科書 ShaderLab言語解説編 - 染井吉野ゲームズ - BOOTH
  • 2019-11 時点で 3 まで / 1 冊 2000 円
• BASIC×SHADER: Unityで学ぶシェーダープログラミング eBook: midnightSuyama: Kindleストア
  • Kindle 書籍。1000 円
  • HLSL での基礎的なシェーダの実装例を集めた本として便利。プログラミング初心者には説明不足に感じられそう

英語ではそれなりに書籍がありそう。以下に書籍情報がよくまとまっている：

• [2019-07] シェーダー本を書いて得た知見まとめ - Qiita

Packt で検索するといくつかある：

• Search 6,500+ Programming & Development eBooks & Videos | Packt Subscription

基礎を学べる系

• The Book of Shaders
  • 日本語訳 The Book of Shaders
  • Web 上で読める本だが、書きかけで更新が止まっている模様
• wgld.org | サイトマップ |
  • WebGL や GLSL について日本語記事をたくさん書いてくれているサイト
• lettier/3d-game-shaders-for-beginners: A step-by-step guide on how to implement SSAO, depth of field, lighting, normal mapping, and more for your 3D game.

スライド

• [2019-09] めくるめくシェーダーアートの世界/The World of Dazzling Shader Art - Speaker Deck
  • シェーダでお絵かきする手法が基礎から丁寧に解説されていて、内容も充実している
    • 複製や複製の ID 識別 / 疑似乱数 / HSV による色の扱い / 空間の歪め方 / レイマーチング
    • 最後に雨粒シェーダの解説も載ってる
  • Metal のシェーダ言語（MSL）が書かれた希少な資料

チュートリアル系

• Unity Tutorials - Roystan
  • 草原シェーダ / アウトラインシェーダ / トゥーンシェーダ / トゥーンな水面の描画など
  • 質の高い内容が丁寧な解説でまとまっている。記事の装丁も綺麗で見やすい

シェーダやってる人のサイト

• Inigo Quilez :: fractals, computer graphics, mathematics, shaders, demoscene and more
  • シェーダを調べるとよく名前が出てくる iq 氏のサイト
  • デモシーンで有名な Elevated の作者：
    • [2009] Elevated by RGBA and TBC - YouTube
• なんかやる
  • かねた氏 / レイマーチングで検索するとよく出てくる人 / 作品のクオリティが高い
• Computation | Art
  • Generative Art 系
• Projects - Made by Evan
• Ore-GL
  • WebGL の綺麗なデモがある

レイマーチング

最初に読みたい系

• [2016-02] シェーダだけで世界を創る！three.jsによるレイマーチング
  • まず読みたいスライド。レイマーチングの原理の解説がわかりやすい
• [2018-12] シェーダー芸人になりたかった6か月前の自分に教えてあげたいリンク集 - Qiita
  • シェーダを学ぶにあたって有用なリンク集がまとまっている

解説記事 / チュートリアル

• [2016-07] Ray Marching and Signed Distance Functions
• [2016-10] Raymarching Distance Fields: Concepts and Implementation in Unity
  • コード : Flafla2/Generic-Raymarch-Unity: An experiment in distance field raymarching that interacts with standard mesh-based objects. Made in Unity.
• [2016-12] [GLSL] レイマーチング入門 vol.1 - Qiita
• [2018-12] GLSL SandBoxで手軽にレイマーチングで遊ぼう - Akatsuki Hackers Lab | 株式会社アカツキ（Akatsuki Inc.)
  • シンプレックスノイズ でテラインの表現
• [2018-12] 【シェーダーグラフメモ その18】レイマーチングで遊んでみた - rn.log
  • Unity のシェーダグラフを使っている例
• [2019-07] 魔法使いになりたい人のためのシェーダーライブコーディング入門 - Qiita
  • 実際のライブコーディング時の映像のリンクもあり
  • 記事の解説も丁寧でとてもわかりやすい

スライド

• [2018-09] GLSLtech2018 レイマーチングで半歩差のつく小技集
  • keim 氏のスライド / ブルームとか

ツール

• aiekick/glsl-marching-cubes: WebGL Signed Distance Function Mesher
  • 距離関数を視覚化してくれるやつ

実装時によく見るやつ

• Inigo Quilez :: fractals, computer graphics, mathematics, shaders, demoscene and more
  • 多くの人がよく参照するであろう、各形状の距離関数集
• [2019-04] GLSLについてのメモ - Qiita
  • GLSL の主要なビルトイン関数まとめ

GLSL → HLSL

• [2016-09] GLSL/HLSL/Metal 命令対応表
• [2018] GLSLをHLSLに書き換える - さやちゃんぐbotスクラップス
• [2019-07] GLSLをHLSLに書き換える - Qiita
  • 主要なものがまとまっているのでよく見る

シェーダ実装テクニック / 実装例

• メタボール
  • メタボール - Wikipedia
  • wgld.org | GLSL: オブジェクト同士を補間して結合する |
  • Ray Marching Metaball in Unity3D - Sehyun Av Kim - Medium
    • コード : avseoul/Unity3D_RayMarching_MetaBall

---

• [2017-02] Shader(HLSL), 手続き的にテクスチャ生成など行うとき使用頻度の高い関数 - Qiita
  • if の置き換え / smoothstep など
• [2019-05] [GLSL] Shadertoyのシェーダ芸人になるためのTips集 - Qiita
  • 魚眼レンズ / ランダム / グリッド / ガンマ補正 / 簡易法線計算
• [2019-07] レイマーチングのための複雑な距離関数 - Qiita
  • メンガーのスポンジとか、六角形のタイリングとか
• [2019-07] レイマーチング | IFSとPolar Modについて雑にまとめてみる - Qiita
• 汎用関数 | HSV2RGB 関数 - Qiita
  • keim 氏の記事 / HSV から RGB に変換する短い実装

VJ 系

• [2018-03] UnityでVJ的な作品をつくる - Qiita
• [2018-11] （動画） Unityを使ったVJでよく使うイメージエフェクト集 - YouTube
  • 技術同人誌 Unity Graphics Programming を書いている人の講演
    • Web Player によるデモ : Unityを使ったVJでよく使うイメージエフェクト集スライド | フリーゲーム投稿サイト unityroom
    • コード : kaiware007/UnityVJShaderSlide20181108: Unity Shader 勉強会発表用スライドプロジェクト

目に止まった作品 / 実装例

Shadertoy

• [2019-07] Neon road
  • by kaneta / 286 行 / ネオン系。綺麗 / ブルーム、魚眼レンズ、ディザリング
• [2015-08] 2d signed distance functions
  • by Maaten / 359 行 / 基本的なシェイブと、光と影
  • レイマーチングの図形描画の基本形として参考になる / コードの命名もわかりやすくて読みやすい
• [2018-08] Optical Stream
  • by notargs / 144 行 と短め / めっちゃカラフル
• [2017-06] caustics and water
  • by frankbatista / 54 行 / 水面っぽい表現。実用性ありそう

Shadertoy 以外

• Anti-Aliased Grid Shader - Made by Evan
  • 偏微分（fwidth）を使ったグリッドシェーダ
• Seigaiha Revisited
  • 和風の模様 / 青海波 というらしい

Unity アセット

• [2018-10] 【Unity】無料のオススメシェーダまとめ（110個） - コガネブログ

関連リンク

自分でやったやつ