How do we transition pixels' color along the direction of the gradient. The trick is to project the position of the pixel to the direction of the gradient. Pixels closer to the end of the gradient will have a larger magnitude. 9/10
A complication is that rounded corners lead to jagged edges since the pixels don't fall squarely in the pixel grid. The solution is to gradually transition the pixel color across the boundary.
Drawing rounded corners:
We use distance fields to describe rounded edges. Given a pixel, a distance field outputs its distance to the nearest edge of a shape. This is a useful API for fragment shaders, which only has access to one pixel at a time.
While drawing borders, the rectangle stays the same size and shape. So we just have to edit the fragment shader. We infer which quadrant the pixel is in to calculate its corresponding border corner. Then we assign pixels outside it with the border color. 6/10
Drawing a rectangle:
For the vertex shader, we normalize the coordinates of the vertex to be independent of the viewport. For the fragment shader, we can return the interpolated color of the pixel. 5/10
We provide instructions to the GPU via a pair of functions: the vertex shader and the fragment shader. The vertex shader’s job is to produce the positions that need to be drawn. The fragment shader determines the color for every pixel within these position boundaries. 4/10
We thus switched to GPU rendering. The GPU has more cores and so can perform data-parallel calculations like calculating pixel position and color very quickly. We wrote shaders for glyphs, icons, and styled rectangles. They form all of Warp's UI:
Why render on the GPU?
Warp is a fast Rust-based terminal with modern UI elements. We initially built the UI elements using html and css, but found that using the CPU for rendering was a performance bottleneck. 2/10
I'm excited to nerd out and share an interesting engineering challenge I tackled at @firstname.lastname@example.org.
Here's how Warp rendered our rectangle elements using graphics shaders. Learn about distance fields, antialiasing, and vector projections. 1/10
An insider’s primer into all that’s exciting in logistics 🚀🚛
Finally getting around to putting pen to paper on why I'm so excited for the next decade of logistics tech. An initial blueprint describing how to build a world were atoms can move as easily as bits. Would love to hear thoughts.
To set up a new k8s cluster, it turns out I needed to click "EKS - Cluster" instead of "EKS" for step 3 of 50.
The bad news is that I received multiple honks and shouts. The good news is that I now know how to switch lanes in heavy traffic.
Musings about engineering, Marvel, and modernity.
Server run by the main developers of the project It is not focused on any particular niche interest - everyone is welcome as long as you follow our code of conduct!