使用 Fetch API 加载图像以与 WebGL 一起使用

Question

我想加载纹理而不需要像

.onload()

这样的回调。我正在尝试使用斑点中的纹理：https://plnkr.co/edit/n4CbWMEOAyJMQFYy

    const response = await fetch("./assets/texture.png");
    const imageBlob = await response.blob();
    const imageBitmap = await createImageBitmap(imageBlob);
    console.log(imageBitmap);

    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, imageBitmap);

预期结果是：

但是我有这个：

我可以在

Network

选项卡中看到图片已上传：

这行代码

console.log(imageBitmap);

表示图像存在：

texImage2D()

documentation 说我可以使用 ImageBitmap 作为源。

已更新

我尝试使用此答案中的

loadImage

函数：https://stackoverflow.com/a/52060802/4159530游乐场：https://plnkr.co/edit/n4CbWMEOAyJMQFYy

function loadImage(url) {
    return new Promise(resolve => {
        const image = new Image();
        image.addEventListener('load', () => {
            resolve(image);
        });
        image.src = url;
    });
}

/* ... */

async function init() {
/* ... */

    const image = await loadImage("./assets/texture.png");
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

/* ... */
}

但这并没有解决问题。

Answer 1

这个答案帮助我解决了问题：https://stackoverflow.com/a/52060802/4159530

游乐场：https://plnkr.co/edit/n4CbWMEOAyJMQFYy

function loadImage(url) {
    return new Promise(resolve => {
        const image = new Image();
        image.addEventListener("load", () => {
            resolve(image);
        });
        image.src = url;
    });
}

/* ... */

async function init() {
/* ... */

    const image = await loadImage("./assets/texture.png");
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
    draw();

/* ... */
}

如您所见，我在

draw()

函数之后调用

gl.texImage2D()

函数。我不明白为什么跳过这个

draw()

功能：

function main() {
    if (!init()) return;
    draw();
}

添加于 2023 年 7 月 27 日。我使用此代码使用 Fetch API（异步/等待）加载纹理和着色器：https://plnkr.co/edit/KaDgu8R6NJxnDEbO?preview

加载纹理.js

import { gl } from "./webgl-context.js";

export default function loadTexture(url, minType = gl.NEAREST, magType = gl.NEAREST) {
    return new Promise(resolve => {
        const image = new Image();
        image.onload = () => {
            const texture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minType);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, magType);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
            resolve(texture);
        };
        image.src = url;
    });
}

index.js

async function init() {
    const texture = await loadTexture("./assets/textures/texture.png",
        gl.LINEAR, gl.LINEAR);
    gl.bindTexture(gl.TEXTURE_2D, texture);
}

init();

Answer 2

[在此处输入图像描述][1]在 gl.texImage2D() 方法中加载 Imagebitmap 仅适用于 webgl2。 var gl = someCanvas.getContext("webgl2");

它对我有用。 [1]：