What are maximum dimensions of Three.js render canvas?
Multi tool use
When I set render canvas size to ~4000x4000px it's ok, however starting from around 4000 (tested 5k, 6k, 8k) it seems that scene is "cut off" in some way. See image below:
So up to ~4k content is properly rendered in the center of canvas and for higher canvas sizes it cuts the content.
- Is it a Three.js/WebGL limitation?
- If yes then what are actual maximum canvas dimensions that don't cause any "deformations"?
- Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
javascript canvas three.js webgl
asked Nov 28 '18 at 11:14
user606521user606521
4,6521062141
add a comment |
When I set render canvas size to ~4000x4000px it's ok, however starting from around 4000 (tested 5k, 6k, 8k) it seems that scene is "cut off" in some way. See image below:
So up to ~4k content is properly rendered in the center of canvas and for higher canvas sizes it cuts the content.
- Is it a Three.js/WebGL limitation?
- If yes then what are actual maximum canvas dimensions that don't cause any "deformations"?
- Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
javascript canvas three.js webgl
asked Nov 28 '18 at 11:14
user606521user606521
4,6521062141
add a comment |
When I set render canvas size to ~4000x4000px it's ok, however starting from around 4000 (tested 5k, 6k, 8k) it seems that scene is "cut off" in some way. See image below:
So up to ~4k content is properly rendered in the center of canvas and for higher canvas sizes it cuts the content.
- Is it a Three.js/WebGL limitation?
- If yes then what are actual maximum canvas dimensions that don't cause any "deformations"?
- Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
javascript canvas three.js webgl
asked Nov 28 '18 at 11:14
user606521user606521
4,6521062141
When I set render canvas size to ~4000x4000px it's ok, however starting from around 4000 (tested 5k, 6k, 8k) it seems that scene is "cut off" in some way. See image below:
So up to ~4k content is properly rendered in the center of canvas and for higher canvas sizes it cuts the content.
- Is it a Three.js/WebGL limitation?
- If yes then what are actual maximum canvas dimensions that don't cause any "deformations"?
- Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
javascript canvas three.js webgl
javascript canvas three.js webgl
asked Nov 28 '18 at 11:14
user606521user606521
4,6521062141
asked Nov 28 '18 at 11:14
user606521user606521
4,6521062141
asked Nov 28 '18 at 11:14
user606521user606521
4,6521062141
asked Nov 28 '18 at 11:14
user606521user606521
4,6521062141
asked Nov 28 '18 at 11:14
user606521user606521
4,6521062141
4,6521062141
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
This is not a limitation of three.js but a limitation of the maximum size of the drawing buffer. It's defined by the browser vendor and can't be exceeded by an application. More information in this github issue:
https://github.com/mrdoob/three.js/issues/5194
answered Nov 28 '18 at 12:09
Mugen87Mugen87
3,2432621
add a comment |
Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
You can render portions of the scene using Camera.setViewOffset and then assemble the parts into a large image.
Here's library that does this
https://greggman.github.io/dekapng/
I know there is an answer here I wrote that shows how to do this in three.js since I wrote that library because of my answer. Unfortunately 10 minutes of searching didn't bring up >:(
answered Nov 29 '18 at 8:42
gmangman
48.6k17114205
This is awesome!
– user606521
Nov 29 '18 at 11:07
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53518155%2fwhat-are-maximum-dimensions-of-three-js-render-canvas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
This is not a limitation of three.js but a limitation of the maximum size of the drawing buffer. It's defined by the browser vendor and can't be exceeded by an application. More information in this github issue:
https://github.com/mrdoob/three.js/issues/5194
answered Nov 28 '18 at 12:09
Mugen87Mugen87
3,2432621
add a comment |
This is not a limitation of three.js but a limitation of the maximum size of the drawing buffer. It's defined by the browser vendor and can't be exceeded by an application. More information in this github issue:
https://github.com/mrdoob/three.js/issues/5194
answered Nov 28 '18 at 12:09
Mugen87Mugen87
3,2432621
add a comment |
This is not a limitation of three.js but a limitation of the maximum size of the drawing buffer. It's defined by the browser vendor and can't be exceeded by an application. More information in this github issue:
https://github.com/mrdoob/three.js/issues/5194
answered Nov 28 '18 at 12:09
Mugen87Mugen87
3,2432621
This is not a limitation of three.js but a limitation of the maximum size of the drawing buffer. It's defined by the browser vendor and can't be exceeded by an application. More information in this github issue:
https://github.com/mrdoob/three.js/issues/5194
answered Nov 28 '18 at 12:09
Mugen87Mugen87
3,2432621
answered Nov 28 '18 at 12:09
Mugen87Mugen87
3,2432621
answered Nov 28 '18 at 12:09
Mugen87Mugen87
3,2432621
answered Nov 28 '18 at 12:09
Mugen87Mugen87
3,2432621
3,2432621
add a comment |
add a comment |
Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
You can render portions of the scene using Camera.setViewOffset and then assemble the parts into a large image.
Here's library that does this
https://greggman.github.io/dekapng/
I know there is an answer here I wrote that shows how to do this in three.js since I wrote that library because of my answer. Unfortunately 10 minutes of searching didn't bring up >:(
answered Nov 29 '18 at 8:42
gmangman
48.6k17114205
This is awesome!
– user606521
Nov 29 '18 at 11:07
add a comment |
Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
You can render portions of the scene using Camera.setViewOffset and then assemble the parts into a large image.
Here's library that does this
https://greggman.github.io/dekapng/
I know there is an answer here I wrote that shows how to do this in three.js since I wrote that library because of my answer. Unfortunately 10 minutes of searching didn't bring up >:(
answered Nov 29 '18 at 8:42
gmangman
48.6k17114205
This is awesome!
– user606521
Nov 29 '18 at 11:07
add a comment |
Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
You can render portions of the scene using Camera.setViewOffset and then assemble the parts into a large image.
Here's library that does this
https://greggman.github.io/dekapng/
I know there is an answer here I wrote that shows how to do this in three.js since I wrote that library because of my answer. Unfortunately 10 minutes of searching didn't bring up >:(
answered Nov 29 '18 at 8:42
gmangman
48.6k17114205
Is there anything I can do about it? I need to get canvas snapshot in high resolution (8k).
You can render portions of the scene using Camera.setViewOffset and then assemble the parts into a large image.
Here's library that does this
https://greggman.github.io/dekapng/
I know there is an answer here I wrote that shows how to do this in three.js since I wrote that library because of my answer. Unfortunately 10 minutes of searching didn't bring up >:(
answered Nov 29 '18 at 8:42
gmangman
48.6k17114205
answered Nov 29 '18 at 8:42
gmangman
48.6k17114205
answered Nov 29 '18 at 8:42
gmangman
48.6k17114205
answered Nov 29 '18 at 8:42
gmangman
48.6k17114205
48.6k17114205
This is awesome!
– user606521
Nov 29 '18 at 11:07
add a comment |
This is awesome!
– user606521
Nov 29 '18 at 11:07
This is awesome!
– user606521
Nov 29 '18 at 11:07
This is awesome!
– user606521
Nov 29 '18 at 11:07
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53518155%2fwhat-are-maximum-dimensions-of-three-js-render-canvas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
MLj1L,uS,x,H,m9cjQWOBZcPBbRd4W,cbEQs37j24yLcNn0uwkDIHK,te53Wy,a4K6rxVL0Ht29s28 1oMAE7t fEY4YZHaWyq
