Mô phỏng chất lỏng neon Euler tương tác

Viết một tài liệu HTML hoàn chỉnh trong một tệp duy nhất, chứa Mô phỏng chất lỏng neon Euler tương tác, hiệu năng cao và được tăng tốc bằng GPU. Yêu cầu kỹ thuật và thẩm mỹ nghiêm ngặt: 1. Kiến trúc và hiệu năng: - Một tệp duy nhất: Nhúng toàn bộ HTML, CSS và JavaScript/các shader GLSL trực tiếp trong tệp. - Không phụ thuộc bên ngoài: Chỉ sử dụng WebGL 1.0 hoặc 2.0 thuần túy (không dùng Three.js, Pixi hay thư viện bên ngoài). - Tính toán động lực học chất lỏng trên GPU: Mô phỏng phải chạy hoàn toàn thông qua các Framebuffer Object (FBO) ping-pong, sử dụng fragment shader tùy chỉnh cho: a) Phép chuyển lưu (vận tốc và thuốc nhuộm) b) Tính độ phân kỳ c) Bộ giải Poisson cho áp suất (lặp Jacobi, 20–30 lần mỗi khung hình) d) Trừ gradient / chiếu vận tốc e) Khống chế độ xoáy (tạo thêm các xoáy hỗn loạn và ngăn chất lỏng biến thành một khối nhòe nhạt, vô hồn). 2. Độ trung thực hình ảnh (phong cách “Khói neon”): - Nền hư không đen tuyền (`#050508`). - Sử dụng hòa trộn cộng / HDR để bơm thuốc nhuộm. - Bảng màu động: Mỗi cú lướt con trỏ hoặc thao tác kéo cảm ứng sẽ bơm thuốc nhuộm neon có độ sáng cao, chuyển mượt qua các màu cyber rực rỡ (cyan điện `#00F0FF`, magenta rực `#FF007F`, tím cực sâu và vàng phát sáng). - Cải thiện shader hiển thị: Thêm một bước hậu kỳ trực tiếp trong shader kết xuất cuối, áp dụng bloom/glow nhẹ, ánh xạ tông màu và hiện tượng quang sai màu quanh các mép chất lỏng đang xoáy. 3. Tương tác: - Chuột và cảm ứng: Di chuyển con trỏ nhanh hoặc kéo sẽ bơm vận tốc tỷ lệ với tốc độ chuột, đồng thời tạo ra thuốc nhuộm phát sáng dày đặc. - Chuyển động nền thụ động: Khi không có thao tác, tạo curl noise theo thủ tục tinh tế hoặc các xoáy trôi nhẹ để canvas không bao giờ hoàn toàn tĩnh. - Điều khiển: HUD glassmorphism tinh gọn, hiện đại, đặt gọn ở một góc (tự động ẩn khi không hoạt động): * Thanh trượt độ nhớt * Thanh trượt độ tiêu tán / duy trì của thuốc nhuộm * Thanh trượt bán kính splat * Nút “Xóa canvas” * Nút chuyển đổi để luân phiên giữa các chủ đề màu (Cyberpunk, Thermal Inferno, Bioluminescent Deep). 4. Hoàn thiện để đưa vào sản phẩm: - Tự động xử lý màn hình DPI cao và các sự kiện `resize` mà không làm biến dạng hoặc xóa các texture FBO. - Có cơ chế kiểm tra dự phòng phù hợp cho khả năng hỗ trợ texture dấu phẩy động (`OES_texture_float` / `OES_texture_half_float`). - Mã nguồn sạch, không lỗi, được triển khai đầy đủ, không có phần giữ chỗ hoặc chú thích bị cắt ngắn. Chỉ trả về tệp HTML hoàn chỉnh, sẵn sàng chạy trực tiếp trong Chrome/Safari/Firefox.