Kho repo duoc binh chon

Bộ dựng hình hai chiều tăng tốc bằng bộ xử lý đồ hoạ, nhanh nhất trong hạng của nó trên web. Hợp cho trò chơi hai chiều, hiệu ứng hạt, trực quan hoá dữ liệu lớn — chỗ mà canvas thường và SVG đã đuối.

### Dùng vào việc gì

• Trò chơi hai chiều và trò chơi nhỏ trong module Thư viện Game của bạn
• Hiệu ứng hạt và hoạt cảnh nền vẫn giữ được 60 khung hình
• Vẽ hàng chục nghìn điểm dữ liệu mà không nghẽn trình duyệt

### Lưu ý

Hiệu năng đến từ việc gộp lệnh vẽ. Trộn quá nhiều kết cấu rời sẽ phá mất phần gộp đó — dùng bản đồ gộp ảnh (sprite sheet) cho tài nguyên trò chơi.

Thư viện canvas hai chiều có mô hình cây đối tượng: hình khối trở thành đối tượng có sự kiện, kéo thả và hoạt ảnh, thay vì tự vẽ lại từng khung hình. Có sẵn lớp bọc cho React.

### Dùng vào việc gì

• Trình chỉnh sửa ảnh, công cụ cắt cúp, chèn chữ lên ảnh
• Sơ đồ kéo thả được, trình dựng bố cục
• Vẽ dữ liệu tương tác khi số phần tử vượt quá sức của SVG

### Lưu ý

Vượt vài nghìn hình thì phải chia lớp và bật bộ đệm, nếu không khung hình rớt thấy rõ. Đây là ranh giới giữa canvas hai chiều và cách dựng bằng bộ xử lý đồ hoạ.

Bảng vẽ trực tuyến nét kiểu tay, hợp tác nhiều người, dữ liệu mã hoá đầu cuối. Vừa là công cụ vẽ sơ đồ hằng ngày, vừa là một kho mã React đáng học vì phần vẽ canvas và đồng bộ thời gian thực.

### Dùng vào việc gì

• Vẽ sơ đồ kiến trúc, luồng dữ liệu cho bài viết và tài liệu dự án
• Nét vẽ tay khiến bản nháp trông đúng là bản nháp, người xem góp ý thoải mái hơn
• Đọc source để học cách xử lý canvas hiệu năng cao và đồng bộ nhiều con trỏ

### Lưu ý

Nhúng thư viện của họ vào trang được, nhưng gói khá nặng. Nếu chỉ cần hiện sơ đồ tĩnh thì xuất ra ảnh vector là đủ.

Bộ mô hình mẫu chính thức của định dạng glTF, mỗi mô hình dựng ra để thử một tính năng: vật liệu, hoạt ảnh, lưới bọc xương, nén, ánh sáng. Đây là bộ dữ liệu chuẩn để kiểm trình hiển thị của mình.

### Dùng vào việc gì

• Kiểm tra pipeline tải mô hình: nếu mô hình mẫu hiện sai thì lỗi ở phía bạn, không phải ở file
• So sánh dung lượng và chất lượng trước sau khi nén
• Nguồn mô hình dùng thử hợp lệ khi làm bản mẫu

### Lưu ý

Đây là mô hình để kiểm thử, không phải tài nguyên cho sản phẩm. Mô hình dùng trong sân chơi phải ghi rõ nguồn và giấy phép — món nợ ghi công vẫn còn treo ở đó.

Thẻ web component hiển thị mô hình 3D chỉ bằng một dòng HTML, có sẵn thực tế tăng cường trên di động, ánh sáng môi trường và điều khiển máy quay. Khi chỉ cần xem một mô hình chứ không cần cả một cảnh, đây là con đường ngắn nhất.

### Dùng vào việc gì

• Xem trước mô hình linh kiện, bộ vỏ in 3D ngay trong trang tài liệu kỹ thuật
• Nút xem trong không gian thật trên điện thoại, không cần ứng dụng riêng
• Nhúng mô hình vào bài viết mà không kéo cả thư viện 3D vào trang

### Lưu ý

Vẫn nên nén mô hình trước khi đưa lên. Một file mô hình chưa nén vài chục megabyte sẽ giết trải nghiệm trên mạng di động.

Bộ mô phỏng vật lý viết bằng Rust, biên dịch sang WebAssembly để chạy trong trình duyệt. Nhanh, tất định — cùng đầu vào cho cùng kết quả, điều kiện cần nếu muốn đồng bộ vật lý giữa nhiều người chơi.

### Dùng vào việc gì

• Va chạm, trọng lực, điều khiển nhân vật trong sân chơi 3D
• Địa hình cao thấp: dùng một hàm cao độ duy nhất thay vì ghép hộp nghiêng
• Khớp nối và ràng buộc cho cơ cấu cơ khí — dùng được cho phần mô phỏng robot

### Lưu ý

Đúng cái bẫy đã gặp: thứ tự chiều của lưới cao độ là hàng theo trục Z rồi mới tới cột theo trục X. Đảo nhầm thì địa hình trông vẫn hợp lý nhưng va chạm lệch hẳn.

