Heuristic42
Blog
Opengl
Meta
Rendering
1
comment
Nov 19 at 15:47
Matrices
Hello, I hope this message finds you doing well. I believe…
–
anonymous
created
Oct 20 at 20:30
Iterators: pointers vs cursors
You're already doing both of these by hand. This post emphaisze…
–
pknowles
comment
Oct 10 at 10:27
Matrices
[deleted]
–
anonymous
comment
Oct 4 at 19:12
Matrices
[deleted]
–
anonymous
comment
Sep 30 at 18:51
Matrices
[deleted]
–
anonymous
comment
Sep 23 at 16:15
Matrices
[deleted]
–
anonymous
comment
Sep 21 at 6:52
Contributing
I kind of predicted what was bound to happen when my favourite …
–
anonymous
comment
Sep 7 at 1:21
Route contention when running docker and a VPN
Thank you for this. Between this and the overwriting of iptabl…
–
anonymous
comment
Sep 6 at 17:57
Making a real EMF Reader
Sorry for the random quoted text comments. I am one of those p…
–
anonymous
comment
Sep 6 at 17:48
Making a real EMF Reader
["ove! Play a tone with a buzzer and has 5 LEDs to show the “EM…
–
anonymous
comment
Sep 6 at 17:47
Making a real EMF Reader
["easure direction Measure the magnetic fie"](#q107-644-685)
–
anonymous
comment
Aug 20 at 17:01
Matrices
[deleted]
–
anonymous
comment
Aug 11 at 22:32
Matrices
[deleted]
–
anonymous
edited
Jun 8 at 22:29
Rethinking writing files with memory mapping and C++
This post introduces the motivation behind the [decodless C++ o…
–
admin
created
Jun 8 at 22:16
Rethinking writing files with memory mapping and C++
This post introduces the motivation behind the [decodless C++ o…
–
pknowles
comment
Jun 5 at 13:36
Contributing
[deleted]
–
anonymous
comment
Apr 19 at 11:24
Matrices
[deleted]
–
anonymous
comment
Apr 13 at 0:25
Matrices
[deleted]
–
anonymous
comment
Apr 5 at 9:43
Matrices
[deleted]
–
anonymous
comment
Mar 27 at 17:19
Matrices
[deleted]
–
anonymous
comment
Mar 25 at 4:59
Matrices
[deleted]
–
anonymous
comment
Mar 5 at 15:39
Matrices
[deleted]
–
anonymous
comment
Feb 7 at 5:45
Microsoft Natural Ergonomic 4000 Replacement
Thank you so much for sharing your thoughts here, it tells me e…
–
anonymous
comment
Jan 28 at 23:31
Microsoft Natural Ergonomic 4000 Replacement
Oh man, I feel this post. Not sure if you've seen the "new" new…
–
anonymous
…
View All
Log in
Vectors
leave this field blank to prove your humanity
Slug
*
A URL path component
Parent page
<root>
rendering/:Article2:3D Rendering (Computer Graphics)
--- rendering/cameras/:Article11:Cameras
--- rendering/matrices/:Article12:Matrices
------ rendering/matrices/projection/:Article14:Projection Matrix
--- rendering/vectors/:Article13:Vectors
--- rendering/geometry/:Article62:3D Geometry
------ rendering/geometry/triangle_meshes/:None
--- rendering/shading/:Article64:Shading
------ rendering/shading/transparency/:Article70:Transparency and Alpha Blending
--- rendering/lights/:Article65:Lights
--- rendering/rasterization/:None
------ rendering/rasterization/deepimage/:Article72:Deep Image
--- rendering/shadows/:Article67:Shadows
--- rendering/spaces/:Article68:Vector Spaces
------ rendering/spaces/tangent_space/:Article69:Tangent Space
------ rendering/spaces/clip_space/:Article89:Clip Space
--- rendering/rotations/:None
--- rendering/images/:Article74:<unset>:Images
------ rendering/images/mipmapping/:Article75:<unset>:Mipmapping
--- rendering/materials/:None
opengl/:Article3:OpenGL Tutorials
--- opengl/oit/:Article7:Order Independent Transparency (OIT)
--- opengl/framebuffer/:Article71:The Framebuffer
meta/:Article4:Pages About This Site
--- meta/contribute/:Article5:Contributing
--- meta/bugs/:Article9:Bugs
--- meta/about/:Article10:Why does this website exist?
The parent page this belongs to.
Article title
*
Article revisions must have a non-empty title
Article body
*
Vectors are 1D lists of numbers, grouped to enable higher level operations. They represent magnitude and direction in a *vector space*. Each number, or component, is a distance along a *basis* vector in the vector space. Vectors can also describe points, as the direction and magnitude from the origin. ![Components of a vector][1] 3D vectors, which have three components, are common in 3D computer graphics. With a [homogeneous coordinate system](/9/rendering/matrices/), an additional element may be used to define the vector as being directional or positional. A direction vector $(x, y, z, 0)$ will ignore translation during 4×4 homogeneous matrix multiply. A use case is transforming tangent vectors by a model matrix. A position vector $(x, y, z, 1)$ will scale the homogeneous matrix multiply translation by one. # Operations ![Basic vector operations][2] - Addition: $(a_1, a_2, a_3) + (b_1, b_2, b_3) \equiv (a_1 + b_1, a_2 + b_2, a_3 + b_3)$ - Subtraction: $(a_1, a_2, a_3) - (b_1, b_2, b_3) \equiv (a_1 - b_1, a_2 - b_2, a_3 - b_3)$ - Scaling: $s (a_1, a_2, a_3) \equiv (s a_1, s a_2, s a_3)$ - Although not used in mathematics, multiplying two vectors is a common convenience function provided by a number of programming libraries: `vec3(a1, a2, a3) * vec3(b1, b2, b3) == vec3(a1*b1, a2*b2, a3*b3)`. Although vector multiplication normally refers to the dot product, denoted with a $\cdot$. The magnitude, or length, of any dimensional vector is the square root of the sum of the elements squared. $$ |(a_1, a_2, a_3)| \equiv \sqrt{a_1^2 + a_2^2 + a_3^2} $$ Normalizing a vector, to make it unit length and keep just its direction is done by scaling the components to divide by the length (the bold $\mathbf{a}$ represents a vector): $$ \hat{\mathbf{a}} \equiv \frac{\mathbf{a}}{|\mathbf{a}|} $$ ## Dot Product The dot product, also called the scalar or inner product, gives a scalar. It is not easily relatable geometrically but introduces the cosine of the angle between vectors which has some very useful properties. $$ (a_1, a_2, a_3) \cdot (b_1, b_2, b_3) \equiv a_1 b_1 + a_2 b_2 + a_3 b_3 $$ $$ \mathbf{a} \cdot \mathbf{b} = |\mathbf{a}| |\mathbf{b}| \cos(\theta) $$ This is less interesting until the magnitudes $|\mathbf{a}|$ and $|\mathbf{b}|$ are removed. An immediate relation to the angle $\theta$ can be seen. Due to the expense of trig functions, this is not always that useful. In many cases, explicit angles can be avoided entirely. $$ \cos(\theta) = \frac{\mathbf{a} \cdot \mathbf{b}}{|\mathbf{a}| |\mathbf{b}|} = \hat{\mathbf{a}} \cdot \hat{\mathbf{b}} $$ $$ \theta = \operatorname{acos}(\hat{\mathbf{a}} \cdot \hat{\mathbf{b}}) $$ $\cos(\theta)$ is quite useful to determine if two vectors are pointing in the same direction, being 1 for the same direction, 0 for right angles and -1 for opposite. It is also used directly as a [diffuse lighting](../lighting/) coefficient. A far more common use of the dot product is **scalar projection**. $\cos(\theta)$ gives a ratio between the opposite and hypotenuse sides of a right angle triangle. Scaling by $|\mathbf{a}|$ gives the adjacent side length. This gives the distance in the direction of $\mathbf{b}$, an arbitrary vector, that $\mathbf{a}$ travels, unlike the components of $\mathbf{a}$ which give the distance along the basis vectors $x, y, z$. $$ |\mathbf{a}| \cos(\theta) = \frac{\mathbf{a} \cdot \mathbf{b}}{|\mathbf{b}|} = \mathbf{a} \cdot \hat{\mathbf{b}} $$ ![Scalar projection][3] Scalar projection is used in the introduction of [transformation matrices](/9/rendering/matrices/). ## Cross Product The cross product $\times$ of two vectors is another vector, unlike the dot product, perpendicular to the both of the others. Its length is equal to $|\mathbf{a}| |\mathbf{b}| \sin(\theta)$. The order of $\mathbf{a}$ and $\mathbf{b}$ and the space [*handedness*](#handedness) determines which way the result faces. $$ (a_1, a_2, a_3) \times (b_1, b_2, b_3) \equiv \begin{vmatrix} x & y & z \\ a_1 & a_2 & a_3 \\ b_1 & b_2 & b_3 \end{vmatrix} \equiv (a_2 b_3 - a_3 b_2, a_3 b_1 - a_1 b_3, a_1 b_2 - a_2 b_1) $$ $$\mathbf{a} \times \mathbf{b} = |\mathbf{a}| |\mathbf{b}| \sin(\theta) \mathbf{n}$$ ![enter image description here][4] A common use is to calculate normals for polygonal meshes as the cross product of two tangent vectors gives a normal. $|\mathbf{a} \times \mathbf{b}|$ also gives the area of a parallelogram formed by $\mathbf{a}$ and $\mathbf{b}$, and half that is the area of the triangle. Due to the change in sign, the cross product can be used to find which side of a plane a point lies. Although the cross product is not defined in 2D, the determinant A combination of the dot and cross product to find $\cos(\theta)$ and $\sin(\theta)$ with the correct sign is useful in combination with the function `atan2` to find $\theta$ over a full circle. #Vector Space A vector space is a space in which vectors exist. A linear vector space can also be defined by [*basis*](https://en.wikipedia.org/wiki/Basis_(linear_algebra)) vectors. For example, a vector $(1, 2, 3)$ defines magnitudes along the axes $x, y, z$, which form the standard basis in $\mathbb{R}^3$. In other words, the vector $(1, 2, 3)$ represents $1x + 2y + 3z$ where $x, y, z$ are $(1, 0, 0), (0, 1, 0), (0, 0, 1)$. The same elements forming a vector (1, 2, 3) in another space may be calculated in the standard basis given a mapping between the spaces. This discussion is continued in [matrices](/9/rendering/matrices/). ## Handedness The handedness, or orientation, of a 3D space is determined by the ordering of the basis vectors. Think of a 2D Cartesian coordinate system drawn on a piece of paper. $+x$ normally points right and $+y$ up. When introducing $z$ is it natural to think of it as pointing up, coming out of the paper towards you. This is a right handed coordinate system. With your *right* hand open, the thumb points towards $+x$, fingers $+y$ and when closing your hand the fingers point towards $+z$. This is a more common coordinate system used by many modelling applications and OpenGL, whereas DirectX is left handed. The choice is somewhat arbitrary, but keeping consistency can avoid having to convert between different systems all the time. The choice of which axis is considered "up" is also arbitrary. In the paper example above, $+z$ is an obvious choice. However our computer screens are normally in front of us. With $+x$ still pointing right and $+y$ being up. With a right handed coordinate system, $+z$ now points towards us, coming out of the screen. [1]: /u/img/64448d1347c3.svg [2]: /u/img/d17cfcee221e.svg [3]: /u/img/99ae25b67d91.svg [4]: /u/img/881c779f4f4d.svg
Toggle Preview
Edit message
*
A description of the changes made
Discard Draft
Save Draft
leave this field blank to prove your humanity
Flag
the thing you clicked
for moderator attention.
Reason choice:
Spam, promoting, advertising without disclosure
Rude, inappropriate, generally offensive
Too arrogant or demeaning to others
Other
Reason:
The reason for raising the flag
Error