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

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

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

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

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

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

核心改造分为三步：

1. 封装图像加载为 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;  });}

2. 改造 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}

3. 升级 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  };}

4. 在初始化入口处统一 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 体验。