7 Examples Proving Shaders are Amazing

Рет қаралды 34,514

Күн бұрын

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!

Пікірлер: 38

@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 🔥🔥

@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.

@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.

@mankamanka1982 23 күн бұрын

how do i use them?

@storyxx Жыл бұрын

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

@keithin8a Жыл бұрын

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

@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!!

@Dardasha_Studios Жыл бұрын

Where can I learn Shaders?

@vampirejs758 Жыл бұрын

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

@AlvaroALorite 18 күн бұрын

Just a heads up, Shaders can also be coded in other languages (Vulkan, DirectX,...) not just OpenGL. In fact opengl is being slowly abandoned (Mac OS, supports them but will only do for a certain old version)

@timallanwheeler 6 ай бұрын

Would have been nice to cover how each shader works

@tonero5651 Жыл бұрын

this is a sign I need to learn 3js

@yadhusanil7077 Жыл бұрын

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

@DesignCourse Жыл бұрын

Check the description.

@tommydrager5497 10 ай бұрын

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

@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.

@djohardudaev95 6 ай бұрын

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

@uxdeya7660 Жыл бұрын

WAITING FOR THE TUTORIAL

@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