XrThree camera pipeline module for 8th Wall

app.js

import { XrThree } from './XrThree'

let fboPipelineModule = XrThree.fboPipelineModule()
let videoFeedPipelineModule = XR8.GlTextureRenderer.pipelineModule()
let scenePipelineModule = XrThree.scenePipelineModule()

let pipelineModules = [
	fboPipelineModule,
	videoFeedPipelineModule,
	scenePipelineModule
]

XR8.addCameraPipelineModules(pipelineModules)

XrThree.js

import {
	Scene,
	PerspectiveCamera,
	WebGLRenderer
} from 'three'

function createXrThree () {
	let sessionState = {
		isActive: false,
		scene: null,
		camera: null,
		renderer: null
	}

	function setupPipeline ({ canvas, GLctx }) {
		if (sessionState.isActive) return sessionState

		if (!sessionState.renderer) {
			let scene = new Scene()
			let camera = new PerspectiveCamera(60, innerWidth / innerHeight, 0.01, 1000)
			scene.add(camera)

			let renderer = new WebGLRenderer({
				canvas,
				context: GLctx,
				alpha: false,
				antialias: false
			})

			renderer.autoClear = false
			renderer.setSize(innerWidth, innerHeight)

			Object.assign(sessionState, {
				scene,
				camera,
				renderer
			})
		}

		sessionState.isActive = true
		return sessionState
	}

	function xrScene () {
		return sessionState
	}

	function setRenderTarget (renderTarget) {
		sessionState.renderTarget = renderTarget
	}

	function freeMemory () {
		let { renderer } = sessionState

		renderer.dispose()

		Object.assign(sessionState, {
			scene: null,
			camera: null,
			renderer: null
		})
	}

	function fboPipelineModule () {
		return {
			name: 'three-fbo',

			onStart (event) {
				return setupPipeline(event)
			},

			onAttach (event) {
				return setupPipeline(event)
			},

			onDetach () {
			},

			onUpdate () {
			},

			onRender () {
				let { isActive, renderer, renderTarget } = sessionState
				if (!(isActive && renderTarget)) return

				renderer.setRenderTarget(renderTarget)
			}
		}
	}

	function scenePipelineModule () {
		return {
			name: 'three-scene',

			onStart (event) {
				return setupPipeline(event)
			},

			onAttach (event) {
				return setupPipeline(event)
			},

			onDetach () {
				sessionState.isActive = false
			},

			onUpdate ({ processCpuResult }) {
				let data = processCpuResult.reality || processCpuResult.facecontroller
				if (!(data && data.intrinsics)) return

				let { camera } = sessionState
				let { intrinsics, position, rotation } = data
				let { elements } = camera.projectionMatrix

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

				camera.projectionMatrixInverse.getInverse(camera.projectionMatrix)
				camera.setRotationFromQuaternion(rotation)
				camera.position.copy(position)
			},

			onCanvasSizeChange () {
				let { isActive, renderer } = sessionState
				if (!isActive) return

				renderer.setSize(innerWidth, innerHeight)
			}

			// onRender () {
			// 	let { isActive, scene, camera, renderer } = sessionState
			// 	if (!isActive) return

			// 	renderer.clearDepth()
			// 	renderer.render(scene, camera)
			// }
		}
	}

	return {
		xrScene,
		setupPipeline,
		setRenderTarget,
		fboPipelineModule,
		scenePipelineModule,
		freeMemory
	}
}

export const XrThree = createXrThree()