Aframe загружает текстурированный объект с помощью собственного шейдера GLSL - PullRequest
Новая
       10

Aframe загружает текстурированный объект с помощью собственного шейдера GLSL

0 голосов
/ 17 сентября 2018

Я работаю над загрузкой OBJ-файлов с помощью mtl-файлов. Загрузился успешно.
Теперь я должен написать свои собственные шейдеры GLSL для тех моделей, которые я загрузил.
Но я не знаю, как передать такие значения, как texcoords, vertex normal и т. Д.
Мне нужны эти значения, чтобы использовать их в моих собственных шейдерах. Может кто-нибудь дать мне образец текстурированного файла obj с пользовательским шейдером или научить, как это сделать в рамке?

1 Ответ

0 голосов
/ 21 сентября 2018

Как только вы загрузите OBJ, возьмите ручку на сетку: 

el.addEventListener('object3dset', () => {
  var mesh = el.getObject3D('mesh');
});

Затем вы можете применить свой собственный ShaderMaterial: 

mesh.material = new THREE.ShaderMaterial({
  uniforms: {
    texture: { type: 't', value: 0, texture: new THREE.TextureLoader().load( 'texture.jpg' ) }
  },

  vertexShader: document.getElementById( 'vertexShader' ).textContent,

  fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});

В вершинном шейдере у вас есть доступвершина нормальная.https://threejs.org/docs/#api/en/renderers/webgl/WebGLProgram

attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

Вершинный шейдер запускается первым;он получает атрибуты, вычисляет / манипулирует положением каждой отдельной вершины и передает дополнительные данные (вариации) в шейдер фрагмента.

В фрагментном шейдере вы можете сэмплировать текстуру: 

texture2D(texture, vec2(0, 0));

https://threejs.org/docs/#api/en/materials/ShaderMaterial

...