https://shibuya24.info/_next/static/chunks/pages/entry/unity-start-shadergraph-d8dedf69ed407ebe.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5987],{4936:(a,e,r)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/entry/unity-start-shadergraph",function(){return r(58663)}])},58663:(a,e,r)=>{"use strict";r.r(e),r.d(e,{default:()=>S,meta:()=>m}),r(96540);var t=r(15680),n=r(47199);r(78660),r(28770),r(72926);var p=r(46553);r(87380),r(2679),r(91106);var l=r(11945);r(93309),r(79991);var y=r(4653);r(5282),r(7352),r(88626),r(63356);var h=r(98990),i=r(76846),g=r(7288),d=r(81253),s=r(62227);r(16258),r(88426);var c=r(88575);r(58608),r(4437),r(378);let m={title:"【Unity】初心者向けShader Graphの始め方",url:"unity-start-shadergraph",date:"2022-05-15T08:27:52",updated:"2022-05-15T08:27:52",description:"Unityの「Shader Graph」はプログラミングなしでシェーダーを作れます。今までシェーダーを諦めていた人はShader Graphに挑戦してみませんか？",image:"https://i.gyazo.com/cb50f3d3c995e8e9f877d7924dffbac3.jpg#1920.0__1280.0",tags:["unity-rendering"],no_top:0,noindex:0,show_follow:0,canonical:""},u={meta:m},o=a=>{let{children:e}=a;return(0,t.yg)(n.A,{meta:m},e)};function S(a){let{components:e,...r}=a;return(0,t.yg)(o,{...u,...r,components:e,mdxType:"MDXLayout"},(0,t.yg)("p",null,"こんにちは、エンジニアのオオバです。  "),(0,t.yg)(i.A,{nayami:"シェーダーを作りたいけどプログラミングが分からない,Shader Graphはプログラミング不要？,Shader Graphを始めてみたい",mdxType:"Onayami"}),(0,t.yg)("p",null,"結論から話しますと ",(0,t.yg)("strong",{parentName:"p"},"Shader Graphはプログラミング無しでシェーダーを作ることができるUnity公式ツール")," です。Shader Graph（シェーダーグラフ）を使うことでエンジニアだけでなく、デザイナーやプランナーもNode（ノード）と呼ばれる線をつないでシェーダーを作れるのです。  "),(0,t.yg)("p",null,"そこでShader Graphの始め方を初心者向けに解説します。この記事をとおしてぜひともSha

1der Graphを始めてみてください。今までシェーダーをやりたかったけどできなかったという方にぜひ読んでもらいたいです。  "),(0,t.yg)(l.A,{local_url_key:"unity-start-vfxgraph",query:"",mdxType:"RecommendBlock"}),(0,t.yg)(p.A,{type:"attension",mdxType:"MyAd"}),(0,t.yg)(p.A,{type:"before_toc",url:"unity-start-shadergraph",mdxType:"MyAd"}),(0,t.yg)("div",{id:"toc-container"},(0,t.yg)("div",{className:"toc-title"},"もくじ"),(0,t.yg)("ul",null,(0,t.yg)("li",null,(0,t.yg)("a",{href:"#ShaderGraphを使うための準備"},"Shader Graphを使うための準備")),(0,t.yg)("li",null,(0,t.yg)("a",{href:"#ShaderGraphの大まかな流れ3手順"},"Shader Graphの大まかな流れ3手順")),(0,t.yg)("ul",null,(0,t.yg)("li",{className:"inner"},(0,t.yg)("a",{href:"#手順①ShaderGraphファイルの作成"},"手順①Shader Graphファイルの作成")),(0,t.yg)("li",{className:"inner"},(0,t.yg)("a",{href:"#手順②Materialにシェーダーをセット"},"手順②Materialにシェーダーをセット")),(0,t.yg)("li",{className:"inner"},(0,t.yg)("a",{href:"#手順③Materialをオブジェクトにセット"},"手順③Materialをオブジェクトにセット"))),(0,t.yg)("li",null,(0,t.yg)("a",{href:"#ShaderGraphで基本的なシェーダーの作り方3選"},"Shader Graphで基本的なシェーダーの作り方3選")),(0,t.yg)("ul",null,(0,t.yg)("li",{className:"inner"},(0,t.yg)("a",{href:"#ShaderGraphウィンドウの表示"},"Shader Graphウィンドウの表示")),(0,t.yg)("li",{className:"inner"},(0,t.yg)("a",{href:"#ShaderGraph内の要素の解説"},"Shader Graph内の要素の解説")),(0,t.yg)("li",{className:"inner"},(0,t.yg)("a",{href:"#ノードの基本は入力と出力"},"ノードの基本は入力と出力")),(0,t.yg)("li",{className:"inner"},(0,t.yg)("a",{href:"#ShaderGraphで色を変更するシェーダーの作り方"},"Shader Graphで色を変更するシェーダーの作り方")),(0,t.yg)("li",{className:"inner"},(0,t.yg)("a",{href:"#ShaderGraphでテクスチャを貼るシェーダーの作り方"},"Shader Graphでテクスチャを貼るシェーダーの作り方")),(0,t.yg)("li",{className:"inner"},(0,t.yg)("a",{href:"#ShaderGraphでアニメーションするシェーダーの作り方"},"Shader Graphでアニメーションするシェーダーの作り方"))),(0,t.yg)("li",null,(0,t.yg)("a",{href:"#ShaderGraphの始め方まとめ"},"Shader Graphの始め方まとめ")),(0,t.yg)("li",null,(0,t.yg)("a",{href:"#ShaderGraphと合わせて描画の仕組ã

