本文详细介绍如何利用 Promise 与 async/await 重构 WebGL 纹理加载流程，彻底解决首次渲染显示蓝色占位色、需要手动交互才能刷新的问题，实现文件导入后四张纹理平面即时正确渲染。
实际上，这个坑在 WebGL 开发中相当常见——纹理异步加载的小陷阱，说起来不大，但第一次遇到确实令人抓狂。原始代码中loadTexture()函数虽然注册了'load'事件，却立即返回了一个尚未准备好的 texture 对象。此时 WebGL 只绑定了一个 1×1 的蓝色占位图（[0,0,255,255]），真正的图像还在后台缓慢加载。当draw()执行时，GPU 采样到的仍然是那个蓝色纹理，导致所有平面全部显示蓝色；只有手动晃动视角触发重绘，图像才可能刚加载完毕并正确显示。
根本原因其实很简单：WebGL 纹理加载是异步的，但渲染逻辑却是同步执行的。两者不同步，自然等出了一个蓝色世界。要想根治，必须让渲染逻辑老老实实等待纹理就绪后再开始。
✅ 正确解法：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); // 初始化为蓝色占位图（可选，提升用户体验） 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）都必须等待加载完毕，确保返回的对象中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()中使用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。
经过这一番改造，纹理加载和渲染逻辑形成了严格的依赖链：图像 → 纹理配置 → 几何体创建 → 场景绘制，蓝屏等待彻底成为历史——读起来、用起来都清爽了很多。
