跟月影学可视化
月影
前奇虎360奇舞团团长,可视化UI框架SpriteJS核心开发者,《JavaScript王者归来》作者
立即订阅
4188 人已学习
课程目录
已更新 27 讲 / 共 45 讲
0/4登录后,你可以任选4讲全文学习。
课前必学 (2讲)
开篇词 | 不写网页的前端工程师,还能干什么?
免费
预习 | Web前端与可视化到底有什么区别?
图形基础篇 (4讲)
01 | 浏览器中实现可视化的四种方式
02 | 指令式绘图系统:如何用Canvas绘制层次关系图?
03 | 声明式图形系统:如何用SVG图形元素绘制可视化图表?
04 | GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
数学篇 (5讲)
05 | 如何用向量和坐标系描述点和线段?
06 | 可视化中你必须要掌握的向量乘法知识
07 | 如何用向量和参数方程描述曲线?
08 | 如何利用三角剖分和向量操作描述并处理多边形?
09 | 如何用仿射变换对几何图形进行坐标变换?
视觉基础篇 (8讲)
10 | 图形系统如何表示颜色?
11|图案生成:如何生成重复图案、分形图案以及随机效果?
12 | 如何使用滤镜函数实现美颜效果?
13 | 如何给简单的图案添加纹理和复杂滤镜?
14 | 如何使用片元着色器进行几何造型?
15 | 如何用极坐标系绘制有趣图案?
16 | 如何使用噪声生成复杂的纹理?
17 | 如何使用后期处理通道增强图像效果?
视觉高级篇 (7讲)
18 | 如何生成简单动画让图形动起来?
19 | 如何用着色器实现像素动画?
20 | 如何用WebGL绘制3D物体?
21 | 如何添加相机,用透视原理对物体进行投影?
22 | 如何用仿射变换来移动和旋转3D物体?
23 | 如何模拟光照让3D场景更逼真?(上)
24 | 如何模拟光照让3D场景更逼真?(下)
特别放送 (1讲)
加餐一 | 作为一名程序员,数学到底要多好?
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

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

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

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

我们现在假设,在 WebGL 的三维世界任意位置上有一个相机,它可以用一个三维坐标(Position)和一个三维向量方向(LookAt Target)来表示。
在初始情况下,相机的参考坐标和世界坐标是重合的。但是,当我们移动或者旋转相机的时候,相机的参考坐标和世界坐标就不重合了。
而我们最终要在 Canvas 画布上绘制出的是,以相机为观察者的图形,所以我们就需要用一个变换,将世界坐标转换为相机坐标。这个变换的矩阵就是视图矩阵(ViewMatrix)。
计算视图矩阵比较简单的一种方法是,我们先计算相机的模型矩阵,然后对矩阵使用 lookAt 函数,这样我们得到的矩阵就是视图矩阵的逆矩阵。然后,我们再对这个逆矩阵求一次逆,就可以得到视图矩阵了。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥29.9
立即订阅
登录 后留言

精选留言(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
收起评论
1
返回
顶部