Unity渲染顶点作为颜色到纹理获取顶点的世界坐标

通过渲染到浮点纹理实现三维对象拾取
Unity 琐碎(2): Shader 颜色调试

最近项目有个新需求,在AR场景中,点击场景的任意位置可以获取到点击位置物体表面的位置,传统的都是用碰撞来做,给不同对象添加BoxCollider,然后发射线,即可。不过我们希望碰撞点的位置能在物体的表面,而不是包围盒的表面,打个比方,一把椅子,它的包围盒中有很大一块区域是空的,因为包围盒的计算是将所有顶点都包含在盒子中,所以碰撞点只能落在包围盒上,看起来离椅子还有很远的距离,如果使用mesh collider,对于一个场景中任意位置都支持的话,模型太多,性能消耗不起。


椅子包围盒

后来经群友提示,可以将顶点的位置(XYZ)作为颜色(RGB)渲染到RT上,再从RT上采样获取RGB值,将RGB值转换为世界坐标,这是一种非常取巧的方式,也可以说是歪门邪道,哈哈,不过能实现功能就好。
下面说下核心的思路和代码:
1.先将顶点位置通过shader转换为世界坐标,注意世界坐标是(-∞,+∞),而颜色是[0,1],所以需要做一个映射,先归一化,再映射到[0,1],注意dis * 0.01,作为A通道输出,是用于获取世界坐标的逆运算,乘以0.01是为了转换[0,1]区间,我目前的项目中不会超过100单位,这是是个经验值,可以自行尝试得到一个较好的值。

这个shader是在Camera的OnPreRender时使用RenderWithShader方法,临时替代原shader 获取一张RT时使用的,所以要注意,凡是需要渲染顶点到颜色的材质使用过的RenderType,都要实现一遍,关于RenderType可以参考笔者之前的一篇文章UnityShader RenderType。因为笔者的场景中材质shader使用到三种RenderType,分别是:

    Tags { "RenderType"="Opaque" }

    Tags { "RenderType"="TransparentCutout" }

    Tags { "RenderType"="Transparent" }

所以需要3个SubShader,Tags分别标记为上述三个类别。

SubShader {
    Tags { "RenderType"="Opaque" }
    LOD 300

    Pass {
        CGPROGRAM
        #pragma vertex vert
        #pragma fragment frag
        #pragma target 2.0

        #include "UnityCG.cginc"

        struct appdata_t {
            float4 vertex : POSITION;
            float4 uv: TEXCOORD0;
        };

        struct v2f {
            float4 vertex : SV_POSITION;
            float2 uv: TEXCOORD0; 
            float4 worldPos : TEXCOORD1;
        };

        float4 _MainTex_TexelSize;

        v2f vert (appdata_t v)
        {
            v2f o;
            o.vertex = UnityObjectToClipPos(v.vertex);
            //需要处理UV翻转问题
        #if UNITY_UV_STARTS_AT_TOP 
            if(_MainTex_TexelSize.y < 0)
                o.uv = float2(v.uv.x, 1-v.uv.y);
            else
                o.uv = v.uv;
        #else
            o.uv = v.uv;
        #endif
            o.worldPos =  mul(unity_ObjectToWorld, v.vertex);
            return o;
        }

        float4 frag (v2f i) : SV_Target
        {
            //世界坐标映射到颜色
            float dis = length(i.worldPos.xyz);
            float3 worldPos2 = i.worldPos.xyz/dis;
            worldPos2 = worldPos2 * 0.5 + 0.5;
            return float4(worldPos2,dis * 0.01);
        }
        ENDCG
    }

SubShader {
    Tags { "RenderType"="TransparentCutout" }
    ...
    }

SubShader {
    Tags { "RenderType"="Transparent" }
    ...
    }
}

保存该shader。接下来需要在Camera的OnPreRender中使用该shader替换得到一张RT。

public Camera depthCam;
private RenderTexture depthTexture;
private Texture2D texture2D;

private void OnPreRender()
{
    if (depthCam == null) return;
    if (depthTexture)
     {
        RenderTexture.ReleaseTemporary(depthTexture);
        depthTexture = null;
     }
    depthCam.CopyFrom(Camera.main);
    depthTexture = RenderTexture.GetTemporary(Camera.main.pixelWidth, Camera.main.pixelHeight, 32, RenderTextureFormat.ARGB32);
    depthCam.backgroundColor = new Color(0, 0, 0, 0);
    depthCam.clearFlags = CameraClearFlags.SolidColor;
    depthCam.targetTexture = depthTexture;
    depthCam.RenderWithShader(shader, "RenderType");//替换shader,获取rt

    int width = depthTexture.width;
    int height = depthTexture.height;
    texture2D = new Texture2D(width, height, TextureFormat.ARGB32, false);//屏幕中心的颜色
    RenderTexture temp = RenderTexture.active;
    RenderTexture.active = depthTexture;
    texture2D.ReadPixels(new Rect(0, 0, width, height), 0, 0);
    texture2D.Apply();
    RenderTexture.active = temp;
    Color color = texture2D.GetPixel(width / 2, height / 2);//这里采样为中心点
   //逆运算得到世界坐标
    Vector3 w = new Vector3(color.r, color.g, color.b);
    float l = color.a * 100f;
    w.x = (w.x - 0.5f) * 2 * l;
    w.y = (w.y - 0.5f) * 2 * l;
    w.z = (w.z - 0.5f) * 2 * l;
    Debug.Log(w);
}
顶点作为颜色输出得到的RenderTexture
Editor下截图

最后输出的就是屏幕中心顶点的世界坐标,当然还可以改成鼠标点击的位置。

小结

使用该方法获取到的世界坐标的位置并不是非常准确,大部分时候都是正确的,但是有时候会有一点偏差,笔者猜测是精度导致的问题,目前还没有确定是哪里导致的。另外对于使用了法线贴图、视差贴图或者其他在shader中导致视觉位置改变的材质,一样会产生偏移,这个也是要注意的。因为笔者项目的原因,有一点偏差,最后再通过手动微调也是可以接受的。如果哪位大佬还有更好的方式获取屏幕顶点,也请留言告知,不胜感激。
最后给出github的地址https://github.com/eangulee/Color2Pos
好了,准备下班了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,919评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,567评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,316评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,294评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,318评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,245评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,120评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,964评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,376评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,592评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,764评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,460评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,070评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,697评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,846评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,819评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,665评论 2 354

推荐阅读更多精彩内容