如何把一个webGLcanvas四分之一划线之类的呢？

Question

我是 WebGL 的新手。

我可以制作 canvas，我可以在 canvas 上画立方体。

这是在一个立方体和四面体上绘制的例子canvas。这样展开，我想让它像下图一样。我的第一个想法是分一个 canvas，第二个想法是分四 canvas。什么是更好的方法？

Answer 1

您可以使用剪刀和视口命令分割 canvas

// 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
     ...
  }
}

如何把一个webGLcanvas四分之一划线之类的呢？

How to quarter a webGL canvas crossed like it?

html

javascript

canvas

webgl