1

レンダラーの深度をクリアすることで、重ね合わせの目的で 3 つのシーンを使用して、StereoEffect を使用して Three.js アプリケーションを作成しました。(このアプローチThree.js - Geometry on anotherを使用)。

ただし、WebVR Polyfill を使用して、Gear VR などのヘッドセットとの互換性を高めるために、VREffect を使用する必要があります。

以下は、セットアップ方法を示すコードのスニペットです。

const renderer = new THREE.WebGLRenderer({antialias: false})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.autoClear = false;
document.body.appendChild(renderer.domElement)

effect = new THREE.VREffect(renderer)
effect.separation = 0
effect.setSize(window.innerWidth, window.innerHeight)

let vrDisplay
navigator.getVRDisplays().then(displays => {
    if (displays.length > 0) 
        vrDisplay = displays[0]
})

// Add button to enable the VR mode (display stereo)
const vrButton = VRSamplesUtil.addButton("Enter VR", "E", "/vr/cardboard64.png", () => {
    vrDisplay.requestPresent([{source: renderer.domElement}])
})

... 残りのコード ...

私のアニメーションループの中で：

renderer.clear()
effect.render(scene, camera)
renderer.clearDepth()

effect.render(scene2, camera)
effect.render(scene3, camera)

ただし、このアプローチは、VREffect を使用している場合は機能しないようです (VR モードに入った場合のみ - EG をデスクトップで表示すると正常に動作します)。問題は、シーン 3 の一部の要素を除いて、キャンバスが真っ暗であるため、 renderer.clear()orが有効になっていないことだと思います。renderer.clearDepth()

さらに、シーン 2 とシーン 3 のレンダリングをコメント アウトすると、正しくレンダリングされた最初のシーンのすべてを完全に確認できます。

VREffect と StereoEffect のコードを調べたところ、どの部分が私の変更を役に立たなかったのかわかりませんでした。

どんな助け/ヒントも大歓迎です。

4

1 に答える 1

0

その問題を修正する方法を見つけたことはありませんでしたが、Gear VR 以外のブラウザーでは VREffect の代わりに StereoEffect を使用して回避しました。VREffect はそこで完全に正常に動作しましたが、段ボールが使用される可能性のある通常の電話ブラウザーでは動作しませんでした。 . 他の誰かがこの問題に遭遇した場合、私がしたことは次のとおりです。

上記の例から、vrButton ビットを次のように変更しました。

const vrButton = VRSamplesUtil.addButton("Enter VR", "E", "/images/cardboard64.png", () => {

    if(navigator.userAgent.includes("Mobile VR")){
        vrDisplay.requestPresent([{source: renderer.domElement}])

    }else {
        effect = new THREE.StereoEffect(renderer)
        effect.separation = 0
        effect.setSize(window.innerWidth, window.innerHeight)
        document.getElementById("vr-sample-button-container").style.display = "none"
    } 
})

「View in VR」ボタンをクリックすると、VREffect から StereoEffect に切り替えました。

ただし、このアプローチでは、コンテンツはフルスクリーンにならず、デバイスは最終的にスリープ状態になります。両方の問題を解決するには、ユーザーに画面をタップして手動でフルスクリーンをオンにすることができます:

renderer.domElement.addEventListener("click", () => {
    if(document.fullscreenEnabled && renderer.domElement.requestFullScreen() ||
       document.webkitFullscreenEnabled && renderer.domElement.webkitRequestFullScreen() ||
       document.mozFullScreenEnabled &&    renderer.domElement.mozRequestFullScreen() ||
       document.msFullScreenEnabled &&     renderer.domElement.msRequestFullScreen() ){}
})

明らかに、これはユーザー エクスペリエンスが良くなく、優れた UI が得られないため、誰かがこれを見つけて実際の修正を知っている場合は、回答/コメントを残してください。自分で何か見つけたら更新します。

最終的な考えとして、Gear VR ブラウザにはある種のネイティブ WebVR 実装がありますが、他の場所ではポリフィルが使用されているため、それが問題の一部である可能性があります。

于 2016-11-08T20:48:05.270 に答える