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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[WebGL入门]十二,模型数据和顶点属性

顶点中的属性是由程序员来自由添加的,需要的VBO的个数就是添加的属性个数。 顶点属性的各个数据,使用纯粹的一维数组,当然,数组的元素个数要根据想要绘制的顶点个数来定义。 生成VBO的时候,首先要把缓存绑定到WebGL,然后相应的数据,要转换为相应的类型,然后使用指定的常量来写入数据。而为了避免预想之外的错误发生,数据写入结束之后,要将WebGL中绑定的缓存无效化。 这样,一连串的处理之后,模型数据就可以被顶点着色器利用了。下一回以后,说一下将VBO传给着色器的步骤,首先先把VBO的准备部分好好理解一下吧。...
阅读(7522) 评论(2)

[WebGL入门]十一,着色器的编译和连接

HTML代码中引入必要的javascript文件,以及描述着色器的代码。 准备了着色器的编译函数和连接着色器的程序对象相关的函数。每个函数中都有是否进行了正确处理的判断。 下次,准备好顶点数据,也就是说准备好模型数据,然后变换为VBO。按照前面说的步骤,一步步全都理解的话,就应该没问题了,加油吧。...
阅读(10909) 评论(5)

[WebGL入门]十,矩阵计算和外部库

从长远来看,真正进行非常复杂的处理时,矩阵的知识还是不能缺少的。但是,要提前把这些都理解是很苦难的。所以,先熟练使用外部库,等能够熟练进行3D开发之后,再逐步了解这些知识是比较理想的。 使用外部库的时候,也可能存在平台问题,必须边理解外部库的特征边使用,并不是说完全没有问题。本网站使用的库是管理人自己的库,会尽可能减低使用的门槛。...
阅读(7463) 评论(1)

[WebGL入门]九,顶点缓存的基础

顶点里添加怎样的情报,程序员是可以自由决定的,DirectX中有一种叫做[灵活顶点格式]的机制,WebGL中顶点格式是没有的,程序员必须自己处理所有的顶点情报。 只需要添加你想要添加的顶点信息的VBO就行了,VBO的生成方法以及怎样把数组信息传递给VBO等等,以后的文章中会详细的介绍。首先,把大概的流程理解一下。 最难理解的是怎样把attribute变量相关联,这个以后肯定会详细的介绍的。这次,只需要了解了顶点缓存的作用就足够了。...
阅读(7709) 评论(0)

[WebGL入门]八,着色器的说明和基础

顶点着色器和片段着色器,都可以通过GLSL来书写,基本上它们算是一个组合。着色器的内部,必须要定义一个main函数,在这个函数里面添加自己的处理。而且,要从WebGL一侧向着色器传递数据的时候,需要用到一些特殊的修饰符所定义的变量。 要向着色器传递各个顶点的不同的信息的时候,使用attribute修饰符声明变量,要向着色器传递对所有顶点来说都一样的信息的时候,使用uniform修饰符声明变量。 另外,从顶点着色器向片段着色器传递数据的时候,使用varying修饰符声明变量。 顶点着色器中内置的变量gl_Po...
阅读(10839) 评论(4)

[WebGL入门]七,context的初始化

这一次,只是获取一下WebGL的context,然后将使用黑色将画面清空一下。但是事实上,这样就可以开始使用WebGL了。 接下来,会更具体更详细的介绍WebGL相关的处理,但不管做什么,基础都是很重要的,这次的内容还是需要彻底理解一下的。...
阅读(9862) 评论(2)
16条 共2页1 2 下一页 尾页
    个人资料
    • 访问:1550131次
    • 积分:16583
    • 等级:
    • 排名:第636名
    • 原创:87篇
    • 转载:0篇
    • 译文:32篇
    • 评论:2289条
    联系我
    lufy.legend@gmail.com
    偶也微博了
    我写的书
      icon
      系统讲解HTML 5 Canvas的基础知识和高级技巧,深入剖析开源库件lufylegend的原理与使用以实例为向导,详细讲解射击游戏、物理游戏、网络游戏等各类游戏的开发思路和技巧
      qq交流群:298385345
    lufylegend.js游戏引擎官网
    博客专栏
    我开发的游戏
      三国记
    三国记是一款以三国时期为背景的战略类游戏,玩家可以任选一名君主,以统一全国为目标。
      三国记-乱世群雄
    本游戏以三国为背景,本次更新为第一部黄巾之乱的后续剧情,续作了群雄讨伐董卓,界桥之战以及救援徐州等剧情。
      三国记-经典战役版
    本游戏以三国为背景,玩家在游戏中可以体验三国中的四个经典战役,虎牢关之战,官渡之战,赤壁之战,夷陵之战。
    最新评论