7 Examples Proving Shaders are Amazing

Показать описание

-- 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:

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!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

Рекомендации по теме

Комментарии

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

DesignCourse

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.

danielradosa

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

dev_jono

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

doenaldjonathan

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

storyxx

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

kaurmanjot

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)

AlvaroALorite

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

arxhominum

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

keithina

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

vampirejs

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

mujtabamurtaza

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

tommydrager

Would have been nice to cover how each shader works

timallanwheeler

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

mikezou

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

djohardudaev

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

HuynhLuong

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

yadhusanil

7 Examples Proving Shaders are Amazing

7 Examples Proving Shaders are Amazing

What Is Shell Texturing? #gamedev #graphics #shaders

Introduction to shaders: Learn the basics!

Making A Zoom Shader

Making an Eyeball with Just a Shader

An introduction to Shader Art Coding

Three.js Shaders in 2 Minutes

Pixel Planet Shader with No Geometry! #gamedev #shaders

What are shaders?

What are Shaders? A Hands-on Introduction [Shaders Monthly #1]

What Are Shaders? #shorts

Subway Surfers But in Unreal Engine 5

this looks nice! with effects to look like i have shaders

WebGL, Shaders, Vertex Shader, Fragment Shader, GLSL ES, and WebGPU In A Nutshell

Fragment Shader in a nutshell

3D fluids with compute shaders on GPU in realtime (tutorial in description) #shorts

GLSL & Shaders Tutorial - Understanding The Syntax And The Idea Behind The Vertex & Fragment...

GLSL Shaders Vertex Shader Example

iridescent shader // #glsl #creativecoding #videoart

Shader Basics Tutorial (no code)

Learning shaders! #shorts #shaders #glsl #processing

Vertex or Fragment Shader? - Interactive 3D Graphics

Using noise in shaders (texture blending)

Having fun with AGSL Shaders in Jetpack Compose