Блог

Я пытаюсь обернуть плоскость вокруг конуса в three.js использование карты глубины для целей обучения. Я импортирую карту глубины в свой вершинный шейдер с помощью uniform, затем получаю из нее значение цвета по заданной uv-координате, а затем перемещаю z-значение вершины на заданное значение цвета:

 // Import depthmap
uniform sampler2D uDepthMap;

varying vec2 vUv;
 
void main() {   
    vUv = uv; 
    vec3 pos = position;

    // Get depthmap green value
    float bumpValue = texture2D(uDepthMap, vUv).g;

    // Move Z by greenvalue of depthmap
    pos.z = pos.z   bumpValue * 7.0;
    
    gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
}
  

Учитывая приведенную ниже карту глубины (плавный градиент) Я ожидаю, что моя плоскость создаст плавную кривую, но в дальних вершинах x плоскость выглядит так, как показано на изображении.

Итак, мне интересно, как использовать карту глубины, чтобы правильно согнуть плоскость в непрерывной кривой?

Редактировать:

Вот моя плоскость и настройки моей камеры;

 
   const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 60);

   const planeGeometry = new THREE.PlaneBufferGeometry(10,5,128,64);
   const planeMat = new THREE.ShaderMaterial(
            {
                wireframe: true,
                vertexShader: vshader,
                uniforms: this.uniforms,
                fragmentShader: fshader
            }
        );
  

Кроме того, все находится в настройках по умолчанию.