Question

我目前正在开发一个小项目，在那里我使用WebGL渲染CubeMap，然后使用＆＃34; web音频API＆＃34; Web Audio API

由于项目非常庞大，我只想解释一下我在寻找什么。当我加载音频文件时，声音变得可视化（看起来像一个立方体）。音频监听器位置始终位于位置0,0,0。到目前为止我所做的是我创造了＃34; Camera＆＃34; （gl math library）lookAt和perspective，当我将相机从发声立方体旋转时，播放的音频应该听起来不同。

我是怎么做到的？

每帧我将PannerNode（panner node set orientation）的方向设置为摄像机的upVector。这是每一帧update - 方法（声音）：

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

以下是我的Camera类中的updateViewProjectionMethod - Methof，我在其中更新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相乘？

使用WebGL进行音频空间化

0 个答案: