Web 技术研究所

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

SimpleWebGL的插件模式

  SimpleWebGL.2.0中提供插件功能,只要对SimpleWebGL上的namespace静态对象添加属性就可以在实例中的namespace方法的回调函数参数中引用到,也可以在namespace中使用eval执行实例的EXTRACT属性中的字符串,来将插件中定义的东西在局部声明。
  演示:SimpleWebGL的插件演示

  如果不算着色器代码和插件本身的代码,这个程序是很简单的。 new SimpleWebGL(canvas).namespace(function(){
  eval(this.EXTRACT);
  //创建一个球体对象
  var ball=new Sphere("/images/surface-no-text.gif");
  //初始化程序
  var program=new Program(
    new VertexShader(vSource),new FragmentShader(fSource)
  ).link().use().data({
    pMatrix:[3,0,0,0 ,0,3,0,0, 0,0,-0.9999,-1, 0,0,-0.0001,0]
  });
  //配置参数
  this.setting("DEPTH_TEST","LESS").color(0,0,0,1)
  .play(function(time){
    var s=Math.sin(time/50),c=Math.cos(time/50);
    //配置绘制参数并绘制
    this.clear("COLOR");
    program.data({mMatrix:[
      c*c+s*s*s,c*s*s-c*s,c*s,0, c*s,c*c,-s,0,
      c*s*s-c*s,s*s+c*c*s,c*c,0, 0,0,-4,1
    ]}).data(ball).draw(ball.bind());
  });
});
  这样就OK了,但关键是Sphere这个对象的创建。我的代码中有引入另一个JS文件,在里面把Sphere这个对象扩展到了SimpleWebGL上。这倒不是难点,只需要把Sphere构造器放入SimpleWebGL.namespace就行。但是由于SimpleWebGL本身使用的是namespace模式,所以插件的中如果要使用SimpleWebGL命名空间中的对象就有点麻烦了。比如这个例子中Sphere对象的构造器中显然有用创建贴图对象和缓冲区对象的代码。插件是针对SimpleWebGL对象构造器本身的,但是命名空间中的对象则是针对SimpleWebGL对象实例,在载入Sphere插件时并不存在命名空间,所以目前插件代码中如果需要引用命名空间需要自己从调用堆栈中计算当前插件运行时候所在的命名空间。所以在SimpleWebGL.Sphere.js中可以找到这行代码,它就是遍历调用堆栈,找到当前运行所在的命名空间。然后保存在o对象中,使用命名空间对象时直接从o开始访问,比如o.ArrayBuffer、o.Texture2D
for(o=arguments.callee.caller;!o.Program;o=o.caller);   最后,这个SimpleWebGL.Sphere.js只作为演示用,没有任何实用价值。
  请不要吐槽它= =。。   
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^