摘要：而且，如果将镜头大幅度远离苹果，那么也有可能看不到苹果了。着色器又分为两种顶点着色器顾名思义它能处理顶点坐标大小等矩阵计算后的结果，能够把数学坐标光栅化。
我对webgl或者说二维、三维的理解
首先我们要做的就是把三维的东西展现在显示器里(浏览器里)，但浏览器是二维的。那么就是把一个三维的物体用数学模型描述出来（x,y,z）然后把这个三维的数学模型转换到二维的浏览器里显示出来。(用webgl来模拟一个三维的空间）。
无论用DirectX还是OpenGL，最终都需要将三维的情报向二维进行变换。就像刚开始说的那样，最终的图像都是由二维显示器来显示的。
这时候，坐标变换就是必须的了。坐标变换大致可以分为三种，将这些方法正确的组合在一起，最终决定显示器上的位置。
用身边的东西举例说明的话，三维向二维转换的例子就是照相机。照片和图像，通过照相机已经全部变为了二维，最终，输出成了照片和动画。
1.模型变换:在OpenGL的处理中虽然一般叫做模型变换，但是在DirectX中被叫做世界变换。
模型变换，是指为了定义参照物在三维空间的什么位置而进行的坐标变换。和现实的世界不同，程序中的三维空间里定义了世界的中心的基准点，就是原点。从这个原点出发，为了知道参照物的相对位置，就需要进行必要的坐标变换。假设，虚拟的三维空间里有一个苹果，那么为了表示这个苹果在什么位置，就需要进行相应的模型变换了。
2.视图变换:定义了镜头的实际位置以及镜头的方向。拿刚刚举例的苹果来说，即使三维空间中有一个苹果，如果镜头的方向不对着苹果的话，同样也是看不到这个苹果的。而且，如果将镜头大幅度远离苹果，那么也有可能看不到苹果了。为了决定镜头的位置和角度所进行的坐标变换就叫做视图变换。
3.投影变换:定义了三维空间的摄影区域。比如，是横向摄影，还是纵向摄影，最远拍摄多远距离等。
一般的照相机，直接拍摄镜头前的所有图像，最远拍摄多远也基本上没什么意识。但是，程序是无法模拟无限大的空间的，所以，从哪里开始拍摄，拍摄到哪里，必须有一个明确的范围。投影变幻，通过远近法则，可以将近处的物体描画的比较大，远处的物体描画的比较小。
认识着色器之前得先了解一下什么是固定渲染管线，简单来说，固定渲染管线就是就是3d渲染所需要进行的一连串的计算流程。也就是上面所说的模型、视图、投影的三种变化，固定渲染管线都会替我们完成。
但webgl中不存在固定渲染管线,那么就意味着，坐标的变化得由我们自己来解决了。在webgl中这个解决坐标变化的机制就叫着色器(shader)。而这种可以有程序员来控制的坐标变换机制又叫做，可编辑渲染管线机制。着色器又分为两种
1.顶点着色器（vertex shader):顾名思义它能处理顶点坐标、大小等（矩阵计算后的结果），能够把数学坐标光栅化。
2.片元着色器（fragment shader):能够接收光栅化数据并加以处理使其显示到屏幕上（光栅化数据包含了像素的位置、颜色等信息）
光栅化就是把顶点数据转换为片元的过程。片元中的每一个元素对应于帧缓冲区中的一个像素。
光栅化其实是一种将几何图元变为二维图像的过程。该过程包含了两部分的工作。第一部分工作：决定窗口坐标中的哪些整型栅格区域被基本图元占用；第二部分工作：分配一个颜色值和一个深度值到各个区域。光栅化过程产生的是片元。把物体的数学描述以及与物体相关的颜色信息转换为屏幕上用于对应位置的像素及用于填充像素的颜色，这个过程称为光栅化，这是一个将模拟信号转化为离散信号的过程。
着色器的使用：使用GLSL(openGL Shading Laguage)硬编码的C语言去使用.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84591.html
摘要：选择对象的本质是从点击位置发射光线，但屏幕坐标系与坐标系是不同的，而把屏幕的二维坐标转化为三维坐标就是关键，做一步换算后交由的方法即可。 Three.js 选择对象的本质是从点击位置发射光线，但屏幕坐标系与webgl坐标系是不同的，而把屏幕的二维坐标转化为三维坐标就是关键，做一步换算后交由Raycaster的setFromCamera方法即可。所以思路如下：1.获取屏幕坐标(x, y)...
摘要：本系列文章将会向读者展示开发与的区别和的一些重要的新特性进行介绍本系列文章面向已经熟悉的读者，如果你还不熟悉，可以考虑阅读的相关书籍。菜已陆续上桌，我们开动吧。 引子 时光荏苒岁月如梭，不知不觉间，青丝变白发，哦不是，应该是WebGL已经发展到了2.0阶段:WebGL2，WebGL2相比WebGL增加了很多新的特性，这些新的特性能够帮助程序开发人员实现更多 更酷 更炫 更高性能的Web...
摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。 初识 WebGL 先通过几个使用 Web...
摘要：比如顶点数组对象，在中，是一个扩展对象，而在直接使用。在中，使用代码如下告诉用户没有此扩展或者使用其他方式而在中，代码如下有关的相关功能，将会在以后的章节中介绍。后面的章节，会陆续介绍相关的特性。 WebGL2几乎100%兼容WebGL1，需要注意的是，这里说的几乎，也就是说，也是存在一些细微的差别的，因此原本WebGL1的代码迁移到WebGL2，应该不会有遇到太多的困难；不过WebG...
摘要：概述最近公司在做一个大型的应用，总结如下建模软件建模自定义一套语义化的模型格式，并编写模型格式转化插件把建模软件的模型格式转成自定义格式。 概述 最近公司在做一个大型的webgl应用，总结如下: 1.建模软件建模(3d Max revit) 2.自定义一套 语义化的模型格式，并编写模型格式转化插件,把建模软件的模型格式转成自定义格式。 为什么要自定义语义化的模型格式呢？ 因为，现在浏览...
阅读 1109·2021-10-11 10:58
阅读 1495·2021-09-02 09:55
阅读 861·2019-08-30 13:19
阅读 2047·2019-08-27 14:47
阅读 1250·2019-08-26 13:51
阅读 1325·2019-08-26 13:49
阅读 2198·2019-08-26 12:13
阅读 343·2019-08-26 11:52
