Compare commits
3 commits
dfd7b41ee0
...
fec35bf96f
| Author | SHA1 | Date | |
|---|---|---|---|
| fec35bf96f | |||
| c5ad078320 | |||
| ed8c3b800e |
3 changed files with 277 additions and 74 deletions
|
|
@ -1 +1,169 @@
|
|||
<h1>Let's COOK!</h1>
|
||||
<script lang="ts">
|
||||
import './articles/article.css';
|
||||
import Note from './articles/Note.svelte';
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="padding"></div>
|
||||
|
||||
<div class="body">
|
||||
<p>
|
||||
We retain 10% of what we <strong>read</strong>, 20% of what we <strong>hear</strong>, 30% of
|
||||
what we <strong>see</strong>... but 90% of what we <strong>teach</strong> ! <br />
|
||||
|
||||
Dazzle is an effort to <strong>solidify</strong> my understading of the complex world of
|
||||
computers. and to give back to the <strong>community</strong> 💖.
|
||||
<br />
|
||||
Please enjoy ;)
|
||||
</p>
|
||||
|
||||
<h2 style:padding="0">The Graphics Pipeline</h2>
|
||||
<Note type="none" flow="true">
|
||||
<p>
|
||||
Article series covering the <strong>hows</strong> and <strong>whys</strong> of the
|
||||
<strong>Graphics Pipeline</strong>.
|
||||
</p>
|
||||
</Note>
|
||||
<Note type="resource" , title="Geometry Processing" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
|
||||
<Note type="resource" , title="Rasterization" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
|
||||
<Note type="resource" , title="Pixel Processing" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
|
||||
<Note type="resource" , title="Optimizations" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
|
||||
<h2 style:padding="0">Mathematics</h2>
|
||||
<Note type="none" flow="true">
|
||||
<p>
|
||||
Article series covering the <strong>hows</strong> and <strong>whys</strong> of the
|
||||
<strong>Graphics Pipeline</strong>.
|
||||
</p>
|
||||
</Note>
|
||||
<Note type="resource" , title="Linear Transformations" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
<Note type="resource" , title="Trigonometry" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
<Note type="resource" , title="Floating Points" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
|
||||
<h2 style:padding="0">Hardware Architecture</h2>
|
||||
<Note type="none" flow="true">
|
||||
<p>
|
||||
Article series covering the <strong>hows</strong> and <strong>whys</strong> of the
|
||||
<strong>Graphics Pipeline</strong>.
|
||||
</p>
|
||||
</Note>
|
||||
<Note type="resource" , title="Memory Architecture" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
<Note type="resource" , title="GPU Architecture" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
<Note type="resource" , title="CPU Architecture" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
|
||||
<h2 style:padding="0">Software Engineering</h2>
|
||||
<Note type="none" flow="true">
|
||||
<p>
|
||||
Article series covering the <strong>hows</strong> and <strong>whys</strong> of the
|
||||
<strong>Graphics Pipeline</strong>.
|
||||
</p>
|
||||
</Note>
|
||||
<Note type="resource" , title="Technical Debt Management" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
<Note type="resource" , title="C++, intermediate to advanced" flow="true">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue feugiat leo quis
|
||||
maximus. Sed id odio a velit hendrerit interdum efficitur quis enim. Morbi luctus lectus non
|
||||
ligula sagittis, vitae rutrum felis facilisis.
|
||||
</p>
|
||||
</Note>
|
||||
</div>
|
||||
|
||||
<div class="padding"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
||||
|
||||
.container {
|
||||
background-color: #1d2021;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 3;
|
||||
padding: 1em;
|
||||
background-color: #282828;
|
||||
|
||||
min-width: 80ch;
|
||||
max-width: 80ch;
|
||||
text-wrap-mode: wrap;
|
||||
text-wrap-style: pretty;
|
||||
text-align: justify;
|
||||
|
||||
border-left: 1px solid #92837420;
|
||||
border-right: 1px solid #92837420;
|
||||
}
|
||||
|
||||
.padding {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,75 +1,106 @@
|
|||
<script lang="ts">
|
||||
import { Info, BookCopy, Eye, Network, Sigma, Image, Quote } from '@lucide/svelte';
|
||||
let { title = '', type = 'info' } = $props();
|
||||
let { title = '', type = 'info', flow = false } = $props();
|
||||
</script>
|
||||
|
||||
<div class="note">
|
||||
<div>
|
||||
{#if type == 'none'}
|
||||
<div class="note_no_margin">
|
||||
<div class="head">
|
||||
<div class="icon">
|
||||
{#if type == 'info'}
|
||||
<Info />
|
||||
{:else if type == 'image'}
|
||||
<Image />
|
||||
{:else if type == 'diagram'}
|
||||
<Network />
|
||||
{:else if type == 'quote'}
|
||||
<Quote />
|
||||
{:else if type == 'math'}
|
||||
<Sigma />
|
||||
{:else if type == 'review'}
|
||||
<Eye />
|
||||
{:else if type == 'resource'}
|
||||
<BookCopy />
|
||||
{/if}
|
||||
</div>
|
||||
{#if type != 'none'}
|
||||
<div class="icon">
|
||||
{#if type == 'info'}
|
||||
<Info />
|
||||
{:else if type == 'image'}
|
||||
<Image />
|
||||
{:else if type == 'diagram'}
|
||||
<Network />
|
||||
{:else if type == 'quote'}
|
||||
<Quote />
|
||||
{:else if type == 'math'}
|
||||
<Sigma />
|
||||
{:else if type == 'review'}
|
||||
<Eye />
|
||||
{:else if type == 'resource'}
|
||||
<BookCopy />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if type == 'info'}
|
||||
<div class="horiz_line" style:background-color="#8ec07c"></div>
|
||||
{:else if type == 'diagram'}
|
||||
<div class="horiz_line" style:background-color="#d3869b"></div>
|
||||
{:else if type == 'quote'}
|
||||
<div class="horiz_line" style:background-color="#d3869b"></div>
|
||||
{:else if type == 'image'}
|
||||
<div class="horiz_line" style:background-color="#d3869b"></div>
|
||||
{:else if type == 'math'}
|
||||
<div class="horiz_line" style:background-color="#fe8019"></div>
|
||||
{:else if type == 'review'}
|
||||
<div class="horiz_line" style:background-color="#cc241d"></div>
|
||||
{:else if type == 'resource'}
|
||||
<div class="horiz_line" style:background-color="#458588"></div>
|
||||
{#if flow == false}
|
||||
<div class="horiz_line" style:background-color="#fabd2f"></div>
|
||||
{:else if title != ''}
|
||||
<p class="title">{title}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
{#if type == 'info'}
|
||||
<div class="line" style:background-color="#8ec07c"></div>
|
||||
{:else if type == 'diagram'}
|
||||
<div class="line" style:background-color="#d3869b"></div>
|
||||
{:else if type == 'quote'}
|
||||
<div class="line" style:background-color="#d3869b"></div>
|
||||
{:else if type == 'image'}
|
||||
<div class="line" style:background-color="#d3869b"></div>
|
||||
{:else if type == 'math'}
|
||||
<div class="line" style:background-color="#fe8019"></div>
|
||||
{:else if type == 'review'}
|
||||
<div class="line" style:background-color="#cc241d"></div>
|
||||
{:else if type == 'resource'}
|
||||
<div class="line" style:background-color="#458588"></div>
|
||||
{/if}
|
||||
<div class="line" style:background-color="#fabd2f"></div>
|
||||
|
||||
<div class="slot">
|
||||
{#if title != ''}
|
||||
<p class="title">{title}</p>
|
||||
{#if flow == false}
|
||||
<p>{title}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else if type != 'none'}
|
||||
<div class="note">
|
||||
<div class="head">
|
||||
{#if type != 'none'}
|
||||
<div class="icon">
|
||||
{#if type == 'info'}
|
||||
<Info />
|
||||
{:else if type == 'image'}
|
||||
<Image />
|
||||
{:else if type == 'diagram'}
|
||||
<Network />
|
||||
{:else if type == 'quote'}
|
||||
<Quote />
|
||||
{:else if type == 'math'}
|
||||
<Sigma />
|
||||
{:else if type == 'review'}
|
||||
<Eye />
|
||||
{:else if type == 'resource'}
|
||||
<BookCopy />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if flow == false}
|
||||
<div class="horiz_line" style:background-color="#fabd2f"></div>
|
||||
{:else if title != ''}
|
||||
<p class="title">{title}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="line" style:background-color="#fabd2f"></div>
|
||||
|
||||
<div class="slot">
|
||||
{#if title != ''}
|
||||
{#if flow == false}
|
||||
<p>{title}</p>
|
||||
{/if}
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
margin-left: 1em;
|
||||
margin-top: 4px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.note {
|
||||
|
|
@ -78,6 +109,12 @@
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.note_no_margin {
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: The Graphics Pipeline ; Part 1
|
||||
title: The Graphics Pipeline - Part 1
|
||||
date: "April 20 - 2025"
|
||||
---
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ And hey, if you still have questions, feel free to reach out :)
|
|||
|
||||
Initially, I tried cramming everything in **one article**, which hurt the **brevity** and the **structure**.
|
||||
The **graphics pipeline** is a beast---incredibly **complex** and constantly **evolving**.
|
||||
So I split it into a **4-part series**, which lets me go into sufficient depth.
|
||||
So I split it into a **4-part series**, which lets me go into sufficient depth for each stage.
|
||||
But why exactly **4-parts**?
|
||||
|
||||
## Overview
|
||||
|
|
@ -185,7 +185,7 @@ triangles.
|
|||
So, we got our set of vertices, but having a bunch of points floating around wouldn't make a scene very lively
|
||||
(or gory), we need to form **triangles** out of them to compose **models** (like our beautiful corpse).
|
||||
|
||||
The **input assembler** is first the mini-stage in the **geometry processing** stage. And it's responsible for **concatenating** our vertices (the input) to assemble **primitives**.
|
||||
The **input assembler** is first the (sub)stage in the **geometry processing** stage. And it's responsible for **concatenating** our vertices (the input) to assemble **primitives**.
|
||||
It is a **fixed function** stage so we can only configure it (it's not programmable).
|
||||
We can tell the assembler how it should interpret the vertex data by configuring its **primitive** <Tip text="toplogy"> The way in which constituent parts are interrelated or arranged.--mid 19th century: via German from Greek topos ‘place’ + -logy.---Oxford Languages </Tip>.
|
||||
|
||||
|
|
@ -202,7 +202,7 @@ and the number of primitives (n of p) is equals to the number of vertices (n of
|
|||
|
||||
</Note>
|
||||
|
||||
<Note type="math">
|
||||
<Note type="math" flow=true>
|
||||
|
||||
```math
|
||||
\begin{aligned}
|
||||
|
|
@ -222,7 +222,7 @@ When the topology is **line list**, each **consecutive pair of vertices** define
|
|||
|
||||
</Note>
|
||||
|
||||
<Note type="math">
|
||||
<Note type="math" flow=true>
|
||||
|
||||
```math
|
||||
\begin{aligned}
|
||||
|
|
@ -243,7 +243,7 @@ When the primitive topology is **line strip**, **one line** is defined by each *
|
|||
</Note>
|
||||
|
||||
|
||||
<Note type="math">
|
||||
<Note type="math" flow=true>
|
||||
|
||||
```math
|
||||
\begin{aligned}
|
||||
|
|
@ -263,7 +263,7 @@ When the primitive topology is **triangle list**, each **consecutive set of thre
|
|||
|
||||
</Note>
|
||||
|
||||
<Note type="math">
|
||||
<Note type="math" flow=true>
|
||||
|
||||
```math
|
||||
\begin{aligned}
|
||||
|
|
@ -283,7 +283,7 @@ When the primitive topology is **triangle strip**, **one triangle** is defined b
|
|||
|
||||
</Note>
|
||||
|
||||
<Note type="math">
|
||||
<Note type="math" flow=true>
|
||||
|
||||
```math
|
||||
\begin{aligned}
|
||||
|
|
@ -304,7 +304,7 @@ When the primitive topology is **triangle fan**, **triangles** are defined **aro
|
|||
|
||||
</Note>
|
||||
|
||||
<Note type="math">
|
||||
<Note type="math" flow=true>
|
||||
|
||||
```math
|
||||
\begin{aligned}
|
||||
|
|
@ -393,8 +393,8 @@ We got our surface representation---**vertices**. We set the **primitive topolog
|
|||
how to concatenate them. And we optionally (but most certainly) provided some **indices** to avoid
|
||||
duplication.
|
||||
|
||||
All this data (and configuration) is then fed to the very first mini-stage of the **graphics pipeline** called
|
||||
the **input assembler**. Which as stated before, is responsible for **assembling** primitives from our **input** (vertices and indices).
|
||||
All this data (and configuration) is then fed to the very first (sub)stage of the **graphics pipeline** called
|
||||
the **input assembler**. Which as stated before, is responsible for **assembling** primitives from our **input** (vertices and indices)
|
||||
|
||||
<Note type="diagram", title="Geometry Processing">
|
||||
|
||||
|
|
@ -429,7 +429,7 @@ Anything outside of this range is, again, **clipped** and not visible.
|
|||
Yet, as you might imagine, doing everything in the **NDC** is inconvenient and very limiting.
|
||||
We'd like to **compose** a scene by <Tip text="transforming">Scale, Rotate, Translate. </Tip> some objects around, **interact**
|
||||
with the scene by moving and looking around, and express coordinates in arbitrary
|
||||
units---such as meters.
|
||||
units such as meters---or yards and inches if you're American.
|
||||
|
||||
This is done by transforming these vertices through **5 coordinate systems** before ending up in NDC
|
||||
(or outside of if they're meant to be clipped). Here's a high-level overview:
|
||||
|
|
@ -494,7 +494,7 @@ or as a **list of numbers** that happen to have a cute **geometric interpretatio
|
|||
As long the [aximos of vector spaces](https://www.math.ucla.edu/~tao/resource/general/121.1.00s/vector_axioms.html) apply to them, they're vectors.
|
||||
|
||||
However, we won't go into such axioms as we're not interested in **abstract** thinking here.
|
||||
We're aiming to do something **concrete** called **linear transformations** of a set of vertices (models).
|
||||
We're aiming to do something **concrete** like **linear transformations** of a set of vertices (models).
|
||||
So it would be ideal for us to think of them like this:
|
||||
|
||||
- A vector describes a series of steps to perform a **transformation** in space.
|
||||
|
|
@ -578,7 +578,7 @@ Representing rotations like this makes us prone to a phenomenon called **gimbal
|
|||
an axis of control. A way of avoiding this is to rotate around an arbitary axis (makes it a lot harder
|
||||
to happen but still possible).
|
||||
|
||||
The ideal way is to use <Tip text="quaternions" >A quaternion is a four-part hyper-complex number used in three-dimensional rotations and orientations.
|
||||
The ideal way however, is to use <Tip text="quaternions" >A quaternion is a four-part hyper-complex number used in three-dimensional rotations and orientations.
|
||||
A quaternion number is represented in the form a+bi+cj+dk, where a, b, c, and d parts are real numbers, and i, j, and k are the basis elements, satisfying the equation: i2 = j2 = k2 = ijk = −1.</Tip>,
|
||||
which not only make gimbal lock impossible but are also more computationally friendly.
|
||||
|
||||
|
|
@ -587,8 +587,6 @@ I've left links at the end of this article for further study.
|
|||
|
||||
</Note>
|
||||
|
||||
**Why Translation is not a linear transformation**
|
||||
|
||||
**Translation**
|
||||
|
||||
<Note type="info", title="Homogeneous coordinates">
|
||||
|
|
@ -618,7 +616,7 @@ And the cube looks plain like this:
|
|||
|
||||
</Note>
|
||||
|
||||
I hope this one is easy to grasp since **technically** been using it in our initial triangle
|
||||
I hope this one is easy to grasp since **technically** we've been using it in our initial triangle
|
||||
and square examples already, the local space just happened to be in NDC though that is not necessary.
|
||||
|
||||
Say if we arbitrarily consider each 1 unit is 1cm, then a 10m x 10m cube would have the following
|
||||
|
|
@ -649,14 +647,14 @@ This transformation is stored in a matrix called the **model matrix**. This is t
|
|||
So one down, two more to go!
|
||||
|
||||
## Coordinate system -- View Space
|
||||
Alternatively names include: **eye space** or the **camera space**.
|
||||
Alternatively called: the **eye space** or the **camera space**.
|
||||
|
||||
This is where the crucial element of **interactivity**
|
||||
comes to life (well depends if you can move the view in your game or not).
|
||||
|
||||
Currently, we're looking at the world
|
||||
through a fixed lens. Since everything that's rendered will be in the [-1.0, 1.0] range, that means
|
||||
**moving** our selves or our **eyes** or the game's **camera** doesn't have a real meaning.
|
||||
**moving** our selves, (or our **eyes** or, the game's **camera**, however you **look** at it) doesn't have a real meaning.
|
||||
|
||||
Now it's you that's stuck! (haha). But don't worry your layz-ass, instead of moving yourself
|
||||
(which again would not make sense since everything visible ends up in the NDC), you can move the world! (how entitled).
|
||||
|
|
@ -825,14 +823,14 @@ Some LLMs
|
|||
|
||||
</Note>
|
||||
|
||||
<Note title="Books", type="resource">
|
||||
<Note title="Books", type="resource" flow=true>
|
||||
|
||||
[Joey De Vriez --- LearnOpenGL](https://learnopengl.com/) <br/>
|
||||
[Tomas Akenine Moller --- Real-Time Rendering (4th ed)](https://www.realtimerendering.com/intro.html) <br/>
|
||||
[Gabriel Gambetta --- Computer Graphics from Scratch](https://gabrielgambetta.com/computer-graphics-from-scratch/) <br/>
|
||||
</Note>
|
||||
|
||||
<Note title="Wikipedia", type="resource">
|
||||
<Note title="Wikipedia", type="resource" flow=true>
|
||||
|
||||
[Polygonal Modeling](https://en.wikipedia.org/wiki/Polygonal_modeling) <br/>
|
||||
[Non-uniform Rational B-spline Surfaces](https://en.wikipedia.org/wiki/Non-uniform_rational_B-spline) <br/>
|
||||
|
|
@ -843,7 +841,7 @@ Some LLMs
|
|||
|
||||
</Note>
|
||||
|
||||
<Note title="Youtube", type="resource">
|
||||
<Note title="Youtube", type="resource" flow=true>
|
||||
|
||||
[Miolith --- Quick Understanding of Homogeneous Coordinates for Computer Graphics](https://www.youtube.com/watch?v=o-xwmTODTUI) <br/>
|
||||
[Leios Labs --- What are affine transformations?](https://www.youtube.com/watch?v=E3Phj6J287o) <br/>
|
||||
|
|
@ -856,7 +854,7 @@ Some LLMs
|
|||
[javidx9 --- Essential Mathematics For Aspiring Game Developers](https://www.youtube.com/watch?v=DPfxjQ6sqrc) <br/>
|
||||
</Note>
|
||||
|
||||
<Note title="Articles", type="resource">
|
||||
<Note title="Articles", type="resource" flow=true>
|
||||
|
||||
[Stackoverflow --- Why do 3D engines primarily use triangles to draw surfaces?](https://stackoverflow.com/questions/6100528/why-do-3d-engines-primarily-use-triangles-to-draw-surfaces) <br/>
|
||||
[The ryg blog --- The barycentric conspiracy](https://fgiesen.wordpress.com/2013/02/06/the-barycentric-conspirac/) <br/>
|
||||
|
|
@ -866,7 +864,7 @@ Some LLMs
|
|||
[Axioms of vector spaces](https://www.math.ucla.edu/~tao/resource/general/121.1.00s/vector_axioms.html)
|
||||
</Note>
|
||||
|
||||
<Note title="Documentations", type="resource">
|
||||
<Note title="Documentations", type="resource" flow=true>
|
||||
|
||||
[Vulkan Docs --- Drawing](https://docs.vulkan.org/spec/latest/chapters/drawing.html) <br/>
|
||||
[Vulkan Docs --- Pipeline Diagram](https://docs.vulkan.org/spec/latest/_images/pipelinemesh.svg) <br/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue