Установка текстуры в геометрию в Three.js - PullRequest
Новая
       10

Установка текстуры в геометрию в Three.js

0 голосов
/ 15 мая 2019

У меня есть такая геометрия: Изображение

Я хочу добавить тот же эффект, что и горы со снежной текстурой и т. Д.:
Текстура разбрызгивается с Three.js

Немного предыстории, какую информацию я даю шейдерам из Three.js: 

//importing grass and snow textures:
var grassTexture = new THREE.ImageUtils.loadTexture( 'images/grass-512.jpg' );
grassTexture.wrapS = grassTexture.wrapT = THREE.RepeatWrapping;
var snowTexture = new THREE.ImageUtils.loadTexture( 'images/snow-512.jpg' );
snowTExture.wrapS = snowTExture.wrapT = THREE.RepeatWrapping;

this.customUniforms = {
 grassTexture:  { value: grassTexture },
 snowTexture:   { value: snowTexture },

};
var customMaterial = new THREE.ShaderMaterial({
 uniforms: customUniforms,
 side: THREE.DoubleSide,
 vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
 fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
});
//creating mesh, geometry is the model in picture.
mesh = new THREE.Mesh(geometry, customMaterial);

Вершинные и фрагментные шейдеры: 

//vertexShader:
varying vec2 vUV;

void main(){
 vUV = uv;
 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

Я получаю полную красную модель с этим: 

//fragmentShader:
void main(){
 gl_FragColor = vec4(1, 0.0, 0.0, 1.0) ;
}

Мне нужны текстуры, которые выше при использовании snowTexture и ниже при использовании grassTexture. 

uniform sampler2D grassTexture;  
uniform sampler2D snowTexture;
varying vec2 vUV;
//Something like this?:
vec4 grass = texture2D( grassTexture, vUV);
vec4 snow = texture2D( snowTexture, vUV);
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) + grass + snow;

1 Ответ

0 голосов
/ 15 мая 2019

Это действительно не так сложно понять, позвольте мне провести вас через логику.

В вашем случае вы не хотите использовать карту смещения.Итак, вам нужно установить varying height на вашем vertexShader для сопоставления ваших верхних координат [0,1] с вашим фрагментом. 

//vertexShader:
varying vec2 vUV;
varying float height;

void main() {

  vUV = uv;

  float maxPosition = 30.0; // this is an example value.
  height = max( 0.0, min(1.0, position.y/maxPosition ) ); // assuming +y is up

  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}

Теперь вы можете получить доступ к height из вашего фрагментаShader ииспользуйте эту информацию, чтобы выбрать, где вы хотите, чтобы ваши переходы происходили. 

uniform sampler2D grassTexture;  
uniform sampler2D snowTexture;

varying vec2 vUV;
varying float height;

void main(){

  vec4 grass = (1.0 - smoothstep( 0.48, 0.52, height)) * texture2D( grassTexture, vUV);
  vec4 snow =  (smoothstep(0.48, 0.52, height) - 0.0) * texture2D( snowTexture, vUV);

  gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) + grass + snow;

}

В предоставленной ссылке используется функция smoothstep для постепенного перехода между текстурами.Мы можем создавать переходы, используя следующий шаблон ( a - b ) * textureColor.

В этом случае a определяет, когда текстура начинает вносить вклад в цвет фрагмента.b контролирует, когда текстура перестает вносить свой вклад.

Другими словами, ваша текстура травы уже начала вносить свой вклад на каждой высоте, поэтому мы сопоставляем a с 1,0.Он прекращает вносить около 0,5, поэтому мы даем b плавное затухание по мере приближения к 0,5.

С другой стороны, ваша текстура снега начнет давать только около 0,5.Итак, мы даем a плавное постепенное увеличение при приближении к 0.5.Это никогда не прекратит вносить свой вклад, поэтому мы устанавливаем b как 0.0.

Надеюсь, что это прояснит для вас.

...