javascript - 在 webgl 纹理中使用加载的图像

Question

我想将纹理上传到 webgl，大多数教程都是这样做的:

var textureImage = new Image();
textureImage.src = "img/texture.png";
textureImage.onload = function() { ...texture loading code... };

因此，直到图像加载之后，纹理才会真正上传到 webgl。

但是，我在 DOM 上有一个图像，我想将其用作纹理，并且该图像肯定会被加载，因为我的 JavaScript 在页面的所有内容完全加载之前不会运行。

如何在 DOM 上获取该图像并立即将其上传到 webgl？而不是等待回调。

Answer 1

并不是因为您的页面已完全加载，您的图像也已加载。它们在您的页面上不是必需的。

即使是这种情况，您也可以毫无问题地使用 onload 回调:如果图像已经加载，它将在您开始加载图像时立即调用。

如果您尝试绑定(bind)未完全加载的纹理，您的表面将使用完整的白色纹理(或在某些情况下为黑色)。所以您应该亲自看到差异。

顺便说一句:为了防止在回调设置之前加载，最好在源之前设置回调函数:

var textureImage = new Image();
textureImage.onload = function() { ...texture loading code... }; // First the callback...
textureImage.src = "img/texture.png"; // Then the source.