2017年08月_丿寒风

12月 09月 08月 07月 06月 04月 03月 01月

原创 WebGL之旅（二十）帧缓冲区对象FBO

一概念前面都是将图片作为绘制图形时的纹理映射，这一节来看看如何将渲染结果作为纹理，即动态生成纹理，贴在另一个物体上。默认情况下，都是在屏幕提供帧缓冲区中绘制，如果要动态生成纹理，就需要另外新建一个缓冲区对象，来代替默认的缓冲区，在其中进行离屏绘制。帧缓冲区对象包括：颜色关联对象（可以是纹理对象或渲染缓冲区对象）深度关联对象（渲染缓冲区对象）模板关联对象要将动态生成的纹理作为贴图，只需要在帧

2017-08-05 23:42:44 3736 1

原创 WebGL之旅（十九）雾化

一原理雾化，即使用雾的颜色与场景中物体的颜色进行叠加。线性雾化，会指定一个起点和终点，起点为开始雾化点，终点为完全雾化的点：在起点之前的完全清晰，也就是说完全为场景中的物体颜色；在起点和终点之间的点，根据距离计算雾的因子；在终点之后就完成为雾的颜色。物体颜色和雾的颜色叠加公私如下：片元颜色 = 物体颜色 * 雾化因子 + 雾的颜色 * （1 - 雾化因子）雾化因子 = (终点 - 当

2017-08-03 00:17:45 1228

原创 WebGL之旅（十八）点选立方体

原理这里用了一个比较巧妙(山寨)的方法判断是否点击到了立方体：获取鼠标点击的位置；将立方体绘制成红色（也可以是其他颜色）；判断鼠标点击位置的颜色恢复立方体的颜色示例由以上原理，当鼠标点击位置的颜色跟立方体重绘之后的颜色一致为红色时，则点击的位置就在立方体上。(如果背景色也为红色，就尴尬了)。function main() { var gl = getGL(); var vs

2017-08-02 02:20:07 1187 2

原创 WebGL之旅（十七）带纹理的立方体

带纹理的立方体在前面一片博客中，有绘制一个平面的带纹理的图形，现在绘制一个立，并分别制定纹理。/** * 绘制带纹理的立方体 * xu.lidong@qq.com * */function main() { var gl = getGL(); var vsFile = &quot;./res/shader/mouserotate.vert.glsl&quot;; var fsFile =

2017-08-01 01:46:19 2364 1