(https://with.in/) là một nền tảng kể chuyện bằng thực tế ảo. Khi nhóm này nghe nói về WebVR trong 2015, ngay lập tức chúng tôi quan tâm đến tiềm năng của công nghệ này. Ngày nay, mối quan tâm đó tệp kê khai thành một miền con duy nhất của nền tảng Web của chúng tôi, https://vr.with.in/. Bất cứ ai có trình duyệt hỗ trợ thực tế ảo đều có thể truy cập trang web, nhấp vào một nút và ném tai nghe để đắm chìm trong danh mục phim thực tế ảo.
Hiện tại, điều này bao gồm nhưng không giới hạn ở Chrome trên Daydream View. Cho kiểm tra thông tin trên thiết bị và màn hình đeo đầu của bạn https://webvr.info/.
Giống như các môi trường kết xuất thực tế ảo khác, môi trường web
chủ yếu dựa vào cách thể hiện ba chiều của cảnh. Chiến dịch này
cảnh có camera, phối cảnh của bạn và bất kỳ số lượng đối tượng nào. Để giúp quản lý
cảnh, camera và đối tượng mà chúng ta dùng một thư viện có tên là
Three.js sử dụng phần tử <canvas> để gửi
kết xuất trên GPU của máy tính. Có nhiều tiện ích bổ sung Three.js hữu ích để
giúp cảnh của bạn có thể xem được
trong WebVR. Hai chiến lược chính là
THREE.VREffect
để tạo một khung nhìn cho mỗi mắt và
THREE.VRControls
để dịch phối cảnh (ví dụ: hướng xoay và vị trí của
màn hình hiển thị đeo đầu) một cách thuyết phục vào cảnh của bạn. Có nhiều ví dụ về
cách triển khai tính năng này. Xem
Ví dụ về WebVR ba.js
để biết cách bắt đầu.
Khi tìm hiểu sâu hơn về WebVR, chúng tôi đã gặp vấn đề. Nếu chúng ta xem
nội dung của trang web, văn bản là một phần không thể thiếu. Trong khi đại đa số
nội dung của chúng tôi dựa trên video, nếu bạn chuyển đến
Trong trang web, văn bản xung quanh nội dung;
giao diện người dùng và thông tin bổ sung về một bộ phim hoặc các bộ phim có liên quan đều là
tạo bằng văn bản. Hơn nữa, tất cả văn bản này đều được tạo trong DOM.
Dữ liệu khám phá WebVR và https://vr.with.in/ đều đã có
<canvas>.
Tôi có những lựa chọn nào?
May mắn thay, chúng tôi vẫn đang nỗ lực để giúp việc này trở thành hiện thực. Thực tế, trong nghiên cứu của chúng tôi
chúng tôi đã tìm ra một số cách hiệu quả để kết xuất văn bản ở chế độ xem
môi trường trên phần tử <canvas>. Dưới đây là ma trận của một vài định dạng chúng tôi nhận thấy
được đánh dấu bằng ưu và nhược điểm của từng loại:
| Độ phân giải độc lập | Tính năng in ấn | Hiệu suất | Dễ triển khai | |
|---|---|---|---|---|
| Văn bản canvas 2D | Có | Có | Có | |
| Văn bản vectơ được phân chia | Có | Có | ||
| Văn bản 3D ép đùn | Có | |||
| Văn bản bitmap trường khoảng cách đã ký | Có | Có | Có |
Quyết định của chúng tôi: Phông chữ Bitmap SDF
Canvas 2D có ctx.fillText() có thể xuống dòng, giãn cách chữ và xuống dòng
chiều cao, nhưng phần tràn sẽ bị cắt và văn bản sẽ bị mờ nếu bạn phóng to thực sự
xa. Bạn có thể tăng kích thước của hoạ tiết canvas, nhưng có thể đạt mức cao hơn
giới hạn về kích thước hoạ tiết hoặc hiệu suất có thể bị ảnh hưởng nếu hoạ tiết quá lớn.
Văn bản 3D ép đùn về cơ bản giống như văn bản vectơ tam giác, nhưng có chiều sâu và có thể có góc xiên, do đó nó có hình học ít nhất gấp đôi. Một trong hai những video này có thể hoạt động với tần suất nhỏ cho tiêu đề hoặc biểu trưng, nhưng sẽ không hoạt động như phù hợp với số lượng lớn văn bản và không có tính năng kiểu chữ.
Phông chữ Bitmap sử dụng một quad (2 tam giác) cho mỗi ký tự, vì vậy chúng sử dụng ít hình học và có hiệu suất tốt hơn vectơ tam giác. Các ảnh này vẫn dựa trên đường quét vì sử dụng sprite bản đồ hoạ tiết, nhưng có SDF chương trình đổ bóng này về cơ bản không phụ thuộc vào độ phân giải, vì vậy chúng trông đẹp hơn so với chương trình 2D hoạ tiết canvas. Matt DesLauriers văn bản 3 bmfont-text cũng bao gồm các tính năng in ấn đáng tin cậy để xuống dòng tự động, giãn cách chữ cái, chiều cao dòng và căn chỉnh. Trường hợp tràn không bị cắt bỏ. Phông chữ kích thước được kiểm soát thông qua quy mô. Chúng tôi chọn lộ trình này vì nó mang lại cho chúng tôi các lựa chọn tốt nhất cho thiết kế mà vẫn duy trì hiệu suất cao. Thật không may, ứng dụng đó không phải là dễ triển khai, nên chúng tôi sẽ đi qua các bước với hy vọng giúp đỡ được nhà phát triển làm việc về WebVR.
1. Tạo phông chữ bitmap (.png + .fnt)
Hiero là gói phông chữ bitmap chạy với Java. Tài liệu Hiero không thực sự giải thích cách chạy chương trình đó mà không trải qua quy trình xây dựng phức tạp nào. Trước tiên, hãy cài đặt Java nếu bạn chưa làm. Sau đó, nếu nhấp đúp vào runnable-hiero.jar thì không hãy mở Hiero, hãy thử chạy ứng dụng bằng lệnh sau trong bảng điều khiển:
java -jar runnable-hiero.jar
Khi Hiero đang chạy, hãy mở phông chữ .ttf hoặc .otf trên máy tính để bàn, nhập bất kỳ nhãn nào khác ký tự bạn muốn thêm vào, thay đổi chế độ kết xuất sang Java để bật hiệu ứng, tăng kích thước để các ký tự của bạn lấp đầy toàn bộ bộ nhớ đệm ký tự, thêm hiệu ứng trường khoảng cách, điều chỉnh tỷ lệ và độ phân tán của trường khoảng cách. Chiến lược phát hành đĩa đơn thì giá trị tỷ lệ giống như độ phân giải. Giá trị càng cao thì độ mờ càng ít, nhưng sẽ mất nhiều thời gian hơn để Hiero hiển thị bản xem trước. Sau đó, lưu phông chữ bitmap. Công cụ này tạo phông chữ bitmap bao gồm hình ảnh .png và Tệp mô tả phông chữ AngelCode .fnt.
2. Chuyển đổi AngelCode thành JSON
Bây giờ, phông chữ bitmap đã được tạo, chúng ta phải tải phông chữ đó vào ứng dụng javascript với Matt DesLauriers' load-bmfont npm.
Chúng tôi có thể trình duyệt tải-bmfont và sử dụng trình duyệt đó trên giao diện người dùng, nhưng thay vào đó chúng tôi sẽ chạy load-bmfont.js với Nút để chuyển đổi và lưu AngelCode .fnt của Hiero thành Tệp.json:
npm install
node load-bmfont.js
Bây giờ, chúng ta có thể bỏ qua tải-bmfont và chỉ cần thực hiện yêu cầu XHR (XMLHttpRequest) trên Tệp phông chữ .json.
var r = new XMLHttpRequest();
r.open('GET', 'fonts/roboto/bitmap/roboto-bold.json');
r.onreadystatechange = function() {
if (r.readyState === 4 && r.status === 200) {
setup(JSON.parse(r.responseText));
}
};
r.send();
function setup(font) {
// pass font into TextBitmap object
}
3. Trình duyệt trình duyệt văn bản ba bmfont
Sau khi tải phông chữ, đoạn văn bản 3 bmfont của Matt sẽ xử lý nghỉ ngơi. Vì không dùng Nút cho ứng dụng của riêng mình, chúng ta sẽ browserify three-bmfont-text.js thành một three-bmfont-text-bundle.js hữu dụng
npm install -g browserify
browserify three-bmfont-text.js -o three-bmfont-text-bundle.js
4. Chương trình đổ bóng SDF
Điều chỉnh thanh trượt chiều rộng và ngưỡng trên vr.with.in/archive/text-sdf-bitmap/ để xem tác động của chương trình đổ bóng trường khoảng cách đã ký.
5. Cách sử dụng
Để thuận tiện, tôi đã tạo một Lớp trình bao bọc TextBitmap cho văn bản ba bmfont-text đã duyệt.
<script src="three-bmfont-text-bundle.js"></script>
<script src="sdf-shader.js"></script>
<script src="text-bitmap.js"></script>
Tạo một yêu cầu XHR cho tệp phông chữ .json rồi tạo một đối tượng văn bản trong gọi lại:
var bmtext = new TextBitmap({ options });
Cách thay đổi văn bản:
bmtext.text = 'The quick brown fox jumps over the lazy dog.';
scene.add( bmtext.group );
hitBoxes.push( bmtext.hitBox );
.png của phông chữ bitmap được tải bằng THREE.TextureLoader trong text-bitmap.js
TextBitmap cũng bao gồm một Hitbox vô hình cho tương tác 3.js raycast thông qua chuột, máy ảnh hoặc các thiết bị điều khiển chuyển động được theo dõi bằng tay như Oculus Touch hoặc bộ điều khiển Vive. Kích thước hộp truy cập tự động cập nhật khi bạn thay đổi văn bản .
Bmtext.group được thêm vào cảnh Three.js. Nếu bạn cần truy cập vào các phần tử con / Object3D's, biểu đồ cảnh cho văn bản sẽ có dạng như sau:
6. Hợp nhất tệp json và sửa đổi giá trị xoffset
Nếu khung nhìn của bạn không đẹp, bạn có thể cần phải chỉnh sửa các giá trị xoffsets trong tệp json. Dán tệp json vào Jsbeautifier.org để lấy phiên bản chưa rút gọn của tệp.
Xoffset về cơ bản là tính năng định tuyến toàn cục cho một ký tự. Kerning dành cho 2 các ký tự cụ thể xuất hiện cạnh nhau. Các giá trị mặc định trong mảng kerning không thực sự tạo ra sự khác biệt và sẽ rất tẻ nhạt nếu chỉnh sửa để bạn có thể làm trống mảng đó nhằm giảm kích thước tệp json. Sau đó chỉnh sửa giá trị xoffsets cho kerning.
Trước tiên, bạn phải tìm ra ký tự nào đi kèm với mã ký tự nào trong
Tệp json. Trong three-bmfont-text-bundle.js,
chèn console.log sau dòng 240:
var id = text.charCodeAt(i)
// console.log(id);
Sau đó nhập vào trường văn bản date.gui trên https://vr.with.in/archive/text-sdf-bitmap/ rồi kiểm tra bảng điều khiển để tìm mã nhận dạng tương ứng của một ký tự.
Ví dụ: trong phông chữ bitmap của chúng tôi, "j" luôn ở quá xa bên phải.
Mã ký tự là 106. Vì vậy, hãy tìm "id": 106 trong tệp json và thay đổi xoffset từ -1
đến -10.
7. Bố cục
Nếu bạn có nhiều khối văn bản và muốn văn bản chạy từ trên xuống dưới như HTML, mọi thứ phải được định vị theo cách thủ công, tương tự như vị trí tuyệt đối mọi phần tử dom của bạn bằng CSS. Bạn có thể hình dung việc này trong CSS không?
* { position: absolute; }
Đó là bố cục văn bản trong 3D. Trong chế độ xem chi tiết: tiêu đề, tác giả, mô tả và thời lượng đều là một đối tượng TextBitmap mới, có kiểu, màu sắc, tỷ lệ, v.v.:
author.group.position.y = title.group.position.y - title.height - padding;
description.group.position.y = author.group.position.y - author.height - padding;
duration.group.position.y = description.group.position.y - description.height - padding;
Điều này giả định rằng nguồn gốc cục bộ của từng nhóm TextBitmap là theo chiều dọc căn chỉnh với phần trên của lưới TextBitmap (xem căn giữa trong text-bitmap.js cập nhật). Nếu sau này bạn thay đổi văn bản cho bất kỳ đối tượng nào trong số đó và chiều cao đối tượng đó thay đổi, bạn cũng sẽ cần phải tính toán lại các vị trí đó. Tại đây, chỉ có vị trí y của văn bản được sửa đổi, nhưng có một cơ hội để làm việc Trong mô hình 3D, chúng ta có thể đẩy và kéo văn bản theo hướng z cũng như xoay xung quanh trục x, y và z.
Kết luận
Văn bản và bố cục trong WebVR còn phải trải qua nhiều chặng đường phát triển trước khi trở nên dễ dàng và được sử dụng rộng rãi dưới dạng HTML và CSS. Tuy nhiên, có nhiều giải pháp hiệu quả và bạn có thể làm được nhiều việc hơn trong WebVR so với trang web HTML truyền thống. WebVR hiện đã tồn tại. Có thể ngày mai sẽ có các công cụ tốt hơn. Từ giờ đến lúc đó, hãy dùng thử và thử nghiệm. Phát triển mà không có khung ứng dụng có mặt khắp nơi sẽ mang lại những giá trị độc đáo hơn dự án, và điều đó thật thú vị.