惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cyberwarzone
Cyberwarzone
F
Fortinet All Blogs
Y
Y Combinator Blog
C
Check Point Blog
Latest news
Latest news
A
About on SuperTechFans
Spread Privacy
Spread Privacy
W
WeLiveSecurity
Know Your Adversary
Know Your Adversary
Stack Overflow Blog
Stack Overflow Blog
云风的 BLOG
云风的 BLOG
Recent Announcements
Recent Announcements
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - 叶小钗
Last Week in AI
Last Week in AI
S
SegmentFault 最新的问题
T
Troy Hunt's Blog
T
Threatpost
Recent Commits to openclaw:main
Recent Commits to openclaw:main
博客园 - 司徒正美
Cloudbric
Cloudbric
J
Java Code Geeks
N
News | PayPal Newsroom
雷峰网
雷峰网
N
News and Events Feed by Topic
罗磊的独立博客
博客园 - 三生石上(FineUI控件)
Recorded Future
Recorded Future
爱范儿
爱范儿
C
Cisco Blogs
P
Proofpoint News Feed
Hacker News: Ask HN
Hacker News: Ask HN
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Hugging Face - Blog
Hugging Face - Blog
O
OpenAI News
大猫的无限游戏
大猫的无限游戏
Webroot Blog
Webroot Blog
T
The Blog of Author Tim Ferriss
宝玉的分享
宝玉的分享
S
Secure Thoughts
博客园 - 【当耐特】
人人都是产品经理
人人都是产品经理
V
Vulnerabilities – Threatpost
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
D
Darknet – Hacking Tools, Hacker News & Cyber Security
SecWiki News
SecWiki News
Martin Fowler
Martin Fowler
阮一峰的网络日志
阮一峰的网络日志
P
Privacy & Cybersecurity Law Blog

音视频开发进阶

