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.