Question

如何获取WebGL版本的FabricJS滤镜的片段着色器中的像素位置和图像大小？如果您只需要以统一的方式传递信息，过滤器内部是否可以提供信息，或者是否需要将其作为选项传递给过滤器？

Answer 1

好吧，我将尝试浏览代码并记住，我不经常触摸代码的那一部分。

在基本过滤器类中，有一个称为createProgram的方法。此方法将返回一个包含名为uniformLocations的属性的对象。

此属性保存一个对象，该对象从每个过滤器getUniformLocations方法返回。此方法再次使用gl.getUniformLocation从webgl上下文返回对象。

现在，织物具有一种约定，即在制服uStepW和uStepH中，您将以像素为单位表示百分比。

在webgl上下文中，宽度和高度为1，一个像素就像uStepH by uStepW，通常像0.001231432432一样浮动，我认为图像以像素为单位：

width: 1 / uStepW
height: 1 / uStepH

fabric还使用vTexCoord来表示位置（我认为是因为Internet上的webgl教程非常标准）。因此像素位置可能是：

x: vTextCoord.x / uStepW
y: vTextCoord.y / uStepH

您可以查看fabricJS存储库中的webgl过滤器pixelate，以更好地了解如何在自己的过滤器中访问这些变量。在该过滤器中，方法getUniformLocations返回uStepW和uStepH，但这是不必要的，因为基本过滤器将为我们做同样的事情。

因此这些信息始终可用，使用它们的fabricjs片段着色器如下所示：

    /**
     * Fragment source for the Pixelate program
     */
    fragmentSource: 'precision highp float;\n' +
      'uniform sampler2D uTexture;\n' +
      'uniform float uBlocksize;\n' +
      'uniform float uStepW;\n' +
      'uniform float uStepH;\n' +
      'varying vec2 vTexCoord;\n' +
      'void main() {\n' +
        'float blockW = uBlocksize * uStepW;\n' +
        'float blockH = uBlocksize * uStepW;\n' +
        'int posX = int(vTexCoord.x / blockW);\n' +
        'int posY = int(vTexCoord.y / blockH);\n' +
        'float fposX = float(posX);\n' +
        'float fposY = float(posY);\n' +
        'vec2 squareCoords = vec2(fposX * blockW, fposY * blockH);\n' +
        'vec4 color = texture2D(uTexture, squareCoords);\n' +
        'gl_FragColor = color;\n' +
      '}',

现在，这么说吧，除非您正在做某些特别的事情，否则我认为您不需要了解webgl过滤器中的那些内容。

对我来说，这种问题有点XY问题，但由于我根本不是WEBGL专家，所以我可能是错的。如果您尝试构建过滤器，并且认为您需要这些信息以进一步发展，则可以更好地说明您要构建的内容。

如何在Fabric js过滤器的片段着色器中获取像素位置和图像大小？

1 个答案: