如何從畫布構圖渲染大尺寸圖像

我正在考慮爲我的藝術項目使用three.js。我想要做的是編寫一些代碼來生成一些圖形，然後以高分辨率保存它。當我說高分辨率時，我的意思是像7000 x 7000像素或更多，因爲我想打印它。如何從畫布構圖渲染大尺寸圖像

到目前爲止，我一直在使用Flash和vvvv等類似的東西，但是我想知道這是否可行，以及three.js中是否有可用的示例。

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

來源

2014-12-20 onoxo

現代顯卡支持8192x8192及更高的紋理尺寸。使用帶有顏色附件的「framebuffer」對象可以解決這個問題。您可以使用'ctx.getParameter（ctx.MAX_TEXTURE_SIZE）'查詢支持的紋理尺寸。 –

WebGL的一般有大小限制。尺寸限制的現代GPU可能是8192x8192（256meg）甚至16384x16384（一個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服務器上運行使用保存的截圖，但使用這種技術，你可以通常會生成幾乎所有你想要的分辨率圖像

來源

2014-12-21 05:27:44 gman

如何從畫布構圖渲染大尺寸圖像

回答

相關問題