RaananW/babylonjs-webpack-es6

🚀 Babylon.js + TypeScript + Webpack 5: Bộ khởi đầy đủ cho dự án 3D WebGL/WebGPU

Babylon.js starter đầy đủ: TypeScript strict, webpack 5, ES modules tree-shakable, hot reload, WebGL/WebGPU, test tự động và CI.

Đây là một dự án mẫu (starter) nhỏ cho Babylon.js, được thiết kế để bạn có thể nhanh chóng bắt đầu xây dựng các cảnh 3D. Dự án sử dụng TypeScript một cách nghiêm ngặt (strict), webpack 5 để quản lý và tối ưu bản dựng, cùng với các module ES có thể tree-shake để loại bỏ mã không sử dụng. Nó hỗ trợ cả WebGL và WebGPU (tùy chọn), có tính năng tải lại nóng (hot reload) trong quá trình phát triển, đồng thời tích hợp sẵn các công cụ kiểm thử tự động và CI qua GitHub Actions.

✨ Điểm nổi bật

• TypeScript Strict: Áp dụng cấu hình TypeScript nghiêm ngặt để đảm bảo chất lượng mã.
• Webpack 5: Xây dựng và đóng gói ứng dụng với hỗ trợ hot reload.
• ES Modules Tree-shakable: Chỉ nhập những tính năng Babylon.js cần thiết từ đường dẫn module sâu, giúp giảm kích thước bundle.
• WebGL & WebGPU: Hỗ trợ cả hai công nghệ đồ họa, tự động chuyển đổi nếu WebGPU không khả dụng.
• Chọn cảnh qua URL: Dễ dàng chuyển đổi giữa các ví dụ bằng tham số truy vấn scene.
• Lazy Loading: Mỗi cảnh được đóng gói thành một chunk riêng, chỉ tải khi cần.
• Test Tự Động: Bao gồm cả test đơn vị (Vitest) và test hình ảnh (Playwright) với khả năng so sánh snapshot.
• GitHub Actions CI: Tự động chạy lint, typecheck, test và build trên mỗi lần đẩy code.

💡 Vì sao đáng chú ý

Dự án này không chỉ là một starter đơn thuần mà còn là một bộ sưu tập các ví dụ thực tế, giúp bạn học và khám phá các tính năng của Babylon.js một cách hiệu quả. Sự kết hợp giữa TypeScript strict, webpack 5 và ES modules tree-shakable giúp dự án nhẹ nhàng, nhanh chóng và dễ bảo trì. Đặc biệt, việc hỗ trợ cả WebGL và WebGPU, cùng với cơ chế lazy loading cho từng cảnh, cho phép bạn dễ dàng mở rộng và tối ưu hiệu năng ứng dụng 3D của mình.

Thích hợp cho những người mới bắt đầu với Babylon.js hoặc muốn có một nền tảng vững chắc để phát triển các dự án 3D phức tạp trên web.

---

#BabylonJS #TypeScript #WebGL #WebGPU #Webpack #TiniX