查看: 7645|回复: 38
收起左侧

[旅行的拾荒者] 使用unity3D实现全景图像查看器

  [复制链接]

[旅行的拾荒者] 使用unity3D实现全景图像查看器  [复制链接]

旅行的拾荒者 发表于 2017-3-8 13:31:05 [显示全部楼层] 回帖奖励 |倒序浏览 |阅读模式 回复:  38 浏览:  7645




创建shader

[AppleScript] 纯文本查看 复制代码
Shader "Unlit / Pano360Shader"
{
        Properties
{
        _MainTex("Base(RGB)", 2D) = "white"{}
        _Color("Main Color", Color) = (1,1,1,0.5)
}
SubShader
{
        Tags{ "RenderType" = "Opaque" }
        //This is used to print the texture inside of the sphere
        Cull Front
        CGPROGRAM
#pragma surface surf SimpleLambert
        half4 LightingSimpleLambert(SurfaceOutput s, half3 lightDir, half atten)
{
        half4 c;
        c.rgb = s.Albedo;
        return c;
}

sampler2D _MainTex;
struct Input
{
        float2 uv_MainTex;
        float4 myColor : COLOR;
};

fixed3 _Color;
void surf(Input IN, inout SurfaceOutput o)
{
        //This is used to mirror the image correctly when printing it inside of the sphere
        IN.uv_MainTex.x = 1 - IN.uv_MainTex.x;
        fixed3 result = tex2D(_MainTex, IN.uv_MainTex)*_Color;
        o.Albedo = result.rgb;
        o.Alpha = 1;
}
ENDCG
}
Fallback "Diffuse"
}


遮罩Shader

