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

【问题标题】：Using a loaded image in a webgl texture在 webgl 纹理中使用加载的图像
【发布时间】：2015-05-04 20:56:58
【问题描述】：

我想上传一个纹理到 webgl，大多数教程都是这样的：

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

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

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

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

【问题讨论】：

只是不要将纹理加载代码放在回调中？

标签： javascript webgl

【解决方案1】：

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

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

如果您尝试绑定未完全加载的纹理，您的表面将使用完整的白色纹理（或在某些情况下为黑色）。所以你应该自己看看区别。

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

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

【讨论】：