3d math without presenter notes
DESCRIPTION
This is the exact same presentation as the other one, except this does not include the presenter notes. When I uploaded the PDF it looked very bad.TRANSCRIPT
![Page 1: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/1.jpg)
The Day You Finally Use Algebra!
Janie Clayton-Hasz
![Page 2: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/2.jpg)
About Me
![Page 3: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/3.jpg)
But math is hard! (Let’s go shopping!)
![Page 4: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/4.jpg)
Math is hard. But math is fun too.
![Page 5: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/5.jpg)
Demo
![Page 6: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/6.jpg)
Normalized Coordinate
Systems
![Page 7: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/7.jpg)
Cartesian Coordinates
![Page 8: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/8.jpg)
320
480
![Page 9: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/9.jpg)
320
480 or 568
![Page 10: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/10.jpg)
![Page 11: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/11.jpg)
1
1
![Page 12: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/12.jpg)
(0,0) (1,0)
(0,1) (1,1)
![Page 13: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/13.jpg)
(0,0) (1,0)
(0,1) (1,1)
![Page 14: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/14.jpg)
(0,0) (1,0)
(0,1) (1,1)
![Page 15: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/15.jpg)
self.size.width
self. size.
height
![Page 16: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/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 Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/17.jpg)
Algorithm Rosetta Stone
![Page 18: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/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 Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/19.jpg)
√-1 2ˆ3 ∑ π
![Page 20: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/20.jpg)
∑5
i = 1
4i
Algoritm
![Page 21: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/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 Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/22.jpg)
var x = 0 !
for index in 1…5 { !
x += (4 * index) !
}
Code
![Page 23: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/23.jpg)
It’s All Greek to Me
π
∆
i
θ
Constant: 3.14159…
Change between two values
Square root of negative one
Variable representing an angle
![Page 24: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/24.jpg)
√-1 2ˆ3 ∑ π…and it was delicious!
![Page 25: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/25.jpg)
i 8 sum pi…and it was delicious!
![Page 26: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/26.jpg)
Trigonometry
![Page 27: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/27.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 28: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/28.jpg)
Right Triangles
![Page 29: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/29.jpg)
Pythagorean Theorem
aˆ2 + bˆ2 = cˆ2
![Page 30: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/30.jpg)
Triangle Formulas
Tangent
Sin
Cosine
Arctangent
Arcsin
Arccosine
![Page 31: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/31.jpg)
Triangle Formulas
![Page 32: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/32.jpg)
Triangle Formulas
![Page 33: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/33.jpg)
Circle Formulas
Circumference: 2πr
Area: πrˆ2
![Page 34: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/34.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 35: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/35.jpg)
Demo
![Page 36: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/36.jpg)
Linear Algebra
![Page 37: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/37.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 38: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/38.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 39: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/39.jpg)
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 40: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/40.jpg)
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 41: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/41.jpg)
Enter the Matrix
![Page 42: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/42.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 43: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/43.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 44: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/44.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 45: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/45.jpg)
CGAffineTransform
![Page 46: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/46.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 47: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/47.jpg)
CGAffine Transform Methods
CGAffineTransformMakeRotation (GLFloat angle);
CGAffineTransformMakeScale (CGFLoat sx, CGFloat sy);
CGAffineTransformMakeTranslation (CGFloat tx, CGFloat ty);
![Page 48: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/48.jpg)
struct CAAffineTransform { CGFloat a; GLFloat b; CGFloat c; CGFloat d; CGFloat tx; CGFloat ty
}
![Page 49: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/49.jpg)
new point x = a * x + c * y + tx;
new point y = b * x + d * y + ty;
![Page 50: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/50.jpg)
How Does This Work?
For each point in your shape, the computer uses this calculation to figure out where the point should be.
If you have a rectangle, this gets run four times: One for each point in your shape.
![Page 51: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/51.jpg)
Refraction Fragment Shader Example
![Page 52: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/52.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 53: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/53.jpg)
highp vec2 textureCoordinateToUse = vec2(textureCoordinate.x, (textureCoordinate.y * aspectRatio + 0.5 - 0.5 * aspectRatio));
![Page 54: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/54.jpg)
highp float distanceFromCenter = distance(center, textureCoordinateToUse);
![Page 55: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/55.jpg)
lowp float checkForPresenceWithinSphere = step(distanceFromCenter, radius);
![Page 56: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/56.jpg)
distanceFromCenter = distanceFromCenter / radius;
![Page 57: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/57.jpg)
highp float normalizedDepth = radius * sqrt(1.0 - distanceFromCenter * distanceFromCenter);
![Page 58: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/58.jpg)
highp vec3 sphereNormal = normalize(vec3!(textureCoordinateToUse - center, normalizedDepth));
![Page 59: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/59.jpg)
highp vec3 refractedVector = refract(vec3(0.0, 0.0, -1.0), !sphereNormal, refractiveIndex);
![Page 60: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/60.jpg)
gl_FragColor = texture2D(inputImageTexture, (refractedVector.xy + 1.0) * 0.5) * checkForPresenceWithinSphere;
![Page 61: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/61.jpg)
![Page 62: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/62.jpg)
![Page 63: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/63.jpg)
![Page 64: 3D Math Without Presenter Notes](https://reader038.vdocuments.us/reader038/viewer/2022102902/557f5958d8b42a42328b4c33/html5/thumbnails/64.jpg)
The End