'Audio spatialization with WebGL

I currently work on a little Project, where I render a CubeMap with WebGL and then apply some sounds with the "web audio API" Web Audio API

Since the project is very large, I just try to explain what I am looking for. When I load an audio file, the sounds gets visualized (looks like a cube). The audio listener position is ALWAYS at position 0,0,0. What I have done so far is that I have created "Camera" (gl math library) with lookAt and perspective and when I rotate the camera away from the audio emitting cube, the audio played should sound different.

How am I doing this?

Every Frame I set the the orientation of the PannerNode (panner node set orientation) to the upVector of the camera. Here is the every frame update-Method (for the sound):

  update(camera) {
    this._upVec = vec3.copy(this._upVec, camera.upVector);
    //vec3.transformMat4(this._upVec, this._upVec, camera.vpMatrix);
    //vec3.normalize(this._upVec, this._upVec);
    this._sound.panner.setOrientation(this._upVec[0], this._upVec[1], this._upVec[2]);
}

And here is the updateViewProjectionMethod-Methof from my Camera class, where I update the Orientation of the listener:

  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);
    Core.getAudioContext().listener.setOrientation(this._lookAtVector[0], this._lookAtVector[1], this._lookAtVector[2], 0, 1, 0);
}

Is this the right way? I can hear that the sound is different if I rotate the camera, but I am not sure. And do I have to multiply the resulting upVector with the current viewProjectionMatrix?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source