Тёмный

7 Examples Proving Shaders are Amazing 

DesignCourse
Подписаться 1,1 млн
Просмотров 34 тыс.
50% 1

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!

Хобби

Опубликовано:

 

8 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 38   
@DesignCourse
@DesignCourse Год назад
Have you dabbled in Shaders via threejs? Do you want to?
@fullViewJay
@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
@shinomitsu7798 Год назад
I want to, but man, am I bad at maths...
@HuynhLuong227
@HuynhLuong227 Год назад
yes, i want learn shader with threejs
@andyMutale
@andyMutale Год назад
Yeah i used to on my previous rig, unfortunately my current potatoe can only do so much
@Itslogicee
@Itslogicee Год назад
Heck yeah 🔥🔥
@danielradosa
@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
@mankamanka1982 7 дней назад
how do i use them?
@dev_jono
@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
@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
@keithin8a
@keithin8a Год назад
And suddenly the 4 years game development degree I have is relevant!
@mujtabamurtaza6804
@mujtabamurtaza6804 Год назад
I'm HYPED to learn more from your channel on this
@storyxx
@storyxx Год назад
The effect you call RGB-shift is better known as chromatic aberration.
@AlvaroALorite
@AlvaroALorite День назад
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)
@kaurmanjot
@kaurmanjot Год назад
I want to learn this. Please bring more content on shaders.
@arxhominum8978
@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
@vampirejs758
@vampirejs758 Год назад
NO WAY! I WAS LITERALLY WRITING A SHADER IN THREEJS RIGHT NOW LOLOL
@nro337
@nro337 Год назад
Congrats on 1 million!!
@Dardasha_Studios
@Dardasha_Studios Год назад
Where can I learn Shaders?
@yadhusanil7077
@yadhusanil7077 Год назад
where can i get the url of those sites showed in demo?
@DesignCourse
@DesignCourse Год назад
Check the description.
@tommydrager5497
@tommydrager5497 9 месяцев назад
examples 2 are not vertex shader.. they are just sdf shaders where the radius has a wave function all done in the FS
@tonero5651
@tonero5651 Год назад
this is a sign I need to learn 3js
@timallanwheeler
@timallanwheeler 6 месяцев назад
Would have been nice to cover how each shader works
@djohardudaev95
@djohardudaev95 5 месяцев назад
just imagine how laggy those sites are on the most of computers
@HuynhLuong227
@HuynhLuong227 Год назад
really amazing, i'm learn basic shader, you have tutorial to learn this?
@DesignCourse
@DesignCourse Год назад
Soon
@HuynhLuong227
@HuynhLuong227 Год назад
@@DesignCourse Big thanks
@astroid-ws4py
@astroid-ws4py Год назад
Read thebookofshaders
@astroid-ws4py
@astroid-ws4py Год назад
They also give rise to many cool mathematical notions like complex numbers, trig functions etc. Only your imagination is the limit.
@uxdeya7660
@uxdeya7660 Год назад
WAITING FOR THE TUTORIAL
@naseemshaikh3109
@naseemshaikh3109 Год назад
Can you share me the code
@mikezou9929
@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
@kennyPAGC Год назад
I actually hate these.
@theriser8751
@theriser8751 Год назад
L opinion
Далее
Introduction to shaders: Learn the basics!
34:50
Просмотров 296 тыс.
Mastering Scroll Animations with GSAP ScrollTrigger
23:02
An introduction to Shader Art Coding
22:40
Просмотров 935 тыс.
Godot 3D Spatial Shaders: Getting Started
6:57
Просмотров 30 тыс.
Your Images DESERVE These Effects
4:46
Просмотров 37 тыс.
Recreating An EPIC Hover Effect
7:01
Просмотров 186 тыс.
Using noise in shaders (texture blending)
8:28
Просмотров 9 тыс.
What Are Shaders?
6:24
Просмотров 198 тыс.
Complex SVG Animations Made Simple with JavaScript
22:04
100+ Linux Things you Need to Know
12:23
Просмотров 659 тыс.