How to Draw Panoramic Rooms?

Questions, skill improvement, and respectful critique involving art assets.
Post Reply
Message
Author
User avatar
Katy133
Miko-Class Veteran
Posts: 704
Joined: Sat Nov 16, 2013 1:21 pm
Completed: Eight Sweets, The Heart of Tales, [redacted] Life, Must Love Jaws, A Tune at the End of the World, Three Guys That Paint, The Journey of Ignorance, Portal 2.5.
Projects: The Butler Detective
Tumblr: katy-133
Deviantart: Katy133
Soundcloud: Katy133
itch: katy133
Location: Canada
Contact:

How to Draw Panoramic Rooms?

#1 Post by Katy133 »

Ren'py allows creators to use backgrounds that the player can scroll around, if the image is larger than the screen dimensions (see: Ren'Py's Tutorial game for an example).

This can be used to let the player look around all four walls of a room. The challenge however, is that you'd need to draw the room as a panorama.

These are photographic panoramas. Note how the perspective bends everything. But if you were to "crop" the whole image, the perspective will look normal.

Image
Source.

Another example. | Source

My question is, how do you draw a panoramic room? Tutorial links are welcome.
ImageImage

My Website, which lists my visual novels.
Become a patron on my Patreon!

User avatar
puppetbomb
Regular
Posts: 123
Joined: Fri May 19, 2017 4:04 pm
Tumblr: puppetbomb
itch: puppetbomb
Location: USA
Contact:

Re: How to Draw Panoramic Rooms?

#2 Post by puppetbomb »

For a panoramic background, you can have as many vanishing points as you like, but the horizon line cannot change.

So here's an example of a background that's extended to be more panoramic:
Image

If you want to extend it further, you can round the point where the wall gets closest to you and redirect it to another vanishing point.

User avatar
Katy133
Miko-Class Veteran
Posts: 704
Joined: Sat Nov 16, 2013 1:21 pm
Completed: Eight Sweets, The Heart of Tales, [redacted] Life, Must Love Jaws, A Tune at the End of the World, Three Guys That Paint, The Journey of Ignorance, Portal 2.5.
Projects: The Butler Detective
Tumblr: katy-133
Deviantart: Katy133
Soundcloud: Katy133
itch: katy133
Location: Canada
Contact:

Re: How to Draw Panoramic Rooms?

#3 Post by Katy133 »

@pupptbomb: Regarding the horizon line, that's a useful observation. Thanks! Knowing that makes things seem a lot clearer, because while the floor-meeting-the-walls are really curved and warped, the horizon line is always linear.

Okay, I've made a new discovery. I made a draw-over of the panorama from the original post (see attachment), and outlined the floor and ceiling's perspective/grid in red and black, and the walls' corners in blue. With that, we have a much clearer picture of where the vanishing points are (where the red lines cross on the horizon line).

The way I see it, there's now a noticeable pattern of how to draw a panoramic room from scratch: If you first create some sort of grid divided into four segments (one for each room), placing a vanishing point in each, and bending the floor/ceiling lines to cross over into the next vanishing point.

The problem now is, how do you create such a grid/template properly? How do you measure it so that it looks not too warped (for a typical visual novel screen--say, 1280 by 720), yet not too stretched out--which would also stretch the furniture?
Attachments
panoramicCapture.PNG
ImageImage

My Website, which lists my visual novels.
Become a patron on my Patreon!

User avatar
Abbie
Newbie
Posts: 24
Joined: Thu Feb 02, 2017 10:04 am
Projects: Siren's Ballad
Organization: Kasztan Studio
Tumblr: sirensballad-vn
Deviantart: kairek
itch: kairekxkairek
Location: Poland
Contact:

Re: How to Draw Panoramic Rooms?

#4 Post by Abbie »

I found article about this kind of perspective shot. It includes grid for spherical shot too.
ImageImage

User avatar
ComputerArt.Club
Veteran
Posts: 427
Joined: Mon May 22, 2017 8:12 am
Completed: Famous Fables, BoPoMoFo: Learn Chinese, Santa's workshop, Cat's Bath, Computer Art Club
Location: Taiwan
Contact:

Re: How to Draw Panoramic Rooms?

#5 Post by ComputerArt.Club »

If I were you I would block out the room in Blender(a free 3D software package that also does a lot more), render a panorama and then draw over it in an image editor. I found a short tutorial (less than 2 mins) on how to render a panorama in Blender:

[youtube]https://youtu.be/Z-6sRSyZyT4[/youtube]

I've actually been thinking of teaching my elementary school students to render some panoramas in Blender too.

User avatar
puppetbomb
Regular
Posts: 123
Joined: Fri May 19, 2017 4:04 pm
Tumblr: puppetbomb
itch: puppetbomb
Location: USA
Contact:

Re: How to Draw Panoramic Rooms?

#6 Post by puppetbomb »

I made an animated GIF in how I would approach the scene to minimize warping:

Image

Basically, rather than curving toward a vanishing point, it would go straight to it. Or in the case of the middle windows, I would straighten out the lines to run parallel to the horizon line.

I may warp the end of the rug in the last image depending on how the background would display. But if possible, I avoid objects that may be prone to warping.

Post Reply

Who is online

Users browsing this forum: No registered users