Three.js render to texture synch cameras

Question

I've to apply an alpha coloring filter to a point cloud like it's described on this link: https://www.mapbox.com/blog/colorize-alpha-image-filter/ to achieve a sort of heatmap.

I'm rendering a 2d point cloud on a texture and than render it into a plane using a custom shader that handle the colorize-alpha filtering.

The problem is that I don't understand how I can correctly zoom inside the texturized pointcloud but keeping the original size of the pointcloud points.

I've created a simplified example without a real colorize-alpha filtering, but with the structure of my render-to-texture: http://jsfiddle.net/q8fpt7eL/1/

The effect I want to achieve is exactly the same you can achieve when you draw directly the point cloud. On the jsfiddle you can just comment the RTT part and un-comment the render directly part to see what I'm speaking about.

//render to texture
//renderer.render(sceneRTT, cameraRTT, rtTexture, false);
//renderer.render(scene, camera);

//render directly the point cloud
renderer.render(sceneRTT, camera);

I've already tried to use the same camera, or to copy the camera position/rotation on the cameraRTT object but seems not working correctly. I've also tried with orthographic camera on RTT scene but without success.

Anyone have an idea how can I achieve my goal?

Thanks

Adam Finley Adam Finley · Accepted Answer · 2015-07-13T16:09:57

On line 41, you are setting the OrbitControls to control the camera of the "plane scene", when you really want it to control the RTT scene. Try this:

new THREE.OrbitControls(cameraRTT, renderer.domElement);

That looks much better, you can zoom inside the point cloud.

Lastly, all you have to do is make camera orthographic and setup your plane so it fills the scene.

Three.js render to texture synch cameras

1 Answers