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

多纹理进行渲染的时候应该注意的是,指定正确的纹理单位进行数据的处理,这就足够了。 其他的细节,主要是activeTexture函数和uniform1i函数的使用方法,这几个不出错的话,之后就可以在着色器一侧使用自己喜欢的图片了。 这次只是单纯的在着色器中将两个纹理数据进行相乘运算,然后各个纹理数据分别进行处理,就可以进行完全不一样的渲染,没有使用固定渲染管道,而是使用GLSL中的程序员自定义着色器,这一点很刺激吧。...
阅读(7034) 评论(19)

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

在片段着色器中对光进行计算,阴影,亮点等效果都非常的漂亮,3D场景的真实度大幅度提升。并且能和顶点颜色一起使用,理解了前面讲解的内容之后,就应该能进行比较高质量的3D渲染了。 这一次,来看高级一点的纹理的使用。所谓纹理,简单一点说,就是可以放到多边形上的图片数据,在WebGL中当然也可以使用。 WebGL和HTML不同,一般的图片类型(gif,jpg,png等)是不可以直接使用的,另外,也可以把canvas转换成纹理,总之,要变换一下方法来进行渲染。...
阅读(8072) 评论(1)

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

用点光源的光照,概念基本上和平行光源一样。根据获取光向量和顶点的法线及视点向量的内积来添加阴影。和平行光源的不同之处,简单的说就是光向量是否是一个固定值。点光源使用的是模型坐标变换后的顶点的位置和光源的位置,这时再计算光向量,所以增加了若干的计算量。 平行光源的光的方向是一定的,整体都受到均等的光照。但是点光源根据实际顶点的坐标要进行具体的光的碰撞。这次的demo和上次一样在片段着色器中进行光的计算和补色着色,所以可以进行很漂亮的渲染。 这次的文章中只需要明白是进行了光照相关的基础部分的封装,WebGL中的...
阅读(5244) 评论(0)

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

这一次分别说了高氏着色和补色着色两种着色,高氏着色的优点是计算量比较低,而和补色着色相比的话,渲染效果不太自然。 补色着色正好相反,计算量很高,但是渲染效果非常完美。 到底选择那种方法,取决于模型的顶点数和需要的渲染效果,以及执行环境能够承受的计算负荷。 实际应用中,根据利用的场景和描画的模型,分别使用不同的方法是非常重要的。 这次也准备了demo,急着看运行效果的人可以点击文章最后的链接来测试。 另外,补充一点,这次的demo中对圆环体的生成函数做了几处修改,返回值是以对象的形势返回的,可以指定圆环体的颜...
阅读(4265) 评论(0)

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

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

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

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

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

写的太长了,果然,就算是简单点说,关于光的处理也需要很长的描述。 重点是,3D渲染中没有办法完全模拟现实中的光,只是大致是那么回事而已。 完全模拟自然界的物理学的话,计算量是非常大的,所以代替这些的就是这次所介绍的,使用平行光源,法线,逆矩阵等技术,在一定程度上尽可能的让画面看起来真实。 理解这次文章的内容,需要一定程度的数学知识,向量,法线,矩阵,这些在平常生活中是不会出现的,但是好好考虑一下的话,应该是可以理解的。...
阅读(6580) 评论(3)

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

这次,并没有对WebGL相关的新技术进行说明,这一点运行一下demo就能知道了,果然,比起绘制简单的板状的多边形来说,像圆环体这样的立体模型绘制起来更有意思吧。 demo中使用的着色器和HTML跟以前并没有变化,javascript相关部分,也只是添加了一个生成圆环体的函数和一个HSV转换的函数,没有什么特别的变更点。 demo中绘制的圆环体,会沿着Y轴和Z轴进行旋转,使用了七彩颜色,看起来应该挺赏心悦目的吧。...
阅读(7542) 评论(1)

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

