lufy小屋

喜欢玩游戏,更喜欢研究游戏,用自己的双手编写自己的游戏世界

[WebGL入门]三十二,四元数和minMatrixb.js

这次结合实际应用,来继续了解一下。将三维空间中的坐标变换为四元数,然后进行旋转处理。 虽说,本次用来解说的demo,即使不使用四元数也能轻易的实现,但是使用了四元数之后,会更加的直观一些。 对于四元数周边的处理,会使用到本网站的算法库minMatrixb.js,还有另一个与矩阵相关的处理就是它的姐...

2017-08-29 09:15:00

阅读数:1747

评论数:0

[WebGL入门]三十一,Quaternions(四元数)

D编程的世界中,数学的知识是非常重要的。最具代表的就是矩阵了,不知道矩阵的话,就没办法进行坐标变换了。而其他的,向量的知识,内积・外积这些也都是不可缺少的。的确是非常烦人。 那么,这次的标题是四元数。不光是WebGL,在DirectX中也同样存在着四元数。它到底是个什么东西,使用它之后又有那些方便...

2017-08-23 11:43:05

阅读数:1109

评论数:0

[WebGL入门]三十,混合系数

混色是将颜色和颜色混合处理的总称,在WebGL中主要是指源颜色和目标颜色这两种颜色的混合。源颜色是即将要绘制的颜色,目标颜色是已经绘制的颜色,源颜色如何处理,目标颜色如何处理,这些都可以单独进行设置。颜色如何处理是由混合系数决定的,混合系数有很多种,不同的组合绘制的结果也会有很大不同。根据自己的创...

2017-08-23 09:04:38

阅读数:940

评论数:0

[WebGL入门]二十九,透明混色

所谓混色,就是刚才叙述的那样,把颜色混合在一起。那么用来混合的颜色是什么颜色呢?顶点的颜色?还是纹理的颜色?答案既不是顶点颜色也不是纹理 颜色。而是源颜色(即将要绘制的颜色)和目标颜色(已经绘制的颜色)。WebGL在渲染东西之前,必须进行context的初始化,将颜色和深度清除。持续循环的处理中,...

2017-08-18 23:58:14

阅读数:1773

评论数:0

[WebGL入门]二十八,纹理参数

为了进一步提升纹理的渲染质量,来介绍一下纹理参数。通过控制纹理参数,可以很好的提升模型的渲染质量,虽然会有些比较难理解的地方,这些可以以后再考虑。 那么,WebGL中的纹理参数到底是什么呢?现在就从这里开始说明。 纹理参数就是跟纹理渲染的时候的质量及特征相关的特性。比如说,即使是使用同样的解析度和...

2017-08-16 21:34:47

阅读数:1018

评论数:1

[WebGL入门]二十七,多纹理

多纹理进行渲染的时候应该注意的是,指定正确的纹理单位进行数据的处理,这就足够了。 其他的细节,主要是activeTexture函数和uniform1i函数的使用方法,这几个不出错的话,之后就可以在着色器一侧使用自己喜欢的图片了。 这次只是单纯的在着色器中将两个纹理数据进行相乘运算,然后各个纹理数据...

2014-10-19 01:06:02

阅读数:8587

评论数:19

[WebGL入门]二十六,纹理绘图

在片段着色器中对光进行计算,阴影,亮点等效果都非常的漂亮,3D场景的真实度大幅度提升。并且能和顶点颜色一起使用,理解了前面讲解的内容之后,就应该能进行比较高质量的3D渲染了。 这一次,来看高级一点的纹理的使用。所谓纹理,简单一点说,就是可以放到多边形上的图片数据,在WebGL中当然也可以使用。 W...

2014-10-18 18:04:25

阅读数:11798

评论数:1

[WebGL入门]二十五,点光源的光照

用点光源的光照,概念基本上和平行光源一样。根据获取光向量和顶点的法线及视点向量的内积来添加阴影。和平行光源的不同之处,简单的说就是光向量是否是一个固定值。点光源使用的是模型坐标变换后的顶点的位置和光源的位置,这时再计算光向量,所以增加了若干的计算量。 平行光源的光的方向是一定的,整体都受到均等的光...

2014-10-13 00:22:09

阅读数:6638

评论数:0

[WebGL入门]二十四,补色着色

这一次分别说了高氏着色和补色着色两种着色,高氏着色的优点是计算量比较低,而和补色着色相比的话,渲染效果不太自然。 补色着色正好相反,计算量很高,但是渲染效果非常完美。 到底选择那种方法,取决于模型的顶点数和需要的渲染效果,以及执行环境能够承受的计算负荷。 实际应用中,根据利用的场景和描画的模型,分...

2014-10-11 21:55:59

阅读数:5405

评论数:0

[WebGL入门]二十三,反射光的光照效果

与目前为止所涉及到的算法相比,今天的算法也不算难,就是,计算从光源发出的光向量和视线向量之间的半向量,然后与面法线向量求内积,所以相对的负荷也不大。但是,这只是在一定程度上模拟了反射光的效果,并不是非常严格的反射光的计算。 从渲染的结果来看,圆环体已经变的非常漂亮了,实际的效果,请参考文章最后给出...

