WebGL之小明家

小明 2011-12-30 8,197 views

WebGL这东西自诞生应该也有段时间了，可是一直没见到有什么起色，虽然作为阉割版的OpenGL ES标准也出了2代了吧，没见到具体应用。最近闲来无聊，于是花了三天弄了个Demo放到首页上了。

话说对于OpenGL这东西，素来与我无缘。游戏出身的程序员，我独爱DX，尤其不堪回首大学一幕，做的一款科技创新项目被评审老师用一句话骂了无数遍“看你做的东西，怎么不用OpenGL，显示效果肯定比现在强，DX是什么东西，那玩意只能用来做游戏”。不过会骑自行车就会骑摩托车吧，gl跟dx没什么区别，就像剑冢里玄铁剑与树枝其实作为武器没什么区别。不扯了。

首先，这个Demo是个后处理特效，只不过我做的比较丑，没有光照。场景第一遍渲染出深度，存在Frame Buffer Object中，之后渲染一个全屏矩形，通过读取上一帧的FBO的深度，重新计算纹理坐标，在一张12*8的ascii纹理中采样不同的字母，根据FBO中存储的场景深度不同采样出不同的字母。这个特效原本用3D纹理或叫体积纹理做比较简单，因为场景深度直接作为3d纹理的深度采样，但是无奈WebGL不支持任何格式的压缩贴图，包括dds，但是有一种特殊的格式ktx是支持的，但是我自己做不出来ktx的图片，因为没编辑器，所以干脆多加了几行指令，采样2d纹理实现之。

这个demo需要改进的地方不少，首先fbo存场景深度不太合适，因为场景不大，模型的z值变化不大，所以看到模型旋转时字母变化不明显，其实存亮度值比较好，顺带在后处理中与颜色值相乘，既能表现场景颜色，又能很好地控制字母变化，可以做出类似黑客帝国的效果来。另外有个疑问是难道类似js这类脚本语言的解析速度跟变量名长度有关？看过几个别人写的Demo，通篇充斥着变量”a”,”f”,”n”,”v”,”m”看的真是不知所云，于是乎我在写的时候把变量名都写全了，自己读着方便别人读着也不闹心。

话说WebGL的标准还有很大的进步空间，我就这么个简单的Demo把系统资源都吃光了，如果拿他做webgame，i7+顶级显卡记得准备好。

第一遍渲染场景深度到FBO

第二遍根据场景深度采样这张字母纹理

PS：感谢巫妖王帮我把WEBGL嵌入到WP中

 

本站遵循:署名-非商业性使用-相同方式共享
本文标题：WebGL之小明家
订阅地址：小明家
转载请注明：http://xiaomingjia.com/?p=91

人人网  sina  开心  豆瓣  QQ空间  Follow5  tianya.cn

闲谈

    已经搭了8 块砖头了！

    1. 回复
      lich_wanglich_wang
      2011 年 12 月 30 日 下午 5:47

      我这看到的图片很奇怪，貌似渲染有问题，火狐和chrome都一样，效果看下面 http://thinkdeep.me/wp-content/uploads/2011/12/未命名.jpg

    2. 回复
      lich_wanglich_wang
      2011 年 12 月 30 日 下午 5:52

      效果在这 http://thinkdeep.me/getfile/8/

      • 回复
        小明小明
        2012 年 01 月 04 日 上午 10:18

        这个效果是对的，只是我做的不好看，没有光照，字母表的图片也不合适，等有时间再改改

    3. 回复
      凌晨凌晨
      2012 年 01 月 05 日 下午 1:02

      就那所大学还是算了吧，没几个人懂真技术。

    4. 回复
      龙龙九龙龙九
      2012 年 03 月 09 日 上午 8:23

      UI不会都是你老婆的要求吧，全是悠嘻猴……

      • 回复
        小明小明
        2012 年 03 月 09 日 上午 11:51

        是我自己找的。。。

        • 回复
          龙龙九龙龙九
          2012 年 03 月 09 日 下午 5:30

          你一大老爷们弄毛的悠嘻猴

          • 回复
            小明小明
            2012 年 03 月 09 日 下午 11:25

            不是还有一位老娘们么


    欢迎拍砖！