音视频教程-第三节 音视频教程-第二节 真的,AI 可能就是新时代的信息差 充值 Cursor 之后,工作有了哪些变化?🤔 个人'蒸馏'大模型能做哪些有意思的事情 DeepSeek 大模型在 Mac 上的部署和运行 音视频教程-第一节 【WebRTC 专栏】-- Android 开发集成 WebRTC 库的几种方式 【WebRTC 专栏】-- 在 Mac M1 等系列芯片编译和开发 WebRTC-Android 库 Meta Llama3 大模型在 Mac 上的部署和运行 iOS VideoToolBox 解码 HEVC Open-GOP 视频的问题排查 Flutter 状态管理之 InheritedWidget 使用和分析 用 ChatGPT 回答技术问题怎么样 ? 音视频开发系统入门大致路线 UE 4.27 添加自定义 ShadingModel 用 UE4 虚幻引擎做个捏脸小功能~~ UE4 材质练习 之 凹凸贴图偏移的使用 UE4 材质练习系列基础 OpenGL上下文创建以及共享机制 007 | 播放器系列专栏-解析 MP4 文件读取信息 006 | 播放器系列专栏-在 Mac 上查看 MP4 格式信息 干货 | 快速抽取缩略图是怎么练成的? 关于直播、WebRTC、FFmpeg 的那些事 005 | 播放器系列专栏-在 Windows 上查看 MP4 格式信息 将音视频中的花屏、绿屏、黑屏问题一网打尽 关于音视频里面的解码帧率和渲染帧率 004 | 播放器系列专栏-认识MP4视频(下) 003 | 播放器系列专栏-认识MP4视频(上) 入门或者转行音视频,应该要怎么做? H264视频文件如何缩放分辨率 002 | 播放器系列专栏-FFmpeg依赖库的配置 001 | 播放器系列专栏-关于播放器项目的一个小实践 Seek策略以及在有B帧情况下的处理 目前流媒体开发工程师工作内容主要是什么? 一个音视频领域专业问答的小圈子 干货收藏 || Vulkan Game Engine 视频教程 音视频春节假期内卷指南(实操) Vulkan 在 FFmpeg 中的支持 Windows 下 FFmpeg 和 LibX264 的编译和配置 Metal 开发 | 使用 C++ 进行接口调用 音视频开发工作经验分享 || 视频版 FFmpeg 调用 MediaCodec 硬解码到 Surface 上 代码吸猫 | 用 OpenGL 图像渲染的养猫计划 百倍变速--解码到底能不能丢 非参考帧 ?FFmpeg 有话说!!! 老生常谈-FFmpeg 的编译问题轻松搞定 FFmpeg 调用 Android MediaCodec 进行硬解码(附源码) 【WebRTC 专栏】--创建相机预览 Unity Shader 光照基础之 Half Lambert 光照模型 Unity Shader 光照基础之Lambert光照模型 Unity Shader 光照基础内容 Unity Shader 显示一张图片纹理 UnityShader 的基本概念 Unity 物体的基本操作 C++ 模板系列小结07-尾置返回类型 C++ 模板系列小结06-可变参数模板特性 C++ 中的多线程的使用和线程池建设 C++ 模板系列小结05-模板类型作为模板参数 C++ 模板系列小结04-类模板中的成员模板 C++ 模板系列小结03-在模板中指定变量类型 C++ 模板系列小结02-非类型模板参数 C++ 模板系列小结01-函数模板和类模板 从零打造渲染引擎系列01-什么是渲染引擎 iOS开发 - 在 Swift 中去调用 C/C++ 代码 2021 技术新番 - 从零打造渲染引擎系列 iOS 音视频开发的一些基础准备工作 音视频交流群又来啦~~~ 【WebRTC 专栏】WebRTC & Android 开发学习环境搭建~ 【喜大普奔】域名终于备案通过啦 Shader 优化 | OpenGL 绘制网格效果 【音视频连载-011】第二季 FFmpeg 一层一层获取文件信息 KodeLife | Shader 实时编辑预览的强大工具使用实践 推荐几个堪称教科书级别的 Android 音视频入门项目 【音视频连载-010】第二季 FFmpeg 日志打印 【音视频连载-008】基础学习篇-SDL 播放 PCM 音频文件(下) 【音视频连载-007】基础学习篇-SDL 播放 PCM 音频文件(上) 【音视频连载-006】基础学习篇-SDL 播放 YUV 视频文件 【音视频连载-005】基础学习篇-SDL 加载 YUV 文件并显示 【音视频连载-004】基础学习篇-SDL 加载图片并显示 【音视频连载-003】基础学习篇-SDL 消息循环和事件响应 【音视频连载-002】基础学习篇-SDL 创建窗口并显示颜色 【音视频连载-001】基础学习篇- SDL 介绍以及工程配置 LearnOpenGL 源码在 MAC 上的编译与调试 2019 年终总结与回顾 Android NDK 开发的免费技术视频来啦~~ OpenGL 实现视频编辑中的转场效果 OpenGL 实践之贝塞尔曲线绘制 图像库 libjpeg-turbo 编译与实践 图像库 libpng 编译与实践 rust 开发编译 Android 动态库实践 Android NDK 开发 —— 从 Assets 文件夹加载图片并上传纹理 简单易用的图像解码库介绍 —— stb_image 博客图床迁移记 进击的 Vulkan 移动开发之 SwapChain 进击的 Vulkan 移动开发之 Command Buffer 进击的 Vulkan 移动开发之 Instance & Device & Queue 进击的 Vulkan 移动开发(一)之今生前世 Java 显式锁 Lock 与条件队列 C++ 标准容器库小结 一文读懂 YUV 的采样与格式 《OpenGL ES 3.x 游戏开发》碰撞检测之 AABB 包围盒
OpenGL 学习系列---观察矩阵
音视频开发进阶 · 2018-05-22 · via 音视频开发进阶

一个专注音视频领域的小圈子

避免图片丢失,建议阅读微信原文:

https://mp.weixin.qq.com/s/0cWh3IF_7wa5PHoGsh8ZcQOpenGL 投影矩阵 这篇文章中,讲述了 OpenGL 坐标系统中的投影矩阵,有两种类型的投影矩阵,分别是正交投影和透视投影。 这两种投影实质上是两种类型的裁剪空间,分别创建对应视景体对物体坐标进行裁剪,位于裁剪空间内的才会被映射到屏幕上,如下图所示:(图片来源:https://glumpy.github.io/modern-gl.html 当定义裁剪空间视景体时,我们都需要提供近平面和远平面的距离,这里的近和远都是指相对于视点的,视点也就是我们这篇文章要讲到的摄像机。 在上面的图片中,我们可以把投影矩阵的视景体的四条虚线边看成是以摄像机为起始点发出的射线。

这样一来,当起始点也就是摄像机位置发生改变时,它所发出的射线也会随之改变,那么视景体的形状也就改变了,在其内部所观察到的内容也会发生变化。

比如,假设此时摄像机位于彩色小球的上面,那么整个视景体就是垂直立起来了的,所观察到的小球也是朝上的那一面了。

所以,可以看到相机的位置和朝向,决定了视景体在什么位置和什么朝向展开。

在 OpenGL 坐标系统的转换公式中也可以印证这一点:

$$ V_{clip}=M_{projection} \cdot M_{view} \cdot M_{model} \cdot V_{local} $$

它的计算顺序是左乘,也就是说要先进行视图矩阵的计算,然后再进行投影矩阵的计算,这样一来我们就要先确定了相机的位置,然后再根据相机确定投影矩阵。

确定摄像机位置

在这里,确定相机的位置,并不仅仅是定义相机在三维中的 $(x,y,z)$坐标,而是要确定一个以相机位置为原点的坐标系。

在上面也提到,投影矩阵或者说视景体的一个展开,是以相机作为参考的,那么我们肯定还需要一个摄像机的观察方向,这个方向就是视景体展开的方向。

camera

如上图的左二内容所示,摄像机在 Z 轴正方向向坐标系的原点进行观察,假设此时摄像机坐标为 $A(-1,1,1)$,而原点为 $O(0,0,0)$,那么观察方向就是从 $A$ 点向 $O$ 点。而方向向量就是 $A-O$,就是向量 $ \overrightarrow {OA}(-1,1,1)$,它的方向也就是图二中的蓝色箭头所示,可以看到 摄像机的方向向量和它的观察方向正好是相反的。

一个三维的空间坐标系是需要三个互相垂直的轴的,现在已经有了方向向量这一个了。这时可以借助一个辅助向量 上向量 $\overrightarrow{UP}$,把上向量与方向向量进行叉乘,$ \overrightarrow {UP} \cdot \overrightarrow{OA}$,就可以得到一个向量,同时垂直于上向量和方向向量,它就是右向量 $\overrightarrow{Right}$ ,它的方向指向 $X$ 轴正方向 。这里要小心叉乘的顺序,否则得到的方向就是反的了。

如图三所以,灰色的就是辅助上向量 $\overrightarrow{UP}$,而红色箭头所指方向就是 $X$ 轴正方向。

再利用右向量和方向向量的叉乘,就可以得到指向摄像机 $Y$ 轴方向的向量,如最右图的绿色箭头所示。

这样就构造了三个轴互相垂直的坐标系,它就是摄像机的坐标系。

Matrix.lookAt 函数

从上面的内容可以看到,只要知道了相机坐标点,以及观察的点,还有辅助的上向量,就可以确定摄像机的坐标系了。

确定摄像机之后,就是用它来生成我们的观察矩阵,把观察矩阵用于在 OpenGL 渲染管线中进行处理。

和投影矩阵一样,Android 也提供了对应函数 Matrix.setLookAtM 来生成 OpenGL 坐标转换中的观察矩阵。

	 /**
     * Defines a viewing transformation in terms of an eye point, a center of
     * view, and an up vector.
     *
     * @param rm returns the result
     * @param rmOffset index into rm where the result matrix starts
     * @param eyeX eye point X
     * @param eyeY eye point Y
     * @param eyeZ eye point Z
     * @param centerX center of view X
     * @param centerY center of view Y
     * @param centerZ center of view Z
     * @param upX up vector X
     * @param upY up vector Y
     * @param upZ up vector Z
     */
    public static void setLookAtM(float[] rm, int rmOffset,
            float eyeX, float eyeY, float eyeZ,
            float centerX, float centerY, float centerZ, float upX, float upY,
            float upZ)