1¿ã‚‚理解しよう"},"Shader Graphと合わせて描画の仕組みも理解しよう")))),(0,t.yg)(p.A,{type:"after_toc",mdxType:"MyAd"}),(0,t.yg)("h2",null,"Shader Graphを使うための準備"),(0,t.yg)("p",null,"最初にShader Graphを使うための準備を解説します。今回は初心者向けということで手っ取り早く始める方法です。新しくUnityプロジェクトを作ります。 ",(0,t.yg)("em",{parentName:"p"},"Unity2021.3.0f1")," を使っています。  "),(0,t.yg)("p",null,(0,t.yg)("em",null,"→ "),(0,t.yg)("a",{href:"./unity-version"},"おすすめのUnityバージョンの選び方アップデート方法と注意点まとめ")),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/d6ca4790f251a3934490a7aa1e6cfca2.jpg#750__439",alt:"【Unity】初心者向けShader Graphの始め方_0"}),(0,t.yg)("br",{parentName:"p"}),"\n","上図のとおりテンプレートを3D（URP）を選択してください。  "),(0,t.yg)("p",null,"URPとは描画パイプライン「Universal Render Pipeline」の略です。ビルトインパイプラインと呼ばれる昔ながらの描画システムを一新しました。今後のUnityのデフォルト描画システムになると言われています。URPの特徴は描画システムをC#でカスタマイズできるところです。  "),(0,t.yg)("p",null,(0,t.yg)("em",null,"→ "),(0,t.yg)("a",{href:"./unity-urp-add-pass"},"【超基本編】URPに独自のパスを追加する方法※Unity6以前ver")),(0,t.yg)("p",null,"今回URPを選んだ理由は、URPを選択すると自動的にShader Graphがインストールされるからです。Shader Graphを手っ取り早く始めたい方はURPを選んでUnityプロジェクトを作るのが早いです。  "),(0,t.yg)("h2",null,"Shader Graphの大まかな流れ3手順"),(0,t.yg)("p",null,"具体的なシェーダーの作成に入る前に、Shader Graphでシェーダーの作成から3Dオブジェクトに反映してディスプレイに表示するまでの流れを簡単に解説します。その後の章",(0,t.yg)("a",{parentName:"p",href:"#ShaderGraph%E3%81%A7%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B93%E9%81%B8"},"「→ Shader Graphで基本的なシェーダーの作り方3選」"),"でShader Graphを使ってシェーダーを作成していきます。  "),(0,t.yg)(y.$E,{type:"1",title:"Shader Graphの大まかな流れ3手順",content:"   ①Shader Graphファイルの作成   ②Materialにシェーダーをセット   ③Materialをオブジェクトにセット   ",mdxType:"SimpleBox1"}),(0,t.yg)("h3",null,"手順①Shader Graphファイルの作成"),(0,t.yg)("p",null,"最初の手順はShader Graphファイルの作成です。Shader Graphファイルがそのままシェーダーファイルになります。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/1d43408de326a22e669d317a8a911ed0.jpg#750__260",alt:"【Unity】初心者向けShader Graphの始め方_1"}),"  "),(0,t.yg)("p",null,(0,t.yg)("inlineCode",{parentName:"p"},"メニュー Assets > Create > Shader Graph URP > Unlit Shader Graph")," をクリックします。「Unlit」とはライトの影響を受けないシェーダーです。ライトの影響を受けたシェーダーを作りたい方は「Lit Shader Graph」を選んでください。今回はシンプルなシェーダーを作りたいので「Unlit」を選択しています。  "),(0,t.yg)("div",{className:"attention"},"※UnlitとLitは後から変更可能"),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/7242bae469475d87f99fd697b216c6cc.png#588__358",alt:"【Unity】初心者向けShader Graphの始め方_2"}),(0,t.yg)("br",{parentName:"p"}),"\n","ProjectウィンドウにUnlit Shaderファイルが作られるので任意の名前を付けます。  "),(0,t.yg)("h3",null,"手順②Materialにシェーダーをセット"),(0,t.yg)("p",null,"作成したShaderをオブジェクトに適用するためにMaterialを作成します。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/ca485cf5c5c9fd8b1aecef54f6c405f9.jpg#438__500",alt:"【Unity】初心者向けShader Graphの始め方_3"}),(0,t.yg)("br",{parentName:"p"}),"\n",(0,t.yg)("inlineCode",{parentName:"p"},"メニュー Assets > Create > Material")," で新規のMaterialを作成し、名前を付けましょう。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/4744fa4929ebb8dc3d0927ba02b12388.gif",alt:"【Unity】初心者向けShader Graphの始め方_4"}),(0,t.yg)("br",{parentName:"p"}),"\n","ShaderファイルをMaterialにドラッグ・アンド・ドロップしてください。するとMaterialはShaderを適用された状態になります。  "),(0,t.yg)("h3",null,"手順③Materialをオブジェクトにセット"),(0,t.yg)("p",null,"最後に3DオブジェクトにMaterialを適用してディスプレイに表示させます。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/26631ab604051806d574073057687939.jpg#750__422",alt:"【Unity】初心者向けShader Graphの始め方_5"}),(0,t.yg)("br",{parentName:"p"}),"\n",(0,t.yg)("inlineCode",{parentName:"p"},"メニュー GameObject > 3D Object > Quad")," をクリックします。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/0e506019e61ff139dfcb8c40c7b93b37.png#676__298",alt:"【Unity】初心者向けShader Graphの始め方_6"}),(0,t.yg)("br",{parentName:"p"}),"\n","すると、Hierarchyウィンドウに「Quad」というオブジェクトが作られます。Quadとは4頂点で作られたシンプルな四角形ポリゴンメッシュです。Inspectorウィンドウを使ってQuadにMaterialをセットしていきます。  "),(0,t.yg)("p",null,(0,t.yg)("a",{href:"./unity-place-object"},"\uD83D\uDC49 【初心者向け】今さら聞けないUnityでオブジェクト（基本図形）を配置する方法")),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/23ba132d97f39d77cd455f119030ed18.gif",alt:"【Unity】初心者向けShader Graphの始め方_7"}),(0,t.yg)("br",{parentName:"p"}),"\n","QuadのInspectorウィンドウにMaterialをドラッグ・アンド・ドロップしてください。するとQuadにMaterialが適用されます。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/00b112e7d6ed90ad06c5f355b1ab2138.jpg#750__489",alt:"【Unity】初心者向けShader Graphの始め方_8"}),(0,t.yg)("br",{parentName:"p"}),"\n","このようにSceneビューにシェーダーを適用した四角形が表示されました。見た目に変化が無いかもしれませんが安心してください。以降の章でシェーダーを編集して見た目を変えていきます。  "),(0,t.yg)("p",null,(0,t.yg)("a",{href:"./unity-material"},"\uD83D\uDC49 【初心者向け】Unityのオブジェクトの色を変える方法（マテリアルを使用）")),(0,t.yg)(p.A,{tag:"unity-rendering",order:"0",url:"unity-start-shadergraph",mdxType:"MyAd"}),(0,t.yg)("h2",null,"Shader Graphで基本的なシェーダーの作り方3選"),(0,t.yg)("p",null,"ここからはShader Graphを使ってシェーダーを編集していきます。まずはShader Graphがどういうものかを解説します。その後に ",(0,t.yg)("em",{parentName:"p"},"色の変更、テクスチャ、アニメーション")," といった基本的なテクニックを解説していきます。  "),(0,t.yg)("h3",null,"Shader Graphウィンドウの表示"),(0,t.yg)("p",null,"Shader Graphのシェーダーを編集するためにはShader Graphウィンドウを使います。Shader Graphウィンドウは ",(0,t.yg)("em",{parentName:"p"},"Shader Graphファイルごとに開くことができます。"),"  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/0bedcd18a313aecbaaa2eac3a744e5b9.png#602__328",alt:"【Unity】初心者向けShader Graphの始め方_9"}),(0,t.yg)("br",{parentName:"p"}),"\n",(0,t.yg)("a",{parentName:"p",href:"#%E6%89%8B%E9%A0%86%E2%91%A0%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90Create%E3%81%8B%E3%82%89UnlitGraph%E3%82%92%E9%81%B8%E6%8A%9E"},"「→ 手順①シェーダーファイルの作成 CreateからUnlit Graphを選択」"),"で作成したシã‚

1§ãƒ¼ãƒ€ãƒ¼ãƒ•ã‚¡ã‚¤ãƒ«ã‚’選択し、Inspectorウィンドウの「Open Shader Editor」をクリックします。するとShader Graphウィンドウが開きます。またShader Graphファイルの ",(0,t.yg)("em",{parentName:"p"},"ダブルクリック")," で同様にShader Graphウィンドウは開きます。  "),(0,t.yg)("h3",null,"Shader Graph内の要素の解説"),(0,t.yg)("p",null,"Shader Graphウィンドウは大きく4つの要素で構成されています。  "),(0,t.yg)("ul",null,(0,t.yg)("li",{parentName:"ul"},"Blackboard（ブラックボード）"),(0,t.yg)("li",{parentName:"ul"},"Master Stack（マスタースタック）"),(0,t.yg)("li",{parentName:"ul"},"Graph Inspector（グラフインスペクター）"),(0,t.yg)("li",{parentName:"ul"},"Main Preview（メインプレビュー）")),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/b39aa42c33696833cd33c1e9fe14f86b.jpg#620__500",alt:"【Unity】初心者向けShader Graphの始め方_10"}),"  "),(0,t.yg)("p",null,"「Blackboard」はシェーダーのプロパティとキーワードのリスト。「Master Stack」はシェーダーへの最終的な出力。「Graph Inspector」は現在選択中のノードやプロパティを編集するパネル。「Main Preview」は現在のシェーダーを適用した時のプレビュー画面です。  "),(0,t.yg)("p",null,"いきなりすべてを覚えるのは難しいですよね。シェーダーを編集しながら少しずつ学んでいきましょう。  "),(0,t.yg)("h3",null,"ノードの基本は入力と出力"),(0,t.yg)("p",null,"Shader Graphを使っていく上でノードを作ることになります。複数のノードを組み合わせることでシェーダーを作り上げるのです。そのノードの基本は入力と出力です。 ",(0,t.yg)("strong",{parentName:"p"},"ノードの左側が入力、右側が出力です。")," 出力しか存在しないノードもあります。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/8bdeb84e22807ace45c833c585835c3d.png#696__407",alt:"【Unity】初心者向けShader Graphの始め方_11"}),(0,t.yg)("br",{parentName:"p"}),"\n","例えば上図は「Vector2ノード」です。Vector2には2つの値を格納します。 ",(0,t.yg)("em",{parentName:"p"},"格納する側が左側の入力。右側がVector2型を出力します。")," 入力は出力を接続します。入力が入力を接続することはできません。以上のルールをもとにShader Graphでシェーダーを作っていきます。  "),(0,t.yg)("h3",null,"Shader Graphで色を変更するシェーダーの作り方"),(0,t.yg)("p",null,"ここからShader Graphを使ってシェーダーを編集していきます。最初はシンプルに色を変更する方法を解説します。まずはこちらの動画を見てください。",(0,t.yg)("br",{parentName:"p"}),"\n",(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/b7f15ace4d75caaa8df8bac46360919c.gif",alt:"【Unity】初心者向けShader Graphの始め方_12"}),"  "),(0,t.yg)("p",null,"Blackboardの「+」ボタンをクリックして「Color」を選びます。「Colorプロパティ」をドラッグ・アンド・ドロップで外に出し、Master StackのFragmentに接続します。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/e10b16733d01d38c9c0c35a82da20147.jpg#750__392",alt:"【Unity】初心者向けShader Graphの始め方_13"}),(0,t.yg)("br",{parentName:"p"}),"\n","このような状態になったと思います。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/6873cd2cdf6a9b42d260d06dd119f4c3.png#466__208",alt:"【Unity】初心者向けShader Graphの始め方_14"}),(0,t.yg)("br",{parentName:"p"}),"\n","Shader Graphを編集したら「Save Asset」ボタンを必ずクリックしましょう。これをしないと変更が反映されません。では、Materialを見てみましょう。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/f78d5b69c004898e2b027c125be3ee7f.png#524__406",alt:"【Unity】初心者向けShader Graphの始め方_15"}),(0,t.yg)("br",{parentName:"p"}),"\n","MaterialのInspectorウィンドウに新たに「Color」が追加されました。色を変更してみます。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/e531977540f9aa85a09850705b4194b9.gif",alt:"【Unity】初心者向けShader Graphの始め方_16"}),(0,t.yg)("br",{parentName:"p"}),"\n","するとオブジェクトの色も変わります。  "),(0,t.yg)("h3",null,"Shader Graphでテクスチャを貼るシェーダーの作り方"),(0,t.yg)("p",null,"次にテクスチャを貼ってみます。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/05a2f43d5d172294edca737b230734eb.png#256__256",alt:"【Unity】初心者向けShader Graphの始め方_17"}),"  "),(0,t.yg)("p",null,"↑の画像を用意しました。この画像は「",(0,t.yg)("a",{href:"https://assetstore.unity.com/packages/2d/characters/2d-medieval-fantasy-character-pack-114405?aid=1100lNUQ&pubref=unity-start-shadergraph",target:"_blank"},"中世ファンタジーRPG風2Dキャラクターパック"),"」というのイラストアセットを使用しています"),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/d8149b5bf2ec131c2ddb89d1191f6780.gif",alt:"【Unity】初心者向けShader Graphの始め方_18"}),(0,t.yg)("br",{parentName:"p"}),"\n","Shader Graphウィンドウ内で右クリックして「Create Node」を選択します。検索窓をうまく使いましょう。リストの中から「Sample Texture 2D」を選びSample Texture 2Dノードを作り、Master StackのFragmentに接続します（↑動画参照）。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/b5e1a4b47934b4bed088fc0d43989ab8.gif",alt:"【Unity】初心者向けShader Graphの始め方_19"}),(0,t.yg)("br",{parentName:"p"}),"\n","Blackboardに「Texture2Dプロパティ」を作成して外に出し、「Sample Texture 2Dノード」のTextureに接続します。  "),(0,t.yg)("p",null,"Save Assetボタンをクリックして保存したら再びMaterialを見てみましょう。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/1aa0d8f9dc82633011fc7753912c3bef.png#540__492",alt:"【Unity】初心者向けShader Graphの始め方_20"}),(0,t.yg)("br",{parentName:"p"}),"\n","MaterialのInspectorウィンドウに「Texture2D」プロパティが追加されています。そこに用意した画像をドラッグ・アンド・ドロップしてください。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/2aa9d67bc8192a98e235509b9eacb4d4.jpg#748__500",alt:"【Unity】初心者向けShader Graphの始め方_21"}),(0,t.yg)("br",{parentName:"p"}),"\n","するとこのようにQuadにテクスチャを貼ることができました。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/1387645ee6dc6f83e958233248a50065.png#750__394",alt:"【Unity】初心者向けShader Graphの始め方_22"}),(0,t.yg)("br",{parentName:"p"}),"\n","最終的なShader Graphも添付しておきます。  "),(0,t.yg)("h3",null,"Shader Graphでアニメーションするシェーダーの作り方"),(0,t.yg)("p",null,"Shader Graphで簡単なアニメーションを作ってみます。前章",(0,t.yg)("a",{parentName:"p",href:"#ShaderGraph%E3%81%A7%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E3%82%92%E8%B2%BC%E3%82%8B%E6%96%B9%E6%B3%95"},"「→ Shader Graphでテクスチャを貼る方法」"),"のグラフをカスタマイズしていきます。今回新しく登場するノードは「Timeノード」と「UVノード」、「Addノード」です。  "),(0,t.yg)("p",null,"「Timeノード」とは時間経過をリアルタイムに取得することができます。この値を使ってアニメーションさせるのです。「UVノード」はUV座標を出力するノードです。UV座標とはテクスチャの座標です。テクスチャを動かすときに便利です。最後の「Addノード」とは足し算です。2つの入力を足した数を出力するのです。  "),(0,t.yg)(g.A,{mdxType:"Spacer"}),(0,t.yg)("p",null,"UVノードで解説した ",(0,t.yg)("em",{parentName:"p"},"UV座標の理解は3Dプログラミングでは必須")," です。こちらの記事で詳しく解説していますのであわせて読んでみてください。  "),(0,t.yg)(l.A,{local_url_key:"unity-mesh-dynamic-apply-texture",query:"",mdxType:"RecommendBlock"}),(0,t.yg)(g.A,{mdxType:"Spacer"}),(0,t.yg)("p",null,"では話を戻してShader Graphのアニメーションを作成します。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/eb84678237c506f881eb9a359a637bcf.png#750__402",alt:"【Unity】初心者向けShader Graphの始め方_23"}),(0,t.yg)("br",{parentName:"p"}),"\n","まずは「Timeノード」と「UVノード」「Addノード」を作ります。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/8e1a018921984f5e437e48127fa25c70.jpg#750__473",alt:"【Unity】初心者向けShader Graphの始め方_24"}),(0,t.yg)("br",{parentName:"p"}),"\n","上図のとおりUV座標とTimeを「Addノード」の入力に接続し、Addノードの出力を「Sample Texture2D」に接続します。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/8a1e3af164a08ade7c9d1a568e09b5b2.gif",alt:"【Unity】初心者向けShader Graphの始め方_25"}),(0,t.yg)("br",{parentName:"p"}),"\n","するとこのようにテクスチャがスクロールするアニメーションが作成できました。たったこれだけでシェーダーアニメーションも作れるのです。  "),(0,t.yg)("p",null,"もしアニメーションスピードが早ã

1™ãŽã‚‹ã¨æ„Ÿã˜ãŸã‚‰ã€ŒMultiplyノード」を使って調整してみましょう。「Multiplyノード」とはかけ算です。入力した2つの値を乗算（かけ算）した結果を出力します。",(0,t.yg)("br",{parentName:"p"}),"\n",(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/7289f1be5fc5af9115d6acfeee009f3b.png#750__461",alt:"【Unity】初心者向けShader Graphの始め方_26"}),(0,t.yg)("br",{parentName:"p"}),"\n","「Timeノード」を「Multiplyノードに」接続して、もう片方のMultiplyの入力を0.3にします。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/6b47ad7f6824d481fe1e8d617d3c2a93.gif",alt:"【Unity】初心者向けShader Graphの始め方_27"}),(0,t.yg)("br",{parentName:"p"}),"\n","すると先ほど作成したスクロールアニメーションのスピードが30%のスピードになり、ゆっくりになります。  "),(0,t.yg)(g.A,{mdxType:"Spacer"}),(0,t.yg)("p",null,"Shader Graphはシェーダーのコードを読み書きしなくても作れるのが魅力的です。 ",(0,t.yg)("em",{parentName:"p"},"中身のソースコードをイメージできると更に学びは加速します。")," 次の記事は実際にシェーダーを書いてスクロールアニメーションを解説しています。",(0,t.yg)("br",{parentName:"p"}),"\n",(0,t.yg)("img",{parentName:"p",src:"https://cdn-ak.f.st-hatena.com/images/fotolife/e/esakun/20170328/20170328214102.gif",alt:"【Unity】初心者向けShader Graphの始め方_28"}),(0,t.yg)("br",{parentName:"p"}),"\n","どのようにスクロール表現を実装しているのかソースコードを読むことで更にイメージがつきます。あわせて読んでみてください。  "),(0,t.yg)(l.A,{local_url_key:"unity-shader-scroll",query:"",mdxType:"RecommendBlock"}),(0,t.yg)("h4",null,"Sceneビューがシェーダーアニメーションしないときの対処法"),(0,t.yg)("p",null,"Sceneビューでシェーダーアニメーションしないときの対処法を解説します。Sceneビューには負荷を軽減するためにさまざまなオプションが用意されています。無駄なものを非表示にしてUnityエディタでの作業効率化を図るためです。  "),(0,t.yg)("p",null,(0,t.yg)("img",{parentName:"p",src:"https://i.gyazo.com/127a3f430ed684ad405cc78f3aa23316.jpg#750__332",alt:"【Unity】初心者向けShader Graphの始め方_29"}),(0,t.yg)("br",{parentName:"p"}),"\n","シェーダーアニメーションのON/OFFは「Always Refresh」で切り替えます。チェックを入れると、Editモード中も自動でシェーダーアニメーションが再生します。  "),(0,t.yg)("p",null,"Sceneビューはひょんなことで重くなります。次の記事では重くなったSceneビューをできるだけ軽くするテクニックを紹介していますので、ぜひ読んでみてください。  "),(0,t.yg)(l.A,{local_url_key:"unity-editor-scene-heavy",query:"",mdxType:"RecommendBlock"}),(0,t.yg)("h2",null,"Shader Graphの始め方まとめ"),(0,t.yg)("p",null,"この記事ではShader Graphの始め方を解説してきました。簡単に内容をまとめます。  "),(0,t.yg)(y.$E,{type:"1",title:"Shader Graphの始め方まとめ",content:"   Shader GraphはPackage Managerからインストール,   Shader Graphウィンドウでシェーダーを編集,   Shader Graphは4つの要素で構成,   今回は基本的な「色替え」「テクスチャ貼り」「アニメーション」を作成   ",mdxType:"SimpleBox1"}),(0,t.yg)("p",null,"こんな感じです。作業自体は思ったより簡単だったのではないでしょうか。Shader Graphにはさまざまなノードが用意されているので、ぜひ色々と遊んでみてください。プログラミングができなくても面白い表現が作れるようになったのはShader Graphの良い点です。  "),(0,t.yg)("p",null,"しかし、なぜノードをつなげたら色が変わるのか、アニメーションするのかといった疑問が残っている方もいると思います。ノード同士の関係性を理解するためにはシェーダーを書いて理解するしかありません。ただし、いきなりシェーダーを書き始めると理解できなすぎて挫折する可能性も高いです。  "),(0,t.yg)("p",null,"おすすめは ",(0,t.yg)("strong",{parentName:"p"},"Shader Graphで遊びつつ、簡単なシェーダーを自分で書いていくこと")," です。遊びながら学ぶことで勉強を楽しめます。オオバはいつもこんな感じで新しいことを学ぶことが多いです。  "),(0,t.yg)("p",null,"以下に紹介する記事は超基本的なシェーダーの話から、自分で一からシェーダーを書いていくチュートリアルです。  "),(0,t.yg)(l.A,{local_url_key:"unity-shader",query:"",mdxType:"RecommendBlock"}),(0,t.yg)("p",null,"以降はプログラミングしながらシェーダーを理解していく記事です。  "),(0,t.yg)(l.A,{local_url_key:"unity-mesh-dynamic-basis",query:"",mdxType:"RecommendBlock"}),(0,t.yg)(l.A,{local_url_key:"unity-mesh-dynamic-coloring",query:"",mdxType:"RecommendBlock"}),(0,t.yg)(l.A,{local_url_key:"unity-mesh-dynamic-apply-texture",query:"",mdxType:"RecommendBlock"}),(0,t.yg)("p",null,"一通り読むことでシェーダーのことを理解できます。シェーダーの理解はShader Graphの学びに確実に生きますのでぜひ読んでみてください。  "),(0,t.yg)("h2",null,"Shader Graphと合わせて描画の仕組ã

1¿ã‚‚理解しよう"),(0,t.yg)("p",null,"Shader Graphを触りはじめると、次にぶつかるのが ",(0,t.yg)("em",{parentName:"p"},"描画順")," の壁です。  "),(0,t.yg)("p",null,"オオバが執筆した ",(0,t.yg)("strong",{parentName:"p"},"「Unity描画順の教科書」")," では、CanvasやSortingOrder、Shaderまで、",(0,t.yg)("em",{parentName:"p"},"Unityの描画順")," を基礎から体系的に解説しています。  "),(0,t.yg)("p",null,"描画まわりの理解を一度整理しておきたい方は、ぜひ確認してみてください。  "),(0,t.yg)(c.E9,{ad_key:"rendering_order",type:"3",entry_key:"unity-start-shadergraph",is_inline:"1",mdxType:"ArticleAd"}),(0,t.yg)(s.A,{url_key:"unity-start-shadergraph",title:"【Unity】初心者向けShader Graphの始め方",mdxType:"Share"}),(0,t.yg)(d.A,{meta:m,mdxType:"ArticleFollowMe"}),(0,t.yg)("p",null,"記事の内容やUnityゲーム開発について、",(0,t.yg)("em",{parentName:"p"},"個別で相談したい")," 方は「",(0,t.yg)("a",{parentName:"p",href:"https://ohbashunsuke.com/l/li-blog-text?from=unity-start-shadergraph"},"オオバの公式LINE"),"」からご連絡ください。"),(0,t.yg)("p",null,"いまなら期間限定で、Unity開発を加速させる ",(0,t.yg)("em",{parentName:"p"},"無料特典")," も配布中です！\n→ ",(0,t.yg)("a",{parentName:"p",href:"https://ohbashunsuke.com/l/li-blog-text?from=unity-start-shadergraph"},"公式LINEに登録して特典を受け取る")),(0,t.yg)("p",null,"最後まで読んでいただきありがとうございました！",(0,t.yg)("br",{parentName:"p"}),"\n","すばらしいShader Graphライフをお過ごしください。"),(0,t.yg)(p.A,{type:"last",mdxType:"MyAd"}),(0,t.yg)("div",{className:"subTitle recommend"},"オススメ記事"),(0,t.yg)(h.A,{articles:"unity-mesh-dynamic-basis,unity-mesh-dynamic-coloring,unity-mesh-dynamic-apply-texture,unity-mesh-dynamic-brush,unity-shader-stencil,unity-start,unity-dotween-start,unity-prefab,unity-gameobject,unitychan-download,unity-be-careful,",mdxType:"RecommendArticleList"}),(0,t.yg)("div",{className:"subTitle env"},"検証環境"),(0,t.yg)("ul",null,(0,t.yg)("li",{parentName:"ul"},"Unity2021.3.0f1"),(0,t.yg)("li",{parentName:"ul"},"Shader Graph v12.1.6"),(0,t.yg)("li",{parentName:"ul"},"Universal RP v12.1.6")),(0,t.yg)("div",{className:"subTitle ref"},"参考サイト"),(0,t.yg)("ul",null,(0,t.yg)("li",{parentName:"ul"},(0,t.yg)("a",{parentName:"li",href:"https://docs.unity3d.com/Packages/[email protected]/manual/index.html"},"About Shader Graph | Shader Graph | 12.1.15"))))}S.isMDXComponent=!0},16258:(a,e,r)=>{"use strict";r.d(e,{A:()=>p});var t=r(74848);let n=a=>{let e=a.split("  "),r=[];return e.forEach(function(a,e){a.length>2&&r.push((0,t.jsx)("li",{children:a},e))}),r},p=a=>{let{type:e,content:r}=a,p=n(r);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"evaluation-title"+("0"==e?" pros-title":" cons-title"),children:"0"==e?"メリット":"デメリット"}),(0,t.jsx)("div",{className:"evaluation-box"+("0"==e?" pros-box":" cons-box"),children:(0,t.jsx)("ul",{children:p})})]})}},378:(a,e,r)=>{"use strict";r.d(e,{A:()=>p});var t=r(74848),n=r(22897);let p=a=>{let{id:e}=a;return(0,t.jsx)(t.Fragment,{children:(0,t.jsxs)("div",{children:[(0,t.jsx)(n.A,{id:e})," "]})})}},5282:(a,e,r)=>{"use strict";r.d(e,{A:()=>y});var t=r(74848),n=r(96540);let p=()=>

1{let[a,e]=(0,n.useState)({width:0,height:0});return(0,n.useEffect)(()=>{{let a=()=>{e({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",a),a(),()=>window.removeEventListener("resize",a)}},[]),a};var l=r(7352);let y=a=>{let{videoId:e,loop:r=1}=a,n=e.replace("https://youtu.be/",""),{height:y,width:h}=p(),i=420,g="85%";h<=602?i="".concat(.56*h,"px"):h<=991?(i=300,g="".concat(1.77777778*i,"px")):h<=1199?i=300:(g="75%",i=360);let d={width:"".concat(g,"%"),height:"".concat(i,"px"),playerVars:{loop:r,playlist:n,modestbranding:1}};return(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(l.A,{videoId:e,opts:d})})}},4437:(a,e,r)=>{"use strict";r.d(e,{A:()=>p});var t=r(74848),n=r(23281);let p=a=>{let{url:e,title:r,img:p,description:l}=a,y=new URL(e).hostname.replace("www.","");return"NoDescription"==l&&(l=""),"NoOGP"==p&&(p=n.A.noOgpImgUrl),l&&l.length>80&&(l=l.slice(0,80)+"..."),(0,t.jsx)("a",{href:e,target:"_blank",className:"refLink",children:(0,t.jsxs)("div",{className:"refLink-content",children:[(0,t.jsxs)("div",{className:"refLink-text",children:[(0,t.jsx)("div",{className:"refLink-title",children:r}),l&&(0,t.jsx)("div",{className:"refLink-description",children:l}),(0,t.jsx)("div",{className:"refLink-site",children:y})]}),(0,t.jsx)("div",{className:"refLink-image",children:(0,t.jsx)("img",{src:p,alt:r})})]})})}},62227:(a,e,r)=>{"use strict";r.d(e,{A:()=>s});var t=r(74848),n=r(66369),p=r(84801),l=r(27748),y=r(84758),h=r(68438),i=r(64124),g=r(13799),d=r(56227);let s=a=>{let{url_key:e,title:r}=a,s="https://shibuya24.info/entry/".concat(e),c="".concat(s," @ohbashunsuke"),m="".concat(r," - 渋谷ほととぎす通信");return(0,t.jsx)(t.Fragment,{children:(0,t.jsxs)("div",{className:"share",children:[(0,t.jsx)("div",{className:"shareTitle",children:"学習したことはSNSでアウトプットして血肉にしよう！"}),(0,t.jsxs)("div",{className:"shareContainer",children:[(0,t.jsx)(n.A,{url:c,title:m,children:(0,t.jsx)(p.A,{size:45,round:!0})}),(0,t.jsx)(l.A,{url:s,quote:m,children:(0,t.jsx)(y.A,{size:45,round:!0})}),(0,t.jsx)(h.A,{url:s,title:m,children:(0,t.jsx)(i.A,{size:45,round:!0})}),(0,t.jsx)(g.A,{url:s,title:m,children:(0,t.jsx)(d.A,{size:45,round:!0})})]})]})})}},88426:(a,e,r)=>{"use strict";r.d(e,{A:()=>l});var t=r(74848);let n=a=>{let{str:e}=a,r=e.replaceAll(","," -> ");return(0,t.jsx)(t.Fragment,{children:(0,t.jsx)("code",{children:r})})},p=()=>(0,t.jsx)(t.Fragment,{children:(0,t.jsxs)("p",{children:[(0,t.jsx)("img",{alt:"UnityメニューPackage Manager",width:"275",src:"https://i.gyazo.com/298b005ad7e6241a5b3d6e128a400794.jpg#275__500"}),(0,t.jsx)("br",{}),(0,t.jsx)(n,{str:"メニュー Window,Package Manager"}),"からPackage Managerウィンドウを開きます。"]})}),l=a=>{let{name:e}=a;return(0,t.jsx)(t.Fragment,{children:"menu-upm"===e&&(0,t.jsx)(p,{})})}},58608:(a,e,r)=>{"use strict";r.d(e,{A:()=>p});var t=r(74848),n=r(88575);let p=a=>{let{assets:e,entry_key:r}=a,p=e.split(",");return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"subTitle recommend",children:"記事内で使用したアセット"}),(0,t.jsx)("ul",{children:p.map((a,e)=>(0,t.jsx)("li",{className:"asset",children:(0,t.jsx)(n.E9,{ad_key:a,entry_key:r,type:"1"})},e))})]})}}},a=>{var e=e=>a(a.s=e);a.O(0,[9479,4045,1293,5522,7199,4034,636,6593,8792],()=>e(4936)),_N_E=a.O()}]);