Jelly Bust: đồ chơi vật lý thạch WebGL tương tác
Một thân kẹo dẻo dáng ma-nơ-canh, trong suốt như thạch, mặc bikini cổ yếm và đứng trên đế bánh ba tầng. Chọc vào là lõm rồi bật lại, kéo một đường cong là căng ra, lắc bàn là cả thân đung đưa và nảy thêm một lúc sau khi bàn đã dừng.
Cách chơi
Chọc
Chạm hoặc bấm vào thạch. Bề mặt lõm xuống đúng chỗ chạm rồi nảy lại.
Kéo
Giữ và kéo trên thạch để căng một đường cong. Thả tay là thạch bật về và rung.
Lắc bàn
Bấm Shake the table hoặc phím Space: đế nhảy lên rồi lắc ngang tắt dần, thân thạch đung đưa theo quán tính.
Vị và hoạ tiết
Bốn vị thạch (Lagoon, Raspberry, Lime, Mango) và sáu hoạ tiết bikini: da báo, ngựa vằn, chấm bi, sọc Breton, caro và đen trơn.
Độ cứng và độ tắt rung
Hai thanh trượt chỉnh thạch cứng hay mềm, rung lâu hay tắt nhanh.
Xoay và phóng to
Kéo nền để xoay, cuộn chuột hoặc chụm hai ngón để phóng to. Phím mũi tên cũng xoay được.
Cách làm
- Hình dáng là một trường khoảng cách có dấu (SDF) ghép mượt từ các khối elip, chuyển thành lưới khoảng 23.000 đỉnh bằng surface nets.
- Bên trong là lưới 154 nút lò xo, tính 10 bước nhỏ mỗi khung hình. Vùng ngực mềm hơn nên nảy theo nhịp riêng.
- Biến dạng chạy trên GPU: mỗi đỉnh trộn độ dịch của các nút gần nhất, có ma trận Jacobian để pháp tuyến luôn đúng khi thạch méo.
- Thạch dùng vật liệu khúc xạ hai mặt, bikini được cắt bằng shader từ toạ độ nghỉ, bóng màu chiếu lên đế bằng stencil để không bị chồng tối.
- Trang chỉ vẽ lại khi có chuyển động và tự chỉnh độ phân giải theo máy, nên đứng yên thì gần như không tốn GPU.
Lấy prompt
Prompt tiếng Anh đầy đủ để dựng lại trang này nằm trong thư viện AI Prompts của Golden Sea, kèm video xem trước và bản demo.
Mở thư viện AI PromptsCâu hỏi thường gặp
- Jelly Bust có chạy trên điện thoại không?
- Có, trên trình duyệt hỗ trợ WebGL 2 (Chrome, Safari, Firefox, Edge bản mới). Trên điện thoại bảng điều khiển chuyển thành tấm kéo ở cạnh dưới và chạm để chọc, kéo để căng thạch.
- Trang được làm bằng gì?
- Một file HTML duy nhất, three.js r160 tải dạng ES module, WebGL 2 và Web Audio. Không dùng addon hay bước build nào.
- Vì sao thạch nảy giống thật?
- Thân thạch được giữ bởi một lưới lò xo bên trong: mỗi nút có lò xo kéo về vị trí nghỉ và lò xo nối các nút bên cạnh. Lực chọc, lực kéo và gia tốc khi lắc bàn đều đi vào lưới này, rồi GPU uốn bề mặt theo.
- Tôi có lấy được prompt để tự làm không?
- Có. Prompt đầy đủ bằng tiếng Anh có trong thư viện AI Prompts của Golden Sea, sao chép miễn phí.