WebGL图像加载延迟的纹理初始化时立即显示方法

本文详细介绍如何利用 Promise 与 async/await 重构 WebGL 纹理加载流程，彻底解决首次渲染显示蓝色占位色、需要手动交互才能刷新的问题，实现文件导入后四张纹理平面即时正确渲染。

实际上，这个坑在 WebGL 开发中相当常见——纹理异步加载的小陷阱，说起来不大，但第一次遇到确实令人抓狂。原始代码中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);  // 初始化为蓝色占位图（可选，提升用户体验）  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）都必须等待加载完毕，确保返回的对象中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()中使用Promise.all并行加载四张纹理，全部就绪后再构建场景：

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捕获 404 或 CORS 错误，比如：

  image.addEventListener('error', () => reject(new Error(`Failed to load ${url}`)));

• 性能优化：纹理数量较多时，用Promise.all()替代串行await，能显著缩短总加载时间（如上例所示）。
• 兼容性：该方案适用于 Chrome 55+、Firefox 52+、Edge 15+ 等现代浏览器，无需 polyfill。

经过这一番改造，纹理加载和渲染逻辑形成了严格的依赖链：图像 → 纹理配置 → 几何体创建 → 场景绘制，蓝屏等待彻底成为历史——读起来、用起来都清爽了很多。