WEBGL/OPENGLES - 如何在一箇中加入多個渲染？

Question

這裏是我的問題：

我想particionate畫布在4個虛擬象限，每個象限我想 呈現不同顏色的同一場景（不同的片段着色器），比較一些實時的效果。我不知道該怎麼做。 我應該在4種不同的紋理中渲染4次相同的場景，然後用這些紋理重新填充4個矩形？或者我應該做另一個fshader並手動填充所有這些紋理碎片？任何使用渲染緩衝區對象來提高性能的可能性？

在此先感謝，

Answer 1

您不需要渲染紋理（雖然這是一種方式）。它實際上可以用gl.viewport簡單得多。

gl.viewport只是在畫布上設置一個矩形，您想渲染。任何落在該矩形之外的東西都會被裁剪掉。通常將它設置爲相同大小的畫布，因爲要呈現全屏，但在你的情況，你可以做到以下幾點：

// 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]); 

當渲染只呈現整個場景像正常的，你並不需要做任何特別的事情來解釋新的視口。 （但是，如果您正在做任何鼠標拾取或類似操作，您確實需要考慮視口！）