STILLWATER — Trải nghiệm đầm lầy ánh trăng trên trình duyệt

Xây dựng một trải nghiệm trên trình duyệt bằng Three.js có tên STILLWATER. Tông màu: một đầm lầy dưới ánh trăng khiến người ta lạc lối. Không phải game có kẻ địch. Không phải hình ảnh siêu chân thực kiểu Unreal. Đây là một thế giới web yên tĩnh, trau chuốt và đắt giá, trong đó phản chiếu trên mặt nước là điểm nhấn. Người xem nên mải ngắm mặt nước lâu đến mức không lành mạnh. BỐI CẢNH - Tên địa điểm: THE DEEP SWAMP - Thời gian trên HUD: 19:26 - Địa danh đầu tiên: Khúc quanh Heron - Khẩu hiệu bên dưới tên địa điểm: "Hãy chừa lại một khoảng cho thiên nhiên hoang dã." - Thông báo khám phá khi đến nơi: "Đã khám phá: Khúc quanh Heron" THẾ GIỚI Một đầm lầy bách ngập nước vào lúc trăng mọc / chạng vạng muộn. - Những cây cao, gốc nổi đầu gối, đứng giữa làn nước đen xanh - Rêu Tây Ban Nha buông thành những dải dài - Các cụm bèo súng dọc theo bờ - Kênh nước hẹp quanh co mở ra một khúc cua rộng hơn - Sương mù thể tích dày đặc, khoảng cách xa màu xanh teal-lục, bầu trời mây tím-hồng - Mặt trăng sáng với vệt phản chiếu dài, đứt đoạn trên mặt nước - Vài cánh chim bay ngang bầu trời - Ánh đèn cabin ấm áp từ con thuyền xuyên qua màn tối MẶT NƯỚC (đừng làm qua loa) Đây là nhân vật chính. - Phản chiếu theo thời gian thực của cây cối, mặt trăng, sương mù và đèn thuyền - Gợn dập dềnh nhẹ, không phải sóng biển - Bèo súng nằm trên mặt nước và nhấp nhô - Bọt ven bờ / nước giàu tannin sẫm màu gần các rễ cây - Phản chiếu không gian màn hình hoặc phản chiếu phẳng đủ tốt để vệt trăng có cảm giác điện ảnh - Duy trì 60 fps. Dùng LOD cho cây và foliage được instancing. THUYỀN Một chiếc xuồng cabin / thuyền công vụ nhỏ, cũ kỹ vì thời tiết. - Số hiệu thân tàu 86 ở đuôi - Cabin trắng, thân xanh đậm, đèn nội thất ấm áp - Trôi không tải qua kênh, có thể thêm chuyến tham quan chậm có hướng dẫn - Tốc độ trên HUD khoảng 15.9 KNOTS - Nhãn chế độ: GUIDED DRIFT Người chơi có thể quan sát xung quanh. Có thể bám theo thuyền bằng góc máy điện ảnh rượt đuổi / vòng ngang. CAMERA - Bắt đầu với góc ba phần tư, nhìn thuyền giữa những hàng cây - Trôi phía sau đuôi thuyền theo lối nước dưới ánh trăng - Thỉnh thoảng trượt ngang qua một thân cây ở tiền cảnh - Kéo để quan sát - PHOTO MODE tùy chọn Tạo cảm giác như phim tài liệu về thiên nhiên, không phải FPS. UI — mang tính biên tập, không giống game Góc trên bên trái: biểu tượng nhỏ + STILLWATER Chính giữa phía trên: THE DEEP SWAMP / 19:26, hướng la bàn (ví dụ 314°) Góc trên bên phải: các biểu tượng tiện ích tối giản Góc dưới bên trái: ĐANG KHÁM PHÁ STILLWATER Khúc quanh Heron Hãy chừa lại một khoảng cho thiên nhiên hoang dã. 15.9 KNOTS GUIDED DRIFT Góc dưới bên phải: PHOTO MODE, fps, Tạm dừng Chính giữa phía dưới: thông báo nhỏ "Đã khám phá: Khúc quanh Heron" Hàng gợi ý nhỏ: shader / mặt nước / kéo để quan sát / chụp ảnh / động vật hoang dã Hình ảnh: màu phim tối, xanh lục trầm, mây màu magenta, một điểm sáng từ mặt trăng. Ưu tiên gu thẩm mỹ hơn chủ nghĩa hiện thực. Không dùng GUI debug cồng kềnh. CÔNG NGHỆ Three.js trên trình duyệt. Thiên nhiên tạo theo quy trình / instancing. Shader mặt nước tùy chỉnh. Sương mù. Bóng mềm hoặc ánh sáng chạng vạng có cảm giác như được bake. Nếu có thể tự xây dựng thì không dùng asset pack đầm lầy từ marketplace. KHÔNG thêm chiến đấu, kho đồ, hù dọa bất ngờ hoặc nhiệm vụ truy tìm kho báu. Sau này có thể có thứ gì đó ẩn mình dưới nước — nhưng chưa phải lúc này.