Thạch Pitaya

Tạo một cảnh 3D tương tác có tên “Pitaya Jelly” — một nửa quả thanh long làm từ thạch mềm, trong mờ. Xây dựng toàn bộ dự án trong một tệp HTML duy nhất bằng tính năng kết xuất WebGPU thực tế và shader WGSL. Không sử dụng mô hình dựng sẵn hoặc nội dung hình ảnh. APPEARANCE Một nửa quả thanh long lớn đặt trên bề mặt studio sáng màu, với mặt cắt hướng lên trên. Vỏ màu hồng phúc bồn tử đậm, lớp cùi trắng ngà mỏng bên trong và phần ruột trắng như ngọc trai. Khoảng 250 hạt đen nhỏ phân bố tự nhiên trên phần ruột. 12–14 cánh vỏ mọng nước bao quanh quả, chuyển màu từ phần gốc hồng sang đầu xanh lục. Bề mặt bóng ướt với hiệu ứng khúc xạ ánh sáng, các bong bóng nhỏ bên trong và bóng tiếp xúc mềm. Vật liệu phải trông như kẹo dẻo mềm, không phải nhựa cứng. Giữ màu sắc bão hòa mà không để vùng sáng bị cháy. VẬT LÝ VÀ TƯƠNG TÁC Triển khai biến dạng soft-body thực tế bằng lưới thể tích với các liên kết đàn hồi và ràng buộc bảo toàn thể tích, chẳng hạn như XPBD. Người dùng có thể dùng chuột hoặc ngón tay để nắm phần ruột, kéo giãn rồi thả ra. Biến dạng phải tập trung quanh điểm bị nắm thay vì chỉ tịnh tiến toàn bộ vật thể. Sau khi thả, quả phải lắc lư, rung nhẹ và dần trở về hình dạng ban đầu. Cho phép kéo từng cánh vỏ riêng lẻ. Cánh vỏ phải mềm hơn phần ruột, có thể uốn cong và bật trở lại nhưng vẫn gắn với quả. Các hạt phải bám theo bề mặt đang biến dạng, không bay ra ngoài hoặc chìm vào phần ruột. Giữ mô phỏng ổn định khi kéo mạnh, bảo đảm tiếp xúc với sàn và ngăn các phần tử bị đảo ngược. THIẾT KẾ HÌNH ẢNH Sử dụng giao diện studio tối giản, tông sáng với phong cách biên tập: nhiều khoảng trắng, đường viền mảnh, các điều khiển tiết chế và không có chi tiết trang trí thừa. Góc trên bên trái: “NGHIÊN CỨU VẬT LIỆU / SỐ 019” Tiêu đề serif nghiêng cỡ lớn, hiển thị trên hai dòng: “Pitaya Jelly.” Bên dưới: “Một chút hoang dã.” “Một chút ngọt ngào.” “Một chú rồng cực mềm.” Ở bên phải, thêm một bảng nổi có tiêu đề “MẪU VẬT” và chứa: Nhãn mật độ: ρ 1.04 g/cm³. Ba thiết lập có sẵn: Pearl — ruột trắng và vỏ hồng. Ruby — ruột màu phúc bồn tử và vỏ hồng. Gold — ruột nhạt màu và vỏ vàng. Thanh trượt Độ cứng và Độ giảm chấn bên trong, kèm giá trị hiển thị. Các nút “Chạm nhẹ” và “Đặt lại”. Các ô chọn “¼ tốc độ” và “Hiện lưới”. Một nút “Tạm dừng”. Đồng thời bao gồm: Một nút toàn màn hình kèm tùy chọn thoát. Chỉ báo trạng thái “WEBGPU · LIVE”. Các chỉ số trực tiếp về khối lượng, phần trăm thể tích ở trạng thái nghỉ và động năng. Một gợi ý tương tác ngắn: “Kéo phần ruột. Kéo một cánh vỏ. Thả ra.” Một mục có thể thu gọn “Bên trong thí nghiệm” giải thích chính xác cách triển khai. YÊU CẦU KỸ THUẬT Bàn giao một tệp độc lập duy nhất có tên pitaya-jelly-webgpu.html. Sử dụng tính năng kết xuất WebGPU thực tế, không giả lập bằng Canvas 2D. Tạo toàn bộ hình học bằng phương pháp thủ tục. Sử dụng khúc xạ có xét đến độ dày, phản xạ Fresnel và ánh sáng studio mềm. Sử dụng bước thời gian mô phỏng cố định để hành vi nhất quán. Hỗ trợ tương tác trên máy tính và cảm ứng, với bố cục responsive. Tránh tái tạo hình học hoặc biên dịch shader tốn kém trong khi kéo. Hiển thị thông báo dự phòng rõ ràng khi WebGPU không khả dụng. Kiểm tra thao tác kéo, thả, khôi phục hình dạng, thiết lập có sẵn, đặt lại, tạm dừng, toàn màn hình và bố cục trên thiết bị di động. Các ưu tiên chính là hành vi giống thạch thuyết phục, vật liệu đẹp mắt và tương tác đã tay. Kết quả phải mang lại cảm giác như một thí nghiệm vật liệu được trau chuốt, có thể chơi và khám phá.