在 WebVR 中轉譯文字

查看網站

其中 (https://with.in/) 是一個媒體報導平台 甚至還能透過現實生活中的影片當 Google Play 團隊得知 WebVR 的 2015 年我們立刻對這項技術的潛力感興趣，目前這個興趣 新增至我們 Web 平台的獨特子網域 https://vr.with.in/.只要使用者使用支援 VR 的瀏覽器，就可以 造訪網站後，點選按鈕並拋出頭戴式耳機，即可沉浸在我們的遊戲中 VR 影片系列。

這包括但不限於 Daydream View 上的 Chrome。適用對象 請參閱 https://webvr.info/.

如同其他虛擬實境專屬的顯示環境 主要採用 3D 畫面呈現場景。這個 每個場景都有相機、您的視角和任意數量的物件協助管理 這項場景、相機和物件，我們使用稱為 Three.js，會運用 <canvas> 元素擲回 複製到電腦的 GPU 上有許多實用的 Three.js 外掛程式 如何在 WebVR 中檢視場景。主要二是 THREE.VREffect 可為每種眼前建立可視區域 THREE.VRControls 以便翻譯視角 (例如旋轉視角 頭戴式螢幕) 可完美融入整個場景。在 Compute Engine 中 如何實作這項功能查看 Three.js WebVR 範例 瞭解如何踏出第一步

隨著我們深入研究 WebVR 時發現問題，如果我們要 所以網頁內容是網頁不可或缺的一環。絕大多數的觀眾 我們的內容是以影片為依據 網站內文字環繞。 使用者介面以及電影或相關影片的其他資訊 由文字建構而成此外，所有這段文字都是在 DOM 中建立。我們的 WebVR 探索和 https://vr.with.in/ 都位於 <canvas>。

有什麼選項？

幸好，我們正努力做到最好事實上，根據 Google 的研究結果 我們發現，以 3D 形式呈現文字的 安裝在 <canvas> 元素上下方是我們所發現的幾個矩陣 每個項目都標有優缺點：

我們的決定：SDF 點陣圖字型

搭配 ctx.fillText() 的 2D 畫布可以進行文字換行、字母間距和行 但溢位會遭到截斷，如果放大，文字就會模糊不清 。您可以增加畫布紋理的大小，但可能會達到上限 如果紋理太大，紋理大小或效能可能會受到影響。

延伸 3D 文字基本上與三角向量文字相同 可能是斜角，因此幾何圖形至少兩倍。以下任一項： 標題或標誌或許也能用在少量內容中，成效則不如 大量文字且沒有字體排版功能

點陣圖字型會為每個字元使用一個四邊形 (兩個三角形)，因此使用的字型也較少 而且成效優於 三角形向量。 由於他們使用紋理貼圖，但其中有結構化資料檔案，因此仍是光柵地圖 著色器基本上與解析度無關，因此看起來比 2D 美觀 畫布紋理。 Matt DesLauriers 3-bmfont-text 格式也包含可靠的字體排版功能，適合自動換行。 字母間距、行高和對齊方式。文字溢位功能無法截斷。字型 其大小取決於縮放設定我們選擇這條路線是因為它讓我們 以及提供最佳設計選項，同時維持高效能不幸的是 易於執行，因此我們會逐步說明 參與 WebVR 的開發人員

1. 產生點陣圖字型 (.png + .fnt)

Hiero 是點陣圖字型封裝 我們可以透過 Java 執行Hiero 說明文件實際上並未說明 不必經過複雜的建構程序首先，請安裝 Java 接著，按兩下 runnable-hiero.jar 不會 請開啟 Hiero，在控制台中執行下列指令：

java -jar runnable-hiero.jar

Hiero 執行後，開啟 .ttf 或 .otf 桌面字型，然後輸入其他 輸入您想加入的字元、變更為 Java 以啟用效果 放大字元，讓字元填滿整個字符快取方格 加入距離欄位效果，調整距離欄位的比例並張開。 縮放值就像解析度畫面越大，模糊程度越低 但 Hiero 顯示預覽畫面所需的時間也較長。然後儲存 點陣圖字型它會產生點陣圖字型，由 .png 圖片和 AngelCode .fnt 字型說明檔案。

2. 將 AngelCode 轉換為 JSON

現在已經產生點陣圖字型，我們必須將其載入 這個 JavaScript 應用程式搭配 Matt DesLauriers load-bmfont npm 套件。

我們可以將負載 -bm 調整成 ，並在前端使用該字型 即將執行 load-bmfont.js，其中包含 這個節點可用於轉換 Hiero 的 AngelCode .fnt 並儲存至 .json 檔案：

npm install
node load-bmfont.js

現在可以略過 load-bmfont 並對其執行 XHR (XMLHttpRequest) 要求。 .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. Browserify 三字型文字

載入字型後，Matt 的 3-bmfont-text 就會處理 休息。我們並未在自家應用程式中使用 Node 瀏覽器 three-bmfont-text.js 轉換為可用的 three-bmfont-text-bundle.js

npm install -g browserify
browserify three-bmfont-text.js -o three-bmfont-text-bundle.js

4. SDF 著色器

將「afwidth」和「threshold」滑桿調整至開啟狀態 vr.with.in/archive/text-sdf-bitmap/ 來查看已簽署距離欄位著色器的影響。

5. 用量

為了方便起見，我建立了 TextBitmap 包裝函式類別 這是瀏覽器化的三 bmfont-text 版本

<script src="three-bmfont-text-bundle.js"></script>
<script src="sdf-shader.js"></script>
<script src="text-bitmap.js"></script>

建立 .json 字型檔案的 XHR 要求，然後在 回呼：

var bmtext = new TextBitmap({ options });

如何變更文字：

bmtext.text = 'The quick brown fox jumps over the lazy dog.';

scene.add( bmtext.group );
hitBoxes.push( bmtext.hitBox );

在 text-bitmap .js 中透過 THREE.TextureLoader 載入點陣圖字型的.png

TextBitmap 還包含可產生 3.js raycast 互動的隱藏框 透過滑鼠、相機，或 Oculus Touch 等手追蹤動作控制器 Vive 控制器當你變更文字時，Hboard 的大小自動更新 只要設定成「自動重新啟動」 和「在主機維護期間」選項即可

在 3.js 場景中加入 Bmtext.group。如需存取 / 物件 3D 之後，文字的場景圖看起來會像這樣：

6. 統合 JSON 並修改 xoffset

如果您的核心看起來異常，就可能需要編輯 JSON 中的 xoffset。貼上 然後將 JSON 檔案上傳到 Jsbeautifier.org，才能取得 檔案。

Xoffset 本質上是全域通用的角色。小孩的兩個人 特定字元的排列組合預設值 核心陣列不會產生實質差異，而且會太繁瑣 編輯，這樣就能清空該陣列，縮減 JSON 的檔案大小。接著 編輯模型進行高度的 xoffset

首先，您必須知道哪些字元與哪個字元 ID 結合 json 檔案。在 three-bmfont-text-bundle.js 中， 在第 240 行後插入 console.log：

    var id = text.charCodeAt(i)
    // console.log(id);

接著在「dat.gui」文字欄位中 https://vr.with.in/archive/text-sdf-bitmap/ ，然後查看控制台以找出該字元的對應 ID。

以點陣圖字型為例一直都太靠近右側結果 字元 ID 為 106。因此，請在 JSON 中找出 "id": 106，並將 xoffset 變更為 -1 -10。

7. 版面配置

如果您有多個文字區塊，並且希望文字由上到下排列 (例如 HTML，所有元素都必須手動定位，與絕對位置類似 自行導入所有 dom 元素您能想像在 CSS 中執行這項作業嗎？

    * { position: absolute; }

這就是 3D 的文字版面配置。在詳細資料檢視畫面中，標題、作者、 說明和時間長度指的是每個新的 TextBitmap 物件 樣式、顏色、縮放等：

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;

這裡的假設是每個 TextBitmap 群組的本機來源為垂直位置 對齊 TextBitmap 網格的頂端 (見見 text-bitmap.js 更新)。如果您在之後變更任何物件的文字和高度 您也必須重新計算這些物件的位置。在這裡 只修改文字的 y 位置，不過有個機會 我們 3D 模型可以按住 Z 向方向來提取文字 左右各軸的 X、Y 和 Z 軸

結論

WebVR 中的文字和版面配置有很長的用處，而且變得輕而易舉 在 HTML 和 CSS 中廣為使用但有了有用的解決方案，您可以達成更多目標 相較於傳統 HTML 網頁，使用 WebVR。WebVR 如今存在。 不過，明天也許會有更適合的工具。在此之前，不妨先試用一下 進行實驗。如果在開發時沒有無異的架構，開發出來的更具獨特性 而這是很有意思的事