[C#] 纯文本查看 复制代码
Shader "ImageEffect/MaskIcon"
{
        Properties
        {
                [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
        _Mask("Base (RGB)", 2D) = "white" {}


        _Color("Tint", Color) = (1,1,1,1)
                _StencilComp("Stencil Comparison", Float) = 8
                _Stencil("Stencil ID", Float) = 0
                _StencilOp("Stencil Operation", Float) = 0
                _StencilWriteMask("Stencil Write Mask", Float) = 255
                _StencilReadMask("Stencil Read Mask", Float) = 255
                _ColorMask("Color Mask", Float) = 15
                [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
        }

                SubShader
        {
                Tags
        {
                "Queue" = "Transparent"
                "IgnoreProjector" = "True"
                "RenderType" = "Transparent"
                "PreviewType" = "Plane"
                "CanUseSpriteAtlas" = "True"
        }

                Stencil
        {
                Ref[_Stencil]
                Comp[_StencilComp]
                Pass[_StencilOp]
                ReadMask[_StencilReadMask]
                WriteMask[_StencilWriteMask]
        }

                Cull Off
                Lighting Off
                ZWrite Off
                ZTest[unity_GUIZTestMode]
                Blend SrcAlpha OneMinusSrcAlpha
                ColorMask[_ColorMask]

                Pass
        {
                CGPROGRAM
#pragma vertex vert
#pragma fragment frag

#include "UnityCG.cginc"
#include "UnityUI.cginc"

#pragma multi_compile __ UNITY_UI_ALPHACLIP

                struct a2v
        {
                fixed2 uv : TEXCOORD0;
                half4 vertex : POSITION;
                float4 color    : COLOR;
        };

        fixed4 _Color;

        struct v2f
        {
                fixed2 uv : TEXCOORD0;
                half4 vertex : SV_POSITION;
                float4 color    : COLOR;
        };

        sampler2D _MainTex;
        sampler2D _Mask;

        v2f vert(a2v i)
        {
                v2f o;
                o.vertex = mul(UNITY_MATRIX_MVP, i.vertex);
                o.uv = i.uv;

                o.color = i.color * _Color;
                return o;
        }

        fixed4 frag(v2f i) : COLOR
        {
                half4 color = tex2D(_MainTex, i.uv) * i.color;
                half4 mask = tex2D(_Mask, i.uv);
                color.a *= mask.a;
                return color;
        }
                ENDCG
        }
        }
}


C#代码

[C#] 纯文本查看 复制代码
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Pano360 : MonoBehaviour {
    
    public  Transform container;
    float turnSpeedMouse=50;

    /// <summary>  
    /// 第一次按下的位置  
    /// </summary>  
    private Vector2 first = Vector2.zero;
    /// <summary>  
    /// 鼠标的拖拽位置(第二次的位置)  
    /// </summary>  
    private Vector2 second = Vector2.zero;
    /// <summary>  
    /// 旋转的角度  
    /// </summary>  
    private float angle = 3f;

    void OnGUI()
    {
        if (Event.current.type == EventType.MouseDown)
        {
            //记录鼠标按下的位置     
            first = Event.current.mousePosition;
        }
        if (Event.current.type == EventType.MouseDrag)
        {
            //记录鼠标拖动的位置     
            second = Event.current.mousePosition;

            if (second.x < first.x)
            {
                //拖动的位置的x坐标比按下的位置的x坐标小时,响应向左事件     
                this.transform.Rotate(Vector3.up , angle);

                container.Rotate(new Vector3(0 , angle * (-1) , 0f) * Time.deltaTime * turnSpeedMouse);
                transform.Rotate(new Vector3(angle , 0 , 0) * Time.deltaTime * turnSpeedMouse);
            }
            if (second.x > first.x)
            {
                //拖动的位置的x坐标比按下的位置的x坐标大时,响应向右事件     
                this.transform.Rotate(Vector3.down , angle);
                container.Rotate(new Vector3(0 , angle * (1) , 0f) * Time.deltaTime * turnSpeedMouse);
                transform.Rotate(new Vector3(angle , 0 , 0) * Time.deltaTime * turnSpeedMouse);
            }
            first = second;
        }
    }
}

Demo下载:

游客,如果您要查看本帖隐藏内容请回复

全景查看的shader是参考别人的,然后加了一个遮罩。滑动的方式修改了一下

参考链接:https://medium.com/@verochan/how-to-make-a-360%C2%BA-image-viewer-with-unity3d-b1aa9f99cabb#.z57hy8be8


   使用unity3D实现全景图像查看器 | 拾荒者 https://www.noobdev.cn/?p=585

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

评分

参与人数 2泰斗币 +50 热心值 +1 收起 理由
冷筱曦 + 1 赞一个!
里斯 + 50 很给力!

查看全部评分

+1
7678°C
38
  • 冷筱曦
  • 淼森鑫焱垚
  • kx88
  • jike_381143309
  • 北城以北花未眠
过: 他们
因分享而快乐,学习以自强!
冷筱曦 发表于 2017-3-8 13:32:45 显示全部楼层
泰斗帖子强,满满正能量。
因分享而快乐,学习以自强!
淼森鑫焱垚 发表于 2017-3-8 21:54:54 显示全部楼层
看了LZ的帖子,我只想说一句很好很强大!
因分享而快乐,学习以自强!
kx88 发表于 2017-3-8 23:34:42 显示全部楼层
啥也不说了,泰课就是给力!
因分享而快乐,学习以自强!
jike_381143309 发表于 2017-3-9 09:28:38 显示全部楼层
我们先定一个能达到的小目标,先赚它一亿泰斗币。
因分享而快乐,学习以自强!
北城以北花未眠 发表于 2017-3-9 09:32:21 显示全部楼层
不错 谢谢分享  感谢楼主提供资源
因分享而快乐,学习以自强!
星空1989 发表于 2017-3-9 09:47:21 显示全部楼层
看了LZ的帖子,我只想说一句很好很强大!
因分享而快乐,学习以自强!
mark水 发表于 2017-3-9 10:21:39 显示全部楼层
我们先定一个能达到的小目标,先赚它一亿泰斗币。
因分享而快乐,学习以自强!
zhupeiji 发表于 2017-3-9 10:26:00 显示全部楼层
你有木有见过这么标准的十五字啊
因分享而快乐,学习以自强!
KUFFIOS 发表于 2017-3-9 10:44:54 显示全部楼层
泰斗那么大,我想来看看。
因分享而快乐,学习以自强!
你是八嘎君 发表于 2017-3-9 11:01:12 显示全部楼层
看看全景图效果~~~~
因分享而快乐,学习以自强!
木心Sepith 发表于 2017-3-9 15:40:16 显示全部楼层
水水水水水水水水水水水水水水水水水
因分享而快乐,学习以自强!
咸鱼1w 发表于 2017-3-9 15:49:20 显示全部楼层
学习学习
因分享而快乐,学习以自强!
792453582 发表于 2017-3-9 17:17:03 显示全部楼层
不管你信不信,反正我是信了。
因分享而快乐,学习以自强!
longyueheima 发表于 2017-3-9 22:33:02 显示全部楼层
学习学习~!!!!
因分享而快乐,学习以自强!
123下一页
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

VR/AR版块|Unity3d|Unreal4|新手报道|小黑屋|站点地图|沪ICP备14023207号-9|【泰斗社区】-专注互联网游戏和应用的开发者平台 ( 沪ICP备14023207号-9 )|网站地图

© 2001-2013 Comsenz Inc.  Powered by Discuz! X3.4

1
QQ