Chapter 47無料公開

🍍 レシピ一覧

かもそば
かもそば
2021.08.29に更新
このチャプターの目次
  1. 🍎 OneMinusノード
  2. 🍎 Add/Subtractノード
  3. 🍎 Multiplyノード
  4. 🍎 Sineノード
  5. 🍎 Lerpノード
  6. 🍎 Stepノード
  7. 🍎 Smoothstepノード
  8. 🍎 Powerノード
  9. 🍎 Absoluteノード
  10. 🍎 Positionノード
  11. 🍎 Dot Productノード
  12. 🍎 Cross Productノード
  13. 🍎 Screen Positionノード
  14. 🍎 Posterizeノード
  15. 🍎 Custom Functionノード
  16. 🍍 ホログラム表現
  17. 🍍 フレネルエフェクト
  18. 🍍 3Dスキャンライン表現
  19. 🍍 集中線エフェクト【uGUI】
  20. 🍍 画面遷移の実装(後半)
  21. 🍍 SVG素材を使った線のアニメーション【Adobe Illustrator】
  22. 🍇 サンプルProcedural Pattensで遊ぶ
  23. 🍍 グレースケール画像に色を付ける
  24. 🍍 ノイズを使った表現
  25. 🍍 ディゾルブ表現
  26. 🍇 3Dモデルの変形 (頂点シェーダー)
  27. 🍍 シャボン玉 (Particle System)
  28. 🍇 ParticleSystemとの連携(カメラ距離)
  29. 🍍 ノイズを利用した陽炎表現
  30. 🍇 オブジェクトの座標を取得する

このページでは、本書の作例の一覧をまとめています。

🍎 OneMinusノード

OneMinusノードを使うと、色の反転やアニメーションの反転を作ることができます。

🍎 Add/Subtractノード

AddノードやSubtractノードを使うとUVスクロールを作ることができます。

テクスチャの加算・減算にも使えます

🍎 Multiplyノード

Multiplyノードを使うと、テクスチャにマスクをかけたり、白黒画像に色を付けることができます。

🍎 Sineノード

Sineノードを使うと、明滅アニメーションや波紋を作ることができます。

🍎 Lerpノード

Lerpノードを使うと、二つの色を利用してグレースケール画像に着色できます。

🍎 Stepノード

Stepノードを使うと、波紋や点線リングなどを作ることができます。

🍎 Smoothstepノード

Smoothstepはコントラスト調整などに利用できます。

🍎 Powerノード

Powerノードもコントラスト調整などに利用できます。

🍎 Absoluteノード

グラデーションの特定の値を塗りつぶしたい、という場合にAbsoluteノードが使えます。

🍎 Positionノード

Positionノードを使うと、3次元的なシマシマ、3次元的な波紋などが作れます。

🍎 Dot Productノード

Dot Product ノードを利用することで、好きな方向に進むグラデーションを作ることができます。

輪郭線の抽出にも使用することができます。

🍎 Cross Productノード

Cross Product ノードを利用することで、ある方向の外側を向くベクトルを作ることができます。

頂点モデルを外側に押し出す

🍎 Screen Positionノード

Screen Positionノードを使うと、モデルの向きに依存しないシマシマを作れます


🍎 Posterizeノード

Posterizeノードを使うとドット絵風の表現を作れます。

ドット絵風の波紋


回転するドットパターン

🍎 Custom Functionノード

Custom Functionを利用すると、独自のノードを作ることができます。

1次元ノイズ

ランダムな明滅

三角形模様

🍍 ホログラム表現

🍍 フレネルエフェクト

🍍 3Dスキャンライン表現

🍍 集中線エフェクト【uGUI】



🍍 画面遷移の実装(後半)








🍍 SVG素材を使った線のアニメーション【Adobe Illustrator】

SVG素材を利用して、線が削れるアニメーションを作る方法を紹介します。
Adobe Illustratorを使用します。

🍇 サンプルProcedural Pattensで遊ぶ

サンプルProcedural Pattensを使うことで、以下のようなパターンを作ることができます。

🍍 グレースケール画像に色を付ける

グレースケール画像に色を付ける方法を紹介しています。

🍍 ノイズを使った表現


炎


燃えるガス


闇の炎


火の玉


水面

🍍 ディゾルブ表現

3Dモデルが削れるような表現(ディゾルブ表現)の作り方を解説しています。

🍇 3Dモデルの変形 (頂点シェーダー)

頂点シェーダーを利用して、3Dモデルを変形させる方法を解説しています。


3Dモデルをうねらせる


板を波打たせる


3Dモデルを膨らませる

🍍 シャボン玉 (Particle System)

ShaderGraphとParticle Systemを組み合わせてシャボン玉を作る方法を紹介しています。

🍇 ParticleSystemとの連携(カメラ距離)

カメラからの距離に応じて色の変化をつける方法や、ソフトパーティクルを作る方法を紹介しています。

カメラに近づくと薄くなるパーティクル


カメラ距離に応じて色が変わるパーティクル


ソフトパーティクル

🍍 ノイズを利用した陽炎表現

陽炎のように歪む表現の作り方を紹介しています。

🍇 オブジェクトの座標を取得する

オブジェクトの座標を取得する方法を紹介しています。
これを利用することで、オブジェクトの回転やスケールの影響を受けない3D表現を作ることができます。