THREE.js自定義虛擬現實/紙板效果

我正嘗試使用THREE.js創建自定義VR全景瀏覽器。我已經成功地創建：THREE.js自定義虛擬現實/紙板效果

2場面，
2材料和網格（加載左眼和右眼不同的圖像），
渲染用剪刀（2個透視相機）。

結果看起來是這樣的：

一切看起來都對我很好，但我想一些「黑VR紙板框架」的添加到這兩個攝像頭。我安靜不肯定這種效果是怎麼叫的，但這裏是一些例子：

能否請您給我一些建議嗎？

來源

2017-09-13 Wojciech Jasiński

什麼是不使用WebVR和WebVR，填充工具的原因是什麼？ –

@MartinSchuhfuß是否可以在WebVR中爲左右眼設置不同的圖像？ –

它是，看到這裏例如：https：//github.com/mrdoob/three.js/blob/fdefb19bdd8dbb7d549fa701b1324bfcd9ff1933/examples/webvr_panorama.html#L63-L93 - 訣竅是使用'mesh.layers'來控制哪眼睛會看到哪個網格。 –

您正在查找的單詞是"barrel distortion"。你可以在WebVR-polyfill here中看到這個工作的實現。取決於你對原始webgl的理解有多好，儘管這可能有點難以理解。

所以這裏使用兩個渲染傳遞一個非常通用的方法的基本步驟：

是裂像你已經被渲染到幀緩衝（see here的例子），而不是渲染到屏幕。該幀緩衝區將被用作第二渲染通道中的紋理。
爲第二個渲染通道設置另一個場景和另一個攝像頭。相機應該是一個正交相機，在x軸上從-1到1（東西like this）。
爲兩個視口設置兩個網格（基於PlaneBufferGeometry），並指定UV座標，以便左邊的網格將使用幀緩衝區的左半部分作爲其紋理，右邊的網格將使用右半部分。
將網格添加到第二個場景實例，將它們放置在彼此相鄰的位置。
將桶形變形應用到網格的頂點。這實質上是在code from the WebVRPolyfill中完成的。
呈現第二個場景篩選

來源

2017-09-13 21:32:28

THREE.js自定義虛擬現實/紙板效果

回答

相關問題