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

Answer 1

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.