last day (15 days later) » 

20:01
0
A: Aspect ratio of drawn quad messed up after rotating

ChristerTry this instead: Matrix4f matrix = Maths.createTransformationMatrix( new Vector2f( -1, 1) , 0.0f , new Vector2f( 2 / Display.getWidth(), -2 / Display.getHeight() ) ); I have no idea what gui.getSize().getX() / Display.getWidth(...

gui.getSize().getX() was getting the width of the quad I was trying to render. This is the code I used for creating the quad: GuiTexture phone = new GuiTexture(loader.loadTexture("phone"), new Vector2f(1600 / 2 - 300 / 2, 50), 0, new Vector2f(300, 300 * 2.05f));
@TheCodingWombat I don't know what parameters GuiTexture takes so nothing helpful there, but did you get it to work? Do you have any questions regarding my answer?
It are the position (x and y) and size(x and y) of the quad I render in pixels, I have not fully read your answer yet, I'm not at my home computer
This does not seem to render anything when i create new quads with small sizes and positions and also not when I create them with large sizes and positions, also, this transformationmatrix will be the same for all rendered quads, that means you can't rotate individual rendered things right?
@TheCodingWombat Remember that coordinates are now in pixel coordinates. And yes this transformation matrix will be the same for all rendered quads, but no you can individually rotate quads. Just use a different model matrix. Example added, look through my answer again.
I do not see rendering using this, gui.getSize().getX() gets the width of the quad, gui.getSize().getY() gets the height
20:01
@TheCodingWombat I understand what gui.getSize.getX() does, just not why you use it in your code! I removed it now from the example as it causing nothing but confusion. If it doesn't work now you need to give me more info. I see no reason why this shouldn't work.
I basically start of creating a quad that fills up the whole screen float[] positions = {-1, 1, -1, -1, 1, 1, 1, -1};, and then to make it smaller and other sizes I use that transformation matrix method, in the transformation matrix method I also convert the pixel coords like 300, 300 (middle of a screen with a resolution of 600 by 600) to the opengl coord system.
Going back and forth between comments is taking too long.
I'm really unsure of what you are expecting.
If you want to fill the whole screen then it should be like this float[] positions = {0, 0, 0, 600, 600, 0, 600, 600};, this assumes a 600x600 resolution.
20:27
In my main class I want to create a quad using pixels/resolution position so I type:
GuiTexture phone = new GuiTexture(loader.loadTexture("opaqueRect"), 500, 500, 0, 50, 50);
Since my screen is 1000 x 1000 this should be positioned in about the middle
But it's now popping up?
I already got this to work in the old method before getting onto stackexchange, and now with your new method it works as well.
It is popping up
the original problem was that rotating the object would change the aspect ratio and size of the object while I inteded to just turn/rotate the object at the place I placed it.
Now when I try to rotate it, it starts moving away from the original place (500, 500), like the point it is rotating around is in the far left corner
Like the left corner of the quad?
the far left corner of the screen
I don't know if you understand this explanation but: I create a quad that covers the whole screen, then I use a transformationmatrix to make it smaller (the quad that is covering the whole screen) and position it away from the far left corner of the screen.
btw, this chat feature is really nice
and I am thankful for you help
Where did you get that explanation from?
I don't really see where it's from or what it's applying to?
20:34
from my head
ok, let me try again
when in the main class I call
GuiTexture phone = new GuiTexture(loader.loadTexture("opaqueRect"), 500, 500, 0, 50, 50);

It first creates a quad that covers the entire screen
that quad is then transformed with a transformationmatrix, does that make sense?
Should that create a quad at position (500, 500) thats 50 wide and 50 tall? doesn't sound like it cover the entire screen?
yes it should and it does: It first creates a quad covering the whole screen without displaying it and then it immediately gets transformed to a quad that's 50 by 50 and at position 500, 500
If you are talking about this {-1, 1, -1, -1, 1, 1, 1, -1}; then this will only cover the left upper most 2x2 pixels of the window
I did manage to be able to rotate things in 3d space, but I don't know how to apply it to 2d.

Here's a gif of how a 3d model is rotating https://gyazo.com/7f87c54546d60a707204d325392b4307
That quad is created with {-1, 1, -1, -1, 1, 1, 1, -1} before the translation/transformation to the pixels/rotation
Ok, so there is a conversion from {-1, 1, -1, -1, 1, 1, 1, -1} to pixels? Because I only meant to go the opposite way, from pixels to opengl coords.
20:44
yes, I originally watched this video and used that code: youtube.com/…
I see, let me just watch it for a bit then.
ok, thank you
If you are an advanced OpenGL user, and you don't advise me watching these videos because he does things different from what you are supposed to do, please tell
I would call me quite experienced, and I have watched videos from him before, I think he does good. He is using modern OpenGL which I find the most important.
Do you have a special GUI-shader that has any coordinates conversion? I has at least been assuming that you simple have gl_Position = matrix * position; in your vertex shader.
If you are unsure you can simply copy-paste your vertex-shader
in my shader I have gl_Position = modelMatrix * transformationMatrix * vec4(position, 0.0, 1.0)
in your answer you used Matrix4f.mul() but that required three arguments, so I did this instead
And this is what I insert as modelMatrix and transformationMatrix: float width = gui.getWidth() / 2;
float height = gui.getHeight() / 2;

Matrix4f modelMatrix = Maths.createTransformationMatrix(
new Vector2f(
-1,
1
), gui.getRotation()
,new Vector2f(
2.0f / (float) Display.getWidth(),
2.0f / (float) Display.getHeight()
)
);

shader.loadModel(modelMatrix);

Matrix4f transformationMatrix = Maths.createTransformationMatrix(
new Vector2f(
gui.getxPos() + width,
- (gui.getyPos() + height)
), gui.getRotation()
Yeah, I edited it in my answer afterwards. The last argument should have been null.
20:57
ok, was I correct to think that multiplying them in the vertex shader would yield the same effect?
Yes, you are.
The quad is positioned correctly when there is no rotation or scaling after creation
rotation gets messed up altogether as you saw in the gif I sent earlier
Well you see, all rotation happens around the origin.
So since you translate first before rotating you end up rotating around the upper left corner.
createTransformationMatrix should probably do rotation and the translation and then scaling
it does rotate different when I do that, but still not around the middle of the image itself: https://gyazo.com/19eb22b463d1e8d2f5b0066135037976

It's not only not rotating around the point I want, it's also not square anymore https://gyazo.com/81fcbbaa3d8f245e5d20b73e11be61c6
How come it looks like a square in the top one, but not the bottom one, aren't they the same?
21:10
You mean why it isn't a square in the last gyazo I sent?
That's my problem as well, I do not know why that happens, but when I rotate, it starts looking bending and stuff.
But I don't see this "bending" in your first gyazo, only your second. Aren't they suppose to be the same?
Is your code actually different from the two?
you mean the first gyazo in that same message? because it is bending there, the second gyazo is just a still image of that gif
Doesn't look like it to me. :S
oh wait you're right, you would have to have superb eyes to see it in that gif, it is already bending there but only slightly it gets worse over time
at the end you can see it is/seems wider than it is high
and after that it gets worse gyazo.com/af9dc7069e59b6b4333c9c13c75b61ac
Ok, very odd. It should be distorted any more.
21:19
If you want I can share the entire code, though I understand if it would be too much of an effort to familiarize yourself with it
I would love too, it can be very hard to debug something through chat.
I have talked over 2 hours with my mom for something I could have done in 10-15 min myself if I was there.
ok, let me figure out (for the 500th time) how to integrate git in my ide
yes haha, I know the struggle sometimes, that's why I suggested it :)
You should learn to use the terminal, then you'll never have this problem again. ;)
You work on that while I got to the store. Will be back in ~10 min.'
alright, don't worry about hurrying
ok, back
21:31
If you need any info on how the project is structured please tell
All 2D stuff (the things we're talking about, the quad etc.) are labeled gui since that was the original use in the tutorial I watched
The repo is public I suppose
Yeah, I have downloaded it
ok, I now see I have not included the libraries and natives and stuff, do I need to push those?
lwjgl, lwjgl util and slick util
Nah, I'll find it.
Though do consider trying to update to LWJGL3 at some point.
I tried to, but I really enjoyed these tutorials from thinMatrix (the video link I sent you earlier) and he used 2.9, I didnt know how to do some of that stuff in lwjgl 3
I understand.
Though I do want to say that I just recently got one of my earlier projects updated to lwjgl3. Current lwjgl3 includes binding for the Oculus SDK, so I got to try out my tech demo out in VR which was awesome! ^^
21:41
Owh that's nice, unfortunately I do not have the Oculus or any other VR device
But it's cool to see lwjgl3 supports that
Yeah, I'm just sad it didn't come sooner. I've been having this headset since 2013.
Was it just LWJGL that was lacking behind, or OpenGL as well?
Ok, just got it running. Just letting you know.
It was just lwjgl being slow in implementing it. And the Oculus SDK bindings are not pretty looking.
22:15
I have managed to do it using the 3d methods already in the code, but that requires I make a model using blender and it is also in the 3d world so when the player/camera moves that moves as well gyazo.com/7ea145638c554348d33c252416c5a500
Ok, but you don't know mistake with the other code
Nope, I just wanted to check if this was possible, but this is not favorable to an exlusive set of methods and classes for 2d rendering
Agree, unless we are talking VR.
Do you understand the code you've looked over (the working bit) so far?
Yes, I have a few suspects in what can be the problem.
22:23
Even a few, that's great
Ok, fixed, half-way at least.
Seriously? :)
Instead of trying to retrofit your createTransformationMatrix to create the projection matrix, I created it myself.
Matrix4f modelMatrix = new Matrix4f();
modelMatrix.m00 = 2.0f / (float) Display.getWidth();
modelMatrix.m11 = -2.0f / (float) Display.getHeight();
modelMatrix.m30 = -1;
modelMatrix.m31 = 1;
I also changed your createTransformationMatrix because you should avoid having src==dest. It also looks cleaner if you ask me, though I don't know it actually is required for it to work.
public static Matrix4f createTransformationMatrix(Vector2f translation, float rotation, Vector2f scale) {
    Matrix4f matrix = new Matrix4f();
    matrix.setIdentity();
    matrix.rotate((float) Math.toRadians(rotation), new Vector3f(0, 0, 1));
    matrix.translate(translation);
    matrix.scale(new Vector3f(scale.x, scale.y, 1f));
    return matrix;
}
Also you should swap the rotate and translate from what I pasted.
So first translate, then rotate then scale?
and yes the new createTrans method definitely looks a lot cleaner
Well it seems to work as expected, though I feel it shouldn't
22:38
What do I need to substitute where for your new projection matrix own code
Substitute after the equal sign.
Matrix4f modelMatrix = Maths.createTransformationMatrix(
new Vector2f(
-1,
1)
, 0.0f
, new Vector2f(
2 / Display.getWidth(),
-2 / Display.getHeight()
)
);
With what i pasted above*
ok, so then I have this code
Matrix4f modelMatrix = new Matrix4f();
modelMatrix.m00 = 2.0f / (float) Display.getWidth();
modelMatrix.m11 = -2.0f / (float) Display.getHeight();
modelMatrix.m30 = -1;
modelMatrix.m31 = 1;
between
float height = gui....... and shader.loadModel(modelMatrix)
Yeah
Why, doesn't it work?
No, I had to use modelMatrix.m11 = 2.0f / .... instead of modelMatrix.m11 = -2.0f / ....
In the older method I also used 2 / instead of -2 /
But rotating around the z axis works perfectly
Thanks a lot :)
Ok, good. Weird that you have to have 2 and not -2, but glad it works
22:46
yeah but not the greatest of concerns
Ágain i'm very grateful for you taking such a lot of time to help me
Well one more thing before I leave. I recommend renaming modelMatrix with projectionMatrix and transformationMatrix with modelMatrix to conform with typical naming conventions.
Your "modelMatrix" is not what other people would call it.
See you some other time! ^^
Ok, I will, thanks. If you want you can of course post a new reply with this answer on gamedev.stack and I will make it the official answer
I modified my existing answer with the updated code. Hopefully that should be correct.
ok, gotta go, bye.
yes apart from a bit in the second matrix, you use 1.0, 1.0 there as width and height, while I use gui.getWidth() / 2, gui.getHeight / 2
good day/night
And sorry for not upvoting your answer, I do not have enough reputation yet.

last day (15 days later) »