Rotating a 3D Object towards the mouse position
I'm trying to draw a 3D cube that rotates towards the user's mouse with perspective projection. I have managed to draw the cube, but I can't figured out how to rotate the cube. Maybe I should "unproject" the current mouse position, convert it to cartesian coordinates, figure out the offset and rotate it by that?
( @xxpertHacker help)
@realTronsi
@programmeruser
Not to be lazy, but you both know JS and C, both are writing graphics-related code, both used a canvas, and both posted in the same day.
I think you both might be able to help each other better than I could.
realTronsi's post: https://replit.com/talk/ask/Jittered-canvas-dragging-and-scaling-biased-to-origin/132418
programmeruser's post: https://replit.com/talk/ask/Rotating-a-3D-Object-towards-the-mouse-position/132521 (here)
@xxpertHacker didn't he fix the issue on his own?
@programmeruser He just did barely after I said the above ^, so... yeah.
But, I won't be able to look at this for a bit, possibly until tommorow. Maybe someone will answer this in the meanwhile? Maybe not.
@programmeruser wait you can use c in html wtf
@programmeruser is the C compiled to wasm?
@realTronsi GLSL is similar to C, they just used C for syntax highlighting.
@realTronsi it's a GLSL fragment shader, I just used the .c extension so that I could get syntax highlighting
@realTronsi OpenGL was supported before Wasm existed, lol.
@programmeruser oh lol I see
@xxpertHacker yes I know, but I ddidn't mention openGL though :thonk:
@programmeruser I was thinking about the last time that I've worked with anything 3D... I haven't done a 3D graph in over a year, I haven't written any code that manipulates 3D objects in forever either.
Then I thought about your current problem: moving a 3D cube to the mouse's position.
First off, how are you getting the mouse's position via GLSL?
Second, I remembered that someone literally did this with P5.js on Repl... https://replit.com/talk/share/Real-3D-3D-But-its-actually-not-fake/80965.
Hopefully you can understand their math, and apply it here?
@xxpertHacker the 3D cube there doesn't rotate with the mouse.
The specific library I'm using has a vec2 uniform storing the mouse position named u_mouse.
@programmeruser It moves and rotates, so can't you isolate the rotation part of the code?
I should've updated my comment, I later looked at the library myself and found that it loads a few global variables for you.
@xxpertHacker it moves, but it doesn't rotate.
@programmeruser It repositions itself to face the cursor.
What are you thinking of doing?
@xxpertHacker two corners of the cube are determined by the mouse position, not the rotation.
What I was thinking of doing is in the post.
@programmeruser Oh, I see the difference, it's really just changing the angle that the cube is viewed at.
I get what you're trying to do, but I'm inexperienced in 3D positioning.
Ngl, I never learned much GLSL, since I could neer find a good resource, besides the spec, lol.
@xxpertHacker https://thebookofshaders.com
I'm not really looking for a GLSL answer, just a function in some language that works.
@xxpertHacker @realTronsi @Coder100 @fuzzyastrocat can anyone help?