{{< partial "learn_x_header" >}}

## What Will You Learn?

- What are 3D graphics?
- What are the use cases for 3D graphics?
- What are the basics of 3D graphics?
- Where can I learn more about 3D graphics?

## The Basics

Learn 3D Graphics fundamentals, then progress to more complex studies.

The idea of 3D graphics has been [around since 1961] and has significantly evolved. I'll walk you through the basics of 3D graphics development.

### Primary Use Cases

- Video games and movies
- Planning real-world architecture
- Interactive software experiences
- Modeling reality
- Learning

My primary use case is building interactive software experiences. The following content is tailored with that in mind, but will stay abstract enough to help you learn fundamental concepts.

## Modeling

3D graphic development starts with modeling your 3D objects. We must define the constraints. We must define the purpose of our 3D model.

## Geometry

[Geometry] is the components of a 3D object.

## Vertex

[A Vertex] is a single point in space typically represented by x,y, and z coordinates.

## Vertices

[The Vertices] are a collection of vertex values that define a 3D object's points.

## Edge

[The Edge] is a line between two vertices.

## Faces

[The Faces] are a closed set of edges.

## Surface Normal

## UV Point & UV Space

UV Mapping is mapping a 2D image to a 3D model.

## Unwrap

### Meshes

Meshes are a common way of modeling 3D objects. Meshes are typically made up of triangles so the shapes can fit into a plane.

A mesh is a collection of vertices, edges, and faces that define the shape of a 3D object.

- A vertex is a single point.
- An edge is a straight line segment that connects two vertices.
- A face is a flat surface enclosed by edges.

{{< figure src="vertex-edge-face.png" alt="Vertex Edge Face" caption="Vertex Edge Face" >}}

### Geometric Modeling

We should input little data to render a large amount of data.

## Rendering

You'll want to define constraints and requirements when moving to the rendering process. Do you need an extremely detailed scene? Is a lower resolution required for quick rendering?

Lighting in your renders adds depth to your objects. Without illumination, your objects will look flat and lifeless, and with illumination, your objects will look realistic.

## Graphic Pipelines

Graphic pipelines start with vertices and end with pixels. It is a conceptual model that defines how to render a 3D scene on a 2D screen.

<!--

## Graphic APIs

Hundreds of graphic APIs exist. Choosing the optimal API for your use case can be challenging.

... define how to choose APIs.

Ideally, a database of graphic APIs with pros and cons like an alternative to

-->

## Learn 3D Graphics - Beyond the Basics

- _Videos_

  - [CG101: General 3D Terminology] - Pluralsight
  - [Blender Fundamentals] - Pluralsight
  - [Your First Day in Blender] - Pluralsight
  - [Introduction to Materials in Blender] - Pluralsight
  - [Introduction to Modeling in Blender] - Pluralsight
  - [Introduction to Animation in Blender] - Pluralsight

- _Books_
  - [3D Art Essentials: The Fundamentals of 3D Modeling, Texturing, and Animation] - Amazon
- _Articles_
  - [The Whirlwind Introduction to Computer Graphics Page] - Mike Bailey, OSU Computer Science Teacher
  - [Pixar in a Box] - Khan Academy

## Related Tools

- [Blender] - An open-source 3D creation suite
- [Babylon.js] - A nodejs module meant to simplify 3D graphics development
- [Babylon.js Playground] - Experiment with rendering 3D scenes with the Babylon.js library
- [Khronos WebGL Rendering] - Debug WebGL problems
- [WebGLDeveloperTools] - Scripts you can use to debug in JavaScript

## Related Content

- [3D Graphics: A WebGL Tutorial]


[around since 1961]: https://en.wikipedia.org/wiki/3D_computer_graphics#History
[geometry]: https://en.wikipedia.org/wiki/Solid_geometry
[a vertex]: https://en.wikipedia.org/wiki/Vertex_(geometry)
[the vertices]: https://en.wikipedia.org/wiki/3D_computer_graphics#Modeling
[the edge]: https://en.wikipedia.org/wiki/Polygon_mesh#Elements
[the faces]: https://en.wikipedia.org/wiki/Polygon_mesh#Elements
[cg101: general 3d terminology]: https://www.pluralsight.com/courses/cg101-general-3d-terminology-711
[blender fundamentals]: https://www.pluralsight.com/courses/blender-fundamentals
[your first day in blender]: https://www.pluralsight.com/courses/your-first-day-blender-1786
[introduction to materials in blender]: https://www.pluralsight.com/courses/introduction-materials-blender-2362
[introduction to modeling in blender]: https://www.pluralsight.com/courses/introduction-modeling-blender-1692
[introduction to animation in blender]: https://www.pluralsight.com/courses/introduction-animation-blender-2303
[3d art essentials: the fundamentals of 3d modeling, texturing, and animation]: https://www.amazon.com/Art-Essentials-Fundamentals-Texturing-Animation/dp/0240814711
[the whirlwind introduction to computer graphics page]: http://web.engr.oregonstate.edu/~mjb/whirlwind/
[pixar in a box]: https://www.khanacademy.org/computing/pixar
[blender]: https://www.blender.org/
[babylon.js]: https://www.babylonjs.com/
[babylon.js playground]: https://www.instagram.com/p/CVPxHpwrPRy/?utm_source=ig_web_copy_link
[khronos webgl rendering]: https://www.khronos.org/webgl/wiki/Debugging
[webgldevelopertools]: https://github.com/KhronosGroup/WebGLDeveloperTools
[3d graphics: a webgl tutorial]: https://www.toptal.com/javascript/3d-graphics-a-webgl-tutorial