1.不透明度
当我们要将两个半透的纹理贴图到一个材质球上的时候就遇到混合的问题,由于前面的知识我们已经知道了片段着色器以及后面的环节的主要工作是输出颜色与深度到帧缓存中,所以两个纹理在每个像素上的颜色到底以怎样的形式混合在一起最后输出到帧缓存中是我们现在首要讨论的内容。
1.混合(blending)
上一篇文章中的管道环节中的“逐帧操作”环节中的一项操作就是混合操作,可见混合操作是不可编程的固定功能环节。
在混合操作中,我们将片段着色器中计算出来的颜色称之为 “源颜色”,帧缓存中对应的像素已经存在...
分类:
其他好文 时间:
2014-08-22 19:44:29
阅读次数:
206
上一篇文章的例子中我们可以看到顶点着色器的输出参数可以说是直接作为了片段着色器的形参传递过来,那么不由得一个问题浮现出来,顶点着色器的形参是从何处传递过来的?
顶点着色器的形参是gameObject 的meshRenderer组件将所有的mesh数据按每一帧一次传递给OpenGL。
这中间的过程常常被称作一次draw call,往往一次性传输大量mesh信息作为一次draw call 比多次传输少量mesh信息引起多次draw call更加效率。
而在上一个例子中我们只接受了MeshRenderer传递...
分类:
其他好文 时间:
2014-08-19 16:31:04
阅读次数:
212
前提知识点:
1.CG代码必须用
CGPROGRAM
。。。
ENDCG括起来
2.顶点着色器与片段着色器的主函数名称可随意,但需要再#pragma vert 与#pragma fragment中声明并且与主函数名完全匹配,shader才会找到入口
3.float4是一种压缩数组,float4 vert与float vert[4]严格意义上讲不同,虽然都是存放4个float,但float4作为向量类型做点乘、内积等处理更快速
4.语义 :变量除了变量名与数据类型之外,还在:后声明其语义
例子一:RGB立方体...
分类:
其他好文 时间:
2014-08-18 20:32:52
阅读次数:
231
这次,并没有对WebGL相关的新技术进行说明,这一点运行一下demo就能知道了,果然,比起绘制简单的板状的多边形来说,像圆环体这样的立体模型绘制起来更有意思吧。
demo中使用的着色器和HTML跟以前并没有变化,javascript相关部分,也只是添加了一个生成圆环体的函数和一个HSV转换的函数,没有什么特别的变更点。
demo中绘制的圆环体,会沿着Y轴和Z轴进行旋转,使用了七彩颜色,看起来应该挺赏心悦目的吧。...
分类:
Web程序 时间:
2014-08-15 22:36:39
阅读次数:
324
环境:windows8.1,vs2013
曲面细分主要增加三角形的数量,使得表面和边缘更平滑和精细。
原理:
着色器主要包括外壳着色器、曲面细分阶段和域着色器阶段。
1、外壳着色阶段
外壳着色器阶段主要为每个片元进行曲面细分因子的设置和片元控制点的输入。
如片元为三角形时,需要设置三个边的细分因子和三角形内部的细分因子以及三角形输入的三个控制点。
2、曲面细分
这个阶段是固定渲染阶...
分类:
其他好文 时间:
2014-08-14 14:10:41
阅读次数:
319
使用索引缓存IBO,既可以节约数据,又能够提高渲染顶点的效率,而且,模型越复杂影响越大,这是程序员非常乐意看到的。
索引缓存和顶点缓存一样,可以使用纯粹的一维数组来生成,生成的IBO进行绑定后就可以使用了,利用IBO绘图的时候使用drawElements函数是重点。
这次的demo,顶点着色器和片段着色器是没有任何变化的,所以,还使用以前的HTML代码,javascript的内容多少有些变化,最后会给出完整代码,另外,文章最后会贴出本次demo的链接,可以参考一下。...
分类:
Web程序 时间:
2014-08-14 01:27:57
阅读次数:
600
学习了顶点处理,你就知道固定功能流水线怎么将顶点从模型空间坐标系统转化到屏幕空间坐标系统。虽然固定功能流水线也可以通过设置渲染状态和参数来改变最终输出的结果,但是它的整体功能还是受限。当我们想实现一个外来的光照模型,外来的Fog或者点大小计算方式,等等,我们可能就放弃使用固定功能流水线,转而使用CP...
分类:
其他好文 时间:
2014-08-13 10:17:35
阅读次数:
414
这次操作的是模型坐标变换矩阵,介绍了重复利用VBO,视图和投影坐标变换矩阵,进行多个模型的绘制的方法。
绘制很多个简单的模型,图形的时候,像这次的做法一样,可以使处理变的简洁一些,避免写很多多余的代码。
这次的demo,HTML的代码和上一次是完全一样的,就是说,顶点着色器和片段着色器没有做任何调整。javascript代码有了一些变化,所以贴出所有代码。另外,在文章的最后面,添加了demo的链接,有支持WebGL的浏览器的话,可以直接打开链接看一下效果。...
分类:
Web程序 时间:
2014-08-11 02:59:11
阅读次数:
350
与上一篇的内容相比的变更点。主要就是着色器和VBO周围的处理有了些小变化。如果再给顶点增加其他新的属性的话,就依葫芦画瓢,像本次的内容一样,按照同样的步骤,再重复一遍就可以了,这样就可以给顶点自由的添加属性了。
最后,贴出本篇文章的demo的全部代码,链接也在最后给出,大家可以参考一下。...
分类:
Web程序 时间:
2014-08-09 23:15:49
阅读次数:
407
顶点中的属性是由程序员来自由添加的,需要的VBO的个数就是添加的属性个数。
顶点属性的各个数据,使用纯粹的一维数组,当然,数组的元素个数要根据想要绘制的顶点个数来定义。
生成VBO的时候,首先要把缓存绑定到WebGL,然后相应的数据,要转换为相应的类型,然后使用指定的常量来写入数据。而为了避免预想之外的错误发生,数据写入结束之后,要将WebGL中绑定的缓存无效化。
这样,一连串的处理之后,模型数据就可以被顶点着色器利用了。下一回以后,说一下将VBO传给着色器的步骤,首先先把VBO的准备部分好好理解一下吧。...
分类:
Web程序 时间:
2014-08-06 22:58:12
阅读次数:
339