WebGL 图像加载延迟问题：如何确保纹理在初始化时立即显示-js教程-PHP中文网

WebGL 图像加载延迟问题：如何确保纹理在初始化时立即显示

本文详解如何通过 promise 与 async/await 改造 webgl 纹理加载流程，解决图像首次渲染为蓝色占位色、需手动交互才刷新的问题，实现文件导入后四张纹理平面即时正确渲染。

本文详解如何通过 promise 与 async/await 改造 webgl 纹理加载流程，解决图像首次渲染为蓝色占位色、需手动交互才刷新的问题，实现文件导入后四张纹理平面即时正确渲染。

在 WebGL 开发中，纹理（Texture）的异步加载是一个常见却易被忽视的陷阱。原始代码中 loadTexture() 函数虽注册了 'load' 事件监听器，但立即返回未就绪的 texture 对象——此时 WebGL 仅绑定了一个 1×1 蓝色占位图（[0,0,255,255]），而真实图像仍在后台加载。当 draw() 函数执行时，若图像尚未完成加载，GPU 就会采样到未更新的蓝色纹理，导致所有平面初始显示为蓝色；只有后续触发重绘（如视角移动）时，图像才可能已加载完毕并生效。

根本原因在于：WebGL 纹理加载是异步的，但渲染逻辑是同步执行的。必须让渲染逻辑等待纹理真正就绪后再启动。

万镜一刻

一款AI视频创作工具，主要用于阿里云全新AI视频创作工具，万镜生辉，一刻成片，适合需要提升相关任务效率的用户。

下载

✅ 正确解法：Promise 驱动的异步纹理加载

核心改造分为三步：

封装图像加载为 Promise
loadImage(url) 返回一个 Promise，在 Image.onload 触发时 resolve 图像实例：

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

改造 loadTexture() 为 async 函数
使用 await loadImage(url) 确保图像加载完成后再调用 gl.texImage2D，并返回最终配置好的 texture：

async function loadTexture(gl, url) {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // 初始化为蓝色占位图（可选，提升 UX）
  gl.texImage2D(
    gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
    new Uint8Array([0, 0, 255, 255])
  );

  const image = await loadImage(url); // ✅ 关键：等待图像加载完成

  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(
    gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image
  );

  // 根据尺寸设置 mipmap 或 wrap 参数
  if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
    gl.generateMipmap(gl.TEXTURE_2D);
  } else {
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  }

  return texture; // ✅ 返回已就绪的 texture
}

升级 createLabel() 为 async 函数，并 await 纹理加载
每个方向（N/S/E/W）的纹理都需 await，确保 createLabel() 返回的对象中 texture 字段指向已加载完成的纹理：

export async function createLabel(gl, desc) {
  let coords = buildQuadricTriangleStrip(0.5);
  let texture = null;

  if (desc === DESC.N) {
    coords = translateQuad(coords, 0.5, -0.25, 0);
    texture = await loadTexture(gl, "/images/n.png"); // ✅ 等待完成
  }
  // ... 其他方向同理（S/E/W）

  // 构建 buffer、shader、programInfo（保持不变）
  // ...

  return {
    position: positionBuffer,
    textureCoord: textureCoordBuffer,
    indices: indexBuffer,
    positionSize: coords.length,
    texture, // ✅ 此时已是有效纹理
    programInfo
  };
}

在初始化入口处统一 await 所有纹理
在 init() 中，使用 await 并行加载全部四张纹理，再构建场景对象：

init = async (props) => {
  const gl = canvas.getContext("webgl");
  // ... 初始化 gl ...

  if (props) {
    const p = plane.createPlane(gl, props, props.colors);

    // ✅ 并行加载四张纹理，全部就绪后才继续
    const [n, s, e, w] = await Promise.all([
      tex.createLabel(gl, tex.DESC.N),
      tex.createLabel(gl, tex.DESC.S),
      tex.createLabel(gl, tex.DESC.E),
      tex.createLabel(gl, tex.DESC.W)
    ]);

    const m = marker.createMarker(gl, props);
    this.setState({ gl, objects3d: { plane: p, n, s, e, w, m } });

    // ✅ 此时所有 texture 均已就绪，首次 drawScene 即可正确渲染
    this.drawScene(gl, { plane: p, n, s, e, w, m });
  }
};

⚠️ 注意事项与最佳实践

避免阻塞主线程：await 不会冻结 UI，但应确保 drawScene() 在所有纹理加载完成后调用，而非在 createLabel() 内部调用。
错误处理增强（推荐）：为 loadImage 添加 error 事件监听，reject Promise 以捕获 404 或 CORS 错误：
```
image.addEventListener('error', () => reject(new Error(`Failed to load ${url}`)));
```
性能优化：若纹理较多，可用 Promise.all() 替代串行 await，显著缩短总加载时间（如上例所示）。
兼容性：该方案适用于现代浏览器（Chrome 55+/Firefox 52+/Edge 15+），无需 polyfill。

通过以上改造，纹理加载与渲染逻辑形成严格的依赖链：图像 → 纹理配置 → 几何体创建 → 场景绘制，彻底消除“蓝屏等待”现象，实现所见即所得的 WebGL 体验。