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

月影



该思维导图由 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

收起评论