Với các nhà lập trình viên frontend, chắc hẳn mọi người đã quá quen thuộc với việc phải lặp đi lặp lại những công việc vô tri, rồi HTML, rồi CSS để tạo ra những trang web đẹp và để thoả mãn nhu cầu của khách hàng. Nhưng liệu với sự phát triển của các công nghệ web mới, đến hiện tại thì trên web đã không còn chỉ là HTML hay CSS, chúng ta đã có thể sử dụng được đồ hoạ 3D phức tạp để khiến cho trang web thêm phần sinh động và gia tăng khả năng tương tác cho người dùng. Như tiêu đề đã đề cập, hôm nay chúng ta sẽ cùng bước vào và khám phá khả năng vô tận cùng với đó là gợi ý cách làm quen dễ nhất để bắt đầu tạo ra trải nghiệm 3D của riêng mình.

Lịch sử một vài công nghệ 3D xuất hiện trên trình duyệt

Chắc hẳn nhiều người trong số các bạn đã nghe về Threejs, một trong những thư viện 3D nổi nhất để làm web hiện nay, và bạn khả năng cao sẽ đinh ninh rằng đây là thư viện nền tảng đầu tiên về 3D trên web. Nhưng, liệu bạn có biết rằng, trước đó cũng đã có nhiều cố gắng được tạo ra để có thể tích hợp 3D trên web, hãy bắt đầu bằng sự cố gắng đầu tiên – Virtual Reality Markup Language

Virtual Reality Markup Language

Vào những ngày xa xưa khi công nghệ web vẫn còn là một thứ gì đó sơ khai(1994) thì chúng ta có một ngôn ngữ tên là Virtual Reality Markup Language(VRML), chúng cho phép các website có thể hiện thị các hình khối, ánh sáng hay âm thanh để các nhà phát triển có thể tạo ra một môi trường 3D tương tác. Tuy nhiên, nó lại không được hỗ trợ trên tất cả các trình duyệt , và kèm theo đó là rất nhiều giới hạn.

Macromedia Flash

Macormedia và sau đó là Adobe thống trị nền tảng web vào những năm 1997 cùng với Flash, với việc thông qua việc nhúng plugin đã có khả năng tạo ra đồ hoạ 3D với chất lượng cao và ổn định hơn. Tuy nhiên để có thể viết một trang web bằng Flash thì sẽ cần một phần mềm có bản quyền, và các nhà phát triển cần phải học các phần mềm và ngôn ngữ mới(ActionScript) để có thể làm việc với định dạng này. Cùng với đó dù trang web có hào nhoáng nhưng để có thể tải được cũng tốn rất nhiều dung lượng và thời gian, chúng đặc biệt khó chịu với những người dùng có tốc độ mạng không được cao(ở thời điểm đó).

WebGL

Cuối cùng, với sự ra mắt của WebGL vào năm 2011 và với những cải tiến đáng kể về hiệu năng với JavaScript vào thời điểm đó đến hiện tại, chúng ta cuối cùng cũng có cho mình một lựa chọn không cần plugin với khả năng tương tích đa trình duyệt siêu tốt. Nhờ vào WebGL mà chúng ta mới có three.js, thư viện đồ hoạ giúp cho việc tạo ra môi trường 3D trên trình duyệt của các nhà phát triển trở nên nhanh hơn nhiều mà không cần các kinh nhiệm khác như các lựa chọn trước đó.

Tuy vẫn còn nhiều giới hạn, đặc biệt về hiệu năng vẫn còn thua kém vì chạy bằng JS, nhưng với nhu cầu của đa số các lập trình viên, đặc biệt là về web, thì như vậy có thể coi là cũng đã quá đủ rồi.

Three.js – Thư viện đồ hoạ 3D Javascript

Như đã giới thiệu ở trên thì mọi người chắc cũng đã biết về WebGL, nó là một Javascript API, cho phép bạn kiết xuất đồ hoạ 2D hay 3D tương tác hiệu năng cao cho mọi trình duyệt. Nhưng WebGL đây là một hệ thống thuộc dạng lever rất thấp mà sẽ chỉ cho bạn vẽ các đối tượng cơ bản như điểm, hình vuông hay các đường thẳng. Thêm vào nữa, để lập trình WebGL một cách trực tiếp từ Javascript vô cùng phức tạp và quy trình cũng rườm rà. Với việc nắm chắc kĩ thuật bên trong của WebGL và học một ngôn ngữ đổ bóng phức tạp để có thể tận dụng được hết những gì WebGL có, thì việc làm cho đời bạn bớt khổ sở hơn với ThreeJS có thể sẽ là cứu cánh cho bạn.

Cài đặt Threejs

Tài liệu để bắt đầu cài đặt được miêu tả chi tiết và dễ hiểu bằng tiếng Anh ở Installation – three.js docs (threejs.org), mọi người sẽ có nhiều cách để cài đặt chúng ta có thể tuỳ ý với sự lựa chọn của mình. Và với tôi, thì cách đơn giản nhất tôi thường làm như sau:

Khởi tạo project mới với vite

• Dùng terminal để tạo ra project mới nhất bằng vite
  npm create vite@latest
• Lựa chọn theo giao diện sau đó và nhớ cách chọn những lựa chọn như “Vanilla” và “Javascript” để có một project ban đầu cơ bản
• Cài đặt threejs bằng câu lệnh
  npm install –save three
• Khởi động server bằng câu lệnh
  npx vite

Page hiện giờ trống, từ đó chúng ta sẽ sẵn sàng để tạo ra một cảnh

Tạo một cảnh

Trong main.js, bắt đầu với việc phát triển dự án bằng cách sử dụng đoạn code sau trong main.js:

HTML cũng nên có những thay đổi để có thể tích hợp thành công Threejs

Và đây là kết quả

So với việc viết thuần bằn WebGL, thì Three.js đã đơn giản hóa đi nhiều các bước để chúng ta có thể cài đặt scene một cách nhanh hơn và ít code hơn. Và vì thế con đường làm web 3D của chúng ta cũng đã đơn giản đi ít nhiều rồi. Và chắc sẽ chẳng còn cách nào có thể đơn giản hóa việc đó hơn nhỉ? Nhỉ?

Nhưng thời gian đã cho chúng ta thấy chúng ta còn có thể tối ưu hơn nữa. Với xu hướng xử dụng các framework web để lập trình theo xu hướng component như hiện nay, React, Vue, Stelve đang thông trị bảng các công nghệ web được ứng dụng nhiều nhất, thì tất nhiên việc triển khai, tích hợp công nghệ 3D vào các framework này là điều tất yếu. Với Three.js làm phần nền móng, thì tương ứng React chúng ta có react-three-fiber và Vue thì là Tresjs, svelte thì threlte cũng là một trong những lựa chọn không tồi.

Đến đây thì bài viết cũng đã khá dài rồi, mong là các bạn cũng có cho mình thêm một vài kiến thức bổ ích. Nếu như bạn muốn tìm hiểu sâu hơn về thư viện dựa trên framework, thì mình còn một phần nữa mà bạn có thể xem tại đây. Chúc các bạn một ngày tốt lành.