Skip to content

Instantly share code, notes, and snippets.

@funwithtriangles
Last active March 27, 2024 09:04
Show Gist options
  • Save funwithtriangles/256de89332e438d8740301253ad9efd4 to your computer and use it in GitHub Desktop.
Save funwithtriangles/256de89332e438d8740301253ad9efd4 to your computer and use it in GitHub Desktop.
Custom 8th wall three pipeline module, which fixes a problem with the camera's projectionMatrixInverse. See line 33 for the fix.
// Custom three pipeline module because 8th wall's doesn't allow for custom renderer config
// also it has problems with raycasting when using three >= r103 because of this PR:
// https://github.com/mrdoob/three.js/pull/15996
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, alpha: false, antialias: true })
renderer.autoClear = false
renderer.setSize(canvasWidth, canvasHeight)
scene3 = { scene, camera, renderer }
},
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.renderer.setSize(canvasWidth, canvasHeight)
},
onRender: () => {
const { scene, renderer, camera } = scene3
renderer.clearDepth()
renderer.render(scene, camera)
},
xrScene: () => {
return scene3
},
}
}
// Adding the pipelines
const threeModule = threePipelineModule()
XR.addCameraPipelineModules([ // Add camera pipeline modules.
// Existing pipeline modules.
XR.GlTextureRenderer.pipelineModule(), // Draws the camera feed.
threeModule, // Creates a ThreeJS AR Scene.
XR.XrController.pipelineModule(), // Enables SLAM tracking.
scenePipelineModule(threeModule), // Pass in the threeModule to your scene pipeline module
])
// Using in the scene
const scenePipelineModule = (threeModule) => {
return {
name: 'scene',
onStart: ({ canvas, canvasWidth, canvasHeight }) => {
const { scene, camera } = threeModule.xrScene()
camera.position.set(0, 3, 0)
XR.XrController.updateCameraProjectionMatrix({
origin: camera.position,
facing: camera.quaternion,
})
},
}
}
@positlabs
Copy link

The getInverse method is deprecated now and junks up the console with a bunch of warnings. Here's an update:

camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment