javascript - 在 8th Wall Web 中以灰度显示摄像头源

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
    }
  )
)