Jump to content

Variable resolutions with fixed values


Recommended Posts

I'm on a project that I eventually would like to render at 3840x2160 (with a final frame by frame export to MP4).
But during development, I would like to work at 1920x1080 as a native resolution so that I can benefit from a decent quality in terms of previews.
While working, I want to be able to switch previews from 960x440 to  1280x720 and 1920x1080.

Right now, I set the actual size of the canvas to 3840x2160 by default but resize it through css to the 3 other smaller sizes for visualisation when needed.
The result is always sharp and I like the preview flexibility it but the native high resolution makes heavy scenes a bit laggy sometimes, which is not ideal while working.
I can't go down to a native resolution of 1920x1080 because, to convert it to 3840x2160 later on, I would have to convert all my values (positions and transformations). And this is my main issue actually.

So here is my question: how can I do so that I can work at any resolution I want and easily upscale it to a better resolution later one while not having to convert my values ? This all while preserving the best rendering quality from the beginning to the end?

I think it will have to do with the resolution settings and the pixelRatio but I'm not sure how this works relative to my problem.

To summarize, I want:

Final render: 3840x 2160 (native)
Working resolution: 1920x1080 (native)
Working preview 960x440, 1280x720 and 1920x1080 (CSS resize)
And I don't want to have to mess with the values when I set up the final rendering.

I don't need help for the css part. I just need to know how I can make sure that I can work in 1920x1080 and seemlessly upscale to 3840x 2160 later on without messing with the values.


Link to comment
Share on other sites

  • 2 weeks later...

Create canvas with full resolution. Change the renderer resolution and canvas width/height with css.

So for example something like this:

Canvas width & height values always at 3840 x 2160.
3840 x 2160 => CSS width & height as 3840 x 2160, resolution 1
1920 x 1080 => CSS width & height as 1920 x 1080, resolution 0.5
1280 x 720 => CSS width & height as 1280 x 720, resolution 0.33
and so on.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...