Last active
March 27, 2024 09:04
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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, | |
}) | |
}, | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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()