そろそろシェーダーをはじめる

これは 7 日間でマスターする Unity シェーダ入門【Unity , shader】原神の海を再現したい を読んで、なるべく基礎からシェーダーを書く方法を学んでいくシリーズだ。数式とはなかなか仲良くなれないが、なんとか頑張っていく。

このシェーダー入門は、おもに数式に焦点をあてる。なぜかって?筆者が数学なんもわからんの民だからだ。まちがっていたらおしえてほしい。

言語は HLSL、環境は Unity 2022 をつかう。

ロードマップ

  • 基礎的な構文を理解する
  • パーリンノイズまで理解する
  • 海面を作る
  • 数式と仲良くなる
  • シェーダーモンスターをゲットしてシェーダーマスターになる

目次

  • 1 ~ 6 までは実際に書いたわけではなく、備忘録的に作成した記事。現在のバージョンで動くかは不明。
  • 7 ~ 9 は、実際に書きながら学習した記事。

バックリンク

ネットワーク

site_graph 20241209-develop-index 🔧技術 - インデックス 20241209-socialmedia-index 📱ソーシャルメディア - インデックス 20241209-develop-index->20241209-socialmedia-index 20241210-digital-gerden デジタルガーデンの整備を進めた話 20241209-develop-index->20241210-digital-gerden 20241218-nos-hagaki-great-changing-plan NosHagaki大改造計画 20241209-develop-index->20241218-nos-hagaki-great-changing-plan 20241223-wcag20-visual-audio-contrast-without-color WCAG 2.0 達成基準 1.4.1 を理解する 20241209-develop-index->20241223-wcag20-visual-audio-contrast-without-color 20241227-social-media-comment-button ウェブサイトにコメントボタンを追加する 20241209-develop-index->20241227-social-media-comment-button 20250105-note-taking-techniques-index 📝メモの技法 - インデックス 20241209-develop-index->20250105-note-taking-techniques-index 20250212-philosophy-dialog-event-by-usable-udon-gimmick-made-story-conclusion 哲学対話イベントで使える Udon ギミックを作った話 まとめ 20241209-develop-index->20250212-philosophy-dialog-event-by-usable-udon-gimmick-made-story-conclusion 20250213-start-shader そろそろシェーダーをはじめる 20241209-develop-index->20250213-start-shader 20250413-ecdsa-sign-learn-in-tsunndere ツンデレで学ぶECDSA署名 20241209-develop-index->20250413-ecdsa-sign-learn-in-tsunndere 20250418-dijkstras-algorithm-learn-in-tsunndere ツンデレで学ぶダイクストラ法 20241209-develop-index->20250418-dijkstras-algorithm-learn-in-tsunndere 20250507-bluesky-and-the-atprotocol Blueskyってなんだ?ATProtocolのアーキテクチャ入門 20241209-develop-index->20250507-bluesky-and-the-atprotocol 20250709-share-your-website-with-brid-gy Brid.gyでウェブサイトを共有してみる 20241209-develop-index->20250709-share-your-website-with-brid-gy 20251212-i-want-to-turn-thino-into-an-indie-web-microblog Thinoをインディーウェブなマイクロブログにしたい 20241209-develop-index->20251212-i-want-to-turn-thino-into-an-indie-web-microblog 20251221-notes-on-managing-adhd ADHD自己管理術:戦略と戦術 20241209-develop-index->20251221-notes-on-managing-adhd 230928-create-ssg-1 GitHub Pages & Next.jsで個人サイト作ってつまづいたところ 20241209-develop-index->230928-create-ssg-1 230929-create-ssg-2 個人サイトに動的ogを作ってつまづいたところ 20241209-develop-index->230929-create-ssg-2 240311-nos-hagaki-making ハッカソンでバーチャルな文通ができるNostrクライアント「NosHagaki」を作ってみた 20241209-develop-index->240311-nos-hagaki-making 240824-a-conversation-with-zettelkasten-by-llm NotebookLMを通じたツェッテルカステンとの対話 20241209-develop-index->240824-a-conversation-with-zettelkasten-by-llm 240905-nostr-music-client-memo Nostrの音楽アプリをぼんやり構想してみる 20241209-develop-index->240905-nostr-music-client-memo 240911-udon-zettelkasten-system ハッカソン成果物発表 - Udon Zettelkasten System の紹介 20241209-develop-index->240911-udon-zettelkasten-system 241020-chatgpt-develop コード書くときChatGPTはどう使える?【WhiteCUL/春日部つむぎ】 20241209-develop-index->241020-chatgpt-develop 241031-sofa-asset-concept ソファのアセット構想 20241209-develop-index->241031-sofa-asset-concept 20250213-1-write-ice-shader 1 氷のようなシェーダーを書く 20250213-2-highlight-outline 2 輪郭を浮かび上がらせる 20250213-3-create-stained-glass 3 ステンドグラスをつくる 20250213-4-create-scroll-water-surface 4 スクロールする水面を作る 20250213-5-blend-texture 5 テクスチャをブレンドする 20250213-6-move-circle-and-ring 6 円やリングを動かす 20250213-7-create-noise 7 ノイズをつくろう 20250213-8-create-fresnel-reflecting 8 フレネル反射をつくる 20250213-9-create-sea 9 海をつくる 20250213-9-create-sea->20250213-4-create-scroll-water-surface 20250213-9-create-sea->20250213-7-create-noise 20250213-9-create-sea->20250213-8-create-fresnel-reflecting 20250213-start-shader->20250213-1-write-ice-shader 20250213-start-shader->20250213-2-highlight-outline 20250213-start-shader->20250213-3-create-stained-glass 20250213-start-shader->20250213-4-create-scroll-water-surface 20250213-start-shader->20250213-5-blend-texture 20250213-start-shader->20250213-6-move-circle-and-ring 20250213-start-shader->20250213-7-create-noise 20250213-start-shader->20250213-8-create-fresnel-reflecting 20250213-start-shader->20250213-9-create-sea