DEV Community

Cover image for Ghostty - Use Fragment Shader as Terminal Background
0xkoji
0xkoji

Posted on

Ghostty - Use Fragment Shader as Terminal Background

What is Ghostty?

👻Ghostty is a GPU-based terminal emulator developed by Mitchell Hashimoto, co-founder of HashiCorp. It utilizes Metal on macOS and OpenGL on Linux for GPU rendering and takes advantage of this architecture to support custom shader functionality.

GitHub logo ghostty-org / ghostty

👻 Ghostty is a fast, feature-rich, and cross-platform terminal emulator that uses platform-native UI and GPU acceleration.

Logo
Ghostty



Fast, native, feature-rich terminal emulator pushing modern features


A native GUI or embeddable library via libghostty


About
·
Download
·
Documentation
·
Contributing
·
Developing

About

Ghostty is a terminal emulator that differentiates itself by being fast, feature-rich, and native. While there are many excellent terminal emulators available, they all force you to choose between speed, features, or native UIs. Ghostty provides all three.

libghostty is a cross-platform, zero-dependency C and Zig library for building terminal emulators or utilizing terminal functionality (such as style parsing). Anyone can use libghostty to build a terminal emulator or embed a terminal into their own applications. See Ghostling for a minimal complete project example or the examples directory for smaller examples of using libghostty in C and Zig.

For more details, see About Ghostty.

Download

See the download page on the Ghostty website.

Documentation

See the documentation on the Ghostty website.

…

How to run a Shader as the terminal background?

Step1 Create Ghostty config

mkdir ~/.config/ghostty
touch ~/.config/ghostty/config
Enter fullscreen mode Exit fullscreen mode

Configuration

Ghostty supports hundreds of configuration options to make it look and behave exactly how you want.

favicon ghostty.org

Step2 Create or download a Shader

mkdir shaders
Enter fullscreen mode Exit fullscreen mode

noise.glsl

float random(in vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}

vec2 random_gradient(in vec2 i) {
    float r = 2.0 * 3.1415926535 * random(i);
    return vec2(cos(r), sin(r));
}

float perlin_noise(in vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);

    vec2 g00 = random_gradient(i + vec2(0.0, 0.0));
    vec2 g10 = random_gradient(i + vec2(1.0, 0.0));
    vec2 g01 = random_gradient(i + vec2(0.0, 1.0));
    vec2 g11 = random_gradient(i + vec2(1.0, 1.0));

    vec2 p00 = f - vec2(0.0, 0.0);
    vec2 p10 = f - vec2(1.0, 0.0);
    vec2 p01 = f - vec2(0.0, 1.0);
    vec2 p11 = f - vec2(1.0, 1.0);

    float n00 = dot(g00, p00);
    float n10 = dot(g10, p10);
    float n01 = dot(g01, p01);
    float n11 = dot(g11, p11);

    vec2 u = f * f * (3.0 - 2.0 * f);

    float nx0 = mix(n00, n10, u.x);
    float nx1 = mix(n01, n11, u.x);
    float nxy = mix(nx0, nx1, u.y);

    return (nxy + 1.0) / 2.0;
}


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord / iResolution.xy;
    vec2 noiseUV = uv * 4.0;
    noiseUV += iTime * 0.5;

    vec3 col = 0.5 + 0.5 * cos(iTime + noiseUV.xyx + vec3(0.0, 2.0, 4.0));
    float noise_val = perlin_noise(noiseUV);
    col *= noise_val;

    vec4 terminalColor = texture(iChannel0, uv);
    vec3 blendedColor = terminalColor.rgb + col.rgb * 0.7;

    fragColor = vec4(blendedColor,1.0);
}
Enter fullscreen mode Exit fullscreen mode

custom-shader

Option Reference - Configuration

Reference of all Ghostty configuration options.

favicon ghostty.org

If you don't have any Shader you want to use as the background, you can find out something cool in the following repo.

GitHub logo 0xhckr / ghostty-shaders

A repository containing many free shaders to use with ghostty (the terminal)

Installation

Clone the repository:

git clone --depth 1 https://github.com/hackr-sh/ghostty-shaders
cd ghostty-shaders
Enter fullscreen mode Exit fullscreen mode

Copy your preferred shader file to the Ghostty config directory:

cp <your-choice>.glsl ~/.config/ghostty/shaders/shader.glsl
Enter fullscreen mode Exit fullscreen mode

Add the following line to your ~/.config/ghostty/config file to enable the custom shader:

custom-shader = ~/.config/ghostty/shaders/shader.glsl
Enter fullscreen mode Exit fullscreen mode


Step3 Add the Shader to the config

I downloaded water.glsl from the above repo. The nice thing is that Ghostty allows us to use multiple shaders.

custom-shader = ~/.config/ghostty/shaders/noise.glsl
custom-shader = ~/.config/ghostty/shaders/water.glsl
custom-shader-animation = true
Enter fullscreen mode Exit fullscreen mode

After saving config, hit Cmd + Shift + , to apply the change to Ghostty.

Ghostty+Shader

Troubleshooting

If the background doesn’t change, check ‎custom-shader path exists and the Shader itself.

Happy hacking with Ghostty and shaders!

My Ghostty config

#==================================
# appearance
#==================================
# color theme
theme = Calamity
# shaders
#custom-shader = ~/.config/ghostty/shaders/gears-and-belts.glsl
custom-shader = ~/.config/ghostty/shaders/noise.glsl
custom-shader = ~/.config/ghostty/shaders/water.glsl
#custom-shader = ~/.config/ghostty/shaders/fern.glsl
#custom-shader = ~/.config/ghostty/shaders/cell.glsl
custom-shader-animation = true

#-----------------------------------
# Resize panes with arrow keys
#-----------------------------------
keybind = ctrl+shift+arrow_left=resize_split:left,10
keybind = ctrl+shift+arrow_right=resize_split:right,10
keybind = ctrl+shift+arrow_down=resize_split:down,10
keybind = ctrl+shift+arrow_up=resize_split:up,10

#-----------------------------------
# Split panes
#-----------------------------------
keybind = ctrl+shift+v=new_split:right
keybind = ctrl+shift+h=new_split:down

#-----------------------------------
# Move panes
#-----------------------------------
keybind = shift+arrow_left=goto_split:left
keybind = shift+arrow_right=goto_split:right
keybind = shift+arrow_up=goto_split:up
keybind = shift+arrow_down=goto_split:down


#-----------------------------------
# Control panes
#-----------------------------------
keybind = ctrl+x=close_surface
Enter fullscreen mode Exit fullscreen mode

Top comments (0)