Computer Graphics
Computer graphics is a sub-field of computer science which studies methods for digitally synthesizing and manipulating visual content.
Index
Transformation Matrices
Transformation matrices are a type of matrices that represent linear transformations. Affine transformations are transformations that preserve lines and parallelism but not necessarily distances and angles.
Translation Matrix
Translation is a transformation that moves objects to a position.
Rotation Matrix
Rotation is a transformation that moves objects relative to an axis by an angle θ.
Scaling Matrix
Scaling is a transformation that enlarges (increases) or shrinks (diminishes) objects by a scale factor.
Shearing Matrix
Shearing is a transformation that skews the coordinate space, stretching it nonuniformly. Areas and volumes are preserved but angles are not.
Animation
Computer animation is the process used for digitally generating animated images.
Case Studies
- Animation Instancing - Instancing for SkinnedMeshRenderer
- Texture Animation: Applying Morphing and Vertex Animation Techniques
- How To Render 10,000 Animated Characters With 20 Draw Calls In Unity
- Dev Diary — Skeletal Animation and GPU Skinning
Procedural Generation
Procedural generation is a method of creating data algorithmically as opposed to manually, typically through a combination of human-generated assets and algorithms coupled with computer-generated randomness and processing power.
Map Generation
Wave Function Collapse
- Infinite procedurally generated city with the Wave Function Collapse algorithm
- Wave Function Collapse - Procedural Building Generation in Unity
- The Wavefunction Collapse Algorithm explained very clearly
Superformula
The superformula is a generalization of the superellipse that can be used to describe many complex shapes and curves that are found in nature.
Algorithms
Letterbox
Given the image:
- Resolution:
(wi, hi) - Aspect Ratio:
ri = wi / hi
Given the canvas:
- Resolution:
(wc, hc) - Aspect Ratio:
rc = wc / hc
The new resolution is:
rc > ri ? (wi * hc/hi, hc) : (wc, hi * wc/wi)
To center the image:
top = (hc - hnew) / 2
left = (wc - wnew) / 2
Example.
20
|------------------|
10
|---------|
-------------------- --- ---
| | | | 7 |
| | | | | 10
|---------- | --- |
| | |
-------------------- ---
wc = 20
hc = 10
wi = 10
hi = 7
20/10 > 10/7 ==> (wi * hc/hi, hc) = (10 * 10/7, 10) = (100/7, 10) ~ (14.3, 10)