其中,第一个参数就是要传入的观察矩阵,第二个参数是偏移量,这个一般是 0 ,之后就是相机位置、观察点、辅助上向量。

移动相机观察内容

接下来通过移动摄像机来观察物体,从而加深对摄像机的理解。

旋转移动相机

用 OpenGL 来绘制一个立方体,并通过旋转移动摄像机,让摄像机绕 $Y$ 轴做圆形旋转,从而可以从不同方向来观察物体,效果图如下:

rotate-camera

让立方体稍微向 $Z$ 轴做一点倾斜,这样最多就可以观察到三个面了。

具体代码示例:

    var num = 0
    var RotateNum  = 360 // 绕 Y 轴做圆形旋转,把圆分成 360 份
    val radian = (2 * Math.PI / RotateNum).toFloat() // 每一份对应的弧度
	override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
		//... 省略代码
		// 通过 RxJava 的 interval 操作符,每隔 30 毫秒,移动相机观察角度
        Observable.interval(30, TimeUnit.MILLISECONDS)
                .subscribe {
                    eyeX = eyeDistance * Math.sin((radian * num).toDouble()).toFloat()
                    eyeZ = eyeDistance * Math.cos((radian * num).toDouble()).toFloat()
                    num++
                    if (num > 360) {
                        num = 0
                    }
                }
		// 设置观察矩阵
	    MatrixState.setCamera(eyeX, eyeY, eyeZ, lookX, lookY, lookZ, upX, upY, upZ)		
	    // 让物体稍微向 Z 轴负方向倾斜一定角度
	    MatrixState.rotate(-30f, 0f, 0f, 1f)
	}

在 GLSurfaceView 的 onSurfaceChanged 方法里面设定观察矩阵,并通过 RxJava 的 interval 操作符每隔 30 毫秒改变相机位置的 $X$ 坐标和 $Z$ 坐标,让摄像机在 $XOY$ 平面上绕 $Y$ 轴做圆周运动。

在 onDrawFrame 方法里,每当坐标改变了,就改变相机的位置。

    override fun onDrawFrame(gl: GL10?) {
		//... 省略代码
        MatrixState.setCamera(eyeX, eyeY, eyeZ, lookX, lookY, lookZ, upX, upY, upZ)
        GLES20.glUniformMatrix4fv(uViewMatrixAttr, 1, false, MatrixState.getVMatrix(), 0)
        //... 省略代码
    }

由于是做圆周运动,圆的半径是没有变的,所以看到的物体大小是不变的,只是看到的内容不同。

前后移动相机

我们还可以前后移动相机,这样就相当于人走近或者离开物体,感觉到物体大小发生变化(实际上并没有)。

rotate-camera

如上图,物体还是那个物体,但是从不同的远近来观察,所看到的大小就不一样了。

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        super.onSurfaceChanged(gl, width, height)
        var isPlus = true
        var distance = eyeZ
        Observable.interval(100, TimeUnit.MILLISECONDS)
                .subscribe {
                    distance = if (isPlus) distance + 0.1f else distance - 0.1f
                    if (distance < 2.0f) {
                        isPlus = true
                    }
                    if (distance > 5.0f) {
                        isPlus = false
                    }
                    eyeZ = distance
                    updateCamera()
                }
        // 将物体调整一下,可以看到三个面
        MatrixState.rotate(-45f, 0f, 1f, 0f)
        MatrixState.rotate(45f, 1f, 0f, 0f)
    }

如上代码所示,我们改变了相机的 $Z$ 轴坐标,让它在 $[2.0,5.0]$ 之间来回移动,这样就达到了前后移动相机的效果。

最后,还可以把两种旋转结合起来,即做圆周运动又前后移动相机,效果如下:

小结

通过上面的例子,就应该对 OpenGL 中的相机有一个更加清晰的认识了。

具体代码详情,可以参考我的 Github 项目:

https://github.com/glumes/AndroidOpenGLTutorial

原创文章,转载请注明来源:    OpenGL 学习系列---观察矩阵