Question

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

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

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

我的显示点随机分布在（[0,100]，[0,100]）之间。然后，我需要将0到100个图表坐标之间的x / y值转换为0并说出640像素坐标。当我 CAN 在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向量访问画布宽度/高度，然后您可以在其中执行变换。

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

1 个答案: