three.js所在萬歲耳機

等距離長方圓柱視頻晃動我呈現在three.js所球體的等距離長方圓柱投影視頻和測試鉻WebVR對VIVE性能。three.js所在萬歲耳機

我注意到視頻振動和搖晃，當我在VIVE環顧四周。這讓我感到頭暈。

如果我更換視頻圖像，震動停止。我測試不同的視頻，每個視頻震動。因此，當three.js嘗試在球體上呈現這些視頻時，問題可能就會發生。

我也檢查fps。它大約在85〜90 fps。看起來不錯。

（在此之前，我一直在使用WebVR樣板測試移動相同的腳本和觀看視頻紙板，它工作正常，無晃動和震動。在FPS是50左右）

雖然我測試，我不小心弄清楚，如果我把three.js例如webvr_vive_sculp.html中的一個球體，振動減少。 fps也降低到50〜60。如果我在原始腳本中限制fps，則沒有任何變化。

有沒有人遇到過這個問題？

這裏是我的腳本：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title>360 video in vive</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
    <style> 

     body { 

     background-color: #000000; 
     margin: 0px; 
     overflow: hidden; 
     } 

     #info { 
      position: absolute; 
      top: 0px; width: 100%; 
      color: #ffffff; 
      padding: 5px; 
      font-family:Monospace; 
      font-size:13px; 
      font-weight: bold; 
      text-align:center; 
     } 

     a { 
      color: #ffffff; 
     } 
    </style> 
</head> 
<body> 

    <div id="container"></div> 


    <script src="../build/three.js"></script> 
    <script src="js/controls/VRControls.js"></script> 
    <script src="js/effects/VREffect.js"></script> 
    <script src="js/vr/ViveController.js"></script> 
    <script src="js/vr/WebVR.js"></script> 


    <script> 
     if (WEBVR.isAvailable() === false) { 

      document.body.appendChild(WEBVR.getMessage()); 

     } 


     var camera, scene, renderer; 
     var effect, controls; 
     var video; 

     init(); 
     animate(); 

     function init() { 

      var container, mesh; 

      container = document.getElementById('container'); 


      camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1100); 
      camera.target = new THREE.Vector3(0, 0, 0); 

      controls = new THREE.VRControls(camera); 
      controls.standing = true; 

      scene = new THREE.Scene(); 

      // 360 video 
      video  = document.createElement('video'); 
      video.autoplay = true; 
      video.src = 'video/8Kevil_3840x1920_hq.webm'; // 'video/Danger in the Room.webm' // 8Kevil_3840x1920_hq 
      video.crossOrigin = ''; 
      videoTexture = new THREE.Texture(video); 
      videoTexture.minFilter = THREE.LinearFilter; 
      videoTexture.magFilter = THREE.LinearFilter; 
      videoTexture.format = THREE.RGBFormat; 

      // 360 video sphere 
      var cubeGeometry = new THREE.SphereGeometry(500, 60, 40); 
      var sphereMat = new THREE.MeshBasicMaterial({map: videoTexture}); 
      sphereMat.side = THREE.BackSide; 
      var cube = new THREE.Mesh(cubeGeometry, sphereMat); 
      scene.add(cube); 

      renderer = new THREE.WebGLRenderer(); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 



      effect = new THREE.VREffect(renderer); 
      if (WEBVR.isAvailable() === true) { 

       document.body.appendChild(WEBVR.getButton(effect)); 

      } 
      window.addEventListener('resize', onWindowResize, false); 

     } 

     function onWindowResize() { 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 

     } 

     function animate() { 

      effect.requestAnimationFrame(animate); 
      update(); 

     } 

     function update() { 
      if(video.readyState === video.HAVE_ENOUGH_DATA){ 
       videoTexture.needsUpdate = true; 
      } 

      controls.update(); 
      effect.render(scene, camera); 

     } 

    </script> 
</body>

來源

2017-03-01 Claire

WebVr不處理視頻紋理那麼現在，如果您暫停閃爍就停在視頻？

你可以嘗試使用Firefox夜間，它處理視頻紋理更好一點，並具有更低的延遲一般。

您可以通過在體驗中打開菜單萬歲和搖動你的頭，在Chrome中，你會發現萬歲的本機菜單性能和您在暗淡的背景經驗之間更多的延遲測試。

嘗試使用videoTexture.minFilter = THREE.NearestFilter;和videoTexture.maxFilter = THREE.NearestFilter;

對於球體採用new THREE.SphereGeometry(500, 720, 4);我知道這看起來不可思議，但這樣一來，你會得到球的頂部/底部更平滑的線跡。

來源

2017-03-22 19:00:31 Aram

非常感謝你給我這些建議！ – Claire

three.js所在萬歲耳機

回答

相關問題