Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Trying to rotate points within 3 dimensional space.

SilicateWielder
 Share

So, for the purpose of learning, I've been writing a 3D renderer, and I've been running into some issues involving what I can only guess is my math.

 

The issue I'm having is with a function I've written called rotate3d, I can rotate on two axis at the same time, however for some reason whenever I rotate along both X and Y simultaneously, I run into a weird issue where the polygon or object being rotated will stretch or distort. I'm not sure what it is I'm doing wrong here, and I've been trying for days to figure out what is wrong with my math.

 

Here is a screenshot of a wireframe cube rotated by 45 degrees on both the X and Y axis (Yes, I know the FOV of 600 is ridiculous but it actually produces a result comparable to an FOV of 70 on a standard game):

59ef7ecb3b4b9_Screenshotat2017-10-24125528.png.3dcbddbfac7efe18391de3cd137fea4a.png

 

And here is the function:

	function rotate3d(x, y, z, rx, ry, rz)
{
    // Calculate the ratio for degrees to radians
    var ratio = (3.1415 / 180);
    var rxa = rx * ratio;
    var rya = ry * ratio;
    var rza = rz * ratio;
    
    // Rotate around the Y axis.
    var x1 = (Math.cos(rya) * x) - (Math.sin(rya) * z);
    var y1 = y;
    var z1 = (Math.sin(rya) * x) + (Math.cos(rya) * z);
    
    // Rotate around the X axis.
    var x2 = x1;
    var y2 = (Math.cos(rxa) * y) - (Math.sin(rxa) * z);
    var z2 = (Math.sin(rxa) * y) + (Math.cos(rxa) * z);
    
    // Rotate around the Z axis.
    var x3 = (Math.cos(rza) * x1) - (Math.sin(rza) * y2);
    var y3 = (Math.sin(rza) * x1) + (Math.cos(rza) * y2);
    var z3 = z2;
    
    //system.pushEvent("grapler3d", "Rotated X: " + x + " Y: " + y + " Z: " + z + " to X: " + x3 + " Y: " + y3 + " Z: " + z3);
    
    return([x3, y3, z3]);
};
	

 

If anyone knows what it is I'm doing wrong here, any help would be greatly apreciated.

My procrastination is the bane of my existence.

I make games and stuff in my spare time.

The "I thought this would be cheaper" rebuild |

 

 

Link to comment
Share on other sites

Link to post
Share on other sites

Use a rotation matrix instead of trying to invent the math:

function rotateX(x,y,z,angle){	//x,y,z are the coordinates of the point
  var y1 = y*Math.cos(angle) - z*Math.sin(angle);
  var z1 = y*Math.sin(angle) + z*Math.cos(angle);
  return([x, y1, z1])
}

I don't have time right now to write the other two rotations for you but you can easily make them from my x rotation and the wikipedia article. Simply use them in succession to get the rotation you want.

Don't ask to ask, just ask... please 🤨

sudo chmod -R 000 /*

What is scaling and how does it work? Asus PB287Q unboxing! Console alternatives :D Watch Netflix with Kodi on Arch Linux Sharing folders over the internet using SSH Beginner's Guide To LTT (by iamdarkyoshi)

Sauron'stm Product Scores:

Spoiler

Just a list of my personal scores for some products, in no particular order, with brief comments. I just got the idea to do them so they aren't many for now :)

Don't take these as complete reviews or final truths - they are just my personal impressions on products I may or may not have used, summed up in a couple of sentences and a rough score. All scores take into account the unit's price and time of release, heavily so, therefore don't expect absolute performance to be reflected here.

 

-Lenovo Thinkpad X220 - [8/10]

Spoiler

A durable and reliable machine that is relatively lightweight, has all the hardware it needs to never feel sluggish and has a great IPS matte screen. Downsides are mostly due to its age, most notably the screen resolution of 1366x768 and usb 2.0 ports.

 

-Apple Macbook (2015) - [Garbage -/10]

Spoiler

From my perspective, this product has no redeeming factors given its price and the competition. It is underpowered, overpriced, impractical due to its single port and is made redundant even by Apple's own iPad pro line.

 

-OnePlus X - [7/10]

Spoiler

A good phone for the price. It does everything I (and most people) need without being sluggish and has no particularly bad flaws. The lack of recent software updates and relatively barebones feature kit (most notably the lack of 5GHz wifi, biometric sensors and backlight for the capacitive buttons) prevent it from being exceptional.

 

-Microsoft Surface Book 2 - [Garbage - -/10]

Spoiler

Overpriced and rushed, offers nothing notable compared to the competition, doesn't come with an adequate charger despite the premium price. Worse than the Macbook for not even offering the small plus sides of having macOS. Buy a Razer Blade if you want high performance in a (relatively) light package.

 

-Intel Core i7 2600/k - [9/10]

Spoiler

Quite possibly Intel's best product launch ever. It had all the bleeding edge features of the time, it came with a very significant performance improvement over its predecessor and it had a soldered heatspreader, allowing for efficient cooling and great overclocking. Even the "locked" version could be overclocked through the multiplier within (quite reasonable) limits.

 

-Apple iPad Pro - [5/10]

Spoiler

A pretty good product, sunk by its price (plus the extra cost of the physical keyboard and the pencil). Buy it if you don't mind the Apple tax and are looking for a very light office machine with an excellent digitizer. Particularly good for rich students. Bad for cheap tinkerers like myself.

 

 

Link to comment
Share on other sites

Link to post
Share on other sites

3 minutes ago, Sauron said:

Use a rotation matrix instead of trying to invent the math:


function rotateX(x,y,z,angle){	//x,y,z are the coordinates of the point
  var y1 = y*Math.cos(angle) - z*Math.sin(angle);
  var z1 = y*Math.sin(angle) + z*Math.cos(angle);
  return([x, y1, z1])
}

I don't have time right now to write the other two rotations for you but you can easily make them from my x rotation and the wikipedia article. Simply use them in succession to get the rotation you want.

If you look at my original post I'm doing this same math for all three axis of rotation. the problem is that I'm getting a weird result when I rotate around the X and Y axis simultaneously.

My procrastination is the bane of my existence.

I make games and stuff in my spare time.

The "I thought this would be cheaper" rebuild |

 

 

Link to comment
Share on other sites

Link to post
Share on other sites

Each rotation should use the coordinates produced by the previous, the code you gave is mismatching them.

"Do as I say, not as I do."

-Because you actually care if it makes sense.

Link to comment
Share on other sites

Link to post
Share on other sites

11 minutes ago, Dash Lambda said:

Each rotation should use the coordinates produced by the previous, the code you gave is mismatching them.

I don't know how I managed to miss that, thanks!

My procrastination is the bane of my existence.

I make games and stuff in my spare time.

The "I thought this would be cheaper" rebuild |

 

 

Link to comment
Share on other sites

Link to post
Share on other sites

On 2017-10-25 at 2:33 AM, ElfFriend said:

If I were you I'd just use the correct rotation matrix rather than trying to make functions that rotate things along a set axis. https://learnopengl.com/#!Getting-started/Transformations

 

Also I'd use a better language than JavaScript...

What if he's trying to make a browser game? o.O

15" MBP TB

AMD 5800X | Gigabyte Aorus Master | EVGA 2060 KO Ultra | Define 7 || Blade Server: Intel 3570k | GD65 | Corsair C70 | 13TB

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share


×