如何从已创建的WebGL上下文中获取WebGLProrgram对象?

时间:2016-01-09 13:46:35

标签: javascript webgl

我想知道,如何从任何所需的WebGL上下文中获取任何WebGL程序实例(WebGLProgram)?

获取WebGL上下文不是问题。如果您知道确切的画布ID,则使用document.getElementsByTagName()document.getElementById()搜索canvas元素的当前页面的DOM:

let canvas = document.getElementById( "canvasId" );
let context = canvas.getContext( "webgl" );

这里我们按照我的想法获取当前上下文,但如果我想获取一些着色器参数或从已经运行的顶点/片段着色器获取某些值 - 我需要一个WebGL程序,它与当前的WebGL渲染相关联上下文。

但我无法在context.getAttachedProgram()context.getActiveProgram()等WebGL API中找到任何方法。

那么获取用于渲染过程的活动WebGL程序的方式是什么? 也许,有一些特殊的WebGL参数?

2 个答案:

答案 0 :(得分:5)

无法从WebGL上下文获取所有程序或任何其他资源。如果上下文已经存在,那么您可以做的最好的事情是查看当前资源,例如gl.getParameter(gl.CURRENT_PROGRAM)等。

您可以做的是包装WebGL上下文

var allPrograms = [];

someContext.createProgram = (function(oldFunc) {
   return function() {
     // call the real createProgram
     var prg = oldFunc.apply(this, arguments);

     // if a program was created save it
     if (prg) {
       allPrograms.push(prg);
     }

     return prg;
   };
}(someContext.createProgram));

当然,您还需要包装gl.deleteProgram以从所有程序的数组中删除内容。

someContext.deleteProgram = (function(oldFunc) {
   return function(prg) {
     // call the real deleteProgram
     oldFunc.apply(this, arguments);

     // remove the program from allPrograms
     var ndx = allPrograms.indexOf(prg);
     if (ndx >= 0) {
        allPrograms.splice(ndx, 1);
     }
   };
}(someContext.deleteProgram));

这些是WebGL InspectorWebGL Shader Editor Extension等内容所使用的技术。

如果要包装所有上下文,可以使用类似的技术来包装getContext

HTMLCanvasElement.prototype.getContext = (function(oldFunc) {
   return function(type) {
      var ctx = oldFunc.apply(this, arguments);
      if (ctx && (type === "webgl" || type === "experimental-webgl")) {
        ctx = wrapTheContext(ctx);
      }
      return ctx;
   };
}(HTMLCanvasElement.prototype.getContext));

答案 1 :(得分:1)

gl.getParameter(gl.CURRENT_PROGRAM)。查看右侧的https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf第2页。