如何從畫布合成渲染大型圖像

Question

我正在考慮為我的藝術項目使用three.js。 我要做的是編寫一些代碼，生成一些圖形，然后將其保存為高分辨率。 當我說高分辨率時，我的意思是7000 x 7000 px或更高，因為我想打印它。

到目前為止，我一直在使用Flash和vvvv做類似的事情，但是我想知道這是否可行，並且three.js中是否提供了一些示例。

您可以在這里看到我的一些東西： https : //www.behance.net/onoxo

Answer 1

WebGL通常有大小限制。 大小限制為現代GPU可能是8192x8192（256meg）甚至是16384x16384（1 gig），但在瀏覽器的其他區域（如屏幕截圖所需的空間），您可能會耗盡內存。

您可以通過將較大圖像的各個部分渲染為單獨的部分，然后在其他一些程序（例如photoshop或gIMP）中將它們縫合在一起來解決此問題。

在Three.js中，您可以執行以下操作。 假設您抽取其中一個樣本

function makeScreenshots() {
  var desiredWidth = 7000;
  var desiredHeight = 7000;
  var stepX = 1000;
  var stepY = 1000;
  for (var y = 0; y < desiredHeight; y += stepY) {
    for (var x = 0; x < desiredWidth; x += stepX) {
      camera.setViewOffset( desiredWidth, desiredHeight, x, y, stepX, stepY );
      renderer.render( scene, camera );
      var screenshotDataURL = renderer.domElement.toDataURL();
      saveScreenshot( "screenshot" + x + "-" + y + ".png", screenshotDataURL );
    }
  }
}

注意：您必須提供saveScreenshot函數，並且很可能正在運行一個微型的node.js或python服務器來保存屏幕截圖，但是通過這種技術，您通常可以生成幾乎任何想要的分辨率圖像。

參見： https : //greggman.github.io/dekapng/