несколько текстур с одним DrawCall

Question

несколько текстур с одним DrawCall

1

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

мой фактический код - это.

var geometry = new THREE.Geometry();
    var materials = [];

    for(var p: number = 0; p < 1000; p++){
        var height = Math.floor((Math.random() * 100) + 50);

        var box = new THREE.BoxGeometry(10, 5, 10);        
        box.translate(
           Math.floor((Math.random() * 100) + 50), 
           Math.floor((Math.random() * 100) + 50), 
           Math.floor((Math.random() * 100) + 50));

        var texture = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load(textures[p])});
        texture.needsUpdate = true;

        geometry.merge(box);
        materials.push(texture);                         
     }

      var mesh = new THREE.Mesh(geometry, materials);        
      el.setObject3D("mesh", mesh);

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

Я использую a-frame v.0.7.1, но в этом случае я думаю, что это более третья проблема

Diagonal Think 26 окт. 2017, в 20:37

Источник

Теги:

javascript

three.js

aframe

1 ответ

Ещё вопросы

ngokevin · Accepted Answer · 2017-10-26T18-44-00.000Z

Вы можете объединить все ваши текстурные изображения в один атлас текстуры. А затем измените каждую геометрию UVs, чтобы указать на нужную текстуру.

https://solutiondesign.com/blog / -/blogs/webgl-and-three-js-texture-mappi-1

Фрагмент из этого руководства:

var texture = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load('textureatlas.png')});

var bricks = [
  new THREE.Vector2(0, .666),
  new THREE.Vector2(.5, .666),
  new THREE.Vector2(.5, 1),
  new THREE.Vector2(0, 1)
];

geometry.faceVertexUvs[0] = [];
geometry.faceVertexUvs[0][0] = [ bricks[0], bricks[1], bricks[3] ];
geometry.faceVertexUvs[0][1] = [ bricks[1], bricks[2], bricks[3] ];

Поскольку вы объединяете геометрию, просто нужно убедиться, что передача UVs (возможно, автоматически).

Благодарю. Я думаю, что это решение. Возможно ли создать текстурный атлас с динамическими изображениями? У меня есть массив изображений URL из Интернета, но любое изображение может быть изменено в любой момент. тогда полезно создавать атлас каждый раз, когда я загружаю страницу
Вы можете нарисовать их на холсте (см. Canvas drawImage API) и использовать его в качестве текстуры.