Bộ trợ thủ cho cảnh 3D viết bằng React: điều khiển máy quay, tải mô hình, môi trường ánh sáng, chữ, hiệu ứng, khung cảnh chờ. Những thứ ai cũng phải viết lại, nay có sẵn và đã tối ưu.

### Dùng vào việc gì

• Điều khiển máy quay và bộ trợ giúp gỡ lỗi, tiết kiệm hàng trăm dòng thiết lập
• Nạp mô hình có nén, kèm bộ đệm và trạng thái chờ
• Hiệu ứng sẵn dùng: phản chiếu, bóng mờ, ánh sáng chói

### Lưu ý

Đừng nhập cả gói. Nhập từng phần đang dùng, nếu không bundle phình rất nhanh — điều rất dễ nhận ra trên máy yếu.

Cầu nối để viết cảnh 3D bằng cú pháp React: cảnh trở thành cây component, trạng thái quản lý như mọi phần khác của ứng dụng. Không mất hiệu năng vì nó chỉ điều phối, phần vẽ vẫn do thư viện 3D lo.

### Dùng vào việc gì

• Dựng cảnh theo lối khai báo, ghép được với trạng thái toàn cục của ứng dụng
• Tách cảnh thành component tái dùng: một hòn đảo, một con tàu, một sinh vật
• Ghép giao diện HTML với cảnh 3D mà không phải tự đồng bộ hai thế giới

### Lưu ý

Đừng đặt trạng thái đổi mỗi khung hình vào React — mỗi lần đổi là một lượt render. Trạng thái theo khung hình phải nằm trong tham chiếu trực tiếp hoặc store ngoài.

Thư viện 3D cho web, nền tảng của sân chơi 3D trên trang bạn. Kho ví dụ chính thức là tài sản lớn nhất: hàng trăm bản trình diễn chạy được, mỗi cái minh hoạ đúng một kỹ thuật.

### Dùng vào việc gì

• Tra kỹ thuật cụ thể qua ví dụ: đổ bóng, ánh sáng, thực thể hoá, mức chi tiết theo khoảng cách, hậu xử lý
• Tối ưu hiệu năng: gộp lệnh vẽ, nén kết cấu, cắt bớt vật thể ngoài tầm nhìn
• Đối chiếu khi cảnh chạy chậm mà chưa rõ nút thắt nằm ở đâu

### Lưu ý

Ghi nhớ bẫy đã mất hai phiên để tìm ra: đổi file trong thư mục tài nguyên tĩnh thì phải khởi động lại máy chủ Next, và diệt tiến trình theo cổng chứ không theo tên — tên tiến trình bị đổi nên lệnh diệt trượt, máy chủ cũ vẫn sống và mọi thứ trông như bất trị.

Bộ mảnh ghép để làm kịch bản shell có giao diện tương tác: ô nhập, danh sách chọn, hộp xác nhận, con quay chờ, chữ có định dạng. Biến kịch bản khô khan thành công cụ dùng được cho người khác.

### Dùng vào việc gì

• Thêm bước xác nhận cho các kịch bản nguy hiểm — như hỏi lại trước khi triển khai
• Menu chọn môi trường, chọn dịch vụ thay vì bắt nhớ tham số
• Hiện con quay chờ cho các bước chạy lâu, để biết kịch bản còn sống

### Lưu ý

Chỉ thêm phần tương tác vào kịch bản chạy tay. Kịch bản chạy trong CI phải giữ đường không tương tác, nếu không nó sẽ treo chờ người bấm phím.

Bản thay thế ls hiện đại: màu theo loại tệp, hiện trạng thái Git, vẽ được cây thư mục, đọc được kích thước ở dạng dễ hiểu. Cùng thao tác cũ nhưng thông tin thu về nhiều hơn hẳn.

### Dùng vào việc gì

• Xem thư mục kèm trạng thái Git ngay trên danh sách file
• Vẽ cây thư mục có giới hạn độ sâu, nhanh hơn cài thêm công cụ riêng
• Sắp theo thời gian sửa để biết mình vừa đụng vào cái gì

### Lưu ý

Đặt bí danh đè lên ls thì nhớ rằng kịch bản dùng ls vẫn chạy lệnh gốc. Đừng viết kịch bản dựa trên định dạng đầu ra của công cụ này.

Trang trợ giúp rút gọn cho lệnh terminal: thay vì cuộn hết tài liệu dài, bạn nhận năm ví dụ thực dụng nhất. Đúng thứ cần khi biết lệnh nào cần dùng nhưng quên cú pháp.

### Dùng vào việc gì

• Tra nhanh cú pháp tar, ffmpeg, docker, rsync — những lệnh không ai nhớ hết tham số
• Học lệnh mới bằng ví dụ thật, nhanh hơn đọc tài liệu đầy đủ
• Có bản chạy ngoại tuyến, tra được cả khi mất mạng

### Lưu ý

Chỉ nêu trường hợp phổ biến. Việc lạ thì vẫn phải mở tài liệu đầy đủ — cái này thay việc tra cứu hằng ngày, không thay tài liệu gốc.