webGLキャンバスを四分の一にするにはどうすればいいですか？

Question

私はWebGLの初心者です。

私はキャンバスを作ることができ、私はキャンバス上にキューブを描くことができます。

これは、1つのキャンバスに立方体と四面体を描画する例です。 このようにして、画像のようにしたいと思います。 私の最初のアイデアは1つのキャンバスを分割すること、そして2番目のアイデアは4つのキャンバスを作ることです。 もっと良い方法は何ですか？

Answer 1

あなたははさみやビューポートを使用してキャンバスを分割することができ

// turn on the scissor test 
gl.enable(gl.SCISSOR_TEST); 

var width = gl.canvas.width; 
var height = gl.canvas.height; 

for (var y = 0; y < 2; ++y) { 
    for (var x = 0; x < 2; ++x) { 

    // set both the scissor (which clips pixels) 
    // and the viewport (which sets the clip space -> pixel space conversion); 
    gl.scissor(x * width/2, y * height/2, width/2, height/2); 
    gl.viewport(x * width/2, y * height/2, width/2, height/2); 

    ... 
    draw your scene here 
    ... 
    } 
}