ID рендеринг + диффузный рендеринг в THREE.js - PullRequest
Новая
       8

ID рендеринг + диффузный рендеринг в THREE.js

0 голосов
/ 10 октября 2018

Я пытаюсь использовать onBeforeRender для добавления функции переопределения материала id в мое приложение THREEjs.Это довольно распространенная функция для рендеринга приложений, и я хотел бы иметь возможность использовать scene.overrideMaterial для этого, но из моих исследований кажется, что я собираюсь свернуть свое собственное.

Мой подход заключается в следующем.

Когда я создаю экземпляры объектов: 

...
      m.onBeforeRender = function (){
        if(Renderer._renderID){
            this.material = new THREE.MeshBasicMaterial(this.userData.idColor.getHex());
            this.material.needsUpdate = true;

            // Attempt at using a shader material
            //this.material = Renderer._idMat;
            //this.material.uniforms.idColor.value = this.userData.idColor;
            //this.material.uniforms.needsUpdate = true;
        }
      }
      m.onAfterRender = function (){
            if(Renderer._renderID){
                this.material = this.userData.material;
            }
      }
...

В моем цикле рендеринга: 

...
        var idTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
        Renderer._renderID = true;
        Renderer._renderer.render(Renderer._scene, Renderer._camera, idTarget);
        Renderer._renderID = false;
...

В данный момент буфер id и диффузный буфер обарендеринг с диффузным материалом.

Любая помощь будет высоко ценится.Пожалуйста, дайте мне знать, если потребуется дополнительная информация, я обновлю этот пост.

1 Ответ

0 голосов
/ 10 октября 2018

Three.js имеет официальный пример выбора графического процессора, который можно увидеть здесь .

Кажется, они воспроизводят вещи в двух разных сценах и с цветами вершин.Это не плохой подход, и я не согласен с комментарием и вашим закомментированным кодом.Изменение униформы - не единственный способ добиться этого, официальный пример использует цвета вершин и объединяет все геометрии.

Есть много способов снять шкуру с этой кошки.

Вы должны во что бы то ни стало избегать создания новых материалов в тесных петлях.

Это suuuuper bad: 

  m.onBeforeRender = function (){
    if(Renderer._renderID){
        this.material = new THREE.MeshBasicMaterial(this.userData.idColor.getHex()); //just a big NO
        this.material.needsUpdate = true; //no it doesnt! it's a new material it has this true by default

Для достижения чего-то подобногоили ваше собственное переопределение: 

const myMesh = new Mesh()
myMesh.myMaterials = [
  someRenderMaterial,
  someIDMaterial,
]

scene.traverse(o=>{if(o.myMaterials) o.material = o.myMaterials[1]})
renderer.render(scene,camera)

scene.traverse(o=>{if(o.myMaterials) o.material = o.myMaterials[0]})
renderer.render(scene,camera)

Но, опять же, есть много способов сделать это.Вы можете просто сделать другую сцену и визуализировать цвета вершин.Вы можете сделать материал переопределения и визуализировать цвета вершин.Много параметров, много перестановок.

...