javascript - WebGL:重用 Canvas 时重用资源

Question

我正在编写一个小工具，允许开发人员使用 WebGL 在 Canvas 上渲染某些 3D 内容。

它将通过指定 View 和相机来使用，就像这个简化的示例:

displayView( '#myCanvas1', [0, 5, 2] );

可能会被调用多次以在多个 Canvas 中显示:

displayView( '#myFrontCanvas', [0, 5, 2] );
displayView( '#mySideCanvas', [5, 0, 2] );

或者可能在同一 Canvas 上多次调用以更改 View :

displayView( '#myCanvas', [0, 5, 2] );
// later
displayView( '#myCanvas', [5, 0, 2] );
// later
displayView( '.thisCanvasIsActuallyTheSameOneAgain', [5, 0, 0] );

每次在新 Canvas 上调用它时，都需要设置缓冲区、着色器等。但是在以前使用过的 Canvas 上调用时，它应该重新使用旧的缓冲区和着色器。我认为不可能在上下文之间共享资源，因此我需要自己复制并跟踪它们。

我的想法是每次在 Canvas 上调用时将所有缓冲区、着色器等存储在一个数组中，然后在以后的调用中搜索该数组。我无法将 Canvas 对象存储在数组中，因为它会扰乱垃圾收集，所以我的 XY 问题是:我可以检查特定着色器、程序或缓冲区是否属于特定上下文吗？另外，我的信念是否正确，即当 Canvas 被删除时，着色器和缓冲区将被删除即使它们仍然在数组中被引用？

正如标题所示，我也愿意接受针对整个问题的更好解决方案。

Answer 1

与大多数其他 JavaScript 对象一样，您可以向上下文对象本身添加一个属性，该属性将随着上下文的存在而保留。只要您不碰巧与其他人使用相同的名称，就可以正常工作，因此请使用一个漂亮的唯一名称。

类似于:

function initializeStorage(context) {
    return { ... };
}

function getStorage(context) {
    if (!('_DavesLibraryPrivateStorage' in context)) {
        context._DavesLibraryPrivateStorage = initializeStorage(context);
    }
    return context._DavesLibraryPrivateStorage;
}

context.useProgram(getStorage(context).program);

JavaScript 的 future 版本可能会使用 WeakMap(现在在 Firefox 和 Chrome 中的标志后面可用!)或私有(private)符号以干净的方式实现这一点。 >，所以只需将其视为临时拼凑。