Question

我正在为浏览器开发WebGL游戏。在进行WebGL编程时，能够将gl用作全局是非常有用的（因为你必须在其上调用函数TON）。但是，我想在多个画布中同时运行这个游戏，这意味着我需要多个gl上下文：每个画布一个上下文。

对我来说，如果我因为使用requirejs而将gl作为依赖关系放在顶部，这对我来说已经足够了：

define(['gl'], function(gl) {
  return function() {
    gl.drawArrays(...);
  };
});

但是，我需要这个来返回第i个游戏的第i个上下文。他们不能共享上下文，每个画布必须有自己的。 因此每个画布必须有一个单独的 requirejs模块，gl。这可能吗？

作为参考，gl.js看起来像：

define(function() {
  var canvas = document.getElementById('canvas');
  var gl = canvas.getContext("experimental-webgl");
  gl.viewportWidth = canvas.width;
  gl.viewportHeight = canvas.height;
  return gl;
});

Answer 1

我猜你错了。

RequiereJs无法解决您的问题。它的唯一目标是在以前没有运行所需的脚本时阻止脚本运行。

要解决你的pb，你必须熟悉Javascript中面向对象的编程。

您需要定义一个对象类GL，然后实例化x次：

gl.js ：

中的

var GL = (function(){      
    // the constructor
    function GLClass(container, some, other, arguments){
        this.$container = document.getElementById(container);
        this.some = some; //...
        // ... other init instructions ...
    };

    // the different methods of this object ...
    GLClass.prototype.myFunc = function(str){
        // inside a method, this refers to the instance of the object.
        this.some = str;
    };
    GLClass.prototype.display = function(){
        this.$container.innerHTML = this.some;
    };

    // finally return the Constructor
    return GLClass;

})(); // don't forget the last parenthesis to execute immediately the previous code (aka declare and return the constructor in the GL var)

return GL; // needed to get the class name for requirejs.

在其他档案：

define(['gl'], function(GL) {
  // Then you can instance two separate objects :

  var myGl1 = new GL('gl1','some','other','arguments');
  var myGl2 = new GL('gl2','some','other','arguments');

  myGl1.myFunc('test1');
  myGl2.myFunc('test2');

  myGl1.display();
  myGl2.display();

});

我做了jsFiddle给你一个非常简单的例子。

如你所见：

我只保留一个gl.js.
我创建了两个具有各自属性的独立对象。

这是一篇非常好的帖子来熟悉这个：Introduction to Object-Oriented JavaScript

一个requirejs模块的两个独立实例，gl

1 个答案: