Spider Walk: nhện 8 chân bò sàn, bò tường, bò trần ngay trên trình duyệt
Một con nhện nâu sải chân khoảng 13 cm sống dưới gầm bàn. Mở trang là nó tự bò một vòng: sàn gỗ, tường, mặt dưới tấm kệ, vòng qua mép kệ lên mặt trên, leo lên mặt dưới bàn rồi theo tường xuống lại sàn. Bấm phím là bạn cầm lái.
Cách chơi
Lái
W đi tới, S lùi, A và D rẽ. Trên điện thoại, giữ các nút mũi tên ở góc phải màn hình.
Tự đi
Nhện tự bò hết một vòng gầm bàn trong khoảng 40 giây, lúc lao nhanh, lúc khựng lại như nhện thật. Bấm P hoặc nút AUTO để bật lại.
Đổi góc máy
Phím C hoặc nút CAM: bám sau lưng, cận mặt và nhìn toàn cảnh gầm bàn.
Leo lên tường
Lái thẳng vào tường hoặc thùng carton. Hai chân trước chạm bề mặt mới trước, thân chỉ xoay theo khi hai chân đó đã bám chắc.
Thùng đang trượt
Thùng carton giữa phòng trượt qua lại. Chân nào đứng trên thùng sẽ bị thùng mang theo.
Xem tia dò
Phím G hiện các tia nhện bắn ra để tìm chỗ đặt chân và đoán bề mặt phía trước.
Cách làm
- Không có hoạt ảnh làm sẵn. Mỗi khung hình, nhện bắn tia xuống bề mặt dưới thân để biết mình đang đứng trên sàn, tường hay trần, rồi lấy pháp tuyến của bề mặt đó làm chiều lên.
- Góc trong (sàn gặp tường) được báo trước bằng một tia bắn thẳng phía trước. Ở mép ngoài (cạnh kệ), tia xuống hụt thì một tia khác quét ngược vào mặt cạnh. Hướng đi được xoay theo mặt mới để nhện không bị lệch hướng sau mỗi lần chuyển mặt.
- Tám chân chia hai nhóm bốn chân, bước so le. Mỗi chân tìm chỗ đặt bằng ba tia: từ gốc chân tới đích, từ trên xuống, và quét vào dưới mép. Chân chỉ nhấc lên khi các chân bên cạnh đang chạm đất.
- Thân không gắn cứng vào đâu: vị trí và độ nghiêng được tính từ chỗ tám bàn chân đang bám, qua lò xo, nên thân nhún nhẹ mỗi khi một chân đặt xuống và hơi chúi khi tăng tốc.
- Chân chia đốt đùi, ống, bàn và móng, gập bằng IK hai xương. Chân xúc giác và chùm lông ở bụng đung đưa theo quán tính. Lông tơ là nhiều lớp vỏ trong suốt chồng lên nhau, camera xoá phông theo khoảng cách tới nhện.
- Cả demo là một file JavaScript dùng three.js, khoảng 540 KB sau khi nén. Máy yếu và điện thoại tự hạ độ phân giải và tắt xoá phông.
Cần một trang 3D chạy trên trình duyệt?
Golden Sea làm game, demo tương tác và trang 3D chạy thẳng trên web, không cần cài đặt. Xem các dự án đã làm trong Portfolio.
Câu hỏi thường gặp
- Spider Walk có chạy trên điện thoại không?
- Có, trên trình duyệt hỗ trợ WebGL (Chrome, Safari, Firefox, Edge bản mới). Góc phải có nút mũi tên để lái, nút CAM đổi góc máy và nút AUTO bật tự đi. Máy yếu tự giảm độ phân giải và tắt hiệu ứng xoá phông.
- Con nhện có dùng hoạt ảnh làm sẵn không?
- Không. Tư thế chân và thân được tính lại mỗi khung hình từ chỗ bàn chân đang bám và các tia dò. Nhờ vậy nó tự đi được trên bề mặt mới, kể cả thùng carton đang trượt.
- Sao nhện bò lên trần mà không rơi?
- Nhện luôn bám vào bề mặt dưới chân, giống nhện thật bám bằng lông ở bàn chân. Chiều lên của nó là pháp tuyến của bề mặt đang đứng, nên với nó trần nhà cũng như sàn.
- Spider Walk được làm bằng gì?
- three.js r169 và WebGL, viết trong một file JavaScript. Phần hình có vật liệu vật lý với lớp ánh lụa cho lông, bóng đổ mềm bám theo nhện, môi trường phản chiếu và xoá phông kiểu ống macro.