2014-10-06 21:47:31

阅读数:8148

评论数:8

[WebGL入门]二十二,从环境光源发出的光

环境光,模拟了自然界的光的漫反射,弥补了平行光源的缺点。一般,这两种光会同时使用。只使用环境光的话,无法表现出模型的凹凸,只使用平行光源的话,阴影过于严重无法分清模型的轮廓。 3D模拟中的扩散光的代表就是环境光和平行光。这次的demo也实现到了这一步。

2014-09-06 00:52:18

阅读数:6048

评论数:4

[WebGL入门]二十一,从平行光源发出的光

写的太长了,果然,就算是简单点说,关于光的处理也需要很长的描述。 重点是,3D渲染中没有办法完全模拟现实中的光,只是大致是那么回事而已。 完全模拟自然界的物理学的话,计算量是非常大的,所以代替这些的就是这次所介绍的,使用平行光源,法线,逆矩阵等技术,在一定程度上尽可能的让画面看起来真实。 理解这次...

2014-08-28 23:40:53

阅读数:8221

评论数:3

[WebGL入门]二十,绘制立体模型(圆环体)

这次,并没有对WebGL相关的新技术进行说明,这一点运行一下demo就能知道了,果然,比起绘制简单的板状的多边形来说,像圆环体这样的立体模型绘制起来更有意思吧。 demo中使用的着色器和HTML跟以前并没有变化,javascript相关部分,也只是添加了一个生成圆环体的函数和一个HSV转换的函数,...

2014-08-15 21:25:38

阅读数:9799

评论数:1

[WebGL入门]十九,遮挡剔除和深度测试

这次,介绍了遮挡剔除和深度测试,无论那一个都是使用enable函数来设置有效,使用disable函数来设置无效。enable和disable这两个函数的参数是一致的,根据传入的参数不同,可以设定各种属性设置为有效或者无效。 遮挡剔除设置为有效的话,内侧的多边形就不会描画了,这样就减轻了绘图的负担。...

2014-08-15 01:37:37

阅读数:8501

评论数:0

[WebGL入门]十八,利用索引缓存来绘图

使用索引缓存IBO,既可以节约数据,又能够提高渲染顶点的效率,而且,模型越复杂影响越大,这是程序员非常乐意看到的。 索引缓存和顶点缓存一样,可以使用纯粹的一维数组来生成,生成的IBO进行绑定后就可以使用了,利用IBO绘图的时候使用drawElements函数是重点。 这次的demo,顶点着色器和片...

2014-08-14 01:21:49

阅读数:7280

评论数:1

[WebGL入门]十七,递归处理和移动・旋转・缩放

这次利用递归处理实现了持续循环,并介绍了模型坐标变换矩阵的移动,旋转和放大缩小等处理。以后,动态的demo会越来越多,这次介绍的持续循环也会被更多的用到。 匿名函数或者普通的函数的递归可能是个稍微难理解的概念,也要着急,仔细考虑的话会理解的。如果处理比较多的话,这一部分处理可能应该单独分离出来。

2014-08-13 00:16:37

阅读数:8243

评论数:0

[WebGL入门]十六,绘制多个模型

这次操作的是模型坐标变换矩阵,介绍了重复利用VBO,视图和投影坐标变换矩阵,进行多个模型的绘制的方法。 绘制很多个简单的模型,图形的时候,像这次的做法一样,可以使处理变的简洁一些,避免写很多多余的代码。 这次的demo,HTML的代码和上一次是完全一样的,就是说,顶点着色器和片段着色器没有做任何调...

2014-08-11 00:21:04

阅读数:8506

评论数:6

[WebGL入门]十五,为多边形涂抹颜色(顶点颜色的指定)

与上一篇的内容相比的变更点。主要就是着色器和VBO周围的处理有了些小变化。如果再给顶点增加其他新的属性的话,就依葫芦画瓢,像本次的内容一样,按照同样的步骤,再重复一遍就可以了,这样就可以给顶点自由的添加属性了。 最后,贴出本篇文章的demo的全部代码,链接也在最后给出,大家可以参考一下。

2014-08-09 22:56:26

阅读数:7098

评论数:0

[WebGL入门]十四,绘制多边形

其实这次的代码绘制的只是一个简单的三角形。只是这样,却写了这么长的代码,所以才说3D开发是比较难的。 但是,个人认为,即使这样,和DirectX相比较的话,已经相当简单,简练了。 单从开发环境上来说,不需要特别的开发环境,WebGL这一点已经很轻松了吧。理解了本次的内容的话,只需要稍微慢慢的调整一...

2014-08-08 23:10:57

阅读数:12955

评论数:1

[WebGL入门]十三,minMatrix.js和坐标变换矩阵

这次介绍了一下本网站的矩阵计算的库minMatrix.js的基本的使用方法,和坐标变换矩阵的顺序。 minMatrix.js通过一个叫做matIV的对象来对矩阵进行操作,各种方法的具体内容,现在不明白也不要紧,等必要的时候会进行具体的说明。生成了坐标变换矩阵之后,离绘制多边形还差一小步了。 下次,...

2014-08-07 23:15:40

阅读数:10883

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