javascript - 获取纹理在 UV 坐标处的颜色

Question

我正在使用三个 v.73我有来自 raycaster 交叉点的 UV 坐标。我也有这个物体的纹理。我怎样才能在 UV 坐标处获得所用纹理的颜色(RGB 或 RGBA)？

我曾尝试使用从纹理中获取图像的像素，但它占用了大量内存

Answer 1

如果您希望它快速，请保留您的纹理图像。在每个图像的初始时间，你正在制作一个纹理，同时使用类似的东西制作其数据的副本

// make the canvas same size as the image
some2dCanvasCtx.canvas.width  = img.width;
some2dCanvasCtx.canvas.height = img.height;
// draw the image into the canvas
some2dCanvasCtx.drawImage(img, 0, 0);
// copy the contents of the canvas
var texData = some2dCanvasCtx.getImageData(0, 0, img.width, img.height);

现在，如果您有 UV 坐标，您可以直接查找

var tx = Math.min(emod(u, 1) * texData.width  | 0, texData.width - 1);
var ty = Math.min(emod(v, 1) * texData.height | 0, texData.height - 1);
var offset = (ty * texData.width + tx) * 4;
var r = texData.data[offset + 0];
var g = texData.data[offset + 1];
var b = texData.data[offset + 2];
var a = texData.data[offset + 3];

// this is only needed if your UV coords are < 0 or > 1
// if you're using CLAMP_TO_EDGE then you'd instead want to
// clamp the UVs to 0 to 1.
function emod(n, m) {
  return ((n % m) + m) % m;
}

否则你可以向 WebGL 询问纹理的颜色。使用上面的 tx 和 ty。 See this answer .