3d math primer: cocoaconf atlanta
TRANSCRIPT
![Page 1: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/1.jpg)
The Day You Finally Use Algebra!
Janie Clayton
![Page 2: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/2.jpg)
About Me
![Page 3: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/3.jpg)
But math is hard! (Let’s go shopping!)
![Page 4: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/4.jpg)
Math is hard. But math is fun too.
![Page 5: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/5.jpg)
Demo
![Page 6: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/6.jpg)
Normalized Coordinate
Systems
![Page 7: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/7.jpg)
Cartesian Coordinates
![Page 8: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/8.jpg)
320
480
![Page 9: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/9.jpg)
320
480 or 568
![Page 10: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/10.jpg)
![Page 11: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/11.jpg)
1
1
![Page 12: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/12.jpg)
(0,0) (1,0)
(0,1) (1,1)
![Page 13: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/13.jpg)
(0,0) (1,0)
(0,1) (1,1)
![Page 14: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/14.jpg)
(0,0) (1,0)
(0,1) (1,1)
![Page 15: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/15.jpg)
self.size.width
self. size.
height
![Page 16: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/16.jpg)
- Colors, like the screen dimensions, are based on percentages rather than absolute values.
- If you come from a graphic design background, you need to convert your 255 scale to percentages.
![Page 17: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/17.jpg)
Algorithm Rosetta Stone
![Page 18: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/18.jpg)
Rosetta Stone- Had the same text in
Greek, demotic, and hieroglyphics. Was used to translate hieroglyphics
- Going to do similar thing, but with math algorithms, plain English, and code
![Page 19: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/19.jpg)
√-1 2ˆ3 ∑ π
![Page 20: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/20.jpg)
∑5
i = 1
4i
Algoritm
![Page 21: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/21.jpg)
Plain English
I have a starting value of one. I have an end value of five. I want to multiply each value
by four and add them together.
![Page 22: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/22.jpg)
var x = 0
for index in 1…5 {
x += (4 * index)
}
Code
![Page 23: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/23.jpg)
√-1 2ˆ3 ∑ π…and it was delicious!
![Page 24: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/24.jpg)
i 8 sum pi…and it was delicious!
![Page 25: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/25.jpg)
Trigonometry
![Page 26: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/26.jpg)
Triangles
A shape with three sides where the angles add up to 180 degrees
Everything in our world comes back to triangles
The most stable shape
Foundation of 3D graphics
![Page 27: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/27.jpg)
Right Triangles
![Page 28: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/28.jpg)
Pythagorean Theorem
aˆ2 + bˆ2 = cˆ2
![Page 29: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/29.jpg)
Circle Formulas
Circumference: 2πr
Area: πrˆ2
![Page 30: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/30.jpg)
So What Can We Do Knowing This?
Change the direction a character is moving in
Check to see if the user is hitting a target area on the screen
Draw shapes and filters in specific configurations
![Page 31: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/31.jpg)
Linear Algebra
![Page 32: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/32.jpg)
– BetterExplained.com
“The survivors of linear algebra classes are physicists, graphics programmers and other
masochists.”
![Page 33: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/33.jpg)
What is Linear Algebra?
Linear Algebra allows you to perform an action on many values at the same time.
This action must be consistent across all values, such as multiplying every value by two.
![Page 34: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/34.jpg)
What is Linear Algebra?
Values are placed in an object called a matrix and the actions performed on the values are called transforms
Linear algebra is optimized for parallel mathematical operations.
![Page 35: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/35.jpg)
Vector Data Types
vec2, vec3, vec4: 2D, 3D, and 4D floating point vector objects.
vec2: (x, y)
vec3: (x, y, z)
vec4: (r, g, b, a)
![Page 36: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/36.jpg)
Vectors
9
33√10
![Page 37: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/37.jpg)
Demo
![Page 38: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/38.jpg)
Enter the Matrix
![Page 39: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/39.jpg)
Matrix Data Types
mat2, mat3, mat4: 2, 3, and 4 element matrices.
mat2: Holds a 2 X 2 number matrix
mat3: Holds a 3 X 3 number matrix, used for 2D linear algebra
mat4: Holds a 4 X 4 number matrix, used for 3D linear algebra
![Page 40: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/40.jpg)
1.0 1.0 1.0 0 1.0 1.0 1.0 0 1.0 1.0 1.0 0 1.0 1.0 1.0 0
Column
Row
![Page 41: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/41.jpg)
mat4 genericMatrix = mat4(
1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 0, 0, 0, 0
);
Column
Row
![Page 42: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/42.jpg)
vec4 firstColumn = vec4(1.0, 1.0, 1.0, 1.0);
vec4 secondColumn = vec4(1.0, 1.0, 1.0, 1.0);
vec4 thirdColumn = vec4(1.0, 1.0, 1.0, 1.0);
vec4 fouthColumn = vec4(0, 0, 0, 0);
mat4 myMatrix = mat4( firstColumn, SecondColumn, thirdColumn, FourthColumn
);
![Page 43: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/43.jpg)
CGAffineTransform
![Page 44: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/44.jpg)
Affine, Wha?? :(A transform is any function that alters the size, position, or rotation of an object on your screen.
Four types: Identity, Translate, Rotation, and Scale.
For a transform to be affine, the lines in your shape must be parallel.
![Page 45: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/45.jpg)
![Page 46: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/46.jpg)
CGAffine Transform Methods
CGAffineTransformMakeRotation (GLFloat angle);
CGAffineTransformMakeScale (CGFLoat sx, CGFloat sy);
CGAffineTransformMakeTranslation (CGFloat tx, CGFloat ty);
![Page 47: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/47.jpg)
struct CGAffineTransform { CGFloat a; GLFloat b; CGFloat c; CGFloat d; CGFloat tx; CGFloat ty
}
![Page 48: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/48.jpg)
[x y 1][a b 0 c d 0 tx ty 0]
X =
[x’ y’ 1]
![Page 49: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/49.jpg)
let pointX = a * x + c * y + tx
let pointY = b * x + d * y + ty
![Page 50: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/50.jpg)
CGAffineTransformMakeRotation(45)
CGAffineTransformMakeScale(2,2)
![Page 51: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/51.jpg)
rotate 45 degrees
Double Size
![Page 52: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/52.jpg)
Refraction Fragment Shader Example
![Page 53: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/53.jpg)
void main() { highp vec2 textureCoordinateToUse = vec2(textureCoordinate.x, (textureCoordinate.y * aspectRatio + 0.5 - 0.5 * aspectRatio)); highp float distanceFromCenter = distance(center, textureCoordinateToUse); lowp float checkForPresenceWithinSphere = step(distanceFromCenter, radius); distanceFromCenter = distanceFromCenter / radius; highp float normalizedDepth = radius * sqrt(1.0 - distanceFromCenter * distanceFromCenter); highp vec3 sphereNormal = normalize(vec3(textureCoordinateToUse - center, normalizedDepth)); highp vec3 refractedVector = 2.0 * refract(vec3(0.0, 0.0, -1.0), sphereNormal, refractiveIndex); refractedVector.xy = -refractedVector.xy; highp vec3 finalSphereColor = texture2D(inputImageTexture, (refractedVector.xy + 1.0) * 0.5).rgb; // Grazing angle lighting highp float lightingIntensity = 2.5 * (1.0 - pow(clamp(dot(ambientLightPosition, sphereNormal), 0.0, 1.0), 0.25)); finalSphereColor += lightingIntensity; // Specular lighting lightingIntensity = clamp(dot(normalize(lightPosition), sphereNormal), 0.0, 1.0); lightingIntensity = pow(lightingIntensity, 15.0); finalSphereColor += vec3(0.8, 0.8, 0.8) * lightingIntensity; gl_FragColor = vec4(finalSphereColor, 1.0) * checkForPresenceWithinSphere; }
![Page 54: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/54.jpg)
highp vec2 textureCoordinateToUse = vec2(textureCoordinate.x, (textureCoordinate.y * aspectRatio + 0.5 - 0.5 * aspectRatio));
![Page 55: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/55.jpg)
![Page 56: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/56.jpg)
highp float distanceFromCenter = distance(center, textureCoordinateToUse);
![Page 57: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/57.jpg)
![Page 58: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/58.jpg)
lowp float checkForPresenceWithinSphere = step(distanceFromCenter, radius);
![Page 59: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/59.jpg)
![Page 60: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/60.jpg)
distanceFromCenter = distanceFromCenter / radius;
![Page 61: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/61.jpg)
![Page 62: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/62.jpg)
highp float normalizedDepth = radius * sqrt(1.0 - distanceFromCenter * distanceFromCenter);
![Page 63: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/63.jpg)
![Page 64: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/64.jpg)
highp vec3 sphereNormal = normalize(vec3(textureCoordinateToUse - center, normalizedDepth));
![Page 65: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/65.jpg)
![Page 66: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/66.jpg)
highp vec3 refractedVector = refract(vec3(0.0, 0.0, -1.0), sphereNormal, refractiveIndex);
![Page 67: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/67.jpg)
![Page 68: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/68.jpg)
gl_FragColor = texture2D(inputImageTexture, (refractedVector.xy + 1.0) * 0.5) * checkForPresenceWithinSphere;
![Page 69: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/69.jpg)
![Page 70: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/70.jpg)
![Page 71: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/71.jpg)
![Page 72: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/72.jpg)
![Page 73: 3D Math Primer: CocoaConf Atlanta](https://reader037.vdocuments.mx/reader037/viewer/2022110122/55b1b333bb61eb32378b45d7/html5/thumbnails/73.jpg)
The End