8th Wall custom postprocessing pipeline module

threePostProcessingPipelineModule.js

import { BloomEffect, EffectComposer, EffectPass, RenderPass } from 'postprocessing'

// Custom three pipeline module to try and implement postprocessing
// Can get scene rendering with camera feed background, but adding any other effect passes causes a white background

export const threePipelineModule = () => {
  let scene3
  return {
    name: 'customthreemodule',
    onStart: ({ canvas, canvasWidth, canvasHeight, GLctx }) => {
      const scene = new window.THREE.Scene()
      const camera = new window.THREE.PerspectiveCamera(60.0, canvasWidth / canvasHeight, 0.01, 1000.0)
      scene.add(camera)

      const renderer = new window.THREE.WebGLRenderer({
        canvas,
        context: GLctx,
      })

      const effectPass = new EffectPass(camera, new BloomEffect())
      const renderPass = new RenderPass(scene, camera)

      renderPass.clear = false // Must be false otherwise camera feed doesnt come through
      renderPass.renderToScreen = true

      const composer = new EffectComposer(renderer)

      composer.addPass(renderPass)
      // Adding an effect pass makes background go white
      // composer.addPass(effectPass)
      composer.setSize(canvasWidth, canvasHeight)

      const clock = new window.THREE.Clock()

      scene3 = { scene, camera, renderer, composer, clock }
    },
    onUpdate: ({ processCpuResult }) => {
      if (!processCpuResult.reality) {
        return
      }
      const { rotation, position, intrinsics } = processCpuResult.reality
      const { camera } = scene3

      for (let i = 0; i < 16; i++) {
        camera.projectionMatrix.elements[i] = intrinsics[i]
      }

      // Default 8th wall three module isn't doing this
      camera.projectionMatrixInverse.getInverse(camera.projectionMatrix)

      if (rotation) {
        camera.setRotationFromQuaternion(rotation)
      }
      if (position) {
        camera.position.set(position.x, position.y, position.z)
      }
    },
    onCanvasSizeChange: ({ canvasWidth, canvasHeight }) => {
      scene3.composer.setSize(canvasWidth, canvasHeight)
    },
    onRender: () => {
      const { composer, clock } = scene3
      composer.render(clock.getDelta())
    },
    xrScene: () => {
      return scene3
    },
  }
}