How to Build a Tetrahedron
in WebGL
Jack Tumblin
Northwestern Univ EECS
Feb 17, 2016
How to Build a Tetrahedron: TOUGH
•
•
•
4 ‘nodes’ (locations for vertices) equidistant from origin, and
all 4 ‘nodes’ equidistant from each other (distance ‘R’), and
6 ‘edges’ (between the 3! unique node-pairs), all of length R
Hmm. An optimization problem? What we know so far:
n0.x2 + n0.y2 + n0.z2 = 1
n0.x2 + n0.y2 + n0.z2 = 1
n0.x2 + n0.y2 + n0.z2 = 1
n0.x2 + n0.y2 + n0.z2 = 1
(n0.x –n1.x)2 + (n0.y – n1.y)2 + (n0.z – n1.z)2 = R2
(n0.x –n2.x)2 + (n0.y – n2.y)2 + (n0.z – n2.z)2 = R2
(n0.x –n3.x)2 + (n0.y – n3.y)2 + (n0.z – n3.z)2 = R2
(n1.x –n2.x)2 + (n1.y – n2.y)2 + (n1.z – n2.z)2 = R2
(n1.x –n3.x)2 + (n1.y – n3.y)2 + (n1.z – n3.z)2 = R2
(n2.x –n3.x)2 + (n2.y – n3.y)2 + (n2.z – n3.z)2 = R2
Convex optimization: 10 quadratic equations, 13 unknowns.
We need more equations! (e.g. Each set of 3 nodes forms equilateral triangle?)
How to Build a Tetrahedron: EASIER
Do most of the work with 2D trigonometry:
Each set of 3 nodes forms equilateral triangle.
1) Build a triangle in xy plane from 3 unit-length vectors
outwards from origin, separated by 120 degrees:
y
n2=
(0,1,0)
1
x
sin 30o = 0.5
30o
n3=(-cos30,-0.5,0) cos 30o = 3/4
n1= (cos30, -0.5, 0)
How to Build a Tetrahedron: EASIER
2) Now imagine the tetrahedron’s node n0 raised on the +z axis;
the 3D surface it forms has:
--a lower-most tilted triangle (light blue),
--an upper +x tilted triangle (light yellow), and
--an upper –x tilted triangle (light gray)
y
n2=
(0,1,0)
1
1.5
n0
x
sin 30o = 0.5
30o
n3= (-cos30,-0.5,0)
n1= (cos30, -0.5, 0)
How to Build a Tetrahedron: EASIER
2) Now imagine the tetrahedron’s 4th node on the +z axis;
Its 3D surface forms
--a lower-most tilted triangle (light blue),
--an upper +x tilted triangle (light yellow), and
--an upper –x tilted triangle (light gray)
3) Turn the shape:
Rotate on +y axis CW
to see shape on yz axes…
y
n2=
(0,1,0)
1.5
n0
x
sin 30o = 0.5
30o
n3= (-cos30,-0.5,0)
n1= (cos30, -0.5, 0)
How to Build a Tetrahedron: EASIER
Now shown in yz axes:
• Side-View reduces 2 triangles (green,blue) to tilted lines
• Find node 0 location: (0,0,zheight)
• Blue side forms right-triangle; solve for zheight:
y
zheight2 + 0.52 = 1.52
n2= (0,1,0)
zheight2 = 22
zheight = 𝟐
RESULT:
1
z
n0
sin 30o = 0.5
zheight = ?
1.5
n1 =( cos30, -0.5, 0)
n3 =(-cos30,-0.5, 0)
n0 = (0, 0, sqrt2)
n1 = ( cos30, -0.5, 0)
n2 = (0,1,0)
n3 = (-cos30, -0.5, 0)
Define CCW triangles from nodes:
n2
f1
f0
n0
n0
x
f2
n3
1
(f3 on back)
n1
z
Define triangles:
• Face f0: (yellow)
f0: n0,n1,n2
• Face f1: (gray)
f1: n0,n2,n3
• Face f2: (blue)
f2: n0,n3,n1
• Face f3: (bottom)
f3: n3,n2,n1
y f3
n2
y
f3
0.5
n1,n3
Tetrahedron Normal Vectors N?
y f3
n2
y
n2
Find by cross-products, OR
1
by construction:
(f3
on
back)
f1
f3
f0
• Face f3: (bottom)
n0
n0
x
n3,n2,n1
f2
0.5
N3 = (0,0,-1) by inspection
n1
n3
n1,n3
• Face f2 (blue)
N2 = (1/1.5)*(0, sqrt2, 0.5) by right-triangle
N2 = (0, -sqrt(8/9), 1/3); summarize as (0,-a,b)
• Face f0 (yellow): rotate N2 = (0,-a,b) on +Z axis by 120o (z unchanged)
N0 = (a*cos30, a*sin30, b) = (sqrt(8/9)*sqrt(3/4),sqrt(8/9)/2, 1/3)
N0 = (sqrt(2/3), sqrt(2/9), 1/3)
• Face f1 (gray): rotate N2 by -120o, or negate x component of f0 :
N1 = (-sqrt(2/3), sqrt(2/9), 1/3)
z
Tetrahedron Summary
•
•
Nodes: the 3D location (x,y,z) for 1 or more vertices
n0: (0, 0, sqrt2)
n1: ( cos30, -0.5, 0)
n2: (0,1,0)
n3: (-cos30, -0.5, 0)
n2
y
(f3 on back)
f1 n0
f0
x
f2
Triangle Faces (nodes in CCW winding order)
f0: n0,n1,n2 (yellow)
f1: n0,n2,n3 (gray)
f2: n0,n3,n1 (blue)
f3: n3,n2,n1 (bottom)
Unit-length Surface Normals for each face (x,y,z)
N0 = (sqrt(2/3), sqrt(2/9), 1/3)
N1 = (-sqrt(2/3), sqrt(2/9), 1/3)
N2 = (0, -sqrt(8/9), 1/3)
N3 = (0,0,-1)
n1
n3
n2
y
1 f3
n0
z
•
•
f0
0.5
n1,n3