Sự trỗi dậy của Shader, Filter & Effect trong các dự án Web

  • 05/02/2020
  • 0 Bình Luận

su-troi-day-cua-shader-filter-effect-trong-cac-du-an-web-1

Hôm nay, chúng tôi sẽ trình bày một số yếu tố được lấy từ bộ sưu tập ‘Filters and Effects’ của chúng tôi. Trong vài năm qua, ranh giới giữa các dự án web và lĩnh vực nghe nhìn đã phai mờ đi. Sự trỗi dậy về độ phổ biến của WebGL, tối ưu hóa video và 3D về dung lượng và thời gian tải, đã mở đường cho các xu hướng như “Glitch Aesthetics”.

Nhờ tăng tốc GPU hiệu suất đồ họa được cải thiện đáng kể, cho phép chúng ta thử nghiệm với nhiều hiệu ứng và thậm chí thêm chúng vào video trong thời gian thực và các bộ lọc khi xử lý hậu kỳ (Post-processing) tương tác.

Quy trình thực hiện những hiệu ứng hình ảnh này là gì? Mặc dù chúng có thể được áp dụng trực tiếp với API WebGL bằng cách sử dụng các Pixel shader và Fragment shader được lập trình bằng ngôn ngữ GLSL, quy trình phổ biến nhất là sử dụng các framework như Three.js hoặc PixiJS.

Bạn có thể bắt đầu lập trình shader với hướng dẫn dễ dàng này: Giới thiệu ban đầu Shader với PixiJS.

Tham khảo địa chỉ thiết kế Landing Page

Trong bộ sưu tập này, chúng tôi sẽ đưa ra một số lựa chọn về các bộ lọc và hiệu ứng mới nhất được tuyển chọn đặc biệt giúp tạo ra cảm quan độc đáo cho các dự án của bạn, bao gồm các hiệu ứng hình ảnh như biến dạng nhiệt, hiệu ứng sóng, glitch shader, kính vạn hoa, biến dạng ống kính và các filter 2D xử lý hậu kỳ phổ biến nhất được áp dụng cho hình ảnh, video hoặc ảnh 3D.

WebGL shader tạo hình nhân vật

Shader Effects

Hình ảnh hiệu ứng sóng

su-troi-day-cua-shader-filter-effect-trong-cac-du-an-web-2
ISF Glitch Effect

Các hiệu ứng Glitch áp dụng cho Video

su-troi-day-cua-shader-filter-effect-trong-cac-du-an-web
Hiệu ứng ISF Kính vạn hoa

Thư viện ảnh hiệu ứng Cloth

Hiệu ứng Cloth WebGL khi chuyển đổi

Shader Effects – Color Theory

Filter biến dạng hình ảnh

su-troi-day-cua-shader-filter-effect-trong-cac-du-an-web-3
ISP Optical Flow Distort

Hiệu ứng nhiệt

Hiệu ứng biến dạng nghiêng khi cuộn

Image shader

Hiệu ứng lắc

su-troi-day-cua-shader-filter-effect-trong-cac-du-an-web-4
Hiệu ứng biến dạng với tiếng ồn

Hiệu ứng cuộn sóng thu phóng

Hiệu ứng hình ảnh mờ

Starfield and trail effect của Mike Wojo

Hiệu ứng hạt mưa

Video với Halftone & Distortion Shaders

su-troi-day-cua-shader-filter-effect-trong-cac-du-an-web-5
CAMPER FW16

Entertaining background / Du Haihang

su-troi-day-cua-shader-filter-effect-trong-cac-du-an-web-6
Anagram – Paris
su-troi-day-cua-shader-filter-effect-trong-cac-du-an-web-7
VeilHymn

Shader Effects trong Futureofair.com

Shaders & Effect

Glitch effect

Hiệu ứng trò chơi SpaceLamb

Shader Effect

CÁC BỘ SƯU TẬP LIÊN QUAN

Bạn có muốn tạo một bộ lọc của riêng mình không? Bạn có thể đào sâu vào thế giới của shader trong các bộ sưu tập sau: Shaders are Easy, WebGL Shaders + Code

Nguồn: www.awwwards.com

Bài viết liên quan

Thiết kế Portfolio trên giao diện di động với Rich Brown (3 lượt xem )

Dự án thiết kế Portfolio của Rich Brown là sự hợp tác giữa Rich, Giám đốc nghệ thuật và Jordan…

CÁC LỖI MÃ TRẠNG THÁI HTTP PHỔ BIẾN NHẤT (5 lượt xem )

Cách khắc phục lỗi mã trạng thái  HTTP 4xx (Khách hàng) và 5xx (Máy chủ) Mã trạng thái HTTP (với…

Lỗi 403 Forbidden Error và Cách khắc phục (5 lượt xem )

Lỗi 403 Forbidden là lỗi mã trạng thái HTTP (HTTP status code), có nghĩa là trang hoặc nguồn tài nguyên…

Lỗi 400 Bad Request và Cách khắc phục (5 lượt xem )

Lỗi 400 Bad Request là mã trạng thái HTTP cho biết yêu cầu bạn gửi đến máy chủ website, thường…

No ratings!

Chưa có đánh giá

Đánh giá bài viết




Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *