Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rendering BufferGeometry to a WebGLRenderingTarget #148

Open
salberternst opened this issue Mar 2, 2018 · 1 comment
Open

Rendering BufferGeometry to a WebGLRenderingTarget #148

salberternst opened this issue Mar 2, 2018 · 1 comment

Comments

@salberternst
Copy link

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

@salberternst
Copy link
Author

I am using the master branch d9d8dd3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant