Camera changes in WebGL
Performing camera changes on a mobile skewish example made in WebGL
In this article I will explain the process of making camera interactions in WebGL, making some perspective changes by letting the program go from 1st person to 3rd person to long shot. I will use the last example of a mobile skewish (shown below) and modify it so we can customize the camera angles and views for this mobile example.
Adding the buttons
To make our camera interactive, we need to have some tool that lets us alter the variables of the camera view, such as a button that changes our position, angle and field of view. In order to do this, we will first add our buttons for every different view in our example:
With this we see that we now have the three buttons that will trigger a first person view, a third person view and a long shot, respectively.
Altering the camera’s properties
In order to get our camera to change its behavior and caracteristics, we will need to define some variables that will be changing every time the user changes the view, and directly affect the camera’s properties:
Notice that we establish the camera’s variables with a default value. The isFP value indicates whether the user selected the first person view or not (this will be useful later on). Then, we have the variables of the camera that we want to adjust depending on the selected view. The translation indicates the position of the camera, while the rotation is the camera’s angle. Notice we have a “targetRotation” and a “targetTranslation”. We will explain this variables later on.
Now, we have to define some functions that change these variables over time:
With this done, every time the user clicks a certain button it will change the variables’ values to the ones indicated in the function. Now we only need to make the changes appear in the camera itself.
Executing the changes in the camera
In order to make the buttons do the changes that we want, we need the program to check for changes of our variables in every frame. That’s why we define the camera matrix inside the drawScene function, which executes at every frame thanks to the requestAnimationFrame(drawScene) code that we put outside the function:
The important part in this code is the definition of the cameraMatrix. Notice how we define our matrix in terms of the fieldOfView and then we make the corresponding translation and rotations for the camera.
Adding some details
With this, we are ready to have the multiple views in our example, depending on which one did the user click on. But as an additional feature for our example, we can easily make it transition from one view to another as smoothly as it can be. This is why we set up a variable called targetRotation and targetTraslation. Instead of changing the rotation and traslation variable instantly when our user presses the button, we are going to use the following piece of code inside the drawScene function, so every frame we update our camera’s variables progressively until we get to our target rotation and traslation:
With this piece of code, we now update our rotation and translation every frame by 5 units, until we get to the desired value. This helps us do the transitions from one view to another in a more natural manner.
Finally, we used the previosuly shown variable isFP to determine whether our example is in the first person view or not. This is done with the intention of adding some sort of rotation in the z axis of the camera, so the camera is rotating at the same rate as the cube, so it feels like I am the cube. This is done in the following piece of code:
Conclusion, time log and final result
We managed to add simple camera views for our mobile model in WebGL. The definition of the camera matrix inside the drawScene is the key that makes it work so smoothly.
With the help of some libraries we managed to do this in a fairly short amount of time. I estimated 6 hours for the developement of this example, considering that I never worked with camera physics before, but WebGL’s tools made it really simple so I only needed 4 hours for the working example:
