셰이더 아틀라스
EN

199개 컴포넌트,
15개 분야.

효과 이름과 매개변수가 낯설다면, 화면에서 먼저 보고 값을 바꿔 보세요. WebGPU 셰이더 배경과 효과를 예시·설명·코드로 모은 안내서

◐그라디언트·배경

선형·원형·메시 그라디언트처럼 혼자서 화면을 채우는 배경 레이어. 대부분의 셰이더 배경이 여기서 시작합니다.

전체 보기 (10) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

선형 그라디언트Linear Gradient

두 색 또는 여러 색을 한 방향으로 부드럽게 이어 캔버스를 채웁니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

원형 그라디언트Radial Gradient

중심의 색에서 바깥쪽 색으로 원형으로 퍼져 나가는 그라디언트입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

원뿔형 그라디언트Conic Gradient

중심점을 둘러 색이 한 바퀴 이어지며, 색상환처럼 보이는 각도형 그라디언트입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

다이아몬드 그라디언트Diamond Gradient

중심에서 마름모 모양으로 색이 퍼지며, 모양을 사각형에 가깝게 바꿀 수도 있습니다.

분야로 찾기

만들기

재질·변형

보정·스타일

인터랙션·구성

▒노이즈

펄린·심플렉스·워리 노이즈와 보로노이. 자연스러운 불규칙함을 만드는 수학적 텍스처입니다.

전체 보기 (13) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

펄린 노이즈Perlin Noise

색이 부드럽게 번지는 구름 같은 무늬가 시간에 따라 천천히 바뀝니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

심플렉스 노이즈Simplex Noise

유기적인 얼룩 무늬가 부드럽게 움직이는 노이즈입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

워리 노이즈Worley Noise

흩어진 점까지의 거리를 색으로 보여 주는 세포형 무늬입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

프랙털 노이즈Fractal Noise

여러 크기의 노이즈가 겹쳐 미세한 결까지 있는 질감을 만듭니다.

▦패턴·격자

체커보드, 줄무늬, 육각 격자, 트루셰 타일처럼 규칙적으로 반복되는 무늬.

전체 보기 (15) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

체커보드Checkerboard

두 색의 정사각형 칸이 번갈아 이어지는 바둑판 무늬입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

스트라이프Stripes

두 색의 띠가 나란히 반복되며 움직이는 줄무늬입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

그리드Grid

일정한 간격의 선이 교차해 칸을 나누는 격자입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

도트 그리드Dot Grid

일정한 간격의 점이 격자를 이루며, 반짝이거나 옆으로 흐를 수 있습니다.

✺빛·자연 현상

오로라, 빛줄기(갓레이), 물결, 떠다니는 입자처럼 빛과 자연 현상을 흉내 내는 레이어.

전체 보기 (12) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

오로라Aurora

밤하늘에 여러 겹의 오로라 커튼과 세로빛이 흐르고 흔들립니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

광선Beam

한 지점에서 다른 지점까지 이어지는 빛의 띠를 그립니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

갓 레이Godrays

한 지점에서 부채꼴로 퍼져 나오는 입체감 있는 빛줄기입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

프리즘 광선Prism

한 줄기 빛이 지정한 지점 뒤에서 부채꼴로 퍼져 천천히 움직이는 무지개로 나뉩니다.

◯도형

원·별·하트 같은 도형을 거리 함수(SDF)로 그립니다. 마스크나 재질 효과의 모양으로도 씁니다.

전체 보기 (16) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

원Circle

캔버스에 채워진 원을 그리며, 크기와 가장자리의 부드러움을 조절할 수 있습니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

타원Ellipse

가로와 세로 반지름을 따로 조절해 납작하거나 길쭉한 타원을 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

둥근 사각형Rounded Rect

가로·세로 크기와 모서리 둥글기를 조절하는 사각형입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

정다각형Polygon

변의 수와 꼭짓점의 둥글기를 조절해 삼각형부터 원에 가까운 다각형까지 만듭니다.

▣미디어 입력

이미지·영상·웹캠·텍스트를 셰이더 레이어로 가져옵니다. 효과를 걸 대상이 됩니다.

전체 보기 (5) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

이미지 텍스처Image Texture

이미지를 캔버스에 텍스처로 표시하고, 화면 비율에 맞춰 채우거나 맞춥니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

비디오 텍스처Video Texture

비디오를 캔버스의 텍스처로 재생하고, 화면에 맞추거나 반복할 수 있습니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

웹캠 텍스처Webcam Texture

웹캠의 실시간 영상을 텍스처로 보여 주며, 셀피처럼 좌우 반전할 수 있습니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

텍스트Text

문구를 글꼴과 정렬 방식에 맞춰 텍스처로 그려, 셰이더 레이어에 텍스트를 얹습니다.

◆재질 효과

유리, 크롬, 액체 금속, 홀로그램처럼 도형에 재질을 입히는 효과. 빛의 굴절과 반사를 계산합니다.

전체 보기 (23) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

유리 렌즈Glass

도형 아래의 콘텐츠를 굴절시키고 가장자리에 빛을 더해 유리 렌즈처럼 보이게 합니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

성에 낀 얼음Frost

두께감 있는 얼음 표면에 가장자리부터 안쪽으로 번지는 미세한 성에 결정이 생깁니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

크롬 금속Chrome

도형 표면에 스튜디오 조명이 비치는 거울 같은 크롬과 다듬은 모서리를 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

액체 금속Liquid Metal

흐르는 크롬 반사가 녹은 금속 표면의 주름을 따라 움직입니다.

≈왜곡

소용돌이, 볼록 렌즈, 만화경, 극좌표 변환처럼 아래 레이어의 픽셀 위치를 옮기는 효과.

전체 보기 (22) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

소용돌이 왜곡Twirl

중심을 기준으로 이미지가 말려 들어가듯 회전해 소용돌이처럼 보입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

볼록·오목 왜곡Bulge

한 지점 주변을 볼록하게 부풀리거나 안쪽으로 오목하게 당깁니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

곡면 휨Bend

평평한 화면의 양끝을 휘어 가장자리가 앞으로 나오거나 안쪽으로 물러나는 원근감을 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

방향성 늘이기Stretch

중심에서 한 방향으로 내용이 길게 늘어나며 당겨진 듯한 자국을 만듭니다.

◌블러

가우시안·줌·회전·보케·틸트시프트 블러. 흐리는 방향과 모양이 다르면 느낌이 완전히 달라집니다.

전체 보기 (9) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

가우시안 블러Blur

이미지 전체의 경계와 작은 디테일을 고르게 부드럽게 흐립니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

방향성 블러Linear Blur

이미지의 세부가 지정한 각도를 따라 길게 번집니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

줌 블러Zoom Blur

선택한 중심을 향하거나 바깥으로 뻗는 방사형 잔상을 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

회전형 블러Angular Blur

선택한 중심을 둘러싸며 이미지의 세부가 회전하듯 번집니다.

⇥전환

와이프, 아이리스, 디졸브, 페이지 넘김처럼 한 화면에서 다른 화면으로 넘어가는 효과.

전체 보기 (13) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

선형 와이프Linear Wipe

부드러운 직선 경계가 입력 화면을 가로질러 지나가며 지웁니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

방사형 와이프Radial Wipe

시계 바늘처럼 중심을 돌아가는 부채꼴 경계가 입력 화면을 지웁니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

아이리스 와이프Iris Wipe

선택한 중심에서 원형 조리개가 커지거나 줄며 입력을 드러내거나 지웁니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

다이아몬드 와이프Diamond Wipe

커지는 다이아몬드 셀이 격자를 이루며 이미지를 지웁니다.

◑색 보정

밝기·대비·채도·색조, 듀오톤, 필름 룩. 사진 편집기의 보정 메뉴를 실시간 레이어로 옮긴 것입니다.

전체 보기 (14) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

밝기·대비Brightness Contrast

밝기는 화면을 밝거나 어둡게, 대비는 밝고 어두운 부분의 차이를 조절합니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

노출Exposure

검은색을 기준으로 화면 값을 곱해 밝히거나 어둡게 하며, 하이라이트는 흰색보다 밝아질 수 있습니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

채도Saturation

색이 얼마나 선명하고 강하게 보일지 조절합니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

바이브런스Vibrance

피부 톤을 보호하면서 선택적으로 채도를 조절합니다.

▚스타일·매체 질감

CRT, VHS, 하프톤, 디더, 아스키, 수채화, 모션 트래킹 오버레이처럼 특정 매체나 도구의 질감을 흉내 내는 스타일.

전체 보기 (18) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

아스키 아트Ascii

이미지의 밝고 어두운 부분을 문자 밀도로 바꿔 ASCII 문자 그림으로 보여줍니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

CRT 화면CRT Screen

입력 이미지에 RGB 형광 줄무늬와 수평 주사선, 가장자리 어둡기를 더해 브라운관 화면처럼 보이게 합니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

VHS 테이프VHS

수평 노이즈와 색 번짐, 테이프 흔들림을 더해 낡은 VHS 재생 화면을 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

압축 아티팩트Compression Artifacts

JPEG 압축에서 생기는 블록 경계와 테두리 번짐, 색 번짐을 재현해 이미지를 거칠게 만듭니다.

◎빛·렌즈

색수차, 렌즈 왜곡, 라이트 릭, 글로우, 비네팅처럼 카메라 렌즈와 빛이 남기는 흔적.

전체 보기 (12) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

색수차Chromatic Aberration

이미지의 빨강·초록·파랑 채널을 서로 어긋나게 겹쳐 프리즘처럼 색이 갈라지는 효과입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

렌즈 왜곡Lens Distortion

렌즈처럼 화면을 볼록하게 밀거나 오목하게 당기면서 색을 여러 겹으로 분리합니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

라이트 릭Light Leak

필름 가장자리로 빛이 새어 들어온 듯 따뜻한 과노출과 색 번짐을 만듭니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

글로우Glow

밝은 부분을 주변으로 부드럽게 퍼뜨려 빛나는 후광을 만듭니다.

⌖인터랙션

커서 궤적, 잉크·연기 유체, 무리 짓기(보이드)처럼 마우스에 반응하거나 스스로 움직이는 시뮬레이션.

전체 보기 (16) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

커서 트레일Cursor Trail

포인터가 지나간 자리에 색 띠가 잠시 남아 움직임을 따라옵니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

커서 잔물결Cursor Ripples

포인터가 움직인 곳에서 물결이 번지며 아래 이미지가 출렁입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

리퀴파이Liquify

포인터를 움직이면 아래 이미지가 부드러운 천처럼 늘어나고 되돌아옵니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

그리드 왜곡Grid Distortion

포인터 주변의 격자가 휘면서 아래 이미지가 국소적으로 밀립니다.

⧉구성·조합

레이어 순서, 블렌드 모드, 마스크, 움직이는 값(동적 props), 그룹 — 컴포넌트를 겹쳐 하나의 효과로 만드는 규칙.

전체 보기 (6) →

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

그룹Group

여러 셰이더 레이어를 한 컨테이너에 묶어 함께 배치하는 구성 요소입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

레이어 순서Layer stack

레이어는 아래에서 위 순서로 그려지고, 효과는 앞서 그린 레이어에 적용됩니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

블렌드 모드Blend modes

블렌드 모드는 위 레이어의 색을 아래 레이어의 색과 섞는 규칙입니다.

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

마스킹Masking

다른 레이어의 투명도나 밝기를 읽어 이미지가 보일 영역을 제한합니다.

페이지로 열기 ↗