时间戳

首页 > 解决方案 > 如何根据 GLSL/WebGL 中的某些条件获取像素数？

javascript - 如何根据 GLSL/WebGL 中的某些条件获取像素数？

问题描述

我正在尝试计算值低于 0.89 的像素数。由于 WebGL Shaders 变量不存在，我只是尝试了一个 hack，我在最后一次迭代中或 texCoord 为 1.0、1.0 时计算计数。

目前我正在尝试下面的代码，这是否正确，我们有更好的方法吗？

`

void main() {
  //gl_FragColor = vec4(texture2D(u_texture, vec2(mytexcoord.x, mytexcoord.y)).rgb, 1.0);
  vec2 uv = mytexcoord;
  float ins = texture2D(u_texture, vec2(uv.x, 1.0 - uv.y)).r;
  float neglectIntensityValue = 0.89453125;
  float blueVal = 0.00000000;
  vec2 onePixel = vec2(1.0, 1.0) / u_resolution;
  int pixelCount = 0;
  if (vec2(1.0) == mytexcoord) {
    //last iteration
    //loop through all the pixels to know the count
    const int totalPixels = 100000;//int(u_resolution.x * u_resolution.y);
    for (int i = 0; i < totalPixels; i++) {
      vec2 uv = vec2((float(i)) / 100000.0, 0.5);
      vec4 colorData = vec4(texture2D(u_texture, uv).rgb, 1.0);
      if (colorData.r < neglectIntensityValue) {
        pixelCount++;
      }
    } 
  }
  if (pixelCount > 1000) {
    gl_FragColor = vec4(ins, ins, ins, 1.0);
  } else {
    ins = 1.0 - ins;
    gl_FragColor = vec4(ins, ins, ins, 1.0);
  }
}

`

标签： javascriptwebglfragment-shader

解决方案

仅使用片段着色器无法更有效地做到这一点。您的像素着色器可能会在大纹理上崩溃，因为它不打算运行很长时间。如果足够的话，您可以随机采样像素的一个子集作为近似值。

为了高效实现，您可以让着色器将 1 或 0 输出到渲染纹理中，然后使用不同像素着色器的 log(n) 通道将其聚合，将 2x2 像素（或 4x4 或更多）相加成 1 个像素每次通过。显然，这将是相当复杂的实现。

推荐阅读