How to render multiple textures/images (jpeg, pngs) using webgl2?

150 views Asked by At

I am working on a widget where I have to render 100s of rectangles and with that I have to render 100s of different images/textures (jpeg,png) on those rectangles. When I render an image/texture it overwrites the previous texture/image and only shows the latest rendered image which is 100th image for this example.

For reference, I am attaching code snippet

    // function to create image object and resolve
    const addImageProcess = (src) => {
    return new Promise((resolve, reject) => {
      let img = new Image();
      img.onload = () => resolve(img);
      img.onerror = reject;
      img.src = src;
      img.crossOrigin = "anonymous";
    });
  };

  var texture;
  var promisesList = [];
  
  // Generates promise list
  for (let i = 0; i < url.length; i++) {
    console.log(i)
    await promisesList.push(
      addImageProcess(url[i])
    );
  }

  // Iterate over the promise list and call the render function on image object
  promisesList.forEach((promise, index) => {
    promise
      .then((image) => {
        texture = dieImageUtils.createAndBindTexture(
          waferMapVariables.dieImageGl,
          image
        );
        render(texture, dieProgram, vertices[index], textureCoordinates[index]);
      })
      .catch(() => console.log("Crappy URL"));
  });




// Renderer function
 const render = (texture, program, vertices, textureCoordinates) => {
    var buffer = dieImageUtils.createAndBindBuffer(
      waferMapVariables.dieImageGl,
      waferMapVariables.dieImageGl.ARRAY_BUFFER,
      waferMapVariables.dieImageGl.STATIC_DRAW,
      new Float32Array(vertices)
  );
  var texBuffer = dieImageUtils.createAndBindBuffer(
    waferMapVariables.dieImageGl,
    waferMapVariables.dieImageGl.ARRAY_BUFFER,
    waferMapVariables.dieImageGl.STATIC_DRAW,
    new Float32Array(textureCoordinates)
  );
  waferMapVariables.dieImageGl.useProgram(program);

  // Step 4
  dieImageUtils.linkGPUAndCPU(
    {
      program: program,
      buffer: buffer,
      dims: 2,
      gpuVariable: "position",
    },
    waferMapVariables.dieImageGl
  );
  dieImageUtils.linkGPUAndCPU(
    {
      program: program,
      buffer: texBuffer,
      dims: 2,
      gpuVariable: "texCoords",
    },
    waferMapVariables.dieImageGl
  );
  waferMapVariables.dieImageGl.bindTexture(
    waferMapVariables.dieImageGl.TEXTURE_2D,
    texture
  );

  // Step 5
  waferMapVariables.dieImageGl.drawArrays(
    waferMapVariables.dieImageGl.TRIANGLES,
    0,
    vertices.length / 2
  );
};

Need a way to render images that it shows all 100 images/texture without overwriting any of previous rendered image/texture.

0

There are 0 answers