这次,介绍了遮挡剔除和深度测试,无论那一个都是使用enable函数来设置有效,使用disable函数来设置无效。enable和disable这两个函数的参数是一致的,根据传入的参数不同,可以设定各种属性设置为有效或者无效。 遮挡剔除设置为有效的话,内侧的多边形就不会描画了,这样就减轻了绘图的负担。深度测试在模拟有深度概念的三维空间时有着非常重要的作用,指定为正确的评价方法的话,就能像现实世界一样,近处的物体会将远处的物体遮挡住。 这次做的demo,可以自由切换遮挡剔除的有效和无效,而且可以自由指定多边形的内...
阅读(6317) 评论(0)

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

使用索引缓存IBO,既可以节约数据,又能够提高渲染顶点的效率,而且,模型越复杂影响越大,这是程序员非常乐意看到的。 索引缓存和顶点缓存一样,可以使用纯粹的一维数组来生成,生成的IBO进行绑定后就可以使用了,利用IBO绘图的时候使用drawElements函数是重点。 这次的demo,顶点着色器和片段着色器是没有任何变化的,所以,还使用以前的HTML代码,javascript的内容多少有些变化,最后会给出完整代码,另外,文章最后会贴出本次demo的链接,可以参考一下。...
阅读(5628) 评论(1)

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

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

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

这次操作的是模型坐标变换矩阵,介绍了重复利用VBO,视图和投影坐标变换矩阵,进行多个模型的绘制的方法。 绘制很多个简单的模型,图形的时候,像这次的做法一样,可以使处理变的简洁一些,避免写很多多余的代码。 这次的demo,HTML的代码和上一次是完全一样的,就是说,顶点着色器和片段着色器没有做任何调整。javascript代码有了一些变化,所以贴出所有代码。另外,在文章的最后面,添加了demo的链接,有支持WebGL的浏览器的话,可以直接打开链接看一下效果。...
阅读(6466) 评论(6)

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

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

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

其实这次的代码绘制的只是一个简单的三角形。只是这样,却写了这么长的代码,所以才说3D开发是比较难的。 但是,个人认为,即使这样,和DirectX相比较的话,已经相当简单,简练了。 单从开发环境上来说,不需要特别的开发环境,WebGL这一点已经很轻松了吧。理解了本次的内容的话,只需要稍微慢慢的调整一下,就可以实现很多效果。这以后的内容,都是以这次的内容为基础的,所以必须要好好的理解一下。 本文章最后,给出本文demo的链接,如果浏览器支持的话,直接看demo比较直观吧。...
阅读(9047) 评论(1)

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

这次介绍了一下本网站的矩阵计算的库minMatrix.js的基本的使用方法,和坐标变换矩阵的顺序。 minMatrix.js通过一个叫做matIV的对象来对矩阵进行操作,各种方法的具体内容,现在不明白也不要紧,等必要的时候会进行具体的说明。生成了坐标变换矩阵之后,离绘制多边形还差一小步了。 下次,终于该让多边形显示到画面上了。...
阅读(8215) 评论(0)
27条 共2页1 2 下一页 尾页
    个人资料
    • 访问:1473195次
    • 积分:15977
    • 等级:
    • 排名:第617名
    • 原创:87篇
    • 转载:0篇
    • 译文:27篇
    • 评论:2274条
    联系我
    lufy.legend@gmail.com
    偶也微博了
    我写的书
      icon
      系统讲解HTML 5 Canvas的基础知识和高级技巧,深入剖析开源库件lufylegend的原理与使用以实例为向导,详细讲解射击游戏、物理游戏、网络游戏等各类游戏的开发思路和技巧
      qq交流群:298385345
    lufylegend.js游戏引擎官网
    博客专栏
    我开发的游戏
      三国记
    三国记是一款以三国时期为背景的战略类游戏,玩家可以任选一名君主,以统一全国为目标。
      三国记-乱世群雄
    本游戏以三国为背景,本次更新为第一部黄巾之乱的后续剧情,续作了群雄讨伐董卓,界桥之战以及救援徐州等剧情。
      三国记-经典战役版
    本游戏以三国为背景,玩家在游戏中可以体验三国中的四个经典战役,虎牢关之战,官渡之战,赤壁之战,夷陵之战。
    最新评论