Question

我即将使用cocoon.js和three.js为Android和IOS创建一个全景360视频播放器，其设备方向控制。

我已经成功地在threejs.org上的示例中构建了演示但是遇到了一个问题：我原来的测试视频文件是4000x1618分辨率，只有30秒长。加载它会发出声音，但没有图片。但是，如果我尝试将文件转换为720x292，那么它在android和ios上都可以正常工作！不幸的是这个较低的水视频文件的质量太差了，但是如果我尝试加载一个更大的视频文件，它将只发出声音而不再拍照。

我在启动电影时在adb logcat中发现了这些错误日志：

E/OMXNodeInstance(  124): setParameter(4b:Nvidia.h264.decode, ParamPortDefinition(0x2000001)
W/ACodec  (  124): [OMX.Nvidia.h264.decode] setting nBufferCountActual to 13 failed: -1010

我的代码：

＆＃13;

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src='cordova.js'></script>
<script src='js/three.js'></script>
<script src='js/OrbitControls.js'></script>
<script src='js/PointerLockControls.js'></script>
<script src='js/DeviceOrientationControls.js'></script>
<script src='js/stats.min.js'></script>
<body style='margin: 0px;; overflow: hidden; text-align:center;'>
<div id="btn" style='background: red; width: 200px; height: 200px; position: absolute; z-index: 1000;' onclick="start_video()">START VIDEÓ</div>
<script>

var video = document.createElement('video');
video.loop = true;
video.src = 'heroes-new-720p.mp4';

function start_video() {
	document.getElementById('btn').style.visibility = 'hidden';
	video.play();
}

window.addEventListener('load', function() {
	var renderer	= new THREE.WebGLRenderer({
		antialias	: true,
	});
	renderer.setClearColor(new THREE.Color('lightgrey'), 1)
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
	var onRenderFcts= [];
	var scene	= new THREE.Scene();
	var camera	= new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
	camera.position.z = 3;

	var texture = new THREE.VideoTexture( video );
	texture.minFilter = THREE.LinearFilter;
	texture.format = THREE.RGBFormat;
	texture.generateMipmaps = false;

	var controls	= new THREE.OrbitControls(camera)
	controls.target.copy(scene.position)
	function onDeviceOrientation(event){
		if( !event.alpha )	return;
		controls.enabled	= false
		controls = new THREE.DeviceOrientationControls(camera);
		controls.connect();
		window.removeEventListener('deviceorientation', onDeviceOrientation, false);
		renderer.domElement.addEventListener('click', function(){
			var domElement	= renderer.domElement
			if(domElement.requestFullscreen)		domElement.requestFullscreen();
			else if(domElement.msRequestFullscreen) 	domElement.msRequestFullscreen();
			else if(domElement.mozRequestFullScreen)	domElement.mozRequestFullScreen();
			else if(domElement.webkitRequestFullscreen)	domElement.webkitRequestFullscreen();
		}, false);
	}
	window.addEventListener('deviceorientation', onDeviceOrientation, false);
	onRenderFcts.push(function(){
		controls.update()
	})

;(function(){
	var geometry	= new THREE.SphereGeometry(10, 32, 16);
	var material	= new THREE.MeshBasicMaterial({
                // opacity         : 0.5,
                // transparent     : true,
                // side            : THREE.DoubleSide,
				map: texture
        }); 
	var mesh	= new THREE.Mesh( geometry, material );
	mesh.scale.x	= -1
	scene.add( mesh );
})()


	onRenderFcts.push(function(){
		onWindowResize();
		renderable();
	})
	
	function renderable() {
		if ( video.readyState === video.HAVE_ENOUGH_DATA )  {
			renderer.render( scene, camera );
		}				
	}
	
	function onWindowResize(){
		renderer.setSize( window.innerWidth, window.innerHeight )
		camera.aspect	= window.innerWidth / window.innerHeight
		camera.updateProjectionMatrix()		
	}
	window.addEventListener('resize', onWindowResize, false)
	
	// run the rendering loop
	var lastTimeMsec= null
	requestAnimationFrame(function animate(nowMsec){
		// keep looping
		requestAnimationFrame( animate );
		// measure time
		lastTimeMsec	= lastTimeMsec || nowMsec-1000/60
		var deltaMsec	= Math.min(200, nowMsec - lastTimeMsec)
		lastTimeMsec	= nowMsec
		// call each update function
		onRenderFcts.forEach(function(onRenderFct){
			onRenderFct(deltaMsec/1000, nowMsec/1000)
		})
	})
})
</script>
</body>

＆＃13;

更新：从那以后我发现问题不是视频分辨率本身，而是尺寸。我创建了一个运行良好的原始视频的1920x1080版本，所以唯一困扰我的是质量。即使是16000 kbps的全高清视频在我的Nexus 7和ipad 4上看起来也非常像素化，我确信它应该更好......

Answer 1

好吧，最后我发现我测试的设备（Moto G，Nexus 7，iPad4，HTC m8）都不能将视频作为纹理处理在一个大于1920x1080的three.js球体中。我不确定原因，但我发现了一篇关于全景视频分辨率的非常有趣的文章，这也引起了质量问题。

简短地说：在360视频中，120度全高清视频的2K宽度变为682像素宽，所以这就是我发现我的视频质量不满意的原因。

如果有人感兴趣的话，这是文章：

http://www.360heros.com/2015/02/4k-vr-360-video-what-is-it-and-how-can-i-produce-it/

Answer 2

它不是三个也不是cocoonjs相关的。高于1080p的分辨率在移动屏幕上没有意义（除了用例），因此硬件不支持它（在大多数情况下）。您可以检查的是h264配置文件是否适合您的视频文件的分辨率。在编码错误的情况下，特殊的iphone非常挑剔！

Three.js视频纹理映射低质量/分辨率

2 个答案: