This is the version of my 3D math talk that I used at CocoaConf Atlanta. This version includes the graphic representations of the different steps in implementing the shader.

1. The Day You
Finally Use Algebra!
Janie Clayton

2. About Me

3. But math is hard!
(Let’s go shopping!)

4. Math is hard.
But math is fun too.

5. Demo

6. Normalized
Coordinate
Systems

7. Cartesian
Coordinates

8. 320
480

9. 320
480
or
568

11. 1
1

12. (0,0) (1,0)
(0,1) (1,1)

13. (0,0) (1,0)
(0,1) (1,1)

14. (0,0) (1,0)
(0,1) (1,1)

15. self.size.width
self.
size.
height

16. - 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.

17. Algorithm Rosetta
Stone

18. 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

19. √-1 2ˆ3 Σ π

20. Algoritm
Σ5
i = 1
4i

21. 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.

22. var x = 0
for index in 1…5 {
x += (4 * index)
}
Code

23. √-1 2ˆ3 Σ π
…and it was delicious!

24. i 8 sum pi
…and it was delicious!

25. Trigonometry

26. 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

27. Right Triangles

28. Pythagorean
Theorem
aˆ2 + bˆ2 = cˆ2

29. Circle Formulas
Circumference: 2πr
Area: πrˆ2

30. 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

31. Linear Algebra

32. “The survivors of
linear algebra classes
are physicists, graphics
programmers and other
masochists.”
– BetterExplained.com

33. 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.

34. 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.

35. 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)

36. Vectors
9
3
3√10

37. Demo

38. Enter the Matrix

39. 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

40. Column
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
Row

41. 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

42. 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
);

43. CGAffineTransform

44. 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.

46. CGAffine
Transform Methods
CGAffineTransformMakeRotation
(GLFloat angle);
CGAffineTransformMakeScale
(CGFLoat sx, CGFloat sy);
CGAffineTransformMakeTranslation
(CGFloat tx, CGFloat ty);

47. struct CGAffineTransform {
CGFloat a;
GLFloat b;
CGFloat c;
CGFloat d;
CGFloat tx;
CGFloat ty
}

48. [x y 1]
[a b 0
c d 0
tx ty 0]
X =
[x’ y’ 1]

49. let pointX = a * x +
c * y + tx
let pointY = b * x
+ d * y + ty

50. CGAffineTransformMakeRotation(45)
CGAffineTransformMakeScale(2,2)

51. rotate 45
degrees
Double
Size

52. Refraction
Fragment
Shader
Example

53. 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;
}

54. highp vec2 textureCoordinateToUse =
vec2(textureCoordinate.x,
(textureCoordinate.y * aspectRatio +
0.5 - 0.5 * aspectRatio));

56. highp float
distanceFromCenter =
distance(center,
textureCoordinateToUse);

58. lowp float
checkForPresenceWithinSphere
= step(distanceFromCenter,
radius);

60. distanceFromCenter =
distanceFromCenter /
radius;

62. highp float normalizedDepth =
radius * sqrt(1.0 -
distanceFromCenter *
distanceFromCenter);

64. highp vec3 sphereNormal =
normalize(vec3
(textureCoordinateToUse -
center, normalizedDepth));

66. highp vec3 refractedVector =
refract(vec3(0.0, 0.0, -1.0),
sphereNormal,
refractiveIndex);

68. gl_FragColor =
texture2D(inputImageTexture,
(refractedVector.xy + 1.0) * 0.5)
* checkForPresenceWithinSphere;

73. The End