使用WebGL进行音频空间化

Question

我目前正在开发一个小项目,在那里我使用WebGL渲染CubeMap,然后使用"web audio API" Web Audio API应用一些声音

编辑:实例

由于项目非常庞大,我只想解释一下我在寻找什么.当我加载音频文件时,声音变得可视化(看起来像一个立方体).音频监听器位置始终位于位置0,0,0.什么是迄今为止我所做的是我创建"相机"(GL数学库)与lookAt和perspective而当我从音频发射立方体旋转的摄像头了,播放的音频应不同的声音.

我怎么做的？

每帧我将PannerNode(panner节点设置方向)的方向设置upVector为摄像机的方向.这是每一帧update-Method(声音):

  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]);
}

这是updateViewProjectionMethod我的Camera类中的-Methof,我在其中更新了Orientation 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);
}

这是正确的方法吗？如果我旋转相机,我可以听到声音不同,但我不确定.我是否必须将结果upVector与当前相乘viewProjectionMatrix？