Question

有没有一种简单的方法可以以灰度显示摄像机的提要？
我找到了一个QR码扫描应用程序的示例，该应用程序将相机纹理作为灰度像素值数组处理，但是我一直停留在显示灰度而不是RGBA上。

// Install a module which gets the camera feed as a UInt8Array.
XR.addCameraPipelineModule(
  XR.CameraPixelArray.pipelineModule({luminance: true, width: 240, height: 320}))

// Install a module that draws the camera feed to the canvas.
XR.addCameraPipelineModule(XR.GlTextureRenderer.pipelineModule())

// Create our custom application logic for scanning and displaying QR codes.
XR.addCameraPipelineModule({
  name = 'qrscan',
  onProcessCpu = ({onProcessGpuResult}) => {
    // CameraPixelArray.pipelineModule() returned these in onProcessGpu.
    const { pixels, rows, cols, rowBytes } = onProcesGpuResult.camerapixelarray
    const { wasFound, url, corners } = findQrCode(pixels, rows, cols, rowBytes)
    return { wasFound, url, corners }
  },
  onUpdate = ({onProcessCpuResult}) => {
    // These were returned by this module ('qrscan') in onProcessCpu
    const {wasFound, url, corners } = onProcessCpuResult.qrscan
    if (wasFound) {
      showUrlAndCorners(url, corners)
    }
  },
})

Answer 1

如果要将自定义视觉处理添加到相机源，则可以向GlTextureRenderer提供自定义片段着色器：

const luminanceFragmentShader =
  'precision mediump float;\n' +
  'varying vec2 texUv;\n' +
  'uniform sampler2D sampler;\n' +
  'void main() {\n' +
  '  vec4 color = texture2D(sampler, texUv);\n' +
  '  vec3 lum = vec3(0.299, 0.587, 0.114);\n' +
  '  gl_FragColor = vec4(vec3(dot(color.rgb, lum)), color.a);\n' +
  '}\n'

然后，您可以将其作为渲染摄像头提要的管道模块的输入：

XR.addCameraPipelineModule(
  XR.GlTextureRenderer.pipelineModule(
    {
      fragmentSource: luminanceFragmentShader
    }
  )
)

在8th Wall Web中以灰度显示相机供稿

1 个答案: