Đã đăng vào thg 8 25, 2017 9:51 SA 8 phút đọc

1.5K

Tìm hiểu WebVR với A-Frame phần 1

Bài đăng này đã không được cập nhật trong 3 năm

Tìm hiểu Web VR với A-Frame.

1. VR, WebVR là gì?

Thực tế ảo hay còn gọi là thực tại ảo (tiếng Anh là virtual reality, viết tắt là VR) là thuật ngữ miêu tả một môi trường được giả lập bởi con người. Các môi trường giả lập này là hình ảnh do con người chủ động thiết kế qua các ứng dụng phần mềm chuyên dụng, được hiển thị trên màn hình máy tính hoặc thông qua kính thực tại ảo nhằm đem lại những trải nghiệm thực tế nhất cho người xem như họ đang ở trong chính không gian đó. Để gia tăng tính trải nghiệm môi trường, các môi trường giả lập đều được tích hợp thêm giác quan khác như khứu giác (âm thanh).

Có rất nhiều "ông lớn" tham gia phát triển trong lĩnh vực này:

Thị trường vr đang ngày càng nóng, không những ngày càng mở rộng lĩnh vực thiết bị VR như Oculus, Google Cardboard - Daydream, HTC Vive, Microsoft HoloLens ... với những thiết bị đem lại trải nghiệm tốt nhất cho người dùng, mà còn mở rộng sang cả thị trường WebVR. Các nhà phát triển đang ngày càng cố gắng đưa VR tiếp cận dễ dàng hơn với mọi người.

2. A-Frame là gì?

Có rất nhiều cách để tiếp cận với công nghệ VR. Phát triển từng ngày, hàng loạt skd để có thể làm việc với VR. A-Frame là dự án mã nguồn mở nhằm mục đích thiết kế WebVR dễ dàng hơn của Mozilla. A-Frame tạo với mục đích dễ sử dụng, dễ phát triển và dễ tiếp cận. Nhưng không vì thế mà trải nghiệm người dùng lại kém chất lượng. Chúng ta có thể viết code bằng html, javascript để tạo ra một ứng dụng phiên bản WebVR. Với sự hỗ trợ và phát triển mạnh mẽ từ Mozilla, A-Frame có nhiều ưu điểm mạnh mẽ và nổi bật:

Tạo - phát triển dễ dàng: chỉ cần sử dụng javascript, html để tạo ra một web vr, mọi thứ trở nên đơn giản, không cần phải cài đặt, thiết lập cầu kỳ.
Cú pháp dễ hiểu, dễ bảo trì: Sử dụng các cặp thẻ HTML, từ đó giúp nhà phát triển dễ dàng bảo trì, tái sử dụng. Không cần phải học thêm các ngôn ngữ khác mới có thể làm được.
Đa nền tảng: Đáp ứng được các nền tàng, các thiết vị VR khác nhau như Vive, Rift, Daydream, GearVR .... Không những thế, A-Frame còn hoạt động tốt trên các thiết bị thông dụng như máy tính hay điện thoại di động.
Quản lý component, entity là một framework sử dụng three.js làm core, A-Frame chia thành từng cấu trúc thành phần nhỏ, di động, dễ dàng tái sử dụng. Base là html nên chúng ta có thể thao tác bình thường với Javascrip, DOM API, tận dụng hết các tính năng của WebVR và WebGL.
Hiệu năng cao, dễ dàng nhúng các bên thứ 3 vào: chúng ta có thể dễ dàng sử dụng A-Frame cùng với các thư viện của bên thứ 3 chẳng hạn như React, Vue.js, d3.js, Ember.js, Jquery ... Còn nhiều những ưu điểm nữa, chúng ta có thể xem thêm tại đây Features

3. Các thành phần cơ bản:

CORE API: Entity, Component, System, Scene, Animations, Mixins, Asset Management, Globals, Ultils.
COMPONENTS: Các thành phần như Camera, Model, Controls, Materials, Light, Sound....
PRIMITIVES: Bao gồm các element như camera, hình khối (box, cylinder, circle, sphere), media (video, image, sound) ...

Ở phần này chúng ta sẽ chỉ tìm hiểu một số tính năng cơ bản, tiếp xúc với đối tượng, cú pháp đơn giản của A-Frame thôi nhé )

4. Tìm hiểu cú pháp cơ bản.

4.1 Cài đặt và sử dụng.

