Три JS WebGLRenderTarget имеет пустую текстуру - PullRequest
Новая
       38

Три JS WebGLRenderTarget имеет пустую текстуру

4 голосов
/ 25 января 2020

Используя A-Frame и Three. JS, я хочу выполнить рендеринг в WebGLRenderTarget и создать материал на основе его текстуры, например: 

var targetPlane = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(2, 2),
  new THREE.MeshBasicMaterial({color: 'blue'})
);
targetPlane.position.set(-2, 1, -2);
scene.add(targetPlane);

var redPlane = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(2, 2),
  new THREE.MeshBasicMaterial({color: 'red'})
);
redPlane.position.set(2, 1, -2);
scene.add(redPlane);

var myCamera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
myCamera.position.set(2, 1, 0);
scene.add(myCamera);

var myRenderer = new THREE.WebGLRenderer();
myRenderer.setSize(200, 200);
myRenderer.render(scene, myCamera);

var renderTarget = new THREE.WebGLRenderTarget(200, 200, {minFilter: THREE.LinearFilter,
                                                           magFilter: THREE.NearestFilter});
myRenderer.setRenderTarget(renderTarget);
myRenderer.render(scene, myCamera);

targetPlane.material = new THREE.MeshBasicMaterial({map: renderTarget.texture});
renderer.render(scene, camera);

В результате получается чистый белый материал , Настройки камеры правильные. Работает следующий код: 

 myRenderer.setRenderTarget(null);
 myRenderer.render(scene, myCamera);
 img.src = myRenderer.domElement.toDataURL();

Я сделал скрипку для демонстрации.

1 Ответ

2 голосов
/ 25 января 2020

Нельзя использовать цель рендеринга, созданную WebGLRenderer с другим экземпляром WebGLRenderer, поскольку ресурсы WebGL, такие как буферы, текстуры или программы шейдеров, не могут совместно использоваться в контекстах WebGL.

Следовательно, вы должны использовать renderer для создания цели рендеринга и рендеринга финальной сцены.

Обновленная скрипка: https://jsfiddle.net/x4snr9tq/

three.js R112.

...