Pixi.js / WebGL方法，用于将数据模型坐标转换为画布像素坐标

Question

如果我的任何术语不正确，请提前道歉。 我对WebGL词汇的熟悉程度还很新。

我

目前有一个项目，我正在创建一个图表库。 我的问题源于将点从图表坐标系映射到 webgl 画布像素坐标的速度很慢。 例如：

    _____________ 100, 100
    |           |
    |           |
    |           |
    |           |
0,0 -------------

其中我显示的点在 （[0，100]，[0，100]） 之间随机分布。 然后，我需要将 0 到 100 个图表坐标之间的 x/y 值转换为 0，并说 640 像素坐标。 虽然我可以在javascript中执行此转换，但我想知道是否有更好的机制可以通过WebGL技术执行此操作（例如使用某些输入注册某种形式的矩阵转换，图形卡可以比普通的旧JavaScript代码执行得更快。

我当前的 javascript 函数从模型的坐标转换为像素坐标：

function transformY(y, modelYmin, modelYmax, pixelYMax) {
    var numerator = y - modelYmin;
    var denominator = modelYmax - modelYmin;
    var ratio = numerator / denominator;
    var scale = ratio * pixelYMax;
    return scale;
}
function transformX(x, modelXmin, modelXmax, pixelXMax) {
    var numerator = x - modelXmin;
    var denominator = modelXmax - modelXmin;
    var ratio = numerator / denominator;
    var scale = ratio * pixelXMax;
    return scale;
}

提前感谢！

Answer 1

PIXI 有一个名为 dimensions 的默认制服，您可以在 WebGL 代码中使用。只需确保在PIXI过滤器中添加制服，如下所示：

function myFilter() {
  var uniforms = {
    dimensions: {type: '4f',value: new Float32Array([0, 0, 0, 0])}
  }
}

（例如，请参阅如何在任何默认过滤器中使用dimensions，例如 http://pixijs.github.io/docs/filters_pixelate_PixelateFilter.js.html）

如果在此处定义了制服，PIXI 将自动填充值，以便您可以使用 WebGL 中的dimensions.xy向量访问画布宽度/高度，然后您可以在其中执行转换。