javascript - 如何从 Canvas 合成渲染大比例图像

Question

我正在考虑在我的艺术项目中使用 Three.js。我想做的是编写一些代码来生成一些图形，然后以高分辨率保存。当我说高分辨率时，我指的是 7000 x 7000 像素或更高，因为我想打印它。

到目前为止，我一直在使用 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/