Rotaring cube
lazarus / 70-OpenGL

----------------------------------------------------------------------
LemonParty · 2025-01-29 14:15

I am doing a tutorial with OpenGL. In tutorial created a rotating
cube. But when I runing the code I getting this weird effect (look at
video https://streamable.com/u6zlvk).
Rendering loop
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i   while
glfwWindowShouldClose(window) = 0 do begin    ProcessInput(window);  
 glClearColor(0.2, 0.3, 0.3, 1.0);    glClear(GL_COLOR_BUFFER_BIT or
GL_DEPTH_BUFFER_BIT);      glActiveTexture(GL_TEXTURE0);   
glBindTexture(GL_TEXTURE_2D, Texture1);   
glActiveTexture(GL_TEXTURE1);    glBindTexture(GL_TEXTURE_2D,
Texture2);     Vec1.Create(0.5, 1, 0);    View.CreateTranslation(0, 0,
-80);    Projection.CreatePerspective(DegToRad(45), 800.0 / 600.0,
0.1, 100);    Model.CreateRotate(glfwGetTime, Vec1);     Sh.Use;   
glUniformMatrix4fv(glGetUniformLocation(Sh.ID, 'model'), 1, GL_FALSE,
@Model.m00);    glUniformMatrix4fv(glGetUniformLocation(Sh.ID,
'view'), 1, GL_FALSE, @View.m00);   
glUniformMatrix4fv(glGetUniformLocation(Sh.ID, 'projection'), 1,
GL_FALSE, @Projection.m00);    glBindVertexArray(VAO);   
glDrawArrays(GL_TRIANGLES, 0, 36);     glfwSwapBuffers(window);    
glfwPollEvents();  end;     Vertex shader:
Code: C  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i #version
330 corelayout (location = 0) in vec3 aPos;layout (location = 1) in
vec2 aTexCoord; out vec2 TexCoord; uniform mat4 model;uniform mat4
view;uniform mat4 projection; void main(){        gl_Position =
projection * view * model * vec4(aPos, 1.0);        TexCoord =
vec2(aTexCoord.x, aTexCoord.y);}I am using SupraEngine library as
replacement of glm.
Have anybody an idea why this effect appear?

----------------------------------------------------------------------
H₂SO₄ · 2025-01-29 15:30

Disclaimer: I'm not familiar with the exact library you're using, but
one thing I've noticed that seems fishy to me is that your rotation
axis isn't normalized (length is not 1):

Quote from: LemonParty on January 29, 2025, 03:15:47 pmCode: Pascal
 [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
Vec1.Create(0.5, 1, 0);

----------------------------------------------------------------------
LemonParty · 2025-01-30 11:17

I made it normalized and still the same issue.

----------------------------------------------------------------------
Mathias · 2025-01-30 16:48

That's difficult to say, you'd have to see more code. There's
something wrong with your perspective matrix. Are you still doing any
calculations with it?

I have another example that might help.

https://github.com/sechshelme/Lazarus-OpenGL-3.3-
Tutorial/tree/master/05_-_3D/20_-_Fluchtpunktperspektive_(Frustum)

----------------------------------------------------------------------
Gigatron · 2025-01-30 18:01

Hi,
I would like to help you but not know the library you user;

Vec1.Create(1, 1, 1);


Try only Y axis ;
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
Vec1.Create(0, 1, 0);
Or send your project ;

Regards

----------------------------------------------------------------------
LemonParty · 2025-01-30 19:14

Here is the project.

----------------------------------------------------------------------
Gigatron2 · 2025-01-30 19:51

Just looked this part , it's seems ok i hope ;

LookAt for camera pos added it's now ok i think;

Good luck

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i while
glfwWindowShouldClose(window) = 0 do begin    ProcessInput(window);  
 glClearColor(0.2, 0.3, 0.3, 1.0);    glClear(GL_COLOR_BUFFER_BIT or
GL_DEPTH_BUFFER_BIT);      glActiveTexture(GL_TEXTURE0);   
glBindTexture(GL_TEXTURE_2D, Texture1);   
glActiveTexture(GL_TEXTURE1);    glBindTexture(GL_TEXTURE_2D,
Texture2);     Vec1.Create(1, 1, 1);    Vec1:= Vec1.Normalize;    
 Model.CreateRotate(glfwGetTime, Vec1);     View.CreateTranslation(0,
0, -80);       View.CreateLookAt(      Vec3.Create(0, 0, 140), //
camera pos      Vec3.Create(0, 0, 0), // look camera points x,y,z    
Vec3.Create(0, 2, 0)  // x,Y,z    );    
 Projection.CreatePerspective(DegToRad(45), 800.0 / 600.0, 0.1, 300);
         Sh.Use;    glUniformMatrix4fv(glGetUniformLocation(Sh.ID,
'model'), 1, GL_FALSE, @Model.m00);   
glUniformMatrix4fv(glGetUniformLocation(Sh.ID, 'view'), 1, GL_FALSE,
@View.m00);    glUniformMatrix4fv(glGetUniformLocation(Sh.ID,
'projection'), 1, GL_FALSE, @Projection.m00);   
glBindVertexArray(VAO);    glDrawArrays(GL_TRIANGLES, 0, 36);     {  
glBegin(GL_TRIANGLES);      glColor3d(1,0,0);      glVertex2f(-1,
-1);      glColor3d(1,1,0);      glVertex2f(1, -1);     
glColor3d(1,0,1);      glVertex2f(0, 1);    glEnd;    }    
glfwSwapBuffers(window);     glfwPollEvents();  end;

----------------------------------------------------------------------
LemonParty · 2025-01-31 11:05

Gigatron2, this solution looks fine:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i    
Vec1.Create(1, 1, 1);    Vec1:= Vec1.Normalize;   
View.CreateTranslation(0, 0, -80);   
Projection.CreatePerspective(DegToRad(45), cWindowWidth /
cWindowHeight, 0.1, 100);    Model.CreateRotate(glfwGetTime, Vec1);The
version where LookAt used not showing anything in scene.

----------------------------------------------------------------------
Gigatron · 2025-01-31 15:44

Quote from: LemonParty on January 31, 2025, 12:05:35 pmGigatron2, this
solution looks fine:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i    
Vec1.Create(1, 1, 1);    Vec1:= Vec1.Normalize;   
View.CreateTranslation(0, 0, -80);   
Projection.CreatePerspective(DegToRad(45), cWindowWidth /
cWindowHeight, 0.1, 100);    Model.CreateRotate(glfwGetTime, Vec1);The
version where LookAt used not showing anything in scene.

Hi LookAt is not show someting but it's just for using to control
camera position.
In GL  world you have Scene Camera and objets.
To be clear here an example based on your source.

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i window :=
glfwCreateWindow(cWindowWidth, cWindowHeight, 'Hello World', nil,
nil);  if window = nil then  begin    glfwTerminate();    ExitCode :=
-1;  end;   glfwMakeContextCurrent(window); 
glfwSetFramebufferSizeCallback(window, @FramebufferSizeCallback);  
//must be called after glfwMakeContextCurrent  if Load_GL_version_3_3
then    else ;  InitScene;   while glfwWindowShouldClose(window) = 0
do begin    ProcessInput(window);     glClearColor(0.2, 0.3, 0.3,
1.0);    glClear(GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT);     
glActiveTexture(GL_TEXTURE0);    glBindTexture(GL_TEXTURE_2D,
Texture1);    glActiveTexture(GL_TEXTURE1);   
glBindTexture(GL_TEXTURE_2D, Texture2);     Vec1.Create(1, 1, 1);   
Vec1:= Vec1.Normalize;       Model.CreateRotate(glfwGetTime*2,
Vec3.Create(Vec1.x,Vec1.y,Vec1.z));     View.CreateTranslation(0, 0,
-80);     // Cam control      View.CreateLookAt(      Vec3.Create(0,
0, 150), // camera pos      Vec3.Create(0.4*sin(glfwGetTime*2),
0.8*cos(glfwGetTime*2), 0), // look camera points x,y,z     
Vec3.Create(0, 2, 0)  // x,Y,z    );    
 Projection.CreatePerspective(DegToRad(45), 800.0 / 600.0, 0.1,
300);     Sh.Use;    glUniformMatrix4fv(glGetUniformLocation(Sh.ID,
'model'), 1, GL_FALSE, @Model.m00);   
glUniformMatrix4fv(glGetUniformLocation(Sh.ID, 'view'), 1, GL_FALSE,
@View.m00);    glUniformMatrix4fv(glGetUniformLocation(Sh.ID,
'projection'), 1, GL_FALSE, @Projection.m00);   
glBindVertexArray(VAO);    glDrawArrays(GL_TRIANGLES, 0, 36);     {  
glBegin(GL_TRIANGLES);      glColor3d(1,0,0);      glVertex2f(-1,
-1);      glColor3d(1,1,0);      glVertex2f(1, -1);     
glColor3d(1,0,1);      glVertex2f(0, 1);    glEnd;    }    
glfwSwapBuffers(window);     glfwPollEvents();  end;

----------------------------------------------------------------------
LemonParty · 2025-01-31 16:07

Gigatron, in my message I mean that nothing is visible on screen when
I run code with LookAt.

----------------------------------------------------------------------
Gigatron · 2025-01-31 16:48

Quote from: LemonParty on January 31, 2025, 05:07:03 pmGigatron, in my
message I mean that nothing is visible on screen when I run code with
LookAt.

Ah ok sorry I didn't understand well;

----------------------------------------------------------------------
Mathias · 2025-02-04 08:06

Is there a guarantee that the SupraEngine is error-free?

----------------------------------------------------------------------
LemonParty · 2025-02-04 09:11

Mathias, SupraEngine may have different format of matrixes. Rows and
columns may be swaped.

----------------------------------------------------------------------
H₂SO₄ · 2025-02-04 12:20

Quote from: Mathias on February 04, 2025, 09:06:27 amIs there a
guarantee that the SupraEngine is error-free?

I just checked  TMatrix4x4.CreateRotate  against code from my own
OpenGL project (which worked), and did indeed find an error at 
SupraEngine.Math:6729  (line 9 here):

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i constructor
TMatrix4x4.CreateRotate(const Angle:TScalar;const Axis:TVector3);var S
inusAngle,CosinusAngle:TScalar;begin SinCos(Angle,SinusAngle,CosinusAn
gle); RawComponents[0,0]:=CosinusAngle+((1.0-
CosinusAngle)*sqr(Axis.x)); RawComponents[1,0]:=((1.0-
CosinusAngle)*Axis.x*Axis.y)-
(Axis.z*SinusAngle); RawComponents[2,0]:=((1.0-
CosinusAngle)*Axis.x*Axis.z)+(Axis.y*SinusAngle); RawComponents[0,3]:=
0.0; RawComponents[0,1]:=((1.0-
CosinusAngle)*Axis.x*Axis.z)+(Axis.z*SinusAngle); RawComponents[1,1]:=
CosinusAngle+((1.0-
CosinusAngle)*sqr(Axis.y)); RawComponents[2,1]:=((1.0-
CosinusAngle)*Axis.y*Axis.z)-
(Axis.x*SinusAngle); RawComponents[1,3]:=0.0; RawComponents[0,2]:=((1.
0-CosinusAngle)*Axis.x*Axis.z)-
(Axis.y*SinusAngle); RawComponents[1,2]:=((1.0-
CosinusAngle)*Axis.y*Axis.z)+(Axis.x*SinusAngle); RawComponents[2,2]:=
CosinusAngle+((1.0-
CosinusAngle)*sqr(Axis.z)); RawComponents[2,3]:=0.0; RawComponents[3,0
]:=0.0; RawComponents[3,1]:=0.0; RawComponents[3,2]:=0.0; RawComponent
s[3,3]:=1.0;end;
Note how the other lines never use the same component of  Axis  more
than once, but the marked line uses  Z  twice - most likely a
copy/paste error.
To fix this, just replace the first  Z  with  Y:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i RawComponen
ts[0,1]:=((1.0-CosinusAngle)*Axis.x*Axis.y)+(Axis.z*SinusAngle);
Also don't forget to normalize  Vec1  like I mentioned in my first
response; otherwise the cube will expand & deform depending on the
angle.

----------------------------------------------------------------------
LemonParty · 2025-02-04 13:57

Thank you, Khrys. Problem solved.

----------------------------------------------------------------------
Mathias · 2025-02-10 16:16

QuoteI just checked  TMatrix4x4.CreateRotate  against code from my own
OpenGL project (which worked), and did indeed find an error at 
SupraEngine.Math:6729  (line 9 here):
If you find the error, you should actually make a bug report.
Is this library something official?

----------------------------------------------------------------------
TRon · 2025-02-23 00:26

Quote from: Mathias on February 10, 2025, 05:16:05 pmIf you find the
error, you should actually make a bug report.
That would be a PM then.

QuoteIs this library something official?
Last time I checked it is a closed source project from BeRo though
afaik replaced by its successor PasVulkan.Math.