7 Examples Proving Shaders are Amazing

bit.ly/3m7n8QV 👈 Learn UI/UX & CSS Today. Use "UI2023" for 23% Off!
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, we're going to take a look at shaders and all of the insane stuff they can do. Have you ever stumbled across a site and saw something like this.. and thought how in the hell did they do that?
Chances are, you may have been looking at the work of Shaders. And in this video, I'm going to show you some of the really cool things shaders can do -- but first, let's talk about what a shader is..
Simply put, a shader is a program that runs on the GPU. They're written in a language called OpenGL Shading Language (or GLSL), and it's very similar to the C language.. And this is why shaders, at least in respect to websites, are considered the most difficult tech cfor frontend developers to tackle -- it's not written in javascript, or html, or CSS! Ick..
None the less, shaders for the web consist of 2 types of shaders: vertex shaders, and fragment shaders. In short, vertex shaders allow you to manipulate the physical position of a shape, while fragment shaders allow you to modify colors.
This is a topic we'll tough more on in the future, but for now, let's see what shaders can do..
Examples:
blobmixer.14islands.com/
eco.com/
arvinleeuwis.xyz/
innovations.vareximaging.com/
ohzi.io/menu
unseen.co/
cineshader.com/
0:00 - What are shaders?
1:05 - Example 1
2:17 - Example 2
3:19 - Example 3
3:45 - Example 4
4:08 - Example 5
5:24 - Example 6
6:02 - Example 7
7:02 - CineShader
Let's get started!
#uiux #frontend #webgl
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Have you dabbled in Shaders via threejs? Do you want to?

[@fullViewJay]

I've been making a point to learn more about Three.js/Shaders the last couple months and I am excited to see where the progress will lead to! I know it's not necessary and that I can definitely do without, but I am also going to go back to learning some core math concepts or take a course on it at least, as I think that will help with creating my own custom shaders.

[@shinomitsu7798]

I want to, but man, am I bad at maths...

[@HuynhLuong227]

yes, i want learn shader with threejs

[@andyMutale]

Yeah i used to on my previous rig, unfortunately my current potatoe can only do so much

[@Itslogicee]

Heck yeah 🔥🔥

[@danielradosa]

I love shaders OMG. So glad someone with a big following and such a good presentation is able to share this with more people. Because there is very small community of coders that do shaders.

[@dev_jono]

Been on and off with learning ThreeJS for a while now and I always have to remind myself the reason I wanted to learn it in the first place. 1. To create beautiful interactive websites and 2. Shaders are drop dead amazing and rare among web development space. Getting closer and closer, it's really exciting. Can't wait for this content drop

[@doenaldjonathan862]

Started learning Shaders because I was looking for a more efficient way to implement animated mesh gradients. I can't wait for more content

[@mujtabamurtaza6804]

I'm HYPED to learn more from your channel on this

[@kaurmanjot]

I want to learn this. Please bring more content on shaders.

[@keithin8a]

And suddenly the 4 years game development degree I have is relevant!

[@storyxx]

The effect you call RGB-shift is better known as chromatic aberration.

[@arxhominum8978]

Shaders sure are great, but considering we now mostly use a mobile first approach, the performance of such sites on mobile devices is (at least currently and ofc depending on the data load) is still kinda lacking behind the desktop versions. You can achieve good results, depending on what you do, but so far mobile performance is not up to par with the desktop equivalent. I'm sure that'll change in the future. Also, this is probably another realm of design, where AI could be used to boost creative input. Nice choice though, can't wait for the tutorial

[@nro337]

Congrats on 1 million!!

[@vampirejs758]

NO WAY! I WAS LITERALLY WRITING A SHADER IN THREEJS RIGHT NOW LOLOL

[@tonero5651]

this is a sign I need to learn 3js

[@timallanwheeler]

Would have been nice to cover how each shader works

[@tommydrager5497]

examples 2 are not vertex shader.. they are just sdf shaders where the radius has a wave function all done in the FS

[@Dardasha_Studios]

Where can I learn Shaders?

[@yadhusanil7077]

where can i get the url of those sites showed in demo?

[@DesignCourse]

Check the description.

[@djohardudaev952]

just imagine how laggy those sites are on the most of computers

[@uxdeya7660]

WAITING FOR THE TUTORIAL

[@HuynhLuong227]

really amazing, i'm learn basic shader, you have tutorial to learn this?

[@DesignCourse]

Soon

[@HuynhLuong227]

@@DesignCourse Big thanks

[@astroid-ws4py]

Read thebookofshaders

[@astroid-ws4py]

They also give rise to many cool mathematical notions like complex numbers, trig functions etc. Only your imagination is the limit.

[@naseemshaikh3109]

Can you share me the code

[@mikezou9929]

i dont know about this fancy stuff, my regular pc cant even load any of them smoothly, what happen when a potential client try to check out your site and its laggy af, then you dont get the business

[@kennyPAGC]

I actually hate these.

[@theriser8751]

L opinion