javascript - WebGL : Callback hell in the resource loader

Question

请帮我处理我产生的这些垃圾:

Program.prototype.init = function()
{
loadText('../res/shaders/blinnPhong-shader.vsh', function (vshErr, vshText) {
    if (vshErr) {
        alert('Fatal error loading vertex shader.');
        console.error(vshErr);
    } else {
        loadText('../res/shaders/blinnPhong-shader.fsh', function (fshErr, fshText) {
            if (fshErr) {
                alert('Fatal error loading fragment shader.');
                console.error(fshErr);
            } else {
                loadJSON('../res/models/dragon.json', function (modelErr, modelObj) {
                    if (modelErr) {
                        alert('Fatal error loading model.');
                        console.error(modelErr);
                    } else {
                        loadImage('../res/textures/susanTexture.png', function (imgErr, img) {
                            if (imgErr) {
                                alert('Fatal error loading texture.');
                                console(imgErr);
                            } else {
                                this.run = true;
                                RunProgram(vshText, fshText, img, modelObj);
                            }
                        });
                    }
                });
            }
        });
    }
});
};

我的实际目标是抽象 WebGL 程序的资源加载过程。 这意味着将来将会有网格、纹理、着色器的数组，我希望能够连接资源之间的某些依赖关系。例如:我想创建两个游戏对象一和二。第一个使用着色器并从网格加载，但没有纹理，而第二个使用与第一个相同的着色器，但使用自己的网格并且还需要纹理。我可以使用什么原则来实现在 JavaScript 中构建这些依赖项(通过异步加载等)？

编辑: 因此，这段代码发生了以下情况:我现在保留了回调。然而这个方法是 Singleton 对象的一部分。我编辑了代码，因为在最后一种情况下，我将程序标志设置为 true。我在 main.c 中保留了程序对象的全局引用。然而，由于回调，引用在某种程度上丢失了，全局引用将其标志保持为 false，因此永远不会到达主循环。这显然是回调的问题，因为当我在嵌套回调之外调用“this.run = true”时设置了该标志。对此有何建议？

Answer 1

使用现代 API，例如 Promises , Fetch和糖像arrow functions ，你的代码可以变成:

Program.prototype.init = function () {
    return Promise.all(
        fetch('../res/shaders/blinnPhong-shader.vsh').then(r=>r.text()),
        fetch('../res/shaders/blinnPhong-shader.fsh').then(r=>r.text()),
        fetch('../res/models/dragon.json').then(r=>r.json()),
        new Promise(function (resolve,reject) {
            var i = new Image();
            i.onload = () => resolve(i);
            i.onerror = () => reject('Error loading image '+i.src);
            i.src = '../res/textures/susanTexture.png';
        })
    )
    .then(RunProgram);
}

您可以通过使用相关的 ES2017 功能(例如 async functions)来进一步增加趣味性。/await或者通过放弃箭头函数并使用无缝填充来实现 Promise 和 fetch 来全力以赴地实现兼容性。对于一些简单的请求缓存，包装 fetch:

const fetchCache = Object.create(null);
function fetchCached (url) {
    if (fetchCache[url])
        return Promise.resolve(fetchCache[url]);
    return fetch.apply(null,arguments).then(r=>fetchCache[url]=r);
}

请注意，您希望您的资源是唯一的，因此上述缓存仍然需要在其之上另一层实际的 GPU 资源缓存，您不希望使用相同的着色器代码或数组缓冲区创建多个着色器程序它们具有相同的顶点数据。

关于如何管理依赖项的实际核心问题有点太宽泛/特定于应用程序，无法在此处回答。关于在这种环境中管理异步性质，我看到两个选择:

1. 使用占位符资源，并在加载实际资源后无缝替​​换它们
2. 等待所有内容加载完毕，然后再将GameObject插入渲染管道

两种方法都有其优点和缺点，但通常我会推荐第一种选择。