Một file HTML 61 KB, mở trực tiếp bằng Chrome, và bạn có một mặt biển hoàng hôn chạy real-time: sóng FFT, bọt trắng, ánh mặt trời lấp lánh trên mặt nước, bầu trời có mây Vật lý. Không engine, không thư viện render, không build phức tạp. Đó là Noniv/web-ocean.
Repo này làm gì
Đúng như mô tả: một WebGPU ocean renderer viết từ đầu. Tác giả không dùng Three.js, Babylon hay bất kỳ rendering library nào, chỉ có WebGPU và WGSL shaders tự viết. Kết quả là một cảnh biển hoàng hôn với đủ thứ mà dân graphics hay nhắc tới: sóng mô phỏng bằng FFT, whitecaps, sun glitter, sky model vật lý có mây, camera bay tự do.
Vấn đề nó giải quyết khá cụ thể: nếu bạn từng muốn dựng một cảnh biển trông ra hồn trên web, bạn thường phải chọn giữa một engine nặng (kéo theo hàng trăm KB JS) hoặc tự viết shader nước từ con số 0 và vật lộn với aliasing, mất chi tiết ở xa, ánh sáng không khớp với bầu trời. Repo này là một reference implementation hoàn chỉnh cho bài toán đó, gói trong 61 KB. Mở file là chạy, kể cả từ file://.
Chi tiết kỹ thuật đáng để đọc trong README: mặt biển là Tessendorf FFT với 6 cascade 256×256, dải bước sóng từ khoảng 1 km xuống vài mm, cascade nhỏ nhất tạo ra các tia sáng lấp lánh gần camera. Lưới mặt nước dùng CDLOD quadtree 17 level, đỉnh cách nhau 6.25 cm gần camera và lưới vươn tới 160 km, có morph liên tục giữa các level. Shading dùng LEAN mapping cho roughness dị hướng, sky reflection lấy từ cube map rebuild mỗi frame, whitecaps sinh ra chỗ Jacobian của mặt nước gập lại, bọt lưu trong hai map không gian thế giới (128 m và 1 km) rồi trôi theo gió và tách thành vệt khi già đi.
Vì sao nó đang hot
499 sao sau khoảng một ngày (tạo 16/10, cập nhật 17/10). Con số đó với một repo graphics thuần WebGPU là khá nhanh, và lý do không khó hiểu.
Thứ nhất, WebGPU đang trong giai đoạn dev web bắt đầu để ý thật sự, nhưng tài liệu và ví dụ chất lượng cao vẫn ít. Một demo hoàn chỉnh, self-contained, đọc được toàn bộ source, là thứ người ta bookmark ngay.
Thứ hai, cái “không engine” là điểm khác biệt. Phần lớn demo nước đẹp trên web đều dựa vào Three.js với Water2 hay Ocean shader có sẵn. Cái này viết tay từ đầu, nên nếu bạn muốn hiểu pipeline thật sự gồm những gì, nó là bản đồ tốt hơn nhiều so với việc đọc source của một abstraction layer.
Thứ ba, câu chuyện tác giả kể trong README: build bằng Claude Code (Opus 5.5), yêu cầu “nước chân thực nhất có thể bằng WebGPU”, để AI tự lo kiến trúc, rồi dùng headless Chrome render screenshot và cho các subagent critic riêng review, không tự chấm bài mình. Chi tiết này khiến repo được share nhiều, kể cả trong giới không làm graphics.
Cài và chạy thử
Nhanh nhất: mở trực tiếp trong Chrome (cần bản Chrome mới có WebGPU và GPU tạm ổn). File ocean.min.html là bản minify 61 KB, ocean.html là bản đầy đủ 102 KB. Cả hai độc lập hoàn toàn, chạy được từ file://.
Lưu ý nhỏ từ README: trên laptop Windows, nhớ ép Chrome dùng GPU rời trong Windows graphics settings, không thì nó tụt về integrated GPU và chậm thấy rõ.
Muốn chạy từ source:
npm install
npm start # serves http://localhost:8080/Sau khi sửa bất cứ gì trong js/, chạy build lại cả hai bundle:
npm run buildĐiều khiển: click canvas để capture chuột (Esc để nhả), WASD để di chuyển, Space hoặc E lên, Q hoặc C xuống, Shift tăng tốc 5x, lăn chuột đổi tốc độ nền, phím H mở panel settings chỉnh wind, swell, choppiness, turbidity, foam, sun, haze, clouds, exposure, bloom. Camera tự giữ mình trên mặt nước đã dịch chuyển nên sóng không bao giờ xuyên qua.
Có URL parameter tiện cho việc test, ví dụ ép độ phân giải và đặt camera:
?w=2560&h=1440
cam=x,y,z,yawDeg,pitchDeg
fov=deg
ui=0
windSpeed=12&swellHs=2&sunElev=8Ai nên dùng, dùng vào việc gì
Rõ nhất là dev làm graphics muốn học hoặc port kỹ thuật. Toàn bộ shader nằm trong js/wgsl/ dưới dạng JS module, chia theo sim.js (sóng và bọt), sky.js (khí quyển và mây). Muốn hiểu FFT ocean trên compute shader trông thế nào trong WGSL, đây là chỗ đọc.
Nhóm thứ hai là người làm web cần một cảnh nền ấn tượng mà không muốn kéo theo dependency. Một file HTML self-contained nhúng vào trang landing, hoặc dùng làm hero background, là hợp lý về mặt kích thước. Nhưng nhớ cảnh này chỉ có biển khơi, không có bờ, không có surf, không có vật thể trên mặt nước, nên đừng kỳ vọng làm cảnh bãi biển có thuyền.
Nhóm thứ ba là người tò mò về workflow AI-assisted coding ở mức độ này. Đọc phần “How it was made” cũng đáng thời gian.
Ưu điểm và hạn chế
Ưu điểm rõ: không dependency, license MIT, self-contained, chạy từ file local, README viết chi tiết đến mức đọc xong hiểu được pipeline mà không cần mở source. Hiệu năng trên RTX 5070 Ti ở 2560×1440 là khoảng 6 đến 8 ms GPU mỗi frame, đo lúc máy còn chạy chương trình khác. Code per-frame tái dùng typed array và descriptor đã cấp phát sẵn nên GC gần như không có việc làm.
Hạn chế thì tác giả tự liệt kê, và nên tin: vùng nước xa vẫn hơi tối hơn dải trời sáng phía trên horizon. Nước được tune theo hướng ven bờ đục (turbid), kéo slider turbidity xuống thì ra nước sâu xanh đậm hơn. Cảnh chỉ có biển khơi, không shoreline, không surf, không vật thể. Mây là hai layer phẳng chứ không volumetric, đây là lựa chọn có chủ đích sau feedback.
Về độ trưởng thành: repo mới một ngày tuổi, API và cấu trúc có thể còn đổi. Đừng coi đây là thư viện để vendor vào production mà không đọc. License MIT thì thoải mái về mặt pháp lý, chỉ cần giữ copyright notice. Tài liệu thực chất nằm trong README và comment shader, không có docs site riêng, nhưng với phạm vi này thế là đủ.
Kết luận
Nếu bạn có GPU rời và Chrome mới, mở ocean.min.html mất 10 giây, xem mặt trời lặn trên mặt nước 61 KB. Còn nếu bạn đang viết WebGPU renderer của riêng mình, đọc phần Waves và Shading trong README rồi mở js/wgsl/sim.js ra đối chiếu, sẽ tiết kiệm vài ngày vật lộn với LEAN mapping và CDLOD. Repo ở đây: Noniv/web-ocean.
