在 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 回调：如果图像已经加载，它会在您开始加载图像时立即调用。

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

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

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

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

Using a loaded image in a webgl texture

javascript

webgl