Отображение канала камеры в оттенках серого в 8-й стене Сети

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