Displaying the camera feed in grayscale in 8th Wall Web

Question

Is there a simple way to display the camera feed in grayscale?
I found an example of a QR code scanning app to handle the camera texture as an array of grayscale pixel values, but I'm stuck in displaying grayscale instead of 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

If you want to add a custom visual treatment to the camera feed, you can provide a custom fragment shader to 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'

You can then provide this as an input to the pipeline module that renders the camera feed:

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