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

Javascript 如何从已创建的WebGL上下文中获取WebGLProgram对象?,javascript,webgl,Javascript,Webgl,我想知道,如何从任何所需的WebGL上下文中获取任何WebGL程序实例(WebGLProgram) 获取WebGL上下文不是问题。您正在使用document.getElementsByTagName()或document.getElementById()在当前页面的DOM中搜索画布元素,如果您知道确切的画布id: let canvas = document.getElementById( "canvasId" ); let context = canvas.getContext( "webgl"

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

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

let canvas = document.getElementById( "canvasId" );
let context = canvas.getContext( "webgl" );
在这里,我们按照我的假设获取当前上下文,但是如果我想获取一些着色器参数或从已经运行的顶点/片段着色器获取某些值,我需要一个WebGL程序,它与当前WebGL渲染上下文关联

但是我在WebGL API中找不到像
context.getAttachedProgram()
context.getActiveProgram()
这样的方法

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

gl.getParameter(gl.CURRENT\u程序)。查看右边的第2页。

gl.getParameter(gl.CURRENT\u程序)。查看右边的第2页。

无法从WebGL上下文获取所有程序或任何其他资源。如果上下文已经存在,那么最好使用
gl.getParameter(gl.current\u程序)
等查看当前资源

您可以改为包装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));
这些是诸如和所使用的技术

如果要包装所有上下文,可以使用类似的技术包装
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));

无法从WebGL上下文获取所有程序或任何其他资源。如果上下文已经存在,那么最好使用
gl.getParameter(gl.current\u程序)
等查看当前资源

您可以改为包装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));
这些是诸如和所使用的技术

如果要包装所有上下文,可以使用类似的技术包装
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));

伙计,太棒了!很好的回答!五颗星!谢谢你的帮助。我的目标是实现调试任何WebGL程序的可能性(从three.js、babylon.js或其他框架)。另外,顺便说一下,您已经介绍了WebGL inspector。这个插件(不知道为什么)不能打印关于我的上下文的调试信息,甚至不知道为什么。伙计,太好了!很好的回答!五颗星!谢谢你的帮助。我的目标是实现调试任何WebGL程序的可能性(从three.js、babylon.js或其他框架)。另外,顺便说一下,您已经介绍了WebGL inspector。这个插件(不知道为什么)不能打印关于我的上下文的调试信息,甚至不知道为什么。