我在三.js球体上渲染一个等距柱状投影视频，并在VIVE上测试Chromium WebVR的性能。
我注意到当我在 VIVE 中环顾四周时，视频会振动和摇晃。这让我感到头晕目眩。
如果我将视频替换为图像，振动就会停止。我测试不同的视频，每个视频都会振动。因此，当 three.js 尝试在球体上渲染这些视频时，可能会出现问题。
我还检查帧率。大约是85~90帧/秒。看起来还不错。
(在此之前，我已经使用WebVR样板在移动设备上测试了相同的脚本，并在Cardboard中观看视频，它工作正常。无晃动和振动。帧率约为 50。)
当我在测试时，我不小心发现如果我把一个球体放在三个.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>
WebVr 现在不能很好地处理视频纹理，如果您暂停视频，闪烁会停止对吗？
您可以每晚尝试Firefox，它可以更好地处理视频纹理，并且通常具有较低的延迟。
您可以通过在体验期间打开 vive 菜单并摇头来测试它，在 Chrome 中，您会注意到 Vive 的原生菜单性能与您在变暗背景中的体验之间的延迟要大得多。
尝试使用videoTexture.minFilter = THREE.NearestFilter;和videoTexture.maxFilter = THREE.NearestFilter;
对于球体的使用new THREE.SphereGeometry(500, 720, 4);我知道它看起来很奇怪，但这样你会在球体的顶部/底部获得更平滑的针迹。