使用`fillRect`绘制到3D模型上太慢了？

Question

我目前正在尝试在three.js / canvas中实现绘画类型应用。

我希望能够在3D模型上绘画，然后更新UV贴图。

我尝试过几种不同的方法，在我目前的版本中，我对功能非常满意，但性能不佳。

在这个版本中，我正在录制2D画布笔划，一旦鼠标停止绘制（mouseup），我就在画布上迭代以投影模型中的每个像素并找到等效的UV坐标并使用fillrect绘制特定像素在UV地图上的正确位置。

这确实有效，但必须有一种更有效的方式，有人能指出我正确的方向吗？

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

    }
 }

Answer 1

听起来你正在写的纹理是一个画布（因为你“使用fillrect在UV地图上的正确位置绘制特定的像素”）。

我会尝试直接使用ImageData并自己设置像素，而不是使用fillrect数百或数千次。在单像素写入时，它很多更快，因为在更新期间没有发生函数调用。

如果你想变得聪明，你可以让鼠标写入一个画布（通常是灰度）然后将刮刮画布投影到模型和UV贴图上，然后简单地将其用作过滤器，用于添加涂料颜色（和/或纹理）。这是将图像绘制到模型上的一种简单方法（即，绘制蒙版，然后在添加之前将图像乘以该图像）。