Vải nỉ, lông cừu và vài trăm chiếc lò xo bé xíu, khâu thành một chú bạo chúa tí hon siêu dễ ôm.
Đang thức dậy
Kéo trên sàn để xoay quanh · chạm xuống sàn để gọi bé lại · xoa đầu, chạm nhẹ vào mõm · chạm đúp để bé nhảy · giữ để nhấc bé lên (nắm đuôi là dễ nhất) · thử dụng cụ 🪶 Cù lét nhé
Tất cả những gì bạn thấy nằm gọn trong một file HTML. Chú thú bông được dựng từ toán học ngay khi tải trang, nhồi bằng một lưới lò xo thưa, rồi vẽ ra chỉ với một lượt shader. Phím tắt: F cho ăn, R gầm, S dậm chân, N đánh hơi, D nhảy múa, W vẫy tay, J nhảy lò cò, T xoay vòng, G vẫy đuôi, Z ngủ trưa, B ném bóng, M tắt/bật tiếng, Space tạm dừng.
Thân, đầu, chân, tay, đuôi và gai lưng là một signed distance field duy nhất: các ellipsoid, hộp bo tròn và hình nón tròn được ghép bằng smooth-min đa thức, nên các đường nối hòa vào nhau như vải nhồi bông. Miệng là một tấm cong bị trừ khỏi đầu, tạo ra nụ cười lót nỉ với khe hở thật giữa hàm trên và hàm dưới. Mắt, lông mày, lỗ mũi và gai lưng được đặt bằng cách bắn tia vào field, nên lúc nào cũng nằm đúng trên bề mặt.
Khi tải trang, field được lấy mẫu trên lưới cách nhau khoảng 8 mm (theo kích thước đồ chơi) và biến thành khoảng 20.000 tam giác bằng naive surface nets. Mỗi đỉnh được kéo về đúng bề mặt (tập không) bằng hai bước Newton, còn pháp tuyến lấy từ gradient của field. Mesh không bao giờ được dựng lại; mọi thứ sau đó chỉ là biến dạng.
Field được lấp đầy bởi khoảng 350 hạt trên một lưới lục diện. Mỗi ô được khớp hình (shape matching) với dạng nghỉ của nó (góc xoay tìm bằng phương pháp quaternion lặp), và mỗi ô lại được chia thành năm tứ diện giữ nguyên thể tích nhờ các ràng buộc XPBD, với độ mềm (compliance) do thanh trượt Độ nhồi bông quyết định. Bộ giải chạy trong Web Worker với bốn đến sáu substep mỗi khung hình và gửi vị trí về sau mỗi khung.
Mỗi đỉnh lưu ô lưới của nó cùng tọa độ trilinear. Vertex shader đọc tám hạt ở góc ô từ một float texture bằng textureLoad, nội suy vị trí và dựng lại pháp tuyến từ cofactor của ma trận Jacobian của ô. Hàm và hai cánh tay tí hon được cộng thêm một chuyển động xoay bản lề, đo so với khung đầu và khung ngực mà worker trích ra ở mỗi bước.
Khi đi, thay vì di chuyển xương, ta uốn dạng nghỉ của các ô: chân vung từ hông, thân nhún và nghiêng về phía bàn chân đang chống, đuôi lắc ngược lại còn đầu xoay bù để luôn giữ thăng bằng. Bàn chân đang chạm đất được ghim đúng chỗ vừa đặt xuống nên không bao giờ bị trượt. Khi rẽ, đầu quay trước và thân theo sau một nhịp.
Lớp nền dùng BRDF sheen phủ lên một normal map nhung procedural. Bên trên, từ không đến tám lớp shell mọc dọc theo pháp tuyến và được cắt thành từng sợi bằng alpha-to-coverage, nên không cần sắp xếp thứ tự. Mỗi hạt của lưới mang một lò xo giảm chấn bám theo gia tốc của nó, khiến lớp lông trễ nhịp sau mỗi lần rung lắc. Chải lông sẽ ghi một hướng vào texture trải dọc theo sống lưng (chân có mảng riêng), và Vuốt lông sẽ xóa nó đi.
Three.js WebGPURenderer cùng các node material TSL được biên dịch sang WGSL, hoặc sang GLSL khi dùng bản dự phòng WebGL 2. Pixel ratio bị giới hạn ở 1,5 và tự giảm xuống 70% khi khung hình bị chậm. Mức chất lượng quyết định số lớp shell và số substep, và việc vẽ sẽ dừng khi tab bị ẩn.