How to make a multi-threaded CPU pixel shader from scratch without GPU acceleration
Channel: Codotaku
Date: 2022-11-26

How to make a multi-threaded CPU pixel shader from scratch without GPU acceleration
Let's render some animated donuts from scratch using the power of the CPU only by directly working with the window's buffer using multiple threads. Who needs a GPU and a graphics API?

Source code: https://github.com/CodesOtakuYT/cdtk-cpu-pixel-shader

Dependencies:
Windowing library (winit): https://github.com/rust-windowing/winit
Window buffer library (softbuffer): https://github.com/john01dav/softbuffer

Discord server:
https://discord.gg/mxqM4hf

My videos from now on will be creative commons, with no ads, and no music. just sharing my knowledge and love with all the people who seek it with no distractions and no financial motives :D
If you love long rich unique technical videos, you're in the right place :)

The hadith of the day!
11. Hisham bin Hassan narrated from Al-Hasan:

concerning the saying of Allah: O our Lord, give us good in this world, and good in the Hereafter. He said: “Knowledge and worship in this world and Paradise in the Hereafter.”

— Jami` at-Tirmidhi 3488

▬ Contents of this video  ▬▬▬▬▬▬▬▬▬▬
00:00 Intro in Arabic and English
00:20 Create a new project
02:45 Setup the window and the event loop using the winit crate
20:00 Setup the graphics context and pixel buffer using the softbuffer crate
30:20 Create the Color struct to make everything much easier, and more readable
48:50 Rendering to the buffer
54:10 Calculating FPS (Frames Per Second)
58:30 Multithreading, you can skip this part because we're gonna cover it after the next chapter
1:02:13 Calculating the coordinates of the pixel from the pixel index and window width and height
1:06:06 Rendering beautiful gradients
1:07:47 Slicing the buffer into chunks (groups) of pixels
1:14:00 Fixing the coordinates (local to slice) to (local to the window)
1:16:20 Finally multithreading like a piece of cake using the rayon crate
1:21:00 Rendering a beautiful circle using mathematics
1:29:00 Rendering animations using the time variable
1:32:27 Implementing smoothstep function.
1:37:15 Skip this chapter. Don't copy code at home kids so you don't suffer like me here : |
1:43:41 Rendering a smoooooth circle. The enlightenment. Fixing smoothstep :D
1:45:30 Rendering a perfect circle by calculating the aspect ratio
1:48:15 A little optimization and showcasing the performance between single-threaded and multi-threaded rendering.
1:51:25 Rendering a SMOOOTH DONUT. shout out to the donut lovers :P
1:57:10 Rendering another donut. am too generous :)
1:58:30 Zoom in and zoom out and animate the donut and goodbye :D