Great news, viewers! You can now browse videos based on your language preference. If you are logged in, you can set multiple veiwing langauges here you would like to view videos in. This personalized preference will be implemented site-wide over the next few days.

Up next

OpenGL Fragment/Pixel Shaders (2020)| You Need (GLSL) Step and Smoothstep in Your Life

Published on 09 Jan 2020 / In How-to & Style

In this video I go over a pair of vital GLSL functions used in fragment(pixel) shader graphics programming: step and smoothstep.

I take a look at the syntax for the two and then I use a line drawing function to show you how smoothstep can produce a line.

At the end of the video I briefly introduce you to what "shaping" functions are and how we can use them to manipulate what gets drawn on our OpenGL canvas.

Normalising in OpenGL:

This series is based off of the free on-line book, "The Book Of Shaders", by Patricio Gonzalez Vivo and Jen Lowe.

If you feel like donating, please donate to those two; a donation link is found on their website linked above.

Editor used:

Subscribe to my
Subscribe to my Youtube:

If you find value in what I do, think about supporting my channel:
Bitcoin: 3H4NKKwPdbiE5Gtc3Uk2DiwszqHhrRbmKK
Ethereum: 0x48702412F448a27be03836fb6FE6456603668030
Litecoin: MNJ4uv3GD4r62VpQ8rHX1Pj1ihWCj74hCK

Find me here:

Code Used:
#ifdef GL_ES
precision mediump float;

uniform vec2 u_resolution;

// Plot a line on Y using a value between 0.0-1.0
float plot(vec2 st, float pct){
return smoothstep( pct-0.05, pct, st.y) -
smoothstep( pct, pct+0.05, st.y);

void main() {
vec2 st = gl_FragCoord.xy/u_resolution;

float y = st.x;

vec3 line_color = vec3(0.0,1.0,0.0);

// Get all values associated with geometric line
float line_values = plot(st,y);

vec3 line = line_color * line_values;

vec3 canvas = line;

gl_FragColor = vec4(canvas,1.0);

Show more
0 Comments sort Sort By

Up next