3D Math Without Presenter Notes

The Day You
Finally Use Algebra!
Janie Clayton-Hasz

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

Math is hard.
But math is fun too.

Normalized
Coordinate
Systems

self.size.width
self.
size.
height

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

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

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.

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

It’s All Greek to
Me
π
Δ
i
θ
Constant: 3.14159…
Change between two values
Square root of negative one
Variable representing an angle

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

i 8 sum pi
…and it was delicious!

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

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

Triangle Formulas
Tangent
Sin
Cosine
Arctangent
Arcsin
Arccosine

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

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

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.

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.

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)

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

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

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

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

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.

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

struct CAAffineTransform {
CGFloat a;
GLFloat b;
CGFloat c;
CGFloat d;
CGFloat tx;
CGFloat ty
}

new point x = a * x
+ c * y + tx;
new point y = b * x
+ d * y + ty;

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.

Refraction
Fragment
Shader
Example

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

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 =
refract(vec3(0.0, 0.0, -1.0), !
sphereNormal,
refractiveIndex);

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

3D Math Without Presenter Notes

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (17)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie 3D Math Without Presenter Notes

Ähnlich wie 3D Math Without Presenter Notes (20)

Mehr von Janie Clayton

Mehr von Janie Clayton (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

3D Math Without Presenter Notes