javascript - 使用 `fillRect` 绘制 3D 模型太慢？

Question

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

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

我尝试了几种不同的方法，在我当前的版本中，我对功能非常满意，但性能很差。

在这个版本中，我正在记录 2D Canvas 描边，一旦鼠标停止绘制 (mouseup)，我就会遍历 Canvas 以将每个像素转换到模型上并找到等效的 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

听起来您正在写入的纹理是 Canvas (因为您“使用 fillrect 在 UV 贴图上的正确位置绘制特定像素”)。

与其使用 fillrect 成百上千次，我会尝试获取 ImageData直接并自己设置像素。它在单像素写入上多快，因为在更新期间没有函数调用发生。

如果你想变聪明，你可以让鼠标在一个 Canvas 上写字(通常是灰度)，然后将划痕 Canvas 投影到你的模型和 UV 贴图上，然后简单地使用它作为一个过滤器来混合油漆颜色(和/或纹理)。这是将图像绘制到模型上的一种非常简单的方法(即，绘制 mask ，然后在添加之前将图像乘以该图像)。