A-frame/THREEjs camera equivalent in Babylonjs For a Web AR project

Questions
1

Hey, I’m pretty new to Babylon.js and I’m trying to convert some of my web AR projects using Aframe/Three.js to Babylon.js. But I’m running into some problems and I’m pretty certain it has to do with the camera, though I could be way off. I used a ProjectionMatrix to set a PerspectiveCamera and then update it in my old projects.

//init will be changed once i get the camera data
 var camera = new THREE.PerspectiveCamera(50, window.innerWidth/ window.innerHeight, 1, 10000);
            camera.lookAt( 0, 0, 0 );
...
...
...
//changed once I got the data from the tracker.
      camera.fov = fov;
      camera.aspect = newAspect;
      camera.near = near;
      camera.far = far;
      camera.updateProjectionMatrix();

I saw a couple of similar projects that had set up their cameras like this but it isn’t quite giving me the results I need.

       var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
       camera.setPosition(new BABYLON.Vector3(0, 0, 0.001));
       camera.noRotationConstraint=true;
       camera.attachControl(canvas, true);
...
...
...   //this part seems redundant if I'm getting all that info from the ProjectionMatrix and setting it afterwards anyways
        camera.fov = fov
        camera.minZ = 10;
        camera.maxZ = 10000;
       camera.freezeProjectionMatrix( new BABYLON.Matrix.FromArray(ProjectionMatrix));

I had to scroll back on the mouse wheel to even see the cube and it still is off and way too big.Whereas in my old project, it is spot on.

image

The 2 meshes have the exact same world matrix and both cameras are giving the same exact Projection matrix. The only thing I updated in the project was any Three.js code to the equivalent Babylon.js code so everything else should be working the same. The only thing I couldn’t really find exact equivalence to, between the two, is the camera setup.

All of this leads me to believe I’m just royally screwing up the camera in the scene, though I know it could be a whole slew of other things. I’m just trying to cross some stuff off my list.

Any clues to what is the best camera setup that matches the Three.js I have at the beginning? Sorry for the ramble, if I need to clarify anything let me know. Any help is appreciated. Thanks!

2

Hi mikePanagos,

Welcome to Babylon! Is your AR scenario powered by WebXR? If so, it’s probably easier to use Babylon’s built-in WebXR support, which should take care of most things to do with the camera so you don’t have to do them manually.

If you’re not in a WebXR scenario, I have a few questions that might help me offer better recommendations.

  • Where does the FOV value come from and what value is it? I’m not super familiar with Three.js, but from what I can tell it looks like FOV in Three.js is expressed in degrees, whereas in Babylon it’s expressed in radians. Thus, if your FOV for your Three.js camera was 40, for Babylon it would need to be roughly 0.7. I think assigning degree values to a Babylon camera’s FOV would have unpredictable results based on the remainder of the degree value divided by pi.
  • Where is the object you’re trying to look at? Your ArcRotateCamera looks like it’s targeting the origin (0, 0, 0), but your camera’s position is only one millimeter away from the origin while your near clip plane is being set at ten meters. Thus, if the object you want to view is really at the origin, you’ll have to “back the camera up” 9.999 meters in order to prevent it from being clipped. More generally, it might also be worth looking at other types of Babylon cameras as I’m not sure an ArcRotateCamera will be the best fit for your scenario.
  • What is the ProjectionMatrix variable? I agree with your comment that setting the variables is probably redundant if you’re also setting the projection matrix directly, but I’d strongly recommend preferring the variables over the manual projection matrix unless you really need something very specific and nonstandard from your projection matrix, like a skew. Matrix layouts, handedness, and other conventions may not be shared between Babylon and other libraries like Three.js, so attempting to create matrices manually using the same array may produce different outputs in different libraries, making it generally easier to avoid interacting with projection matrices directly at all if you possibly can.

Hope this helps, and if not, please help me understand a bit better so I can give more useful advice. Thanks, and best of luck!

2 Likes
3

Hi @mikePanagos just checking in to see if you have any further questions :slight_smile: