Following a discussion in the comments, utilizing FBO with varied perspectives and using these textures as input for positioning in different views may be appropriate for your situation. Please review. It's important to note that this method does not involve drawing to a buffer, then reading pixels back, and applying them to a canvas.
EDIT1: Including pseudocode Using Three.js
Create an offscreen target:
rtTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, ..);
Create a screen, material, and mesh:
mtlScreen = new THREE.ShaderMaterial({ uniforms: { tDiffuse: { type: "t", value: rtTexture } },
mtl = new THREE.MeshBasicMaterial({ map: rtTexture });
mesh = new THREE.Mesh(plane, function(rtTexture));
scene.add(mesh);
Render to the offscreen first, then to display:
renderer.render(sceneRTT, cameraRTT, rtTexture, ..);
renderer.render(scene, camera);
Refer to the standard three example to access the full code - https://github.com/prabindh/three.js/blob/master/examples/webgl_rtt.html, and I shared a brief presentation on this at
Approach With GLES2:
Simple setup for FBO with GLES2 (minor adjustment to WebGL):
glGenFramebuffers(NUM_FBO, fboId);
glGenTextures(NUM_FBO, fboTextureId);
glGenTextures(1, ®ularTextureId);
Next is the setup for drawing to offscreen buffers:
GL_CHECK(glBindTexture(GL_TEXTURE_2D, 0));
GL_CHECK(glBindTexture(GL_TEXTURE_2D, fboTextureId[i]));
GL_CHECK(glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, globals->inTextureWidth, globals->inTextureHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL));
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));
GL_CHECK(glBindFramebuffer(GL_FRAMEBUFFER, fboId[i]));
GL_CHECK(glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, fboTextureId[i], 0));
Then draw to the offscreen buffer:
//Bind regular texture
GL_CHECK(glBindTexture(GL_TEXTURE_2D, 0));
GL_CHECK(glBindTexture(GL_TEXTURE_2D, regularTextureId));
add_texture(globals->inTextureWidth, globals->inTextureHeight, globals->textureData, globals->inPixelFormat);
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));
//Draw with regular draw calls to FBO
GL_CHECK(_test17(globals, numObjectsPerSide, 1));
Now use this as a texture input, and draw to the regular display:
GL_CHECK(glBindTexture(GL_TEXTURE_2D, fboTextureId[i]));
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR));
GL_CHECK(glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR));
//draw to display buffer
//Get back the display framebuffer and unbind the FBO
GL_CHECK(glBindFramebuffer(GL_FRAMEBUFFER, 0));
https://github.com/prabindh/sgxperf/blob/master/sgxperf_test17.cpp