Cameras: Is what you see, what you get?

Photo by Kyle Head on Unsplash

FreeCamera

The FreeCamera is the camera that almost everyone starts with when developing with Babylon.js. It’s the default camera in our starting Playgrounds. It was originally created as a way to freely move around a scene and lends itself well to FPS style gaming. The FreeCamera is free to move around a scene as far as the scene and coding will allow. For gaming and immersion, this camera is one of the best options.

Photo by Sean Stone on Unsplash
new FreeCamera(name: string, position: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean): FreeCamera
new UniversalCamera(name: string, position: Vector3, scene: Scene): UniversalCamera

FollowCamera

The FollowCamera is camera type that will take a given object and follow its movement. Think of the FollowCamera as a cameraman to an action movie. It will move and pan while trying to keep the object it’s tracking in the center. This camera serves as a more passive camera type for showing off the movement of something in a specific scene. Cinematic mode in Red Dead Redemption 2 is an ideal kind of scenario for a FollowCamera. It follows along, keeping the character in frame without input from the user.

Photo by Sam Moqadam on Unsplash
new FollowCamera(name: string, position: Vector3, scene: Scene, lockedTarget?: Nullable<AbstractMesh>): FollowCamera

ArcRotateCamera

The ArcRotateCamera is probably the second most commonly seen camera on Playgrounds and demos. The purpose of this camera is to take a specific point in a scene and have your camera focus on that point. Any movement will rotate around that singular point. This camera is best for showcasing a specific mesh or object. An example of this is in a game like Resident Evil where you’re given the option to view a item and rotate it to possibly find a clue.

new ArcRotateCamera(name: string, alpha: number, beta: number, radius: number, target: Vector3, scene: Scene, setActiveOnSceneIfNoneActive?: boolean): ArcRotateCamera
Visual Representation of camera parameters

Viewports

A viewport is can be defined as the position and size of a display from some source (like a camera). All cameras have a viewport object. By default, they start at the 0,0 screen coordinate and extend the full width and height of the display area. Its constructor looks like this:

new Viewport(x: number, y: number, width: number, height: number): Viewport
new Viewport(0,0,1,1)
// This creates and positions both free cameras
var p1 = new FreeCamera("player1", new Vector3(0, 5, -10), scene);
var p2 = new FreeCamera("player2", new Vector3(10, 5, -10), scene);
// Player 1 starts on the left and goes halfway across the screen
p1.viewport = new Viewport(0,0,0.5,1);
// Player 2 starts halfway through and goes to the end of the screen
p2.viewport = new Viewport(0.5,0,0.5,1);
There’s at least one camera showing up.
scene.activeCameras.push(p1);
scene.activeCameras.push(p2);

Layer Masks

When using cameras, there are times when you have a mesh in a scene but don’t want to display it for every single camera. Engines like Unity make use of a layer system where each object is on a layer and you can control what layers a camera can see. Babylon.js can do the same thing using a bit-wise style of assignment. If you take a look at this demo, you can see that there are three different cameras showing off three different views.

Left Layer Mask — 0x10000000, Middle — 0x30000000, Right — 0x10000000

Demo

Using both of these concepts, I’ve created a simple Resident Evil-style item viewer demo (Playground Demo).

In the Resident Evil series, you can pull up an item and rotate it around for more clues (Picture from: Red Book (Art Object) | Resident Evil Wiki | Fandom)
The dagger’s item view is overlaid on top of the main camera display. This gives you access to the movement of the item viewer’s ArcRotateCamera and allows you to retain situational awareness for the main camera.
itemCam.viewport = new BABYLON.Viewport(0.2, 0.3, 0.6, 0.6);
// Example of setting the layer mask
mainUITexture.layer.layerMask = 0x10000000;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Babylon.js

Babylon.js

1.4K Followers

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/