Как визуализировать крупномасштабные изображения из композиции холста

Question

Я подумываю о том, чтобы использовать three.js для моего арт-проекта. Я хочу написать код, который генерирует некоторую графику, а затем сохраняет ее в высоком разрешении. Когда я говорю о высоком разрешении, я имею в виду что-то вроде 7000 x 7000 px или более, потому что я хотел бы его распечатать.

До сих пор я делал что-то подобное с Flash и vvvv, но я хотел бы знать, возможно ли это, и если есть несколько примеров, доступных в three.js.

Вы можете увидеть некоторые из моих вещей здесь: https://www.behance.net/onoxo

Answer 1

WebGL обычно имеет ограничение на размер. Современные графические процессоры, размер которых может составлять 8192x8192 (256 мегабайт) или даже 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 или сервер питона работает использовать, чтобы сохранить скриншоты, но с этой техникой, вы можете обычно генерируют почти любое изображение с разрешением, которое вы хотите.