- 博客(5)
- 资源 (4)
- 收藏
- 关注
翻译 [WebGL入门]二十七,多纹理
多纹理进行渲染的时候应该注意的是,指定正确的纹理单位进行数据的处理,这就足够了。其他的细节,主要是activeTexture函数和uniform1i函数的使用方法,这几个不出错的话,之后就可以在着色器一侧使用自己喜欢的图片了。这次只是单纯的在着色器中将两个纹理数据进行相乘运算,然后各个纹理数据分别进行处理,就可以进行完全不一样的渲染,没有使用固定渲染管道,而是使用GLSL中的程序员自定义着色器,这一点很刺激吧。
2014-10-19 01:06:02 10425 19
翻译 [WebGL入门]二十六,纹理绘图
在片段着色器中对光进行计算,阴影,亮点等效果都非常的漂亮,3D场景的真实度大幅度提升。并且能和顶点颜色一起使用,理解了前面讲解的内容之后,就应该能进行比较高质量的3D渲染了。这一次,来看高级一点的纹理的使用。所谓纹理,简单一点说,就是可以放到多边形上的图片数据,在WebGL中当然也可以使用。WebGL和HTML不同,一般的图片类型(gif,jpg,png等)是不可以直接使用的,另外,也可以把canvas转换成纹理,总之,要变换一下方法来进行渲染。
2014-10-18 18:04:25 15270 1
翻译 [WebGL入门]二十五,点光源的光照
用点光源的光照,概念基本上和平行光源一样。根据获取光向量和顶点的法线及视点向量的内积来添加阴影。和平行光源的不同之处,简单的说就是光向量是否是一个固定值。点光源使用的是模型坐标变换后的顶点的位置和光源的位置,这时再计算光向量,所以增加了若干的计算量。平行光源的光的方向是一定的,整体都受到均等的光照。但是点光源根据实际顶点的坐标要进行具体的光的碰撞。这次的demo和上次一样在片段着色器中进行光的计算和补色着色,所以可以进行很漂亮的渲染。这次的文章中只需要明白是进行了光照相关的基础部分的封装,WebGL中的
2014-10-13 00:22:09 8733
翻译 [WebGL入门]二十四,补色着色
这一次分别说了高氏着色和补色着色两种着色,高氏着色的优点是计算量比较低,而和补色着色相比的话,渲染效果不太自然。补色着色正好相反,计算量很高,但是渲染效果非常完美。到底选择那种方法,取决于模型的顶点数和需要的渲染效果,以及执行环境能够承受的计算负荷。实际应用中,根据利用的场景和描画的模型,分别使用不同的方法是非常重要的。这次也准备了demo,急着看运行效果的人可以点击文章最后的链接来测试。另外,补充一点,这次的demo中对圆环体的生成函数做了几处修改,返回值是以对象的形势返回的,可以指定圆环体的颜
2014-10-11 21:55:59 6899
翻译 [WebGL入门]二十三,反射光的光照效果
与目前为止所涉及到的算法相比,今天的算法也不算难,就是,计算从光源发出的光向量和视线向量之间的半向量,然后与面法线向量求内积,所以相对的负荷也不大。但是,这只是在一定程度上模拟了反射光的效果,并不是非常严格的反射光的计算。从渲染的结果来看,圆环体已经变的非常漂亮了,实际的效果,请参考文章最后给出的链接。
2014-10-06 21:47:31 10071 9
《HTML5 Canvas 游戏开发实战》前三章试读
2013-04-22
slg游戏之多人对战版
2010-12-08
用AS3.0开发的flash版曹操传
2010-08-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人