# Scaling issues with Open GL viewport / scissor box (Trying to draw outside of viewport)

In my game I am currently scaling the viewport so it retains the ratio of my development device like so:

width = (int) Math.min(deviceWidth, deviceHeight * 1.702127659574468); //1.702127659574468 is the ratio of my development device
height = (int) Math.min(deviceHeight, deviceWidth / 1.702127659574468);

GLES20.glViewport(offsetX, offsetY, width, height);

//Set the ratio of the display
ratio = (float) width / height;

Matrix.orthoM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7);


This then displays the viewport with black bars at the top and bottom of the screen while retaining the correct ratio. Therefore everything appears nice and even.

I want, however to now draw outside of the viewport in order to make things look better on devices that letterbox.

I'm setting my sprite's width and height like so:

sprite.width = (int) (width*0.078125);
sprite.height = (int) (height*0.1329787234042553);


This results in a 'square' quad (on my dev device the width is 2560 and the height is 1504, so the results in this case are:

Width = 200;
Height = 200;


On another device, this also therefore results in a perfectly square sprite. So far, all is good and all works great.

Scissoring

I tried, now to set the vieweport to the full size of the device's screen and create a 'scissor box' using GLScissor like so:

width = (int) Math.min(deviceWidth, deviceHeight * 1.702127659574468); //1.702127659574468 is the ratio of my development device
height = (int) Math.min(deviceHeight, deviceWidth / 1.702127659574468);

GLES20.glViewport(0, 0, deviceWidth, deviceHeight);

//Set the ratio of the display
ratio = (float) width / height;

Matrix.orthoM(mProjMatrix, 0, -ratio, ratio, -1, 1, 3, 7);


And then drawing like so: (Psuedo)

DrawOutsideScissorBox();

GLES20.glScissor(offsetX, offsetY, width, height);  //Using the scaled width and height
GLES20.glEnable(GL_SCISSOR_TEST);

DrawOtherStuff();

GLES20.glDisable(GL_SCISSOR_TEST);


This does work (in so far as I can now draw outside of the 'game area'). I'm sizing my objects using the Scaled width and height (and not the device's actual width and height just as I was before) and they are 'square' as far as their pixels go (so, if I log the width and height it would be for example 20 x 20, or 40 x 40), but they are still appearing 'stretched' vertically.

Why is this? How can I make sure that the sprite's that are displayed are in proportion as they were when I was scaling my viewport? What am I missing? Or am I wrong in my thinking? How can I draw in the 'black bars' left by letterboxing?!

• You are abusing the term viewport, by the way. That is the final step in the vertex transformation process (object-space -> ... -> window-space (viewport transform)). Since GL ES does not have things like rasterpos, your only method of placing something on the screen starts with a vertex, which is always restricted to your viewport. So drawing outside of it is effectively impossible (ES 2.0 does not even have glBlitFramebuffer). Why do not you just draw your special stuff using different viewports / projection matrices and avoid the scissor box altogether? – Andon M. Coleman Jun 21 '14 at 7:27
• The scissor test occurs after rasterization, so you can actually slightly hurt performance using that rather than clipping things using the viewport / projection matrix. Depending on the implementation, it might even be implemented after shading. There is no legitimate reason it would have to be done that way (e.g. fragment shaders cannot change the location of fragments), but that is where it started out when the programmable pipeline was introduced (along with late Z and late stencil tests). – Andon M. Coleman Jun 21 '14 at 7:29
• Hi @AndonM.Coleman, I realise that I'm not actually drawing outside of the viewport as this is, as you say impossible. However, I did use the term 'game area' instead of viewport later on :-) So are you saying to effectively use 2 Viewports? I didn't even know this was possible! Thanks, could you point me to any resources that show how to achieve this using GLES 2.0? Thanks!! :-) – BungleBonce Jun 21 '14 at 11:28