https://webgl2fundamentals.org/webgl/lessons/webgl-3d-textures.html
En el enlace de arriba, tengo que crear una nueva imagen y después de cargarla tengo que enviarla al búfer.
var image = new Image(); image.src = "resource/1.png"; image.onload = ()=>{ gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.generateMipmap(gl.TEXTURE_2D); }¿Cómo precargar una imagen y usarla?
var image = "data"; gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.generateMipmap(gl.TEXTURE_2D);Podrías usar una función asíncrona para esto:
async function loadImage(src) { const image = new Image(); image.src = src; return new Promise((resolve,reject)=>{ image.onload = ()=>resolve(image); image.onerror = ()=>reject(new Error(`Failed to load image at "${src}"`)); }); } let img = await loadImage("resource/1.png"); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); gl.generateMipmap(gl.TEXTURE_2D);