如何比较JavaScript / WebGL2中的两种纹理？

Question

我正在为图像处理算法编写一个片段着色器。着色器将在一个循环(乒乓球)中的两个帧缓冲区之间运行多次。在某个时候，当输入和输出纹理相同时，我需要停止循环。

我打算做的是Canny边缘检测算法的最后一步，“滞回边缘跟踪”。我想做一个实时GPU/WebGL2版本的Canny算法，并将它上传到一个网站。

最后一步如下：

给定双阈值图像，其中包含“强”边缘像素(1.0)和“弱”边缘像素(0.5)。

• 查找与强像素连接的所有弱像素链，并将其标记为“强”。
• 保留所有“强”像素，并丢弃所有剩余的“弱”像素。

这可以在一个循环中运行多次的片段着色器中实现。当前的“弱”像素被标记为“强”，如果在其8像素邻域中至少有一个强像素。在每次迭代中，我们应该有更强的像素和更少的弱像素。最后，只应保留弱像素的孤立链。这是片段着色器成为一个通过着色器，应该被检测到，以停止循环。

更新2019年9月:我上传了GPU Canny边缘检测器在这里http://www.oldrinb.info/dip/canny/。它可以在支持WebGL2的浏览器中工作，也可以在支持WebGL1和“WEBGL_draw_buffers”扩展的浏览器中工作。我很快也会把源代码放到github上。

Answer 1

我不能百分之百确定你在问什么。你在要求在CPU上进行比较。您可以通过将纹理附加到框架缓冲区，然后调用gl.readPixels来读取纹理的内容。然后，您可以比较所有像素。注意:并不是所有的纹理格式都可以附加到一个框架缓冲区，但假设您使用的格式可以。你已经为你的乒乓附加了框架缓冲的纹理，那么你还想要什么？

就像我在GPU上的评论中写的那样，你可以写一个着色器来比较两个纹理。

#version 300 es
precision highp float;

uniform sampler2D tex1;
uniform sampler2D tex2;

out vec4 outColor;

void main() {
  ivec2 size = textureSize(tex1, 0);  // size of mip 0
  float len = 0.0;
  for (int y = 0; y < size.y; ++y) {
    for (int x = 0; x < size.x; ++x) {
      vec4 color1 = texelFetch(tex1, ivec2(x, y), 0);
      vec4 color2 = texelFetch(tex2, ivec2(x, y), 0);
      vec4 diff = color1 - color2;
      len = length(diff);
      if (len > 0.0) break;
    }
    if (len > 0.0) break;
  }
  outColor = mix(vec4(0), vec4(1), step(len, 0.0));
}

现在只需绘制一个像素，并使用readPixels读取它。如果是0时，纹理是一样的。如果不是的话他们就不一样了。

代码假设纹理大小相同，但当然，如果它们不是相同的大小，那么我们已经知道它们不可能是相同的。

​

// make 3 canvaes as sources for textures
const canvases = ['A', 'B', 'B'].map((msg) => {
  const canvas = document.createElement('canvas');
  canvas.width = 128;
  canvas.height = 128;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(0, 0, 128, 128);
  ctx.font = '80px monospace';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = 'yellow';
  ctx.fillText(msg, 64, 64);
  document.body.appendChild(canvas);
  return canvas;
});

const gl = document.createElement('canvas').getContext('webgl2');
if (!gl) { alert('need webgl2'); }

const vs = `#version 300 es
void main() {
  gl_PointSize = 1.0;
  gl_Position = vec4(0, 0, 0, 1);
}
`;

const fs = `#version 300 es
precision highp float;

uniform sampler2D tex1;
uniform sampler2D tex2;

out vec4 outColor;

void main() {
  ivec2 size = textureSize(tex1, 0);  // size of mip 0
  float len = 0.0;
  for (int y = 0; y < size.y; ++y) {
    for (int x = 0; x < size.x; ++x) {
      vec4 color1 = texelFetch(tex1, ivec2(x, y), 0);
      vec4 color2 = texelFetch(tex2, ivec2(x, y), 0);
      vec4 diff = color1 - color2;
      len = length(diff);
      if (len > 0.0) break;
    }
    if (len > 0.0) break;
  }
  outColor = mix(vec4(0), vec4(1), step(len, 0.0));
}
`;

// compile shaders, link program, look up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

const textures = canvases.map((canvas) => {
  // gl.createTexture, gl.bindTexture, gl.texImage, etc.
  return twgl.createTexture(gl, {src: canvas});
});

compareTextures(0, 1);
compareTextures(1, 2);

function compareTextures(ndx1, ndx2) {
  gl.useProgram(programInfo.program);
  
  // gl.activeTexture, gl.bindTexture, gl.uniform
  twgl.setUniforms(programInfo, {
    tex1: textures[ndx1],
    tex2: textures[ndx2],
  });
  
  // draw the bottom right pixel
  gl.viewport(0, 0, 1, 1);
  
  gl.drawArrays(gl.POINTS, 0, 1);  // draw 1 point
  
  // read the pixel
  const result = new Uint8Array(4);
  gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, result);
  
  console.log('textures', ndx1, 'and', ndx2, 'are', result[0] ? 'the same' : 'not the same'); 
}

canvas { padding: 5px; }

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

​

您也可以使用遮挡查询。好处是，它们可能不会像readPixels那样阻塞GPU的位置。缺点是您不能在同一个JavaScript事件中检查它们，因此它们可能不适合您的需要。

​

// make 3 canvaes as sources for textures
const canvases = ['A', 'B', 'B'].map((msg) => {
  const canvas = document.createElement('canvas');
  canvas.width = 128;
  canvas.height = 128;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(0, 0, 128, 128);
  ctx.font = '80px monospace';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillStyle = 'yellow';
  ctx.fillText(msg, 64, 64);
  document.body.appendChild(canvas);
  return canvas;
});

const gl = document.createElement('canvas').getContext('webgl2');
if (!gl) { alert('need webgl2'); }

const vs = `#version 300 es
void main() {
  gl_PointSize = 1.0;
  gl_Position = vec4(0, 0, 0, 1);
}
`;

const fs = `#version 300 es
precision highp float;

uniform sampler2D tex1;
uniform sampler2D tex2;

out vec4 outColor;

void main() {
  ivec2 size = textureSize(tex1, 0);  // size of mip 0
  float len = 0.0;
  for (int y = 0; y < size.y; ++y) {
    for (int x = 0; x < size.x; ++x) {
      vec4 color1 = texelFetch(tex1, ivec2(x, y), 0);
      vec4 color2 = texelFetch(tex2, ivec2(x, y), 0);
      vec4 diff = color1 - color2;
      len = length(diff);
      if (len > 0.0) break;
    }
    if (len > 0.0) break;
  }
  if (len > 0.0) {
    discard;
  }
  outColor = vec4(1);
}
`;

// compile shaders, link program, look up locations
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

const textures = canvases.map((canvas) => {
  // gl.createTexture, gl.bindTexture, gl.texImage, etc.
  return twgl.createTexture(gl, {src: canvas});
});

function wait(ms = 0) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function test() {
  await compareTextures(0, 1);
  await compareTextures(1, 2);
}
test();

async function compareTextures(ndx1, ndx2) {
  gl.clear(gl.DEPTH_BUFFER_BIT);
  gl.enable(gl.DEPTH_TEST);
  gl.useProgram(programInfo.program);
  
  // gl.activeTexture, gl.bindTexture, gl.uniform
  twgl.setUniforms(programInfo, {
    tex1: textures[ndx1],
    tex2: textures[ndx2],
  });
  
  // draw the bottom right pixel
  gl.viewport(0, 0, 1, 1);
  
  const query = gl.createQuery();
  gl.beginQuery(gl.ANY_SAMPLES_PASSED, query);
  gl.drawArrays(gl.POINTS, 0, 1);  // draw 1 point
  gl.endQuery(gl.ANY_SAMPLES_PASSED);
  gl.flush();
  
  let ready = false;
  while(!ready) {
    await wait();
    ready = gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);
  }
  
  const same = gl.getQueryParameter(query, gl.QUERY_RESULT);
  
  console.log('textures', ndx1, 'and', ndx2, 'are', same ? 'the same' : 'not the same'); 
}

canvas { padding: 5px; }

<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

​