diff --git a/src/routes/articles/Image.svelte b/src/routes/articles/Image.svelte new file mode 100644 index 0000000..44e522b --- /dev/null +++ b/src/routes/articles/Image.svelte @@ -0,0 +1,26 @@ + + +
+ {#each paths as path (path)} + + {/each} +
+ + diff --git a/src/routes/articles/the-graphics-pipeline/+page.svx b/src/routes/articles/the-graphics-pipeline/+page.svx index df63865..58a92ea 100644 --- a/src/routes/articles/the-graphics-pipeline/+page.svx +++ b/src/routes/articles/the-graphics-pipeline/+page.svx @@ -3,6 +3,10 @@ title: The Graphics Pipeline date: "April 20 - 2025" --- + + Ever wondered how games put all that gore on your display? All that beauty is brought into life by a process called **rendering**, and at the heart of it, is the **graphics pipeline**. In this article we'll dive deep into the intricate details of this beast. @@ -25,6 +29,11 @@ stage and have a recap afterwards to demystify this 4-stage division. Ever been jump-scared by this sight in an FPS? Why are things rendered like that? + + + In order to display a scene (like a murder scene), we need to have a way of **representing** the **surface** of the composing objects (like corpses) in computer-memory. We only care about the **surface** since we won't be seeing the insides anyways---Not that we want to. @@ -40,36 +49,41 @@ For instance, **NURB surfaces** are great for representing **curves** and it's all about the **high-precision** needed to do **CAD**. We could also do **ray-tracing** using fancy equations for rendering **photo-realistic** images. - These are all great--ignoring the fact that they would take an eternity to process... But what we need is a **performant** approach that can do this for an entire scene with hundereds of thousands of objects (like a lot of corpses) in under a small fraction of a second. What we need is **polygonal modeling**. - **Polygonal modeling** enables us to do an exciting thing called **real-time rendering**. The idea is that we only need an **approximation** of a surface to render it **realisticly-enough** for us to have some fun killing time! We can achieve this approximation using a collection of **triangles**, **lines** and **dots** (primitives), which themselves are composed of a series of **vertices** (points in space). + A **vertex** is simply a point in space. Once we get enough of these **points**, we can conncet them to form **primitives** such as **triangles**, **lines** and **dots**. And once we connect enough of these **primitives** together, they form a **model** or a **mesh** (that we need for our corpse). With some interesting models put together, we can compose a **scene** (like a murder scene :D). + But let's not get ahead of ourselves. The primary type of **primitive** that we care about during **polygonal modeling** is a **triangle**. But why not squares or polygons with variable number of edges? ## Why Triangles? + In **Euclidean geometry**, triangles are always **planar** (they exist only in one plane), any polygon composed of more than 3 points may break this rule, but why does polygons residing in one plane so important to us? - -Being non-planar makes it rather difficult to determine - + When a polygon exists only in one plane, we can safely imply that **only one face** of it can be visible at any one time, this enables us to utilize a huge optimization technique called **back-face culling**. diff --git a/static/images/boo.png b/static/images/boo.png new file mode 100644 index 0000000..cd374b6 Binary files /dev/null and b/static/images/boo.png differ diff --git a/static/images/bunny.png b/static/images/bunny.png new file mode 100644 index 0000000..5a3f13f Binary files /dev/null and b/static/images/bunny.png differ diff --git a/static/images/non_planar_1.jpg b/static/images/non_planar_1.jpg new file mode 100644 index 0000000..96524d1 Binary files /dev/null and b/static/images/non_planar_1.jpg differ diff --git a/static/images/non_planar_2.png b/static/images/non_planar_2.png new file mode 100644 index 0000000..e6bad91 Binary files /dev/null and b/static/images/non_planar_2.png differ diff --git a/static/images/planar.jpg b/static/images/planar.jpg new file mode 100644 index 0000000..aa6db57 Binary files /dev/null and b/static/images/planar.jpg differ diff --git a/static/images/polygon_sphere.webp b/static/images/polygon_sphere.webp new file mode 100644 index 0000000..42cb3ca Binary files /dev/null and b/static/images/polygon_sphere.webp differ