美文网首页
Unity渲染顶点作为颜色到纹理获取顶点的世界坐标

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

作者: 雄关漫道从头越 | 来源:发表于2019-08-09 22:25 被阅读0次

通过渲染到浮点纹理实现三维对象拾取
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
好了,准备下班了。

相关文章

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

    通过渲染到浮点纹理实现三维对象拾取Unity 琐碎(2): Shader 颜色调试 最近项目有个新需求,在AR场景...

  • 编译链接自定义着色器实现纹理渲染

    GLSL代码 顶点着色器代码 片元着色器代码 获取纹理对应像素点的颜色值 TexCoord 纹理坐标,通过顶点着色...

  • Vertex & Fragment Shader (五)-顶点颜

    1.根据模型的顶点坐标,设置颜色。 2.根据模型顶点在世界坐标系内的坐标,设置颜色。 3.加入了时间因子的顶点颜色变化

  • (七)图元装配和光栅化

    图元 图元由一组表示顶点位置的顶点描述。其他如颜色、纹理坐标和几何法线等信息也作为通用属性与每个顶点关联。Open...

  • 一个简单光栅器的实现(五) 光栅化阶段

    在几何阶段我们通过顶点变换获得了世界坐标下的顶点最终渲染到屏幕上的位置和它们的深度值,并且在剔除掉了不在视锥体内顶...

  • 4. 顶点着色器-mvp转换

    4. 顶点着色器-mvp转换 概述 属性:用顶点数组提供的逐顶点数据(顶点位置、颜色、纹理) 统一变量和统一变量缓...

  • three.js之材质

    材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性。通过设置材质可以改变物体的颜色、纹理贴图、...

  • 纹理的使用:绘制金字塔

    先放效果图 关于纹理的核心知识 纹理的4个顶点坐标如图所示,使用时将每个顶点对应到纹理的各个顶点上 每个顶点的对应...

  • 视觉学习第二节课

    OpenGL 渲染流程图解析 1:渲染需要确定顶点数据,顶点着色器进行顶点的渲染。有几个顶点顶点着色器执行几次。 ...

  • GLFW5 ——纹理应用

    纹理是一种GL对象,创建方式与顶点数据类似 纹理显示到fragment前,还需要设置它的纹理坐标。纹理坐标和顶点坐...

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/vqjkjctx.html