microsoft / HoloJS

Provides a framework for creating holographic apps using JavaScript and WebGL.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Rendering BufferGeometry to a WebGLRenderingTarget

salberternst opened this issue · comments

Hi,

I have a problem rendering BufferGeometry (like PlaneBufferGeometry, BoxBufferGeometry etc) to a WebGLRenderingTarget using threejs in holojs. I seems like nothing is rendered to the framebuffer and I don't get any error messages. However, using the corresponding non-buffered geometries like PlaneGeometry or BoxGeometry is working just fine.

I modified the app.js from ThreeJSApp example to demonstrate this behavior:

const canvas = document.createElement("exp-holo-canvas");
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
});
const camera = new THREE.HolographicCamera();
const scene = new THREE.Scene();

const sceneRTT = new THREE.Scene();
const cameraRTT = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
const textureRTT = new THREE.WebGLRenderTarget(512, 512, {
    minFilter: THREE.NearestFilter,
    magFilter: THREE.NearestFilter,
    format: THREE.RGBFormat
});
//const meshRTT = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x00FF00 }));
const meshRTT = new THREE.Mesh(new THREE.BoxBufferGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x00FF00 }));
meshRTT.position.set(0, 0, -2);
sceneRTT.add(meshRTT);

const geometry = new THREE.PlaneBufferGeometry(0.4, 0.4, 0.4);
const material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    map: textureRTT.texture
});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

function animate() {
    requestAnimationFrame(animate);

    renderer.setClearColor(new THREE.Color(0, 0, 1));
    renderer.render(sceneRTT, cameraRTT, textureRTT, true);

    renderer.setClearColor(new THREE.Color(0, 0, 0));
    renderer.render(scene, camera);

    plane.lookAt(camera.position);

    camera.update();

    meshRTT.rotateY(0.1);
}

animate();

Any help would be appreciated. Thank you

I am using the master branch d9d8dd3