WebGL原理 (笔记2)

WebGL执行原理

图形流水线

这里写图片描述

在这里插入图片描述
文字描述

  • 确定图形的每一个顶点,比如说一个三角形,她需要三个顶点来确定他的大小位置等
  • 图元装配: 他的意思主要是通过上面的 顶点 来确定一个图形
  • 光栅化: 你已经有了形状,就是骨架但是他的内部是空的,我们可以想象一下 3个火柴棍,拼成一个三角形,但是他不是有面积的,中间是空的,通过光栅化把他中间进行填充,这样他就变成了 类似一个实体
  • 片元着色:这里我们举个栗子, 风筝的制作流程 : 第一步肯定要先搭好骨架,也就是我们上面说的图元装配; 第二步,我们需要的是为风筝的骨架铺上需要的布料或者其他材料,就是光栅化,光栅化过后就得到基本的风筝了。但是这样的风筝肯定不好看啊,这时候我们肯定想要好看点的 风筝不能比其他小伙伴的不好看吧,这就需要我们的片元着色了。第三步:就是在风筝上面涂上图案
  • 逐片元操作:这里我们可以理解对图案的一些 优化和处理

重点的2个就是我们的着色器

着色器的作用

首先,WebGL里有顶点着色器和片元着色器两种着色器。顶点着色器和片元着色器是相互依赖的,缺一不可,并且首先被调用的是顶点着色器。

可以把顶点相关的所有情报都传给顶点着色器。比如,顶点的位置,顶点法线,纹理坐标,顶点颜色等等,跟顶点相关的所有情报都可以传给顶点着色器。在这里,我们可以自由决定传入着色器的内容,这种灵活性就是可编辑渲染管线的好处。但是,虽然说传入着色器的内容是自由决定的,但是顶点的位置情报是必须的,因为如果不知道顶点的位置的话,是没有办法绘制模型的。

顶点着色器就跟他的字面上的意思一样,接受顶点相关的情报,最后决定如何处理这些顶点。而片元着色器则决定了画面上用什么颜色来输出。片元着色器的英文是fragment,其实就是断片,碎片的意思。而画面上的像素则是画面上的最小的断片,所以片元着色器操作的是颜色。

最通俗的说就是,顶点着色器就是处理顶点相关的信息,片元着色器就是处理画面上的颜色信息。

顶点着色器(Vertex shader)

顶点着色器是用来描述 顶点特性(如位置、颜色等)的程序。顶点(Vertex)是指二维或三维空间中的一个点,比如二维或三维图形的端点或交点。

  • 顶点着色器源码
    顶点着色器源码是通过javascript字符串形式表示出来的
  • 内置变量
    定点着色器有一先内置的变量,这些变量的名字是 不可以变 的,而且是区分 大小写
  • 自定义 Attribute 变量
    自定义变量需要3种限定字,他是表示变量的不同含义和作用,具有一定的限制
    表示 每一个点 的数据,可以定义很多个
  • 自定义Uniform变量
    定义一个常量,uniform变量就像是ES6里面的常量(const ),它不能被 shader 程序修改
  • 自定义Varying变量
    他是 顶点着色器片元着色器 传导数据 用的

片元着色器(Fragment shader)

进行逐片元处理过程如光照(后续教程继续解释光照)的程序。片元(fragment)是一个WebGL术语,你可以将其理解为像素(图像的单元)。

  • 片元色器源代码
  • 内置变量
  • Uniform 和 Samplers
    samplers 主要用来储存纹理的,顶点着色器没有这个概念的
  • 自定义Varying变量
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值