###前提・実現したいこと
Unityにて、以下の画像ように、角度やアングルを変えることで別のシーンが見えるというものを作りたいです。
しかし、どのようにすればこのような二画面を実装できるのか分からず…。
マスクなど色々考えましたが思い付かないため質問させて頂きます。
なにかアイデアでも構いませんので、アドバイス頂きたいです。
宜しくお願い致します。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
ll7さんご進捗いかがでしょうか。ビューポートの左右分割位置はカメラとキャラクターの視線の角度から得られるかと思います(すみません、実際に実装したわけではないのでうまくいくかは未確認です)。
左右合成方法の件ですが、IShikawanさんが言及されたレンダーテクスチャもいいアイディアだと思い、ちょっとテストしてみました。
考えうるプロセスとしては、
- 世界1をレンダーテクスチャに描画する。
- 世界2を通常描画する。
- 世界2の描画後のイメージエフェクトとして世界1のレンダーテクスチャを合成する。
というパターンもあるかと思いますが、今回は
- キャラクターと一緒に移動・回転するシリンダーを用意し、合成用マテリアルをセットしておく。
- 両方の世界を各々レンダーテクスチャに描画する。
- シリンダーだけを描画対象とする第3のカメラでシリンダーを描画する。
といった方法にしました。ご質問者さんの画像を見ると画面が円筒で切り抜かれたような演出がされていますが、これを再現するには実際に円筒モデルを用意してしまうのが手っ取り早いかと思いました。
ついでに、せっかくのレンダーテクスチャということで、左右の世界の境界をなめらかにブレンドするような蛇足を加えてみました。レンダーテクスチャ方式だと描画する総面積が増えますが(なんだか負荷を増やす方向の話ばかりになってしまいますね...)、代わりに合成方法の自由度が大きいのも利点と言えそうです。
シリンダーのマテリアルは下記のようにしました。
HLSL
1Shader "Unlit/Cylinder" 2{ 3 Properties 4 { 5 _LeftTex ("Left Texture", 2D) = "white" {} // 左世界テクスチャ 6 _RightTex("Right Texture", 2D) = "white" {} // 右世界テクスチャ 7 _BoundaryWidth("Boundary Width", Range(0.0, 1.0)) = 0.03125 // 左右世界境界の幅 8 } 9 SubShader 10 { 11 Tags { "RenderType"="Opaque" } 12 LOD 100 13 14 Pass 15 { 16 CGPROGRAM 17 #pragma vertex vert 18 #pragma fragment frag 19 20 #include "UnityCG.cginc" 21 22 struct appdata 23 { 24 float4 vertex : POSITION; 25 }; 26 27 struct v2f 28 { 29 float3 stw : TEXCOORD1; 30 float x : TEXCOORD0; 31 float4 vertex : SV_POSITION; 32 }; 33 34 sampler2D _LeftTex; 35 sampler2D _RightTex; 36 float _BoundaryWidth; 37 38 v2f vert (appdata v) 39 { 40 v2f o; 41 o.vertex = UnityObjectToClipPos(v.vertex); 42 o.stw = o.vertex.xyw; //クリッピング座標のx、y、wを別途フラグメントシェーダーに送る 43 o.x = v.vertex.x; // モデル座標のx(シリンダーの右側なら正、左側なら負)をフラグメントシェーダーに送る 44 return o; 45 } 46 47 fixed4 frag (v2f i) : SV_Target 48 { 49 float2 uv = (i.stw.xy / i.stw.z) * 0.5 + 0.5; 50 51 #if UNITY_UV_STARTS_AT_TOP 52 uv.y = 1.0 - uv.y; // 環境によってはテクスチャ上下が反転するらしい? 53 #endif 54 55 fixed4 leftCol = tex2D(_LeftTex, uv); 56 fixed4 rightCol = tex2D(_RightTex, uv); 57 58 return lerp(leftCol, rightCol, smoothstep(-_BoundaryWidth, _BoundaryWidth, i.x)); // -境界幅~+境界幅で左右をなめらかにブレンド 59 } 60 ENDCG 61 } 62 } 63}
動かしてみると下図のように描画されました。オブジェクトがもっと多かったり、重そうなエフェクトを加えたりするとまた違うでしょうが、少なくとも非モバイル環境においては十分な速度で動作しそうな感じでした。
投稿2017/12/21 22:18
編集2017/12/21 22:40総合スコア10807
0
可能かと思いますが、すごく重そうです。
思いつくのは3つのカメラを使う方法です。
###カメラ1 左側の世界を撮影
Viewport RectのWを0.5にする
###カメラ2 右側の世界を撮影
Viewport RectのXとWを0.5にする
###カメラ3 キャラクターを撮影
キャラクターに適当なLayerを設定、このカメラのCulling Maskにキャラクターに設定したレイヤーのみを撮影させる
###Viewport Rectについて
・Xは画面幅を1とした時の横軸の位置です
・Wは画面幅を1とした時の横幅です
###スクリプト
書いていませんが、こんな感じの処理を実装するといいと思います。
・すべてのカメラの移動とキャラの移動をリンクさせる
・キャラクターの向きでカメラ1とカメラ2のViewport Rectの設定を変える
・当たり判定が欲しければ、カメラにコライダをつけてそれをプレイヤーに伝える。(角度など難しいかもしれません)
###今回の内容をプラグインにしました
スクリプトは書いてませんが良かったら見てみてください。
http://firestorage.jp/download/426cc4d2a061d651cae102e055530faa773b756c
###この方法の問題点
・重そう。。。
こういう使い方をしたことないのでどの程度の負荷になるか分かりません。この方法を採用する前に想定している程度の物を適当に置いてプレイヤーを歩かせてみて問題なく動くか試した方がいいと思います。今の段階で分かるのはスマホは無理だと思います。
・キャラクターに影を落とせない
影を落とすうまい方法が思いつきませんでした。参考画像のように、丸い影を作ってキャラクターの足元に置いて連動させる方法が良いかもしれません。
###最後に
いろいろな表現ができそうでワクワクしました。
すごい面白い試みで完成品が楽しみです。
リリースしましたら是非教えてください。
投稿2017/12/20 06:21
編集2017/12/20 11:42総合スコア1724
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/21 03:35
2017/12/21 07:41 編集
2017/12/21 07:51
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/22 07:38
2017/12/23 04:14
2017/12/24 04:51