Nhúng script trực tiếp trong file html.

<head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head>

Cài đặt và sử dụng qua npm:

# Install from npm.
npm install aframe

# Using aframe
require('aframe');

4.2 Giới thiệu một số element cơ bản, cú pháp A-Frame.

Trên đây là ví dụ cơ bản của A-Frame. Cùng xem cú pháp như thế nào nhé.

a-scene:

<a-scene></a-scene>

Thẻ a-scene là thẻ gốc, bao chứa mọi đối tượng của a-frame. Thẻ a-scene được dùng để điều khiển tất cả các đối tượng như:

Khởi tạo canvas, render.
Khởi tạo camera, nguồn sáng mặc định.
Khởi tạo webvr-polyfill, VREffect.
Bao chứa tất cả các VR UI.

a-box:

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>

Thẻ a-box tạo ra hộp, hình khối, bức tường.... ví dụ:

Về cơ bản, cú pháp của A-Frame là các thẻ HTML. Vì thế chúng ta rất dễ dàng để sử dụng chúng. A-Frame cung cấp cho chúng ta khá đủ các element, hình khối hình học:

a-box	a-camera	a-circle	a-collada-model
a-cone	a-cursor	a-curvedimage	a-cylinder
a-dodecahedron	a-gltf-model	a-icosahedron	a-image
a-light	a-link	a-obj-model	a-octahedron
a-plane	a-ring	a-sky	a-sound
a-sphere	a-tetrahedron	a-text	a-torus-knot
a-torus	a-triangle	a-video	a-videosphere

Để biết thêm chi tiết chúng ta có thể xem thêm các element của A-Frame tại đây.

5. Sử dụng một số element của A-Frame.

5.1. Sử dụng element cơ bản.

Sử dụng a-entity tạo ảnh 360.

Sử dụng a-videosphere để tạo video 360.

5.2. Sử dụng element với model.

Sử dụng collada model.

Sử dụng collada model kèm âm thanh.

6. Giới thiệu model trong A-Frame.

Ngoài hỗ trợ sử dụng material, A-Frame hỗ trợ một số dạng model 3d:

COLLADA Model. COLLADA là định dang phổ biến cho các element 3d được sử dụng rộng rãi bởi các phần mềm đồ họa 3d như 3ds Max, Blender, Cinema 4D, Mây... đem lại chất lượng đồ họa cao cho đối tượng 3d. Nhưng dung lượng model này rất lớn.
OBJ Model. OBJ là một định dạng 3d cũ, chỉ hỗ trợ các điểm ảnh, các vật liệu cơ bản, không linh động cho việc xử lý 3d như animation, đồ họa chất lượng cao.
GLTF Model. So với OBJ, glTf cung cấp bộ tính năng mới hơn về nguồn sáng, rigging, animation dễ dàng hơn. Không những thế, định dạng này hỗ trợ mạnh mẽ trong việc sử dụng các 'materials' và 'shaders' mạnh mẽ hơn.

So với COLLADA, các tính năng hỗ trợ tương đương nhau. Tuy nhiên việc tối ưu để sử dụng cho WebVR, việc truyền tải nội dung bằng glTF được tối ưu hơn mà vẫn đem lại kết quả giống nhau. Chính vì thế, model glTF được sử dụng rộng rãi hơn so với COLLADA model.

7. Kết luận

So với các framework WebVR khác, A-Frame đang chiếm ưu thế hơn rất nhiều. Với nhiều ưu điểm, dễ sử dụng, kết hợp với các thư viện bên thứ 3. A-Frame đem lại trải nghiệm WebVR tương đương so với các thiết bị VR hiện nay. Đối với các coder chúng ta, việc phát triển một ứng dụng VR chỉ với html, javascript mà không cần tìm hiểu thêm vô số những ngôn ngữ mới có vẻ dễ dàng hơn. Với cộng đồng lớn, kèm với sự hỗ trợ từ đội ngũ MozillaVR, A-Frame sẽ phát triển mạnh mẽ và phổ biến hơn nữa.

Tham khảo.

MozillaVR
A-Frame Official
A-Frame Blog Luôn cập nhật tin mới nhất về A-Frame.
A-Frame Registry: thư viện các bên thứ 3 hỗ trợ hoặc viết bằng A-Frame.
A-Frame Inspector công cụ mạnh mẽ hỗ trợ xử lý scene

3D JavaScript A Frame webvr Three.js mozillavr