JavaScript DOM image preload

Question

https://webgl2fundamentals.org/webgl/lessons/webgl-3d-textures.html

In the link above, I have to create a new image and after loading I have to send it to the buffer.

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);
}

How to preload an image and use it?

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);

Here's an answer to the question you just asked that was closed (incorrectly, IMHO) and that you deleted: pastebin.com/DpJgmPDh Happy coding! Details about .call here. Details about arrow functions here and in my book (see my profile). — T.J. Crowder
– T.J. Crowder, Commented Oct 28, 2021 at 8:58

LJᛃ · Accepted Answer · 2021-10-27 14:13:14Z

2

You could use an async function for this:

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);

edited Oct 27, 2021 at 14:13

answered Oct 13, 2021 at 11:36

LJᛃ

8,2232 gold badges27 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript DOM image preload

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related