如何将 webGL 画布像这样交叉？

【问题标题】：How to quarter a webGL canvas crossed like it?如何将 webGL 画布像这样交叉？
【发布时间】：2017-03-22 07:17:50
【问题描述】：

我是 WebGL 的新手。

我可以制作画布，也可以在画布上绘制立方体。

这是在一张画布上绘制立方体和四面体的示例。以这种方式消耗，我想让它像下图一样。我的第一个想法是划分一个画布，第二个想法是制作四个画布。有什么更好的方法？

【问题讨论】：

这完全取决于你。对于每个不同的摄像机角度，我可能只使用一张画布和change the viewport。多个画布也可以正常工作。

标签： javascript html canvas webgl

【解决方案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
     ...
  }
}

【讨论】：