Currently, I am in the process of developing a painting-type application using three.js/canvas.
My goal is to enable users to paint directly onto a 3D model, updating the UV map accordingly.
https://i.sstatic.net/DfMvB.png
While I have achieved the desired functionality in my current version, I am facing performance issues.
In this iteration, I record the strokes on the 2D canvas and then project each pixel onto the model when drawing stops (on mouseup). I calculate the corresponding UV coordinates and use fillrect to draw the pixel in the correct position on the UV map.
Although this approach works, I believe there must be a more efficient method. Can anyone provide guidance on improving the efficiency?
for (var iy = 0; iy < height; iy++){
for (var ix = 0; ix < width; ix++){
var red = imgData.data[((width * iy) + ix) * 4];
var green = imgData.data[(((width * iy) + ix) * 4) + 1];
var blue = imgData.data[(((width * iy) + ix) * 4) + 2];
var alpha = imgData.data[(((width * iy) + ix) * 4) + 3];
array = getMousePosition( container, ix+300, iy+300);
onClickPosition.fromArray( array );
intersects = getIntersects( onClickPosition, arrayMesh );
if ( intersects.length > 0 ){
var uv = intersects[ 0 ].uv;
intersects[ 0 ].object.material.map.transformUv( uv );
currentPoint = { x: Math.round(uv.x*canvas.width), y: Math.round(uv.y*canvas.height) };
ctx.fillRect(currentPoint.x, currentPoint.y, 1, 1);
}
}
}