Three.js：如何旋转等矩形全景纹理

Question

我在单个网格内有 2 个纹理，代表 2 个等距柱状全景图像。我需要使用提供的坐标将 2 个纹理之一旋转到所需的位置。换句话说，在显示一个纹理之前，需要对其位置进行修改（移动/偏移）。我无法旋转网格，因为它包含 2 个纹理，只需要调整。

这是我的片段着色器：

uniform samplerCube tCube0;uniform samplerCube tCube1;uniform vec3 tCubePosition0;uniform vec3 tCubePosition1;uniform float scale0;uniform float scale1;uniform float tFlip;uniform float opacity;uniform float mixAlpha;varying vec3 vWorldPosition;
#include <common>
void main() {
    vec3 vWorldPositionScaled0 = mix(vWorldPosition, tCubePosition0, scale0);
    vWorldPositionScaled0.x *= -1.0;
    
    vec3 vWorldPositionScaled1 = mix(vWorldPosition, tCubePosition1, scale1);
    vWorldPositionScaled1.x *= -1.0;
    
    vec4 tex0, tex1;
    tex0 = textureCube(tCube0, vec3( tFlip * vWorldPositionScaled0.x, vWorldPositionScaled0.yz ));
    tex1 = textureCube(tCube1, vec3( tFlip * vWorldPositionScaled1.x, vWorldPositionScaled1.yz ));
    
    gl_FragColor = mix(tex1, tex0, mixAlpha);
}

我想将偏移量添加到我的

uniforms

offset0: { type: "v2", value: new THREE.Vector2(0, 0) }, 

并调整着色器：

    vec3 texCoord0 = vec3(tFlip * vWorldPositionScaled0.x, vWorldPositionScaled0.yz) + vec3(offset0, 0.0);
    tex0 = textureCube(tCube0, texCoord0);

但这会产生错误的结果。如何通过提供偏移坐标来移动/偏移/旋转纹理？

Answer 1

three.js

本身不支持等距矩形环境贴图。在着色器中处理它们之前，它们会在内部转换为立方体贴图格式。

立方体贴图通常像

three.js

中那样进行采样：

vec4 envColor = textureCube( envMap, vec3( flipEnvMap * reflectVec.x, reflectVec.yz ) );

• envMap

  代表立方体贴图采样器。

• flipEnvMap

  控制 px/nx 是否应翻转，因为立方体渲染目标的渲染方式与立方体贴图纹理不同。

• reflectVec

  是控制采样的反射向量。

当你想要旋转立方体贴图的采样时，你需要这个：

vec4 texColor = textureCube( envMap, reflectionMatrix * vec3( flipEnvMap * vWorldDirection.x, vWorldDirection.yz ) );

reflectionMatrix

变换反射向量并且是3x3矩阵均匀。理想情况下，您可以通过 JS 代码中的 Euler 对象来计算它。

希望

THREE.WebGLRenderer

能够在某个时候支持此功能：请参阅https://github.com/mrdoob/ Three.js/issues/16328。