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!

Пікірлер: 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
    @tommydrager54979 ай бұрын

    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
    @timallanwheeler6 ай бұрын

    Would have been nice to cover how each shader works

  • @djohardudaev95
    @djohardudaev955 ай бұрын

    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

Келесі