WEBGL/OPENGLES - How to join multiple renders in one?

Question

here's my problem:

I want to particionate the canvas in 4 virtual quadrants and in every quadrant I want to render the same scene with different colors(with different fragment shaders), to compare some effects in real time. I am not sure how to do that. Should I render the same scene 4 times in 4 different textures and then refill 4 rectangles with those textures? Or should I make another fshader and manually fill all the fragments with those textures? Any posibility to use render buffer objects to increase performance?

Thanks in advance,

Answer 1

You don't need render to texture for this (though that is one way). It can actually be done much more simply with gl.viewport.

gl.viewport simply sets a rectangle on the canvas that you want to render to. Anything that falls outside that rectangle is cropped. Typically you set it to the same size as the canvas because you want to render fullscreen, but in your case you can do the following:

// Clears the entire scene. gl.clear does not respect the viewport
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// Render upper left quadrant
gl.viewport(0, 0, canvas.width/2, canvas.height/2);
drawSceneWithShader(shader[0]);

// Render upper right quadrant
gl.viewport(canvas.width/2, 0, canvas.width/2, canvas.height/2);
drawSceneWithShader(shader[1]);

// Render lower left quadrant
gl.viewport(0, canvas.height/2, canvas.width/2, canvas.height/2);
drawSceneWithShader(shader[2]);

// Render lower right quadrant
gl.viewport(canvas.width/2, canvas.height/2, canvas.width/2, canvas.height/2);
drawSceneWithShader(shader[3]);

When rendering just render the whole scene like normal, you don't need to do anything special to account for the new viewport. (If you're doing any mouse picking or similar, though, you do need to account for the viewport!)