Making 1080p screen shares look sharper<br>Menu
Article<br>Making 1080p screen shares look sharper 🔗
Published<br>July 23, 2026
Author<br>Iason P.
I'm on X/Twitter at@iparaskev
Contents#
Introduction
Why enlarged 1080p is blurry
Nearest-neighbor sampling
Bilinear
How to sharpen an image
Controlling the detail
We do not want too much sharpening
Summary
Introduction#
There is a way to increase the perceived quality of screen sharing without<br>using more bandwidth. In this post, I will show you how we increased the sharpness of Hopp's shared screen<br>with a minimal rendering change. You can use the sliders below to compare the before-and-after results for 4K and 1080p shares.
Old · 4KSharpened · 4K↔
Old · 1080pSharpened · 1080p↔
Before we start, here is a short description of Hopp and why I spent my Sunday learning about sharpening techniques. Hopp<br>is a screen-sharing application tailored for pair programming, which means that the stream should have low latency<br>and remain sharp. To keep the stream sharp, we share the screen at the display's native resolution by default (up to 4K), which<br>provides a better experience than conventional screen-sharing tools.
Last week, a user on Discord said that the screen-sharing quality was not as good as that of a proprietary tool. After<br>they shared the logs. The logs showed that this was because the screen they were sharing had a native resolution of 1080p.<br>My guess was that the lower-resolution contains less information and when enlarged on the receiver the image becomes more<br>blurry due to upscaling. So I thought that there must be a filter we could use during rendering to increase the sharpness.<br>It turned out that this was much easier than I expected.
Why enlarged 1080p is blurry#
In screen-sharing applications, an image has two sets of dimensions:
The stream dimensions, which match the resolution shared by the sender.
The display dimensions, which match the size of the player on the receiver's side.
When you enlarge an image without an AI upscaler, you usually add pixels based on the values of neighboring pixels.
There are different scaling scaling methods, but let's explore two:
Nearest sampling
Bilinear sampling
Nearest-neighbor sampling#
Each new pixel takes the value of the nearest original pixel. For example, if we want to enlarge a 2x2 image into a 4x4 image, it would look like this.
2x2
Nearest interpolation
Final 4x4<br>The greater the difference between the original and enlarged resolutions, the harder the edges and the more jagged the transitions become.
Image size2229 × 1522
Bilinear#
One way to soften these hard edges and jagged transitions is to use bilinear sampling. Instead of taking the value of the nearest<br>pixel, bilinear sampling calculates a weighted average based on the distance between the new pixel and each surrounding pixel.<br>This produces softer but blurrier transitions. Hopp uses bilinear sampling.
Image size2229 × 1522
How to sharpen an image#
The goal of sharpening is to increase contrast in an image. For example, when you have black letters on a white background,<br>you want the dark areas to become darker and the white areas brighter. We can use the following formula to change the value of a<br>single pixel:
output = input + detail * amplifier
Where:
output : the modified pixel value.
input : the initial pixel value.
detail : a calculated value describing the difference between the pixel and its neighboring pixels.
amplifier : a constant that amplifies the detail.
The simplest way to increase the contrast is with the following:
if input > threshold { input += detail } else { input -= detail }
Threshold128Input4072104128152184216Detail−32−32−32−32+32+32+32Output8407296184216248
Controlling the detail#
This, of course, is not very clever, as we want the detail to vary depending on the surrounding pixels. We want the value to<br>be 0 when the surrounding pixels are the same color, positive when our pixel is brighter than its neighbors so that it becomes<br>even brighter, and negative when it is darker than its neighbors.
Laplacian mask#
One way to achieve this is with a Laplacian mask.
Laplacian mask<br>With the Laplacian mask, we take the sum of the elements and then divide by four to get the detail.
detail = mask_sum / 4
When all five pixels have the same value, the detail is 0 because the positive center weight cancels the four negative neighbor weights. If the center pixel is brighter than its neighbors, the detail is positive; if it is darker, the detail is negative.
You can see in real time how the Laplacian mask amplifies the contrast. With the sharpness slider, you can control the amplifier.
Sharpness 0.55OriginalLaplacian↔
Laplacian sharpening shader
Gaussian blur#
Another way to get the detail is to use a Gaussian blur.
Gaussian kernel<br>Here, we first multiply each element and its surroundings by this kernel, sum the values, and then calculate the average. This technique is used to blur an image and smooth the...