Loading feed…
Codrops0 Hot0 comments19 min read
Building a Mouse-Following Square Lens Effect with Three.js and GLSL
AI summary
Bài viết hướng dẫn cách tạo hiệu ứng lens vuông theo chuột bằng Three.js và GLSL, bắt đầu từ việc thiết lập scene, camera và renderer cơ bản. Trong shader fragment, tác giả truyền uniform uMouse (tọa độ chuột chuẩn hoá), uTime và độ phân giải để tính khoảng cách từ mỗi fragment đến trung tâm lens và áp dụng phép biến đổi hình học khi khoảng cách nhỏ hơn bán kính lens (thường đặt 0.2 trong không gian chuẩn hoá). Hiệu ứng distortion được thực hiện bằng cách dịch tọa độ texture dựa trên vector pháp tuyến của lens, đồng thời thêm hiệu ứng RGB shift bằng cách lấy mẫu texture tại ba offset légèrement khác cho các kênh R, G, B và kết hợp chúng lại. Để tạo cảm giác sống động, bài viết sử dụng uTime để điều chỉnh độ mạnh của lens và màu shift theo một hàm sin, khiến hiệu ứng nhẹ nhàng nhấp nháy khi người dùng di chuyển chuột. Từ hướng dẫn này, lập trình viên có thể học cách kết hợp Three.js với uniform buffer và GLSL để xây dựng các hiệu ứng post‑process tương tác, cũng như tối ưu hóa bằng việc giảm số lượng draw call qua một plane đơn và sử dụng texture2D chỉ một lần mỗi pass.
Why read it: Bài hướng dẫn này sẽ giúp bạn tạo hiệu ứng thấu kính hình vuông theo di chuyển chuột với biến dạng ảnh, dịch chuyển RGB và hiệu ứng shader hoạt động bằng Three.js và GLSL.
What do you remember?
Answer 3 short questions to earn reward points for this article. Only do it if you want the points.
up to +17 points
3 questions · under a minute · optional
Source: https://tympanus.net/codrops/2026/08/25/building-a-mouse-following-square-lens-effect-with-three-js-and-glsl. 8 Sync News only summarizes and links out; content copyright belongs to the authors and original sources.
Recommended for you
Bình luận
Đang tải bình luận…
