跟月影学可视化
月影
前奇虎 360 奇舞团团长,可视化 UI 框架 SpriteJS 核心开发者,《JavaScript 王者归来》作者
30206 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 54 讲
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

21 | 如何添加相机,用透视原理对物体进行投影?

小试牛刀
使用OGL库绘制基本的几何体的步骤
投影矩阵、视图矩阵、模型矩阵、法向量矩阵的作用
计算正投影和透视投影矩阵的函数
正投影和透视投影的特点
WebGL的默认坐标范围
视图矩阵的作用
视图矩阵的计算方法
相机的作用
推荐阅读
3D绘图标准模型
剪裁空间和投影对3D图像的影响
引入相机和视图矩阵的概念
如何添加相机,用透视原理对物体进行投影

该思维导图由 AI 生成,仅供参考

你好,我是月影。
上节课,我们在绘制 3D 几何体的时候,实际上有一个假设,那就是观察者始终从三维空间坐标系的正面,也就是 z 轴正方向,看向坐标原点。但在真实世界的模型里,观察者可以处在任何一个位置上。
那今天,我们就在上节课的基础上,引入一个空间观察者的角色,或者说是相机(Camera),来总结一个更通用的绘图模型。这样,我们就能绘制出,从三维空间中任意一个位置观察物体的效果了。
首先,我们来说说什么是相机。

如何理解相机和视图矩阵?

我们现在假设,在 WebGL 的三维世界任意位置上有一个相机,它可以用一个三维坐标(Position)和一个三维向量方向(LookAt Target)来表示。
在初始情况下,相机的参考坐标和世界坐标是重合的。但是,当我们移动或者旋转相机的时候,相机的参考坐标和世界坐标就不重合了。
而我们最终要在 Canvas 画布上绘制出的是,以相机为观察者的图形,所以我们就需要用一个变换,将世界坐标转换为相机坐标。这个变换的矩阵就是视图矩阵(ViewMatrix)。
计算视图矩阵比较简单的一种方法是,我们先计算相机的模型矩阵,然后对矩阵使用 lookAt 函数,这样我们得到的矩阵就是视图矩阵的逆矩阵。然后,我们再对这个逆矩阵求一次逆,就可以得到视图矩阵了。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入介绍了在绘制3D几何体时引入相机概念的重要性,以及如何通过OGL库实现从任意位置观察物体的效果。文章首先讲解了相机和视图矩阵的概念,以及通过代码理解视图矩阵的计算过程。接着,详细介绍了剪裁空间和投影对3D图像的影响,以及正投影和透视投影的特点和计算方法。最后,通过OGL库的实际操作,展示了如何绘制不同的3D几何体,包括球体、立方体、圆柱体和环面。整篇文章深入浅出地介绍了3D绘图的基本原理和数学模型,对于想要深入了解3D图形学的读者来说,是一篇非常有价值的文章。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(1)

  • 最新
  • 精选
  • 罗 乾 林
    第一题: const sphereGeometry = new Sphere(gl, { widthSegments: 160, }); 第二题: const fragment = /* glsl */ ` precision highp float; varying vec3 vNormal; uniform vec3 uColor; void main() { vec3 normal = normalize(vNormal); float lighting = dot(normal, normalize(vec3(-0.3, 0.8, 0.6))); gl_FragColor.rgb = uColor + lighting * 0.1; gl_FragColor.a = 1.0; } `; function createProgram(r,g,b){ return new Program(gl,{ vertex, fragment, uniforms:{ uColor:{value:new Vec3(r,g,b)} } }) } const program_red =createProgram(1.0,0,0); const program_green =createProgram(0,1.0,0); const program_blue = createProgram(0.0,0,1.0); const program_yellow = createProgram(1.0,1.0,0); const torus = new Mesh(gl, {geometry: torusGeometry, program:program_red}); torus.position.set(0, 1.3, 0); torus.setParent(scene); const sphere = new Mesh(gl, {geometry: sphereGeometry, program:program_green}); sphere.position.set(1.3, 0, 0); sphere.setParent(scene); const cube = new Mesh(gl, {geometry: cubeGeometry, program:program_blue}); cube.position.set(0, -1.3, 0); cube.setParent(scene); const cylinder = new Mesh(gl, {geometry: cylinderGeometry, program:program_yellow}); cylinder.position.set(-1.3, 0, 0); cylinder.setParent(scene); 望老师指正

    作者回复: 不错~

    2020-08-11
    3
收起评论
显示
设置
留言
1
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部