Kage Đang hoạt động

Kage là dự án trải nghiệm tương tác 3D nhập vai do nhà thiết kế Meng To phát hành mã nguồn mở. Công cụ chỉ sử dụng một tệp HTML duy nhất, kết hợp Three.js để kết xuất theo thời gian thực với tư liệu cảnh do GPT Image 2 tạo ra, xây dựng một chuyến tản bộ ban đêm qua ngôi chùa trên núi Kyoto hư cấu. Người dùng chỉ cần cuộn chuột để điều khiển lộ trình camera, đi qua năm chương gồm cổng núi, sân tĩnh và các khu vực khác, cảm nhận bầu không khí điện ảnh nơi mưa sương, lá rơi và vầng trăng đỏ son hòa quyện. Kage có thể chạy ngay khi mở trực tiếp, là ví dụ tiêu biểu về thiết kế frontend kết hợp nội dung do AI tạo với WebGL thời gian thực.

Theo dõi WeChat và trả lời “开源” để tham gia nhóm trao đổi dự án mã nguồn mở AI
Điều hướng bằng thao tác cuộn: dùng con lăn chuột điều khiển camera di chuyển theo lộ trình định sẵn qua ngôi chùa trên núi, không nút bấm, không menu, cuộn là phương thức tương tác duy nhất.
Kết xuất 3D thời gian thực: xây dựng động các cảnh chùa, cổng núi, mưa sương, lá rơi và vầng trăng đỏ son ngay trong trình duyệt bằng Three.js.
Kết hợp tư liệu AI: phủ các bảng cảnh do GPT Image 2 tạo và các phần tử tiền cảnh WebP trong suốt lên thế giới 3D thời gian thực để tăng chất điện ảnh.
Cấu trúc tự sự gồm năm chương: sắp xếp theo “cổng núi → sân tĩnh → nghệ thuật thủ công → dư quang → tuyên ngôn”, mỗi đoạn cuộn tương ứng với một bố cục khung hình mới.
Không cần xây dựng, chỉ một tệp: toàn bộ logic, kiểu dáng và kết xuất được tập trung trong một tệp HTML, không cần npm, React hay bất kỳ công cụ build nào.
Bầu không khí hình ảnh nhập vai: sử dụng bảng màu tiết chế gồm gần đen, xanh chàm sẫm, hổ phách ấm, trắng xương và đỏ son, kết hợp hậu kỳ bloom, hạt phim và vignette.
Hỗ trợ khả năng tiếp cận: tích hợp tùy chọn giảm chuyển động và hỗ trợ bố cục responsive trên thiết bị di động.

Trải nghiệm trực tuyến: truy cập trực tiếp https://mengto.github.io/kage/ bằng trình duyệt để bước vào chuyến tham quan chùa trên núi Kyoto về đêm.
Triển khai cục bộ: sau khi clone repository, chạy bất kỳ máy chủ tĩnh nào, chẳng hạn python3 -m http.server, không cần bước build.
Thao tác: sau khi mở trang, chỉ cần cuộn chuột, camera sẽ tự động di chuyển qua năm chương theo lộ trình định sẵn.
Yêu cầu trình duyệt: hãy sử dụng trình duyệt hiện đại hỗ trợ WebGL, nếu không hình ảnh sẽ không thể kết xuất.
Sáng tạo phái sinh: khi làm lại, cần tự dùng AI để tạo lại tư liệu theo PROMPT.md, không được tái sử dụng trực tiếp artwork của dự án gốc.
Cài đặt khả năng tiếp cận: khi tùy chọn hệ thống “giảm chuyển động” được bật, trang sẽ tự động giảm cường độ hoạt ảnh để tránh chóng mặt.

Kiến trúc một tệp: toàn bộ logic, kiểu dáng và kết xuất 3D được cô đọng trong một tệp HTML, không build, không phụ thuộc, mở là dùng.
Tương tác tối giản: chỉ điều khiển lộ trình camera bằng thao tác cuộn, không nút bấm, không menu, không cần thời gian làm quen.
Kết xuất kết hợp AI: tư liệu cảnh do GPT Image 2 tạo được phủ liền mạch lên kết xuất 3D thời gian thực bằng Three.js, kết hợp chất liệu như quay thực với ánh sáng động.
Trải nghiệm nhập vai điện ảnh: cách sắp xếp tự sự thành năm chương, kết hợp bảng màu tiết chế và hiệu ứng hậu kỳ, tạo nên cảm giác điện ảnh của một chuyến tham quan chùa trên núi Kyoto về đêm có thể tương tác.
Do nhà thiết kế dẫn dắt: tác giả không xuất thân từ lập trình sử dụng prompt làm trung tâm sáng tạo, thể hiện mô hình mới của phát triển frontend ưu tiên thiết kế trong thời đại AI.
Nhẹ và dễ chuyển giao: không backend, không script phân tích, không yêu cầu mạng khi chạy, có thể triển khai trong vài giây trên bất kỳ máy chủ tĩnh nào.

Trang web dự án: https://mengto.github.io/kage/
Repository GitHub: https://github.com/MengTo/kage

Portfolio cá nhân/trang chủ sáng tạo: nhà thiết kế hoặc nhà phát triển có thể dùng trải nghiệm 3D nhập vai trong một tệp để thay thế portfolio truyền thống, trình bày dự án bằng tự sự qua thao tác cuộn và tạo dấu ấn hình ảnh vượt xa các trang web thông thường.
Hướng dẫn số cho điểm du lịch văn hóa: chuyển mô hình “tham quan chùa trên núi về đêm” của Kage sang các địa điểm thực tế, cho phép người dùng đi qua quần thể kiến trúc cổ và cảnh quan tự nhiên bằng thao tác cuộn, thay cho phần giới thiệu tĩnh bằng hình ảnh và văn bản.
Trang ra mắt thương hiệu/giới thiệu sản phẩm: trước khi sản phẩm mới ra mắt, dùng trải nghiệm điện ảnh một trang để tạo bầu không khí; ô tô, đồng hồ và hàng xa xỉ có thể dùng hình thức cuộn theo chương để hé lộ chi tiết sản phẩm cùng câu chuyện thương hiệu.
Triển lãm số cho bảo tàng/giáo dục lịch sử: tái hiện các bối cảnh lịch sử như thành phố cổ hoặc di tích, để học sinh và khán giả “bước vào” lịch sử bằng thao tác cuộn, đồng thời giảm chi phí mỹ thuật nhờ tư liệu do AI tạo.
Giảng dạy frontend và ví dụ nhập môn Three.js: với vai trò là hình mẫu một tệp không cần build, Kage phù hợp để phân tích mã nguồn trực tiếp trong giảng dạy. Sinh viên không cần cấu hình môi trường npm vẫn có thể hiểu logic cốt lõi của cảnh 3D, lộ trình camera và cơ chế điều khiển bằng thao tác cuộn.