Question

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

到目前为止，我一直在使用Flash和vvvv这样的东西，但我想知道这是否可行，以及是否有一些例子可用于three.js。

你可以在这里看到我的一些东西：https://www.behance.net/onoxo

Answer 1

WebGL通常有大小限制。大小限制的现代GPU可能是8192x8192（256meg）甚至16384x16384（一个演出），但在浏览器的其他区域（如屏幕截图所需的空间），您可能会耗尽内存。

你可以通过将较大图像的部分渲染为单独的部分然后将它们拼接在其他程序（如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/

如何从画布合成中渲染大比例图像

1 个答案: