Smooth camera rotation in webgl

886 Views Asked by At

I have implemented a simple version of a camera. It's only purpose is to look around the scene (which means only rotation). Every frame I update then the mat4.lookAt and mat4.perspective (javascript math library), but on mobile (f.e. android), the move arounds feels laggy. This is how i calculate yaw and pitch:

rotate(ev) {
    let xOffSet = ev.center.x - this._lastX;
    let YOffSet = this._lastY - ev.center.y;

    this._lastX = ev.center.x;
    this._lastY = ev.center.y;

    let sensitivity = 0.005;
    xOffSet *= sensitivity;
    YOffSet *= sensitivity;

    this._yaw += xOffSet;
    this._pitch += YOffSet;
}

and with the updated yaw and pitch I recalculate the matrices:

updateViewProjMatrix() {
    let gl = Core.mGetGL();
    this._frontVector[0] = Math.cos(this._yaw) * Math.cos(this._pitch);
    this._frontVector[1] = Math.sin(this._pitch);
    this._frontVector[2] = Math.sin(this._yaw) * Math.cos(this._pitch);

    vec3.normalize(this._lookAtVector, this._frontVector);
    vec3.add(this._lookAtVector, this._lookAtVector, this._positionVector);

    mat4.lookAt(this._viewMatrix, this._positionVector, this._lookAtVector, this._upVector);
    mat4.perspective(this._projMatrix, this._fov * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, this._nearPlane, this._farPlane);
    mat4.multiply(this._vpMatrix, this._projMatrix, this._viewMatrix);
}

Is there a way I can improve my camera? Or would you do something completey different? If so what would you change?

0

There are 0 best solutions below