Dự án nghiên cứu: Trình giả lập 3D CRT Monitor & Voxel Art bằng WebGL / Three.js
Bộ phận R&D của Soratech đã phát triển một Trình giả lập màn hình CRT 3D & Voxel Art chạy thời gian thực trên trình duyệt để thử nghiệm hiệu năng đồ họa WebGL nâng cao.
Dự án này tái hiện hoàn hảo các hiệu ứng vật lý của màn hình bóng đèn hình (CRT) cổ điển kết hợp với cấu trúc logo 3D dạng khối (voxel) tương tác mượt mà bằng cử chỉ chuột và chạm.
Giải pháp kỹ thuật và Kiến trúc hệ thống
1. Mô hình hóa 3D bằng React Three Fiber (R3F)
Mô hình màn hình CRT và cấu trúc các hạt pixel 3D của logo được xây dựng bằng React Three Fiber và @react-three/drei (thư viện bọc Three.js cho React).
- Chất liệu vật lý (PBR) tạo độ bóng chân thật của vỏ nhựa, màn thủy tinh phản chiếu ánh sáng.
- Camera tự động bám theo tọa độ chuột để tạo chiều sâu không gian (Parallax Effect).
2. Bộ lọc Shader tùy chỉnh (CRT Shader Effect)
Để tái tạo cảm giác hoài cổ của màn hình CRT, chúng tôi áp dụng shader xử lý hậu kỳ (post-processing shader) tùy chỉnh:
- Hiệu ứng cong góc màn hình (Curvature Scanlines).
- Các đường quét quét ngang (Scanlines Matrix) và hiệu ứng nhiễu từ (Glitch noise).
- Ánh sáng phả nhẹ từ màn hình ra xung quanh (Glow Bloom).
3. Tối ưu hóa hiệu năng đa thiết bị
Do đồ họa 3D yêu cầu tài nguyên GPU lớn, chúng tôi đã phát triển song song một phiên bản 2D SVG Flat Pixel siêu nhẹ bằng Web Animations API. Thiết bị di động hoặc các dòng máy không hỗ trợ WebGL có thể chạy phiên bản này mượt mà 60 FPS mà không tiêu tốn tài nguyên phần cứng.
Trải nghiệm trực tiếp
Bạn có thể chạy thử trực tiếp cả phiên bản giả lập 3D CRT và 2D Flat tại trang thử nghiệm công nghệ của Soratech: