Unity3D WebCamTexture 取帧渲染、像素读取的终端适配

导语

Unity3D可以通过WebCamTexture获取摄像头的像素数据,用于渲染到纹理或者图像相关计算。 由于Win/Mac/Adnroid/iOS等各系统平台和硬件环境下,WebCamTexture 用于渲染和图像计算时表现不完全一致,很容易造成图像渲染或者计算不正确,给调试带来很大麻烦,所以在这里总结一下。

Unity3D可以通过WebCamTexture获取摄像头的像素数据,用于渲染到纹理或者图像相关计算。

由于Win/Mac/Adnroid/iOS等各系统平台和硬件环境下,WebCamTexture 用于渲染和图像计算时表现不完全一致,很容易造成图像渲染或者计算不正确,给调试带来很大麻烦,所以在这里总结一下。

纹理渲染和OpenCV图像计算的像素坐标系

用一张3*3像素的图片来表示,Unity3D纹理渲染像素顺序如下:

7

8

9

4

5

6

1

2

3

左下角为原点,向上和向右为正方向排布像素点

OpenCV进行图像计算的时候,像素顺序如下:

1

2

3

4

5

6

7

8

9

左上角为原点,向下和向右为正方向

WebCamTexture 在各平台下的表现

Windows

渲染时像素顺序:

7

8

9

4

5

6

1

2

3

获取的像素点数组排布顺序:

7

8

9

4

5

6

1

2

3

OpenCV读入像素计算时,将图像在y方向上翻转就可以了

Android 后置摄像头

同Windows

Android 前置摄像头

同Windows

但是此处有一点要注意的是,前置摄像头需要的实际上是左右调换的镜面成像,所以实际上需要的像素点排布顺序是:

9

8

7

6

5

4

3

2

1

在纹理渲染和图像计算时,最好是同时做一个x方向上的翻转,以得到上边的像素点顺序

iOS后置摄像头

iOS后置摄像头获取的像素顺序与OpenCV计算时的顺序一致,若直接渲染会上下颠倒。

其像素点排布顺序是:

1

2

3

4

5

6

7

8

9

所以在使用iOS后置摄像头获取帧并渲染时,应注意在y方向上对图像做翻转

iOS前置摄像头

iOS前置摄像头获取的像素点排布顺序是:

9

8

7

6

5

4

3

2

1

渲染时可不对图像做任何处理,这就是前置摄像头需要的左右镜面效果

OpenCV读取时,按照与Windwos一致的读取方式,将图像读取为

3

2

1

6

5

4

9

8

7

即可

rbga读取顺序

从WebCamTexture 中获取的像素点用Color32数组来表示

    // 摘要: 
    //     Representation of RGBA colors in 32 bit format.
    [IL2CPPStructAlignment(Align = 4)]
    [UsedByNativeCode]
    public struct Color32
    {
        // 摘要: 
        //     Alpha component of the color.
        public byte a;
        //
        // 摘要: 
        //     Blue component of the color.
        public byte b;
        //
        // 摘要: 
        //     Green component of the color.
        public byte g;
        //
        // 摘要: 
        //     Red component of the color.
        public byte r;

        //
        // 摘要: 
        //     Constructs a new Color32 with given r, g, b, a components.
        //
        // 参数: 
        //   r:
        //
        //   g:
        //
        //   b:
        //
        //   a:
        public Color32(byte r, byte g, byte b, byte a);
    }

OpenCV读取该数组内存地址的像素点数据,在所有平台下,读取的顺序都是 r-g-b-a

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

蛇形图

今天要跟大家分享的图表是蛇形图! 该图表的制作原理很类似之前讲过的垂直折线图,不过这里要复杂一些,会用到很多错位排列的技巧。 下面就开始吧,还是首选让大家看一下...

3725
来自专栏王磊的博客

基于python的图片修复程序-可用于水印去除

4223
来自专栏菩提树下的杨过

Flash/Flex学习笔记(25):摩擦力与屏幕环绕

摩擦力: 假如一个物体在某个方向上沿直线运行,摩擦力会使该方向上的速度越来越小,直到停止。 ? 上图示意了该过程,物体以moveAngle角度正向运动,最终的...

1906
来自专栏coding for love

CSS进阶12-网格布局 Grid Layout

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

872
来自专栏数据小魔方

绩效管理工具(二)——温度计风格图表!

今天跟大家分享另一种用作绩效管理的图表工具——温度计风格图表! ▽ 这种图表看起来简洁、直观。数据表达清晰、无冗余。今天主要介绍两种做法,都不是特别复杂,但是需...

3038
来自专栏章鱼的慢慢技术路

OpenGL透明与混色效果

1836
来自专栏HTML5学堂

一步步教你弹性框架-上篇

HTML5学堂:本系列主要在于跟大家分享弹性运动框架的制作方式。弹性运动框架的运动方式类似于弹簧,有一种回弹的效果,在网站中的一些特效当中还是有一些应用的。实现...

3508
来自专栏数据小魔方

sparklines迷你图系列7——Comparision(+/-Variance)。

今天跟大家分享sparklines迷你图系列的第七篇——Comparision(+/-Variance)。 该图表用于表现指标增长率波动情况,波动范围-100%...

2515
来自专栏顶级程序员

阿里巴巴公司根据截图查到泄露信息的具体员工的技术是什么?

? 在月饼事件中的新闻中提到。阿里对员工访问的界面做了一定的处理。貌似这不是简单的水印。这种处理是什么,是怎么做到的呢? =====第三次更新===== 评论...

4549
来自专栏数据小魔方

多度量的(堆积)不等宽柱形图

今天要跟大家介绍的图表是多度量的不等宽柱形图! ▽▼▽ 这种多度量的不等宽柱形图,在制作技巧上,与之前讲过的两篇不等宽柱形图有异曲同工之妙,但是在数据表达与展示...

4086

扫码关注云+社区