Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

WebGL(拾贰) 总结一些零碎的知识

  前面的一大堆文章都是在说关键的基本概念,对于一些零碎的东西我就没怎么提。现在基本概念说的差不多了,就回头来看看这些零碎的东西吧。这篇文章的内容比较零散,我一时也想不起所有东西。先介绍一些做基本的,其他东西以后想到了再补充吧。
  1. 着色器的调试
  着色器代码如何调试呢?所有的例子中都有用到编译着色器和链接着色器程序这个两个操作。这些操作会因为着色器代码的错误而抛出异常。获取具体的异常信息可以调用“get*InforLog”,比如单个着色器就使用“getShaderInfoLog”。要获取整个着色器程序链接时抛出的异常就使用“getProgramInfoLog”。要获取什么对象的异常,就传入什么对象的句柄作为参数,返回值都是字符串。
  2. 开启混合通道
  之前的例子全都是使用不透明的物体,因为之前没有特意去说透明通道的处理问题。也许你修改了例子使用了透明通道却发现渲染不出透明的效果,这就是因为没开启透明通道的计算。之前已经说过了开启深度计算了吧?也就是“enable(DEPTH_TEST)”,貌似每个例子中都有这句。有了它才有片段的渲染先后顺序。但是如果使用透明通道就不用再做深度测试了,因为所有的深度颜色都需要做一次混合计算,开启深度测试反而会让源片段和目标片段混乱。在第五篇的例子“WebGL最简单的贴图”中,使用的图片是有透明通道的,只是没开启透明通道而已。可以需改其中的代码做测试,比如下面这样修改 //webgl.enable(webgl.DEPTH_TEST); 改成
webgl.enable(webgl.BLEND);
webgl.blendFunc(webgl.SRC_ALPHA,webgl.ONE);
  这个代码中先用“enable(BLEND)”开启了深度混合计算。然后再调用“blendFunc”指定具体的计算方法。这个函数的两个参数其实完全可以从字面上理解的。他们都是常量,具体可以参考glBlendFunc。计算方法是“混合后的颜色=源对象颜色*第一个参数+目标对象颜色*第二个参数”。另外,如果需要关闭混合模式或深度测试可以调用“disable”方法,参数和“enable”一样。
  3. 设置像素存储模式
  在第六篇中有提到“pixelStorei”方法,我们用它解决了贴图坐标相反的问题。这个方法还有很多参数可以用,具体可以参考glPixelStore。不过这里说的是OpenGL,在WebGL中并没有“pixelStoref”这个方法。
  4. 清除画布
  也就是上一篇文章中的clear方法,之前的例子都不需要用到它,因为根据消息机制会自动清除。但是使用了帧缓冲之后就不会自动清除了,需要调用这个函数来清除。而且它还有一些参数,具体可以参考glClear。这些参数是可以同时使用的,用“|”运算符来运算。
  暂时就这些吧,这篇文章应该还会继续更新添加一些其它零碎的东西。
网名:
34.203.245.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^