Web 技术研究所

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

WebGL小封装 SimpleWebGL

  由于OpenGL本身并不是面向对象的,所以移植到Web上的WebGL也不是面向对象的。这就让WebGL在JavaScript这样的面向对象语言中变得格格不入了。这个封装并没有改变WebGL本身的逻辑结构,只是把一些常用的操作给对象化了而已,所以使用它需要WebGL基础。
  创建着色器程序:
  这个封装实际上是基于program的,也就是说一个SimpleWebGL对象就是一个program。当然,自己编写着色器程序是必须的。它只是封装了这些操作而已。下面是创建着色器程序的代码。 var g=new SimpleWebGL(canvas);
g.vertexShader=new g.VertexShader;
g.vertexShader.source=vSource.textContent;
g.fragmentShader=new g.FragmentShader(fSource.textContent);
g.ready();
  从canvas对象上创建一个SimpleWebGL对象,然后直接把着色器的源码赋予相应的属性即可。这样就省去了原来的一大堆麻烦操作。最后调用ready来使用这个程序。这段代码中为了演示,我把主顶点着色器的代码分成两部了,这两种写法都是可行的。
  设置顶点数据:
  对于顶点数据,现在不需要原来的一大堆操作了。只要访问attribute属性就可以直接操作着色器中的attribute变量了。不过后面的Buffer依然需要自己来创建。虽然有点儿麻烦,不过这样会比较好。如果交给程序自己管理需要非常大的开销才能防止它可能造成的显存泄露问题。只有程序员自己来管理才最保险。 g.attribute.position=new g.ArrayBuffer(position);
g.attribute.coords=new g.ArrayBuffer(coords);
g.attribute.normal=new g.ArrayBuffer(normal);
  设置全局属性:
  和顶点属性一样,可以通过uniform属性来直接访问着色器中的uniform变量。uniform变量是在内存中的,JavaScript自己会管理这些内存。所以不需要考虑释放的问题,直接根据在着色器中定义的类型来使用数据即可。 g.uniform.vMatrix=[1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
g.uniform.pMatrix=[1,0,0,0, 0,1,0,0, 0,0,-1,-1, 0,0,-2,0];
g.uniform.direction=[-1,-1,-1];
g.uniform.texture=1;
  贴图数据:
  原来的贴图数据是需要先调用activeTexture来设置贴图存放的序号。现在可以直接访问texture属性的某个元素来操作某个序号上的贴图数据。贴图数据本身也需要创建对象,它和buffer一样需要自己管理显存。这里把很多平时很少用到的参数都封装起来了,所以参数很简单。只要传递图片对象就行,当然这个操作要在图片onload之后。如果需要使用内存中的数据作为图片数据,可以传入数据和尺寸几个参数来实现。这里暂时不演示了,下回整理个完整的文档出来。另外,贴图对象还可以直接操作一些配置属性,比如minFilter等,这样就很方便了吧?
g.texture[1]=new g.Texture(img);
g.texture[1].minFilter=g.LINEAR;
  其它属性:
  其他属性目前只封装了最常用的depthTest和blend,使用时直接给相应的属性赋值,不使用时候赋上null即可。其实这个就是把enable和xxxFunc封装在了一起而已。blendFunc本身有两个参数,所以给它赋值时需要使用数组。这些东西本身就是“属性”我不希望他们以方法的方式实现。
g.depthTest=g.LESS;   绘制:
  绘制操作使用了和原来一样的函数名,drawArrays和drawElements,不过简化了参数列表。drawArrays的参数只需要一个绘制的顶点数量。drawElements的参数只需要一个g.ElementArrayBuffer对象即可。默认使用TRIANGLES图元,也可以在第一个参数中指定图元,把原来的参数向后移动。
g.drawArrays(count);
  目前就做了这些简单的封装而已,还有很多东西没完善。比如帧缓冲什么的,下个版本再添加吧。而且现在只是测试阶段,我就不写文档了,源代码也不长,有兴趣的话可以直接看。最后是完整的例子

  SimpleWebGL.1.0.html
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^