Как нанести изображение текстуры на часть сферы или как вырезать (пересечь) прямоугольник поверхности сферы? - PullRequest
Новая
       10

Как нанести изображение текстуры на часть сферы или как вырезать (пересечь) прямоугольник поверхности сферы?

0 голосов
/ 08 января 2012

Я работаю с WebGL с использованием three.js, и у меня есть изображение, которое я хочу проецировать на (внутреннюю) поверхность сферы.Проблема, с которой я сталкиваюсь, состоит в том, как ограничить степень этого отображения горизонтальным и вертикальным полем зрения.Представьте, что вы проецируете изображение из центра сферы на ее прямоугольное сечение.

Я подозреваю, что могу сделать это одним из двух способов, но не уверен в том, как это сделать ...

1) Нанести текстуру на сферу на основе углов поля зрения.При наложении изображения прямо на сферу, как показано ниже, выполняется обтекание на 360x180 градусов.Используется ли фокус УФ-картирования или какая-либо другая техника? 

var sphere = new THREE.Mesh( 
    new THREE.SphereGeometry(radius, 60, 40), 
    new THREE.MeshBasicMaterial( 
        { map: THREE.ImageUtils.loadTexture( filename ) }
    )
);

2) Разрежьте сферу так, чтобы только часть поверхности покрывалась указанными углами (т.е. пересекалась с прямоугольникомпирамида), или создание эквивалентной криволинейной поверхности.Есть идеи?

1 Ответ

1 голос
/ 20 февраля 2012

Самый простой способ уменьшить проекцию - это настроить координаты UV в фрагментном шейдере: 

// how large the projection should be
uniform vec2 uScale;
...

// this is the color for pixels outside the mapped texture
vec4 texColor = vec4(0.0, 0.0, 0.0, 1.0);

vec2 scale = vec2(1.0/uScale.s, 1.0/uScale.t);
vec2 mappedUv = vUv*scale + vec2(0.5,0.5)*(vec2(1.0,1.0)-scale);

// if the mapped uv is inside the texture area, read from texture
if (mappedUv.s >= 0.0 && mappedUv.s <= 1.0 && 
    mappedUv.t >= 0.0 && mappedUv.t <= 1.0) {
  texColor = texture2D(map, mappedUv);
}

Для UV-координат THREE.SphereGeometry полное поле обзора в радианах составляет 2pi для x и pi дляу.Коэффициент масштабирования для уменьшенного поля равен vec2 (fovX / 2pi, fovY / pi).

Вы также можете выполнить УФ-масштабирование в вершинном шейдере.Другими способами являются копирование пасты https://github.com/mrdoob/three.js/blob/master/src/extras/geometries/SphereGeometry.js и изменение сгенерированных UV в соответствии с вашими коэффициентами масштабирования (uv * 1 / scale + 0.5 * (1-1 / scale))

Позвольте узнать, поможет ли это.

...