Unity Days Unity や VR/AR に関すること。たまにblender。 2017-08-06T01:46:04+09:00 Dmiyamo3 Hatena::Blog hatenablog://blog/10328749687192938157 Octane for Unity のインストール hatenablog://entry/8599973812285993426 2017-08-06T01:46:04+09:00 2017-08-06T02:03:59+09:00 はじめに Octane for Unity のプレビュー版がリリースされましたので、その紹介と使い方を説明します。 Octaneとは、物理ベースで高度なグラフィックを作るためのGPUレンダリングツールです。 簡単に言えば、Octane を使うことで映画のような絵を出すことができます。 今回は、とりあえずインストールして、使うところまでやってみます。 Asset Store のサンプルを利用する方法 Unity 2017.1.0.f3 をインストール The Courtyard | OctaneRender for Unity Sample Sceneをダウンロード&インポート Introduc… <h5>はじめに</h5> <p>Octane for Unity のプレビュー版がリリースされましたので、その紹介と使い方を説明します。</p> <p>Octaneとは、物理ベースで高度なグラフィックを作るための<a class="keyword" href="http://d.hatena.ne.jp/keyword/GPU">GPU</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0">レンダリング</a>ツールです。 簡単に言えば、Octane を使うことで映画のような絵を出すことができます。</p> <p>今回は、とりあえずインストールして、使うところまでやってみます。</p> <h5>Asset Store のサンプルを利用する方法</h5> <blockquote><ol> <li><a href="https://store.unity.com/">Unity 2017.1.0.f3</a> をインストール</li> <li><a href="https://www.assetstore.unity3d.com/jp/#!/content/96586">The Courtyard | OctaneRender for Unity Sample Scene</a>をダウンロード&amp;インポート</li> <li><a href="https://www.youtube.com/watch?v=Z1pCGwEpaWA&feature=youtu.be">Introduction to OctaneRender for Unity - YouTube</a>を見ながら色々試してみる。 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/NVIDIA">NVIDIA</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/GeForce">GeForce</a> GTX 970 で試してみたら、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EC%A5%F3%A5%C0%A5%EA%A5%F3%A5%B0">レンダリング</a>の失敗が頻繁に起こりました。<a class="keyword" href="http://d.hatena.ne.jp/keyword/GPU">GPU</a>のメモリが足りない?)</li> </ol> </blockquote> <p>結果</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170806/20170806013922.png" alt="f:id:Dmiyamo3:20170806013922p:plain:w300" title="f:id:Dmiyamo3:20170806013922p:plain:w300" class="hatena-fotolife" style="width:300px" itemprop="image"></span></p> <h5>Asset Store のサンプルを利用しない方法</h5> <p>サンプルのほうが頻繁に落ちたので、こちらの方法で小さなプロジェクトを試してみました。</p> <p><a href="https://unity.otoy.com/guides/render-simple-scene-using-octane-unity/">Render a Simple Scene Using Octane for Unity - OctaneRender for Unity</a>を見たほうがわかりやすいと思いますが、念のため、以下に手順を書いておきます。</p> <blockquote><ol> <li><a href="https://store.unity.com/">Unity 2017.1.0.f3</a> をインストール</li> <li><a href="https://render.otoy.com/forum/viewtopic.php?f=129&amp;t=61948">Octane for Unity</a> (プレビュー版)をインストール <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170806/20170806020310.png" alt="f:id:Dmiyamo3:20170806020310p:plain" title="f:id:Dmiyamo3:20170806020310p:plain" class="hatena-fotolife" itemprop="image"></span></li> <li>Unityを起動</li> <li>Unityエディタ上のメニューに"Octane"があることを確認</li> <li>Octane -> Install</li> <li>Octane -> Settings -> Load Octane</li> <li>Octane -> Create PBR Render Target</li> <li>Hierarch 内に作成された PBR Render Target->PBR Render Target Component -> Renderボタンを押すと"PBR Viewport"が出てくる</li> </ol> </blockquote> <p>結果(1枚目がデフォルト、2枚目がOctane)</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170806/20170806011047.png" alt="f:id:Dmiyamo3:20170806011047p:plain:w300" title="f:id:Dmiyamo3:20170806011047p:plain:w300" class="hatena-fotolife" style="width:300px" itemprop="image"></span> <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170806/20170806011054.png" alt="f:id:Dmiyamo3:20170806011054p:plain:w300" title="f:id:Dmiyamo3:20170806011054p:plain:w300" class="hatena-fotolife" style="width:300px" itemprop="image"></span></p> <h5>参考資料</h5> <ul> <li><a href="https://unity3d.com/jp/partners/otoy/octane">Unity - OTOY</a></li> <li><a href="https://unity.otoy.com/guides/render-simple-scene-using-octane-unity/">Render a Simple Scene Using Octane for Unity - OctaneRender for Unity</a></li> <li><a href="https://engine.otoy.com/guides/">Guides - OctaneRender for Unity</a></li> <li><a href="https://unity.otoy.com/roadmap/">Octane for Unity Roadmap - OctaneRender for Unity</a></li> </ul> Dmiyamo3 【Unity】TrailRendererで線を描く hatenablog://entry/8599973812281117174 2017-07-20T04:40:59+09:00 2017-07-20T04:40:59+09:00 TrailRendererを使えば、オブジェクトが動いた時の軌跡を描くことができます。 今回は関数で描いた線を表示するコードです。 (スクリプトリファレンスに載っているサンプルを少し変えたものです。) TrailRendererのてすと。 pic.twitter.com/CCtl7nNCzJ— miyamo (@DMiyamo3) 2017年7月19日 using System.Collections; using System.Collections.Generic; using UnityEngine; public class TrailSample1: MonoBehaviour { … <p>TrailRendererを使えば、オブジェクトが動いた時の軌跡を描くことができます。 今回は関数で描いた線を表示するコードです。 (<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>リファレンスに載っているサンプルを少し変えたものです。)</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">TrailRendererのてすと。 <a href="https://t.co/CCtl7nNCzJ">pic.twitter.com/CCtl7nNCzJ</a></p>&mdash; miyamo (@DMiyamo3) <a href="https://twitter.com/DMiyamo3/status/887757098527764480">2017年7月19日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <pre class="code lang-cs" data-lang="cs" data-unlink> <span class="synStatement">using</span> System.Collections; <span class="synStatement">using</span> System.Collections.Generic; <span class="synStatement">using</span> UnityEngine; <span class="synType">public</span> <span class="synType">class</span> TrailSample1: MonoBehaviour { <span class="synType">bool</span> isMenu = <span class="synConstant">true</span>; <span class="synType">public</span> <span class="synType">float</span> time = <span class="synConstant">1.0f</span>; <span class="synType">public</span> <span class="synType">float</span> width = <span class="synConstant">0.1f</span>; <span class="synType">public</span> <span class="synType">float</span> r = <span class="synConstant">0</span>; <span class="synType">public</span> <span class="synType">float</span> g = <span class="synConstant">0</span>; <span class="synType">public</span> <span class="synType">float</span> b = <span class="synConstant">0</span>; Color color = Color.black; TrailRenderer tr; <span class="synComment">// Use this for initialization</span> <span class="synType">void</span> Start () { tr = GetComponent&lt;TrailRenderer&gt;(); tr.material = <span class="synStatement">new</span> Material(Shader.Find(<span class="synConstant">&quot;Sprites/Default&quot;</span>)); } <span class="synComment">// Update is called once per frame</span> <span class="synType">void</span> Update () { tr.time = time; tr.startWidth = width; tr.endWidth = width; color = <span class="synStatement">new</span> Color(r, g, b); tr.startColor = color; tr.endColor = color; tr.transform.position = <span class="synStatement">new</span> Vector3(Mathf.Sin(Time.time * <span class="synConstant">1.51f</span>) * <span class="synConstant">7.0f</span>, Mathf.Cos(Time.time * <span class="synConstant">1.27f</span>) * <span class="synConstant">4.0f</span>, <span class="synConstant">0f</span>); } <span class="synType">void</span> OnGUI() { <span class="synStatement">if</span>(GUI.Button(<span class="synStatement">new</span> Rect(<span class="synConstant">25</span>, <span class="synConstant">5</span>, <span class="synConstant">50</span>, <span class="synConstant">15</span>), <span class="synConstant">&quot;Menu&quot;</span>)) { isMenu = !(isMenu); } <span class="synStatement">if</span>(isMenu == <span class="synConstant">true</span>) { GUI.Label(<span class="synStatement">new</span> Rect(<span class="synConstant">25</span>, <span class="synConstant">20</span>, <span class="synConstant">200</span>, <span class="synConstant">30</span>), <span class="synConstant">&quot;Time&quot;</span>); time = GUI.HorizontalSlider(<span class="synStatement">new</span> Rect(<span class="synConstant">125</span>, <span class="synConstant">25</span>, <span class="synConstant">200</span>, <span class="synConstant">30</span>), time, <span class="synConstant">0.1f</span>, <span class="synConstant">100.0f</span>); GUI.Label(<span class="synStatement">new</span> Rect(<span class="synConstant">25</span>, <span class="synConstant">50</span>, <span class="synConstant">200</span>, <span class="synConstant">60</span>), <span class="synConstant">&quot;Width&quot;</span>); width = GUI.HorizontalSlider(<span class="synStatement">new</span> Rect(<span class="synConstant">125</span>, <span class="synConstant">55</span>, <span class="synConstant">200</span>, <span class="synConstant">60</span>), width, <span class="synConstant">0.01f</span>, <span class="synConstant">1.0f</span>); GUI.Label(<span class="synStatement">new</span> Rect(<span class="synConstant">25</span>, <span class="synConstant">80</span>, <span class="synConstant">200</span>, <span class="synConstant">90</span>), <span class="synConstant">&quot;Color&quot;</span>); r = GUI.HorizontalSlider(<span class="synStatement">new</span> Rect(<span class="synConstant">125</span>, <span class="synConstant">90</span>, <span class="synConstant">200</span>, <span class="synConstant">60</span>), r, <span class="synConstant">0f</span>, <span class="synConstant">1.0f</span>); g = GUI.HorizontalSlider(<span class="synStatement">new</span> Rect(<span class="synConstant">125</span>, <span class="synConstant">120</span>, <span class="synConstant">200</span>, <span class="synConstant">60</span>), g, <span class="synConstant">0f</span>, <span class="synConstant">1.0f</span>); b = GUI.HorizontalSlider(<span class="synStatement">new</span> Rect(<span class="synConstant">125</span>, <span class="synConstant">150</span>, <span class="synConstant">200</span>, <span class="synConstant">60</span>), b, <span class="synConstant">0f</span>, <span class="synConstant">1.0f</span>); } } } </pre> <h5>参考</h5> <p><a href="https://docs.unity3d.com/ja/540/ScriptReference/TrailRenderer.html">Unity - &#x30B9;&#x30AF;&#x30EA;&#x30D7;&#x30C8;&#x30EA;&#x30D5;&#x30A1;&#x30EC;&#x30F3;&#x30B9;: TrailRenderer</a></p> Dmiyamo3 Unityでカメラワークの実装 hatenablog://entry/8599973812278876009 2017-07-12T03:35:43+09:00 2017-07-12T18:59:29+09:00 4つのカメラワークの実装 アニメのカメラワークや撮影処理をまとめた記事を読んで、カメラの動作をUnityで再現してみようと思い立ちました。今回、実装したカメラワークは「パン」「フォロー」「じわパン」「ポン寄り」の4つです。用語を深く理解していないので動作の解釈が間違っている可能性があります。利用するときはお気を付けください。あとフォローの挙動が変です。 カメラワークの実装。https://t.co/berx428Qrl pic.twitter.com/VRDIIq4DEq— miyamo (@DMiyamo3) 2017年7月12日 using System.Collections; usin… <h5>4つのカメラワークの実装</h5> <p><a href="http://usapen3.hatenablog.com/entry/2016/12/18/234110">アニメのカメラワークや撮影処理をまとめた記事</a>を読んで、カメラの動作をUnityで再現してみようと思い立ちました。今回、実装したカメラワークは「パン」「フォロー」「じわパン」「ポン寄り」の4つです。用語を深く理解していないので動作の解釈が間違っている可能性があります。利用するときはお気を付けください。あとフォローの挙動が変です。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">カメラワークの実装。<a href="https://t.co/berx428Qrl">https://t.co/berx428Qrl</a> <a href="https://t.co/VRDIIq4DEq">pic.twitter.com/VRDIIq4DEq</a></p>&mdash; miyamo (@DMiyamo3) <a href="https://twitter.com/DMiyamo3/status/885075565480431616">2017年7月12日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <pre class="code lang-cs" data-lang="cs" data-unlink><span class="synStatement">using</span> System.Collections; <span class="synStatement">using</span> System.Collections.Generic; <span class="synStatement">using</span> UnityEngine; <span class="synType">public</span> <span class="synType">class</span> CameraWork : MonoBehaviour { <span class="synType">public</span> GameObject target; <span class="synType">public</span> <span class="synType">enum</span> CameraType { fix, pan, follow, pan_slow, pon } [SerializeField] CameraType camType = CameraType.pan; Vector3 distance; <span class="synType">float</span> rotSpeed = <span class="synConstant">0.1f</span>; <span class="synType">float</span> timePass; <span class="synComment">// Use this for initialization</span> <span class="synType">void</span> Start () { <span class="synStatement">if</span> (camType.ToString() == <span class="synConstant">&quot;follow&quot;</span>) distance = <span class="synStatement">this</span>.transform.position - target.transform.position; } <span class="synComment">// Update is called once per frame</span> <span class="synType">void</span> Update () { <span class="synStatement">switch</span> (camType.ToString()) { <span class="synStatement">case</span> <span class="synConstant">&quot;fix&quot;</span>: <span class="synStatement">break</span>; <span class="synStatement">case</span> <span class="synConstant">&quot;pan&quot;</span>: pan(target); <span class="synStatement">break</span>; <span class="synStatement">case</span> <span class="synConstant">&quot;follow&quot;</span>: follow(target); <span class="synStatement">break</span>; <span class="synStatement">case</span> <span class="synConstant">&quot;pan_slow&quot;</span>: pan_slow(target); <span class="synStatement">break</span>; <span class="synStatement">case</span> <span class="synConstant">&quot;pon&quot;</span>: pon(target); <span class="synStatement">break</span>; } } <span class="synType">void</span> pan(GameObject target) { <span class="synStatement">this</span>.transform.LookAt(target.transform); } <span class="synType">void</span> pan_slow(GameObject target) { <span class="synType">float</span> step = rotSpeed * Time.deltaTime; Vector3 vec = target.transform.position - <span class="synStatement">this</span>.transform.position; Quaternion rot = Quaternion.LookRotation(vec); <span class="synStatement">this</span>.transform.rotation = Quaternion.Slerp(transform.rotation, rot, step); } <span class="synType">void</span> follow(GameObject target) { <span class="synStatement">this</span>.transform.LookAt(target.transform); <span class="synStatement">this</span>.transform.position = target.transform.position + distance; } <span class="synType">void</span> pon(GameObject target) { timePass += Time.deltaTime; <span class="synStatement">if</span>(timePass &gt;= <span class="synConstant">1</span>) { Camera cam; cam = <span class="synStatement">this</span>.gameObject.transform.GetComponent&lt;Camera&gt;(); <span class="synType">float</span> view = cam.fieldOfView - <span class="synConstant">15</span>; cam.fieldOfView = Mathf.Clamp(<span class="synStatement">value</span>: view, min: <span class="synConstant">0.1f</span>, max: <span class="synConstant">90f</span>); <span class="synStatement">if</span> (view &lt; <span class="synConstant">0</span>) { cam.fieldOfView = <span class="synConstant">90</span>; } timePass = <span class="synConstant">0</span>; } <span class="synStatement">this</span>.transform.LookAt(target.transform); } } </pre> <h5>参考記事</h5> <p><iframe src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Fusapen3.hatenablog.com%2Fentry%2F2016%2F12%2F18%2F234110" title="用語だけでは解りにくかったので、アニメの撮影処理を実際の使用例を見せつつまとめてみた(GIFあり) - うさペンの館" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://usapen3.hatenablog.com/entry/2016/12/18/234110">usapen3.hatenablog.com</a></cite></p> <p><iframe src="https://hatenablog-parts.com/embed?url=http%3A%2F%2Ftsubakit1.hateblo.jp%2Fentry%2F2016%2F02%2F17%2F003047" title="【Unity】3Dゲームに使うカメラワークの用語と、その設定について - テラシュールブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="http://tsubakit1.hateblo.jp/entry/2016/02/17/003047">tsubakit1.hateblo.jp</a></cite></p> Dmiyamo3 Oculus Riftでのカメラ位置の初期化 hatenablog://entry/8599973812278073262 2017-07-09T11:51:37+09:00 2017-07-09T11:51:37+09:00 目的 UnityのVirtual Reality Supportedを利用すると、Main Cameraが自動的にセンサーで取得した位置に移動します。 このままでは扱いにくいので、指定の位置にカメラを配置するスクリプトを作ります。 Unityの標準で使えるInputTrackingを使って実装することで、特別なアセットを使うことなく、他のHMDでも機能するように実装したつもりです(Riftしか持っていないのでViveとかで動作確認できてません。) 手順 Player Settings → Virtual Reality Supported にチェックを入れる Empty GameObject … <h5>目的</h5> <p>UnityのVirtual Reality Supportedを利用すると、Main Cameraが自動的にセンサーで取得した位置に移動します。 このままでは扱いにくいので、指定の位置にカメラを配置する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>を作ります。 Unityの標準で使えるInputTrackingを使って実装することで、特別なアセットを使うことなく、他の<a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>でも機能するように実装したつもりです(Riftしか持っていないのでViveとかで動作確認できてません。)</p> <h5>手順</h5> <ol> <li>Player Settings → Virtual Reality Supported にチェックを入れる</li> <li>Empty GameObject を作り、VRCameraと名づける</li> <li>Main CameraをVRCameraの子オブジェクトにして、Main CameraのPositionを(0,0,0)にする</li> <li>vrcamera<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>(以下参照)を作ったオブジェクトに追加する</li> </ol> <p>これでMain Cameraがvrcameraオブジェクトの位置で初期化できる。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170709/20170709112834.png" alt="f:id:Dmiyamo3:20170709112834p:plain" title="f:id:Dmiyamo3:20170709112834p:plain" class="hatena-fotolife" itemprop="image"></span></p> <pre class="code" data-lang="" data-unlink>using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.VR; public class vrcamera : MonoBehaviour { void Start () { Vector3 pos = InputTracking.GetLocalPosition(VRNode.CenterEye); this.transform.position -= pos; } }</pre> Dmiyamo3 Shader 勉強メモ 「サンプルを理解する2」 hatenablog://entry/10328749687225801863 2017-03-11T17:00:08+09:00 2017-03-11T17:00:08+09:00 前々回に予告していたサンプルをやっていきます。 Unity - マニュアル: Vertex and fragment shader examples 法線情報を使ったシェーダーは前にやったので、スカイボックスを反射させるシェーダーから。 解説は追記する予定。 Shader "Unlit/SkyReflection" { SubShader { Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" // vertで値を入力し、fragで利用する値を定義 struct v2f { ha… <p>前々回に予告していたサンプルをやっていきます。</p> <p><a href="https://docs.unity3d.com/jp/540/Manual/SL-VertexFragmentShaderExamples.html">Unity - &#x30DE;&#x30CB;&#x30E5;&#x30A2;&#x30EB;: Vertex and fragment shader examples</a></p> <p>法線情報を使ったシェーダーは前にやったので、スカイボックスを反射させるシェーダーから。 解説は追記する予定。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170311/20170311142914.png" alt="f:id:Dmiyamo3:20170311142914p:plain" title="f:id:Dmiyamo3:20170311142914p:plain" class="hatena-fotolife" itemprop="image"></span></p> <pre class="code lang-c" data-lang="c" data-unlink>Shader <span class="synConstant">&quot;Unlit/SkyReflection&quot;</span> { SubShader { Pass { CGPROGRAM <span class="synPreProc"> #pragma vertex vert</span> <span class="synPreProc"> #pragma fragment frag</span> <span class="synPreProc"> #include </span><span class="synConstant">&quot;UnityCG.cginc&quot;</span> <span class="synComment">// vertで値を入力し、fragで利用する値を定義</span> <span class="synType">struct</span> v2f { half3 worldRefl : TEXCOORD0; float4 pos : SV_POSITION; }; v2f vert (float4 vertex : POSITION, float3 normal : NORMAL) { v2f o; <span class="synComment">// オブジェクト空間の頂点位置をクリップ空間に変換</span> o.pos = UnityObjectToClipPos(vertex); <span class="synComment">// 定義済値、オブジェクト空間→ワールド空間へ変換する行列と</span> <span class="synComment">// オブジェクト空間の頂点位置の行列積</span> float3 worldPos = mul(_Object2World, vertex).xyz; <span class="synComment">// compute world space view direction</span> float3 worldViewDir = normalize(UnityWorldSpaceViewDir(worldPos)); <span class="synComment">// world space normal</span> float3 worldNormal = UnityObjectToWorldNormal(normal); <span class="synComment">// world space reflection vector</span> o.worldRefl = reflect(-worldViewDir, worldNormal); <span class="synStatement">return</span> o; } fixed4 frag (v2f i) : SV_Target { <span class="synComment">// sample the default reflection cubemap, using the reflection vector</span> half4 skyData = UNITY_SAMPLE_TEXCUBE(unity_SpecCube0, i.worldRefl); <span class="synComment">// decode cubemap data into actual color</span> half3 skyColor = DecodeHDR (skyData, unity_SpecCube0_HDR); <span class="synComment">// output it!</span> fixed4 c = <span class="synConstant">0</span>; c.rgb = skyColor; <span class="synStatement">return</span> c; } ENDCG } } } </pre> <p><b>おまけ</b></p> <p>ビルドインシェーダーの関数はドキュメントに書かれてないものがあるので、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>を調べてみました。 <a href="https://unity3d.com/jp/get-unity/download/archive">Unity - Download Archive</a>:ビルドインシェーダーの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>がダウンロードできます。 例えば、UnityObjectToWorldNormal()のコード。こんな感じになってます。</p> <pre class="code lang-c" data-lang="c" data-unlink><span class="synComment">// Transforms normal from object to world space</span> <span class="synType">inline</span> float3 UnityObjectToWorldNormal( in float3 norm ) { <span class="synPreProc">#ifdef UNITY_ASSUME_UNIFORM_SCALING</span> <span class="synStatement">return</span> UnityObjectToWorldDir(norm); <span class="synPreProc">#else</span> <span class="synComment">// mul(IT_M, norm) =&gt; mul(norm, I_M) =&gt; {dot(norm, I_M.col0), dot(norm, I_M.col1), dot(norm, I_M.col2)}</span> <span class="synStatement">return</span> normalize(mul(norm, (float3x3)unity_WorldToObject)); <span class="synPreProc">#endif</span> } </pre> <p><b>Shader関連の気になる記事と参考記事</b></p> <p><a href="http://whaison.jugem.jp/?eid=1037">Shader Debugger [ Unity ] &#x3068;[ Visual Studio ] &#x3067; [ DirectX 11 ] [Microsoft HLSL Shader Debugger ] [&#x30B7;&#x30A7;&#x30FC;&#x30C0;&#x30FC;&#x306E;&#x30C7;&#x30D0;&#x30C3;&#x30AC;&#x30FC;] &#x3092;&#x4F7F;&#x3063;&#x3066;&#x307F;&#x308B;&#x3002;00200 | Whaison JUGEM! StudyNoteBook .</a></p> <p><a href="https://tech.drecom.co.jp/knowhow-about-unity-coordinate-system/">&#x7A7A;&#x9593;&#x3068;&#x30D7;&#x30E9;&#x30C3;&#x30C8;&#x30D5;&#x30A9;&#x30FC;&#x30E0;&#x306E;&#x72ED;&#x9593;&#x3067; - Unity&#x306E;&#x5EA7;&#x6A19;&#x5909;&#x63DB;&#x306B;&#x307E;&#x3064;&#x308F;&#x308B;&#x304A;&#x8A71; -</a></p> <p><a href="http://d.hatena.ne.jp/nakamura001/20130320/1363779017">&#x5185;&#x8535;(&#x30D3;&#x30EB;&#x30C9;&#x30A4;&#x30F3;)&#x30B7;&#x30A7;&#x30FC;&#x30C0;&#x306E;&#x30BD;&#x30FC;&#x30B9;&#x30B3;&#x30FC;&#x30C9;&#x306E;&#x914D;&#x5E03;&#x30DA;&#x30FC;&#x30B8; - &#x5F37;&#x706B;&#x3067;&#x9032;&#x3081;</a></p> <p><a href="https://docs.unity3d.com/jp/540/Manual/SL-BuiltinFunctions.html">Unity - &#x30DE;&#x30CB;&#x30E5;&#x30A2;&#x30EB;: &#x30D3;&#x30EB;&#x30C8;&#x30A4;&#x30F3;&#x30B7;&#x30A7;&#x30FC;&#x30C0;&#x30FC;&#x30D8;&#x30EB;&#x30D1;&#x30FC;&#x6A5F;&#x80FD;</a></p> Dmiyamo3 Shader 勉強メモ 「定義済値と組み込み関数」 hatenablog://entry/10328749687225175587 2017-03-09T00:52:07+09:00 2017-03-09T00:52:07+09:00 前回まででシェーダーの扱いがなんとなくわかってきたので、次のサンプルをやる前に少し遊びます。 UnityのシェーダーはHLSLの組み込み関数を利用でき、Unity独自の定義済みの値も使えます。 組み込み関数 (DirectX HLSL) [Unity] シェーダで使える定義済値 - Qiita これらを使って、グニャーと変形させるシェーダーを作りました。前回のものに二行加えただけです。 グニャ〜と変形するユタティーポット pic.twitter.com/zAuzoKrHLL— miyamo (@DMiyamo3) 2017年3月8日 Shader "Tutorial/DisplayNormal… <p>前回まででシェーダーの扱いがなんとなくわかってきたので、次のサンプルをやる前に少し遊びます。 UnityのシェーダーはHLSLの組み込み関数を利用でき、Unity独自の定義済みの値も使えます。</p> <p><a href="https://msdn.microsoft.com/ja-jp/library/bb509611(v=vs.85).aspx">&#x7D44;&#x307F;&#x8FBC;&#x307F;&#x95A2;&#x6570; (DirectX HLSL)</a></p> <p><a href="http://qiita.com/edo_m18/items/591925d7fc960d843afa">[Unity] &#x30B7;&#x30A7;&#x30FC;&#x30C0;&#x3067;&#x4F7F;&#x3048;&#x308B;&#x5B9A;&#x7FA9;&#x6E08;&#x5024; - Qiita</a></p> <p>これらを使って、グニャーと変形させるシェーダーを作りました。前回のものに二行加えただけです。</p> <p><blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">グニャ〜と変形するユタティーポット <a href="https://t.co/zAuzoKrHLL">pic.twitter.com/zAuzoKrHLL</a></p>&mdash; miyamo (@DMiyamo3) <a href="https://twitter.com/DMiyamo3/status/839498823051313152">2017年3月8日</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> <pre class="code lang-c" data-lang="c" data-unlink>Shader <span class="synConstant">&quot;Tutorial/DisplayNormalTransform&quot;</span> { SubShader { Pass{ CGPROGRAM <span class="synPreProc"> #pragma vertex vert</span> <span class="synPreProc"> #pragma fragment frag</span> <span class="synPreProc"> #include </span><span class="synConstant">&quot;UnityCG.cginc&quot;</span> <span class="synType">struct</span> v2f { float4 pos : SV_POSITION; fixed3 color : COLOR0; }; v2f vert(appdata_base v) { v2f o; v.vertex.x *= <span class="synConstant">1</span> + pow(sin(_CosTime*v.vertex.y), <span class="synConstant">2</span>); <span class="synComment">// 追加</span> v.vertex.z *= <span class="synConstant">1</span> + pow(sin(_CosTime*v.vertex.y), <span class="synConstant">2</span>); <span class="synComment">// 追加</span> o.pos = UnityObjectToClipPos(v.vertex); o.color = v.normal * <span class="synConstant">0.5</span> + <span class="synConstant">0.5</span>; <span class="synStatement">return</span> o; } fixed4 frag(v2f i) : SV_Target{ <span class="synStatement">return</span> fixed4(i.color,<span class="synConstant">1</span>); } ENDCG } } } </pre> Dmiyamo3 Shader 勉強メモ 「サンプルを理解する」 hatenablog://entry/10328749687224959861 2017-03-08T15:19:56+09:00 2017-03-09T10:51:22+09:00 今回はUnityドキュメントのサンプルを理解していきます。 Unity - マニュアル: シェーダー: 頂点とフラグメントプログラム 最初のサンプルはメッシュの法線情報を色情報に変換するシェーダーです。 Shader "Tutorial/DisplayNormal"{ SubShader{ Pass{ CGPROGRAM // バーテックスシェーダーとフラグメントシェーダーの関数宣言 #pragma vertex vert #pragma fragment frag // 内臓のシェーダーincludeファイル // UnityCG.cginc はビルトインシェーダーヘルパー機能 // Uni… <p>今回はUnityドキュメントのサンプルを理解していきます。</p> <p><a href="https://docs.unity3d.com/jp/540/Manual/ShaderTut2.html">Unity - &#x30DE;&#x30CB;&#x30E5;&#x30A2;&#x30EB;: &#x30B7;&#x30A7;&#x30FC;&#x30C0;&#x30FC;: &#x9802;&#x70B9;&#x3068;&#x30D5;&#x30E9;&#x30B0;&#x30E1;&#x30F3;&#x30C8;&#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30E0;</a></p> <p>最初のサンプルはメッシュの法線情報を色情報に変換するシェーダーです。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170308/20170308142124.png" alt="f:id:Dmiyamo3:20170308142124p:plain" title="f:id:Dmiyamo3:20170308142124p:plain" class="hatena-fotolife" itemprop="image"></span></p> <pre class="code lang-c" data-lang="c" data-unlink>Shader <span class="synConstant">&quot;Tutorial/DisplayNormal&quot;</span>{ SubShader{ Pass{ CGPROGRAM <span class="synComment">// バーテックスシェーダーとフラグメントシェーダーの関数宣言</span> <span class="synPreProc"> #pragma vertex vert</span> <span class="synPreProc"> #pragma fragment frag</span> <span class="synComment">// 内臓のシェーダーincludeファイル</span> <span class="synComment">// UnityCG.cginc はビルトインシェーダーヘルパー機能</span> <span class="synComment">// UnityCG.cginc は例えば以下のデータ構造を持つ</span> <span class="synComment">// struct appdata_base:位置/法線/テクスチャ座標/頂点シェーダー入力</span> <span class="synComment">// また、UnityObjectToClipPos()などが使えるようになる</span> <span class="synPreProc"> #include </span><span class="synConstant">&quot;UnityCG.cginc&quot;</span> <span class="synComment">// v2f:vertex to fragment</span> <span class="synComment">// 頂点プログラムからフラグメントプログラムに渡される情報を定義します</span> <span class="synType">struct</span> v2f { float4 pos : SV_POSITION; fixed3 color : COLOR0; }; v2f vert(appdata_base v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.color = v.normal * <span class="synConstant">0.5</span> + <span class="synConstant">0.5</span>; <span class="synStatement">return</span> o; } fixed4 frag(v2f i) : SV_Target{ <span class="synStatement">return</span> fixed4(i.color,<span class="synConstant">1</span>); } ENDCG } } } </pre> <p>次のサンプルですが、一行だけ変えてMain ColorとTextureの色を足し合わせるようにしました。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170308/20170308150058.png" alt="f:id:Dmiyamo3:20170308150058p:plain" title="f:id:Dmiyamo3:20170308150058p:plain" class="hatena-fotolife" itemprop="image"></span> <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170308/20170308150108.png" alt="f:id:Dmiyamo3:20170308150108p:plain" title="f:id:Dmiyamo3:20170308150108p:plain" class="hatena-fotolife" itemprop="image"></span></p> <pre class="code lang-c" data-lang="c" data-unlink>Shader <span class="synConstant">&quot;Tutorial/Textured Colored&quot;</span> { Properties{ _Color(<span class="synConstant">&quot;Main Color&quot;</span>, Color) = (<span class="synConstant">1</span>,<span class="synConstant">1</span>,<span class="synConstant">1</span>,<span class="synConstant">0.5</span>) _MainTex(<span class="synConstant">&quot;Texture&quot;</span>, 2D) = <span class="synConstant">&quot;white&quot;</span> { } } SubShader{ Pass{ CGPROGRAM <span class="synPreProc"> #pragma vertex vert</span> <span class="synPreProc"> #pragma fragment frag</span> <span class="synPreProc"> #include </span><span class="synConstant">&quot;UnityCG.cginc&quot;</span> fixed4 _Color; sampler2D _MainTex; <span class="synType">struct</span> v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; }; float4 _MainTex_ST; v2f vert(appdata_base v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); <span class="synComment">// UnityCG.cgincからTRANSFORM_TEXマクロを使用して</span> <span class="synComment">// テクスチャスケールとオフセットが正しく適用されていることを確認</span> o.uv = TRANSFORM_TEX(v.texcoord, _MainTex); <span class="synStatement">return</span> o; } fixed4 frag(v2f i) : SV_Target { fixed4 texcol = tex2D(_MainTex, i.uv); <span class="synStatement">return</span> texcol + _Color; <span class="synComment">//変更点</span> } ENDCG } } } </pre> <p>テクスチャにチェック模様を入れれば黒い部分だけ色がつくようにできたりします。</p> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170308/20170308162129.png" alt="f:id:Dmiyamo3:20170308162129p:plain" title="f:id:Dmiyamo3:20170308162129p:plain" class="hatena-fotolife" itemprop="image"></span> <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170308/20170308162136.png" alt="f:id:Dmiyamo3:20170308162136p:plain" title="f:id:Dmiyamo3:20170308162136p:plain" class="hatena-fotolife" itemprop="image"></span> <span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/D/Dmiyamo3/20170308/20170308162154.png" alt="f:id:Dmiyamo3:20170308162154p:plain" title="f:id:Dmiyamo3:20170308162154p:plain" class="hatena-fotolife" itemprop="image"></span></p> <p>次回は、 <a href="https://docs.unity3d.com/jp/540/Manual/SL-VertexFragmentShaderExamples.html">Unity - &#x30DE;&#x30CB;&#x30E5;&#x30A2;&#x30EB;: Vertex and fragment shader examples</a> のサンプルを触っていこうと思います。</p> <p>参考サイト:</p> <p>dragon &amp; teapot model : <a href="http://graphics.cs.williams.edu/data/meshes.xml#7">http://graphics.cs.williams.edu/data/meshes.xml#7</a></p> <p><a href="https://docs.unity3d.com/jp/540/Manual/SL-Reference.html">Unity - &#x30DE;&#x30CB;&#x30E5;&#x30A2;&#x30EB;: &#x30B7;&#x30A7;&#x30FC;&#x30C0;&#x30FC;&#x30EA;&#x30D5;&#x30A1;&#x30EC;&#x30F3;&#x30B9;</a></p> <p><a href="https://forum.unity3d.com/forums/shaders.16/">Unity Shader のコミュニティ</a></p> Dmiyamo3 Shader 勉強メモ 「シェーダーとは?」 hatenablog://entry/10328749687224290727 2017-03-07T14:07:34+09:00 2017-03-09T02:35:57+09:00 Unityでのシェーダーの位置づけ「シェーダーで何ができる?」 グラフィックスパイプライン:一連の描画工程 CPU上でのドローコール バーテックスシェーダー 頂点数の増減・プリミティブの変更を含まない頂点属性の変更 プリミティブアセンブリー テッセレーションシェーダー プリミティブの分割粒度を変更できる ジオメトリーシェーダー 頂点数の増減・プリミティブの変更を含む頂点属性の変更 ラスタライゼーション フラグメントシェーダー テクスチャやオブジェクトの表面情報を用いた複雑な陰影処理 ROP処理 フレームバッファの出力 ※バーテックス=頂点情報、フラグメント=色情報・深度情報、プリミティブ=点と… <p><strong>Unity</strong><strong>でのシェーダーの位置づけ「シェーダーで何ができる?」</strong></p> <p>グラフィックスパイプライン:一連の描画工程</p> <table width="586"> <tbody> <tr> <td width="226"> <p>CPU上でのドローコール</p> </td> <td width="359"> <p> </p> </td> </tr> <tr> <td width="226"> <p><span style="color: #0000cc;"><strong>バーテックスシェーダー</strong></span></p> </td> <td width="359"> <p>頂点数の増減・プリミティブの変更を含まない頂点属性の変更</p> </td> </tr> <tr> <td width="226"> <p>プリミティブ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%BB%A5%F3%A5%D6%A5%EA">アセンブリ</a>ー</p> </td> <td width="359"> <p> </p> </td> </tr> <tr> <td width="226"> <p><span style="color: #0000cc;"><strong><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C6%A5%C3%A5%BB%A5%EC%A1%BC%A5%B7%A5%E7%A5%F3">テッセレーション</a>シェーダー</strong></span></p> </td> <td width="359"> <p>プリミティブの分割粒度を変更できる</p> </td> </tr> <tr> <td width="226"> <p><span style="color: #0000cc;"><strong>ジオメトリーシェーダー</strong></span></p> </td> <td width="359"> <p>頂点数の増減・プリミティブの変更を含む頂点属性の変更</p> </td> </tr> <tr> <td width="226"> <p>ラスタライゼーション</p> </td> <td width="359"> <p> </p> </td> </tr> <tr> <td width="226"> <p><span style="color: #0000cc;"><strong>フラグメントシェーダー</strong></span></p> </td> <td width="359"> <p>テクスチャやオブジェクトの表面情報を用いた複雑な陰影処理</p> </td> </tr> <tr> <td width="226"> <p>ROP処理</p> </td> <td width="359"> <p> </p> </td> </tr> <tr> <td width="226"> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EC%A1%BC%A5%E0%A5%D0%A5%C3%A5%D5%A5%A1">フレームバッファ</a>の出力</p> </td> <td width="359"> <p> </p> </td> </tr> </tbody> </table> <p>※バーテックス=頂点情報、フラグメント=色情報・深度情報、プリミティブ=点と直線と三角形からなる基本図形</p> <p>グラフィックスパイプライン外でのシェーダーの利用</p> <table> <tbody> <tr> <td width="189"> <p><span style="color: #0000cc;">コンピュートシェーダー</span></p> </td> <td width="378"> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/GPU">GPU</a>での汎用計算(<a class="keyword" href="http://d.hatena.ne.jp/keyword/GPGPU">GPGPU</a>)、物理シミュレーション、画像処理/画像認識/ポストエフェクト、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%A1%B3%A3%B3%D8%BD%AC">機械学習</a>などの用途</p> </td> </tr> </tbody> </table> <table> <tbody> <tr> <td width="529"> <p><span style="color: #cccccc;">Unity のコンピュートシェーダーは <a class="keyword" href="http://d.hatena.ne.jp/keyword/DirectX">DirectX</a> 11 の DirectCompute テクノロジに非常に近いものです。コンピュートシェーダーを実行できるプラットホームは以下のとおりです。</span></p> <p><span style="color: #cccccc;">・<a class="keyword" href="http://d.hatena.ne.jp/keyword/DirectX">DirectX</a> 11 グラフィックス <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a> と Shader Model 5.0 <a class="keyword" href="http://d.hatena.ne.jp/keyword/GPU">GPU</a> を伴う <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> と <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> ストア</span></p> <p><span style="color: #cccccc;">・現段階で一般的に使用されている <a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenGL">OpenGL</a> プラットフォーム (<a class="keyword" href="http://d.hatena.ne.jp/keyword/Linux">Linux</a> か <a class="keyword" href="http://d.hatena.ne.jp/keyword/Windows">Windows</a> 上の <a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenGL">OpenGL</a> 4.3、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Android">Android</a> 上の <a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenGL">OpenGL</a> ES 3.1)。<a class="keyword" href="http://d.hatena.ne.jp/keyword/Mac%20OS%20X">Mac OS X</a> は <a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenGL">OpenGL</a> 4.3 に対応していないため、コンピュートシェーダーはまだ、利用することはできません。</span></p> <p><span style="color: #cccccc;">・現段階で一般的に使用されているコンソール (<a class="keyword" href="http://d.hatena.ne.jp/keyword/Sony">Sony</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/PS4">PS4</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a> XboxOne)。</span></p> </td> </tr> </tbody> </table> <p>ー『<a href="https://docs.unity3d.com/ja/current/Manual/ComputeShaders.html">Unity - マニュアル: コンピュートシェーダー</a>』より引用</p> <p> <strong>Unity</strong><strong>でのシェーダーの扱い「シェーダーをどうやって使う?」</strong></p> <p>Shader Labと呼ばれるUnity独自の形式。各種シェーディング言語で書かれたシェーダーをShader Labに埋め込むことで<a class="keyword" href="http://d.hatena.ne.jp/keyword/GPU">GPU</a>に計算させることができる。以下のフォーマットで書かれる。</p> <table> <tbody> <tr> <td width="489"> <p>Shader “Tutorial/Test”{</p> <p>              Properties{</p> <p> [UnityEditer上から編集できる変数やテクスチャの指定などの設定]</p> <p>              }</p> <p>              SubShader{</p> <p>                            Pass{</p> <p>                [各種シェーディング言語で書かれたシェーダー]</p> <p>                            }</p> <p>              }</p> <p>              FallBack “Diffuse”</p> <p>}</p> </td> </tr> </tbody> </table> <p>シェーディング言語の種類</p> <table> <tbody> <tr> <td width="255"> <p>GLSL (<a class="keyword" href="http://d.hatena.ne.jp/keyword/OpenGL">OpenGL</a> Shading Language)</p> </td> <td width="293"> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/C%B8%C0%B8%EC">C言語</a>ライクなシェーディング言語</p> </td> </tr> <tr> <td width="255"> <p>Cg (C for Graphics)</p> </td> <td width="293"> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/NVIDIA">NVIDIA</a>が開発。2012年に開発終了。</p> </td> </tr> <tr> <td width="255"> <p>HLSL (High Level Shading Language)</p> </td> <td width="293"> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Microsoft">Microsoft</a>が開発。コンピュートシェーダーも書ける。</p> </td> </tr> <tr> <td width="255"> <p>MSL (Metal Shading Language)</p> </td> <td width="293"> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/Apple">Apple</a>が開発。<a class="keyword" href="http://d.hatena.ne.jp/keyword/macOS">macOS</a>/<a class="keyword" href="http://d.hatena.ne.jp/keyword/iOS">iOS</a>に対応。</p> </td> </tr> </tbody> </table> <p>シェーダー実行時の処理</p> <p>Shader Labの形式にCg/HLSLで記述→実行時プラットフォーム毎にGLSLに変換される。</p> <p> </p> <p>シェーダー関連の気になる記事</p> <p><a href="https://docs.unity3d.com/ja/current/Manual/GraphicsCommandBuffers.html">Unity - マニュアル: グラフィックスコマンドバッファ</a></p> <p><a href="https://docs.unity3d.com/ja/current/Manual/ComputeShaders.html">Unity - マニュアル: コンピュートシェーダー</a></p> <p><a href="https://docs.unity3d.com/ja/current/Manual/UsingDX11GL3Features.html">Unity - マニュアル: DirectX 11 と OpenGL Core</a></p> <p><a href="https://docs.unity3d.com/ja/current/Manual/AsyncTextureUpload.html">Unity - マニュアル: 非同期テクスチャアップロード</a></p> <p><a href="http://yuki-koyama.hatenablog.com/entry/2012/12/22/175713">Unity 上に自分で物理エンジンを実装したい - yuki-koyama's blog</a></p> <p><a href="http://sssslide.com/speakerdeck.com/esprogram/unityfalsesiedanituitezi-fen-narinimatometemita">Unityのシェーダーについて自分なりにまとめてみた - SSSSLIDE</a></p> <p><a href="http://www.shibuya24.info/entry/2016/06/04/234031">Unityのシェーダを自分の言葉で説明してみる - 渋谷ほととぎす通信</a></p> <p> <a href="http://sssslide.com/speakerdeck.com/esprogram/tu-ri-wobiao-xian-suruji-shu">「塗り」を表現する技術 - SSSSLIDE</a></p> <p><a href="http://unity-game.blogspot.jp/2014/06/shader.html">Unity備忘録: Unityのshaderまとめ(Shader Lab)</a></p> Dmiyamo3 Shader 勉強メモ 「はじめに」 hatenablog://entry/10328749687223894173 2017-03-06T06:49:47+09:00 2017-03-06T07:11:18+09:00 Shader、ずっと前から勉強しようと思っていたが、手を出していなかった。今回は記録を残すことでモチベーションを保っていこうと思います。開発環境はもちろんUnityで。 学習教材/参考資料は「Unityのリファレンス」と「ゲームアプリの数学 Unityで学ぶ基礎からシェーダーまで」と「CGWORLD (シージーワールド) 2013年 10月号 vol.182」、あとは凹みさんの記事や必要に応じて論文などを使っていこうかと。 勉強の進め方は 参考資料の内容をまとめて記事にする。 実際に使って確かめる。使った機能や関数などと画像を一緒にまとめて記事にする。 作ったコードをGithubに公開する。 … <p>Shader、ずっと前から勉強しようと思っていたが、手を出していなかった。今回は記録を残すことでモチベーションを保っていこうと思います。開発環境はもちろんUnityで。</p> <p>学習教材/参考資料は「Unityのリファレンス」と「ゲームアプリの数学 Unityで学ぶ基礎からシェーダーまで」と「CGWORLD (シージーワールド) 2013年 10月号 vol.182」、あとは凹みさんの記事や必要に応じて論文などを使っていこうかと。</p> <p>勉強の進め方は</p> <ol> <li>参考資料の内容をまとめて記事にする。</li> <li>実際に使って確かめる。使った機能や関数などと画像を一緒にまとめて記事にする。</li> <li>作ったコードを<a class="keyword" href="http://d.hatena.ne.jp/keyword/Github">Github</a>に公開する。</li> </ol> <p>主に2番でやっていくかと思います。次回から本格的にやっていきます。</p> <p><iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="Unity - マニュアル: シェーダーリファレンス" src="//hatenablog-parts.com/embed?url=https%3A%2F%2Fdocs.unity3d.com%2Fjp%2F540%2FManual%2FSL-Reference.html" frameborder="0" scrolling="no"></iframe></p> <p><iframe class="embed-card embed-webcard" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" title="ゲームアプリの数学 | 久富木 隆一 |本 | 通販 | Amazon" src="//hatenablog-parts.com/embed?url=http%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4797384263" frameborder="0" scrolling="no"></iframe></p> <p><a href="http://www.amazon.co.jp/dp/B00EC9OTWU">CGWORLD (シージーワールド) 2013年 10月号 vol.182</a>:「リアルタイムシェーダー入門」特集があり、p22-p37に歴史や用語がまとまっていたので買った。</p> <p><iframe class="embed-card embed-blogcard" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;" title="Unity のシェーダの基礎を勉強してみたのでやる気出してまとめてみた - 凹みTips" src="http://tips.hecomi.com/embed/2014/03/16/233943" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="http://tips.hecomi.com/entry/2014/03/16/233943">tips.hecomi.com</a></cite></p> <p>あとshader関連の気になる記事や書籍など</p> <p><a href="https://ja.wikipedia.org/wiki/%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC">シェーダー - Wikipedia</a></p> <p><a href="https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3">グラフィックスパイプライン - Wikipedia</a></p> <p><a href="http://marina.sys.wakayama-u.ac.jp/~tokoi/?date=20090827">床井研究室 - 第3回 シェーダプログラム</a></p> <p><a href="http://yukuto.net/blog/tag/%E5%9B%BA%E5%AE%9A%E6%A9%9F%E8%83%BD%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3/">固定機能パイプライン | とまと・ソフトウェア製作所</a></p> <p><iframe class="embed-card embed-blogcard" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;" title="【Unity本】「Unity 5 実践シェーダプログラミング入門」を読んでみた - 藍と淡々" src="http://megumisoft.hatenablog.com/embed/2015/09/18/210021" frameborder="0" scrolling="no"></iframe><cite class="hatena-citation"><a href="http://megumisoft.hatenablog.com/entry/2015/09/18/210021">megumisoft.hatenablog.com</a></cite></p> <p> </p> Dmiyamo3 VR/ARでの文字入力方法(キーボード)まとめ hatenablog://entry/10328749687216194285 2017-02-12T15:52:54+09:00 2017-12-30T13:03:14+09:00 概要 VR HMD(ヘッドマウントディスプレイ)のOculus Rift, HTC Vive, PSVR, Fove, Daydream, ハコスコ。AR HMDのHololens, meta。 現在、数多くのVR/ARのHMDが世の中に出回っています。これらHMDは周りを見渡したり動き回ったりして使用するため、マウスやキーボードのように机に置くようなデバイスは使い勝手が悪いことが多いです。ということで、その代わりとなるような文字入力方法が色々と考えられています。今回はそれらのデバイスで「どのような文字入力方法(キーボード)が考案/実装されているのか」についてまとめようと思います。 気が向いた… <h3>概要</h3> <p>VR <a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>(ヘッドマウントディスプレイ)の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Oculus%20Rift">Oculus Rift</a>, HTC Vive, <a class="keyword" href="http://d.hatena.ne.jp/keyword/PSVR">PSVR</a>, Fove, Daydream, ハコスコ。AR <a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>のHololens, meta。</p> <p>現在、数多くのVR/ARの<a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>が世の中に出回っています。これら<a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>は周りを見渡したり動き回ったりして使用するため、マウスやキーボードのように机に置くようなデ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%B9">バイス</a>は使い勝手が悪いことが多いです。ということで、その代わりとなるような文字入力方法が色々と考えられています。今回はそれらのデ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%B9">バイス</a>で「どのような文字入力方法(キーボード)が考案/実装されているのか」についてまとめようと思います。</p> <p>気が向いたら更新すると思います。「あれ、なんか足りなくない?」とかあれば、教えて頂ければうれしいです。</p> <h3> 文字入力方法の種類</h3> <ul> <li>従来のキーボードを用いた方法:いつもの入力方法。</li> <li>「ノート型デ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%B9">バイス</a>」を用いた方法:研究</li> <li>「コントローラー」を用いた方法 :Oculus Touch / Viveコン / <a class="keyword" href="http://d.hatena.ne.jp/keyword/PS%20Move">PS Move</a> / Daydreamコン</li> <li>「ハンド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E2%A1%BC%A5%B7%A5%E7%A5%F3%A5%AD%A5%E3%A5%D7%A5%C1%A5%E3">モーションキャプチャ</a>」を用いた方法:<a class="keyword" href="http://d.hatena.ne.jp/keyword/Leap%20Motion">Leap Motion</a> / Hololens?</li> <li>「視線(頭)」を用いた方法:Fove / その他の vr/ar <a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a></li> <li>「音声」を用いた方法:<span style="color: #3d3f44; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; display: inline !important; float: none;">全ての vr/ar <a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a></span></li> <li>「<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>+<a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>」を用いた方法:全ての vr/ar <a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>?</li> </ul> <h3>ノート型デ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%B9">バイス</a>を用いた方法</h3> <p>1.『<span style="color: #222222; font-family: Arial, sans-serif; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; display: inline !important; float: none;">Poupyrev, Ivan, Numada Tomokazu, and Suzanne Weghorst. "Virtual Notepad: handwriting in immersive VR." </span><em style="color: #222222; font-family: Arial, sans-serif; font-size: 13px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;">Virtual Reality Annual International Symposium, 1998. Proceedings., <a class="keyword" href="http://d.hatena.ne.jp/keyword/IEEE">IEEE</a> 1998</em><span style="color: #222222; font-family: Arial, sans-serif; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; display: inline !important; float: none;">. <a class="keyword" href="http://d.hatena.ne.jp/keyword/IEEE">IEEE</a>, 1998.』:</span>ペンとノート型のデ<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%A4%A5%B9">バイス</a>を持って使う。現実で持っているノートがVR空間上に現れる。ペンでノートに文字を書けば、VR空間のノートにも同じように書かれる。</p> <h3>ドラムスティック方式</h3> <p>ドラムスティックで従来型キーボードのボタンを押す方式。ブラインドタッチはできなさそう。</p> <p><span style="color: #000000; font-family: 'PT Sans Caption', 'Josefin Sans', メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; display: inline !important; float: none;">1.Drum Keys - <a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Daydream Lab: </span></p> <p><iframe src="https://www.youtube.com/embed/QYwzSEAyn2M" width="362" height="269" frameborder="0" allowfullscreen=""></iframe></p> <p><span style="color: #000000; font-family: 'PT Sans Caption', 'Josefin Sans', メイリオ, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; display: inline !important; float: none;">2.Cutie Keys - Normal VR : </span><a href="https://github.com/NormalVR/CutieKeys/">https://github.com/NormalVR/CutieKeys/</a></p> <p> ほとんど同じ。こちらは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AA%A1%BC%A5%D7%A5%F3%A5%BD%A1%BC%A5%B9">オープンソース</a>。</p> <h3>てんちょー方式</h3> <p>立体方式(両手)・フリック方式(片手)でアルファベットも日本語も入力できる。キー配置の色んなア<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A4%A5%C7%A5%A2">イデア</a>があって楽しい。</p> <p><iframe src="https://www.youtube.com/embed/zxhwzGnS6BA" width="362" height="269" frameborder="0" allowfullscreen=""></iframe></p> <h3> 扇型方式</h3> <p>yutokun:<a href="http://qiita.com/yutoVR/items/a80bd382f9b52b786a8a">ハンドコントローラーでVR日本語入力✏ - Qiita</a></p> <p>手首をひねって扇形のUIから文字の選択。人差し指のトリガーで文字の決定。スティックの上下で濁音などに対応。文字選択時に振動のフィードバックあり。</p> <p>『<a href="https://github.com/yutokun/VR-Text-Input">GitHub - yutokun/VR-Text-Input: VR Text Input Method for Japanese.</a> 』</p> <h3>フリック方式</h3> <p>コントローラーで <a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%EA%A5%C3%A5%AF%C6%FE%CE%CF">フリック入力</a>をできるようにしたもの。</p> <h3>ハンド<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%E2%A1%BC%A5%B7%A5%E7%A5%F3%A5%AD%A5%E3%A5%D7%A5%C1%A5%E3%A1%BC">モーションキャプチャー</a>を用いた方法</h3> <p>・ <a class="keyword" href="http://d.hatena.ne.jp/keyword/Leap%20Motion">Leap Motion</a>を用いた文字入力</p> <p>1. <a href="https://sakapon.wordpress.com/2014/06/16/leapmotion-textrecognition/">Leap Motion で日本語の文字入力・文字認識 | Do Design Space</a></p> <p>空中に指で文字を描き、手書き文字認識し、入力する。</p> <p><iframe src="https://www.youtube.com/embed/-6plzzYay7E" width="362" height="269" frameborder="0" allowfullscreen=""></iframe></p> <p>2.『<span style="color: #222222; font-family: Arial, sans-serif; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; display: inline !important; float: none;">細野敬太, et al. "<a href="https://kaigi.org/jsai/webprogram/2014/pdf/124.pdf">Leap Motion を用いたジェスチャ操作による文字入力方法の提案</a>." </span><em style="color: #222222; font-family: Arial, sans-serif; font-size: 13px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%CD%B9%A9%C3%CE%C7%BD">人工知能</a>学会全国大会論文集</em><span style="color: #222222; font-family: Arial, sans-serif; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; display: inline !important; float: none;"> 28 (2014): 1-4.』</span></p> <p>3. 将来的に(oculusが<a class="keyword" href="http://d.hatena.ne.jp/keyword/Pebbles">Pebbles</a> Interfacesを買収してVRグローブを研究しているので、そちらもそのうち出てくると思います。)</p> <h3>視線(頭)を用いた方法</h3> <p>1. Fove:視線を動かして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DD%A5%A4%A5%F3%A5%C6%A5%A3%A5%F3%A5%B0">ポインティング</a>する方式</p> <p>『<a href="https://www.kickstarter.com/projects/fove/fove-the-worlds-first-eye-tracking-virtual-reality">FOVE: The World's First Eye Tracking Virtual Reality Headset by FOVE — Kickstarter</a>』</p> <p>2. その他の<a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>:頭を動かして<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DD%A5%A4%A5%F3%A5%C6%A5%A3%A5%F3%A5%B0">ポインティング</a>する方式。</p> <h3>音声を用いた方法</h3> <p><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B2%BB%C0%BC%C7%A7%BC%B1">音声認識</a>用いることでマイクのついている<a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>ならどれでもできる。</p> <h3><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%DE%A5%DB">スマホ</a>+<a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>を用いた方法</h3> <p>HoloKeyboard - @sumihiro(<a class="keyword" href="http://d.hatena.ne.jp/keyword/twitter">twitter</a>):<a class="keyword" href="http://d.hatena.ne.jp/keyword/iPhone">iPhone</a>からHoloLensに文字入力ができるというもの。このアプリはHolo専用ですが、技術的には他の<a class="keyword" href="http://d.hatena.ne.jp/keyword/HMD">HMD</a>にも応用可能だと思います。</p> <p><a href="https://twitter.com/sumihiro/status/829281748726980610">ヤバいスミヒロ on Twitter: "HoloLensのキーボードとして使えるiPhoneアプリをオープンソースで公開しました。日本語も使えます。 #HoloLens #HoloLensJP #HoloJP<br /> https://t.co/ilTfK10BvO https://t.co/cVb6d5XbJx"</a></p> <h3> あとがき</h3> <p>今回は実例ばかりで論文や研究段階のものはあまり調べていません。今後時間があったらチェックしていこうかなと思います。また、情報が不足している部分も後で埋めていこうと思います。</p> Dmiyamo3