light7734/dazzle
1
1
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages Wiki Activity Actions

articles/graphics-pipeline #1

Merged
light7734 merged 10 commits from articles/graphics-pipeline into main 2025-04-28 15:00:12 +00:00
Conversation 0 Commits 10 Files changed 9 +138 -22
6 changed files with 138 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e381f028be - Show all commits

1
package.json
View file

@ -30,6 +30,7 @@
"@testing-library/svelte": "^5.2.4",
"eslint": "^9.18.0",
"eslint-config-prettier": "^10.0.1",
"eslint-plugin-prettier": "^5.2.6",
"eslint-plugin-svelte": "^3.0.0",
"globals": "^16.0.0",
"jsdom": "^26.0.0",

59
pnpm-lock.yaml generated
View file

@ -50,6 +50,9 @@ importers:
eslint-config-prettier:
specifier: ^10.0.1
version: 10.1.2(eslint@9.25.1(jiti@2.4.2))
eslint-plugin-prettier:
specifier: ^5.2.6
version: 5.2.6(eslint-config-prettier@10.1.2(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))(prettier@3.5.3)
eslint-plugin-svelte:
specifier: ^3.0.0
version: 3.5.1(eslint@9.25.1(jiti@2.4.2))(svelte@5.28.2)
@ -392,6 +395,10 @@ packages:
resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
engines: {node: '>= 8'}
'@pkgr/core@0.2.4':
resolution: {integrity: sha512-ROFF39F6ZrnzSUEmQQZUar0Jt4xVoP9WnDRdWwF4NNcXs3xBTLgBUDoOwW141y1jP+S8nahIbdxbFC7IShw9Iw==}
engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
'@polka/url@1.0.0-next.29':
resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
@ -988,6 +995,20 @@ packages:
peerDependencies:
eslint: '>=7.0.0'
eslint-plugin-prettier@5.2.6:
resolution: {integrity: sha512-mUcf7QG2Tjk7H055Jk0lGBjbgDnfrvqjhXh9t2xLMSCjZVcw9Rb1V6sVNXO0th3jgeO7zllWPTNRil3JW94TnQ==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
'@types/eslint': '>=8.0.0'
eslint: '>=8.0.0'
eslint-config-prettier: '>= 7.0.0 <10.0.0 || >=10.1.0'
prettier: '>=3.0.0'
peerDependenciesMeta:
'@types/eslint':
optional: true
eslint-config-prettier:
optional: true
eslint-plugin-svelte@3.5.1:
resolution: {integrity: sha512-Qn1slddZHfqYiDO6IN8/iN3YL+VuHlgYjm30FT+hh0Jf/TX0jeZMTJXQMajFm5f6f6hURi+XO8P+NPYD+T4jkg==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@ -1059,6 +1080,9 @@ packages:
fast-deep-equal@3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
fast-diff@1.3.0:
resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
fast-glob@3.3.3:
resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
engines: {node: '>=8.6.0'}
@ -1484,6 +1508,10 @@ packages:
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
engines: {node: '>= 0.8.0'}
prettier-linter-helpers@1.0.0:
resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
engines: {node: '>=6.0.0'}
prettier-plugin-svelte@3.3.3:
resolution: {integrity: sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==}
peerDependencies:
@ -1690,6 +1718,10 @@ packages:
symbol-tree@3.2.4:
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
synckit@0.11.4:
resolution: {integrity: sha512-Q/XQKRaJiLiFIBNN+mndW7S/RHxvwzuZS6ZwmRzUBqJBv/5QIKCEwkBC8GBf8EQJKYnaFs0wOZbKTXBPj8L9oQ==}
engines: {node: ^14.18.0 || >=16.0.0}
tailwindcss@4.1.4:
resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
@ -1748,6 +1780,9 @@ packages:
peerDependencies:
typescript: '>=4.8.4'
tslib@2.8.1:
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
type-check@0.4.0:
resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
engines: {node: '>= 0.8.0'}
@ -2144,6 +2179,8 @@ snapshots:
'@nodelib/fs.scandir': 2.1.5
fastq: 1.19.1
'@pkgr/core@0.2.4': {}
'@polka/url@1.0.0-next.29': {}
'@rollup/plugin-commonjs@28.0.3(rollup@4.40.0)':
@ -2719,6 +2756,15 @@ snapshots:
dependencies:
eslint: 9.25.1(jiti@2.4.2)
eslint-plugin-prettier@5.2.6(eslint-config-prettier@10.1.2(eslint@9.25.1(jiti@2.4.2)))(eslint@9.25.1(jiti@2.4.2))(prettier@3.5.3):
dependencies:
eslint: 9.25.1(jiti@2.4.2)
prettier: 3.5.3
prettier-linter-helpers: 1.0.0
synckit: 0.11.4
optionalDependencies:
eslint-config-prettier: 10.1.2(eslint@9.25.1(jiti@2.4.2))
eslint-plugin-svelte@3.5.1(eslint@9.25.1(jiti@2.4.2))(svelte@5.28.2):
dependencies:
'@eslint-community/eslint-utils': 4.6.1(eslint@9.25.1(jiti@2.4.2))
@ -2821,6 +2867,8 @@ snapshots:
fast-deep-equal@3.1.3: {}
fast-diff@1.3.0: {}
fast-glob@3.3.3:
dependencies:
'@nodelib/fs.stat': 2.0.5
@ -3189,6 +3237,10 @@ snapshots:
prelude-ls@1.2.1: {}
prettier-linter-helpers@1.0.0:
dependencies:
fast-diff: 1.3.0
prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.28.2):
dependencies:
prettier: 3.5.3
@ -3357,6 +3409,11 @@ snapshots:
symbol-tree@3.2.4: {}
synckit@0.11.4:
dependencies:
'@pkgr/core': 0.2.4
tslib: 2.8.1
tailwindcss@4.1.4: {}
tapable@2.2.1: {}
@ -3400,6 +3457,8 @@ snapshots:
dependencies:
typescript: 5.8.3
tslib@2.8.1: {}
type-check@0.4.0:
dependencies:
prelude-ls: 1.2.1

10
src/routes/articles/+layout.svelte Normal file
View file

@ -0,0 +1,10 @@
<script lang="ts">
import './article.css';
let { children } = $props();
</script>
<div class="body">
<div class="article_body">
{@render children()}
</div>
</div>

33
src/routes/articles/article.css Normal file
View file

@ -0,0 +1,33 @@
* {
color: #fbf1c7;
font-family: Arial, Helvetica, sans-serif
}
.body {
background-color: #1d2021
}
br {
margin-bottom: 1em;
}
h1 {
font-size: 2em;
margin-bottom: .3em;
}
h2 {
font-size: 1.7em;
margin-bottom: .3em;
margin-top: .6em;
}
.article_body {
margin-left: 10em;
margin-right: 10em;
padding: 1em;
background-color: #282828;
text-align: justify;
max-width: 80ch;
/* Adjust as necessary */
}

48
articles/the-graphics-pipeline/index.mdx → src/routes/articles/the-graphics-pipeline/+page.svx
View file

@ -1,49 +1,56 @@
# The Graphics Pipeline
Ever wondered how games put all that gore on your display? Well you're about to find out!
<br/>
At the heart of rendering, is the "Graphics Pipeline". And like any pipeline, it's comprised
of several "stages", each of which can be a pipeline in itself or even parallelized.
Each stage takes some input data (and configuration), to generate some output for the next stage.
<br/>
We can coarsely divide the entire pipeline into 4 stages:
Application -> [Geometry Processing] -> Rasterization -> Pixel Processing
The pipeline will then serve a "rendered image" to your pretty eyes using your display.
<br/>
But to avoid drowning you in overviews, let's jump right into the details of the "Geometry Processing"
stage and have a recap afterwards to demystify our 4-stage division!
# Vertices (points in space)
## Vertices (points in space)
In order to render a murder scene, we need to have a way of representing the deceased in computer memory.
We only care about the "surface" since we won't be seeing the insides anyways--We don\'t want to either.
At this stage, we only care about the "shape" or the "geometry" of the "surface",
texturing, lighting and all the sweet gory details comes at a much later stage once all the "geometry" has been processed.
<br/>
There are several ways to "represent 3d objects" for a computer to understand.
For instance, _NURB_(Non-uniform rational B-spline) surfaces are great for representing "curves"
and it's all about the "high-precision" needed to do _CAD_(computer assisted design).
We could also do "ray-tracing" using fancy equations for rendering photo-realistic images.
<br/>
These are all great--ignoring the fact that they would take "an eternity" to process.
But what we need is a hardware-friendly approach that can do this for an entire scene with
hundereds of thousands of objects for at least 60 times undr a second. What we need is "polygonal modeling".
<br/>
"Polygonal modeling" allows us to do "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).
<br/>
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 have enough "primitives" together, they form a "model" or a "mesh" (that we need for our corpse).
With some interesting models, we can compose a "scene".
<br/>
But let's not get ahead of ourselves. The primary type of "primitive" we care about during "polygonal modeling"
is a "triangle". But why not squares or polygons with variable number of edges?
# Why Triangles?
## Why Triangles?
"Always Planar":
Triangles can never be __non-planar__(reside in more than 1 plane)! In Euclidean geometry, any
3
"Normal surface:"
@ -52,38 +59,41 @@ Triangles can never be __non-planar__(reside in more than 1 plane)! In Euclidean
"Predictable Winding Order:"
# Primitive Topologies
## Primitive Topologies
# Indices
## Indices
# Input Assembler
## Input Assembler
# Coordinate System -- Local Space
## Coordinate System -- Local Space
# Coordinate System -- World Space
## Coordinate System -- World Space
# Coordinate system -- View Space
## Coordinate system -- View Space
# Coordinate system -- Clip Space
## Coordinate system -- Clip Space
# Coordinate system -- Screen Space
## Coordinate system -- Screen Space
# Vertex Shader
## Vertex Shader
# Tessellation & Geometry Shaders
## Tessellation & Geometry Shaders
# Rasterizer
## Rasterizer
# Pixel Shader
## Pixel Shader
# Output Merger
## Output Merger
# The Future
## The Future
# Conclusion
## Conclusion
# Sources
## Sources
[Tomas Akenine Moller - Real-Time Rendering 4th Edition](https://www.realtimerendering.com/intro.html)
<br/>
[LearnOpenGL - Hello Triangle](https://learnopengl.com/Getting-started/Hello-Triangle)
[LearnOpenGL - Face Culling](https://learnopengl.com/Advanced-OpenGL/Face-culling)
[Wikipedia - Polygonal Modeling](https://en.wikipedia.org/wiki/Polygonal_modeling)

9
svelte.config.js
View file

@ -1,12 +1,16 @@
import { mdsvex } from 'mdsvex';
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
// import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: [vitePreprocess(), mdsvex()],
preprocess: [
mdsvex({
extensions: ['.md', '.svx'],
})
],
kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
@ -19,4 +23,3 @@ const config = {
};
export default config;