Я собираюсь создать видеоплеер с панорамным экраном 360 с устройством ориентации устройства для Android и IOS с cocoon.js и three.js.Отображение текстуры с высоким качеством/разрешением 3D.js
Я успешно построил демо на примерах в trjs.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
Мой код:
<!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() {
\t document.getElementById('btn').style.visibility = 'hidden';
\t video.play();
}
window.addEventListener('load', function() {
\t var renderer \t = new THREE.WebGLRenderer({
\t \t antialias \t : true,
\t });
\t renderer.setClearColor(new THREE.Color('lightgrey'), 1)
\t renderer.setSize(window.innerWidth, window.innerHeight);
\t document.body.appendChild(renderer.domElement);
\t var onRenderFcts= [];
\t var scene \t = new THREE.Scene();
\t var camera \t = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.01, 1000);
\t camera.position.z = 3;
\t var texture = new THREE.VideoTexture(video);
\t texture.minFilter = THREE.LinearFilter;
\t texture.format = THREE.RGBFormat;
\t texture.generateMipmaps = false;
\t var controls \t = new THREE.OrbitControls(camera)
\t controls.target.copy(scene.position)
\t function onDeviceOrientation(event){
\t \t if(!event.alpha) \t return;
\t \t controls.enabled \t = false
\t \t controls = new THREE.DeviceOrientationControls(camera);
\t \t controls.connect();
\t \t window.removeEventListener('deviceorientation', onDeviceOrientation, false);
\t \t renderer.domElement.addEventListener('click', function(){
\t \t \t var domElement \t = renderer.domElement
\t \t \t if(domElement.requestFullscreen) \t \t domElement.requestFullscreen();
\t \t \t else if(domElement.msRequestFullscreen) \t domElement.msRequestFullscreen();
\t \t \t else if(domElement.mozRequestFullScreen) \t domElement.mozRequestFullScreen();
\t \t \t else if(domElement.webkitRequestFullscreen) \t domElement.webkitRequestFullscreen();
\t \t }, false);
\t }
\t window.addEventListener('deviceorientation', onDeviceOrientation, false);
\t onRenderFcts.push(function(){
\t \t controls.update()
\t })
;(function(){
\t var geometry \t = new THREE.SphereGeometry(10, 32, 16);
\t var material \t = new THREE.MeshBasicMaterial({
// opacity : 0.5,
// transparent : true,
// side : THREE.DoubleSide,
\t \t \t \t map: texture
});
\t var mesh \t = new THREE.Mesh(geometry, material);
\t mesh.scale.x \t = -1
\t scene.add(mesh);
})()
\t onRenderFcts.push(function(){
\t \t onWindowResize();
\t \t renderable();
\t })
\t
\t function renderable() {
\t \t if (video.readyState === video.HAVE_ENOUGH_DATA) {
\t \t \t renderer.render(scene, camera);
\t \t } \t \t \t \t
\t }
\t
\t function onWindowResize(){
\t \t renderer.setSize(window.innerWidth, window.innerHeight)
\t \t camera.aspect \t = window.innerWidth/window.innerHeight
\t \t camera.updateProjectionMatrix() \t \t
\t }
\t window.addEventListener('resize', onWindowResize, false)
\t
\t // run the rendering loop
\t var lastTimeMsec= null
\t requestAnimationFrame(function animate(nowMsec){
\t \t // keep looping
\t \t requestAnimationFrame(animate);
\t \t // measure time
\t \t lastTimeMsec \t = lastTimeMsec || nowMsec-1000/60
\t \t var deltaMsec \t = Math.min(200, nowMsec - lastTimeMsec)
\t \t lastTimeMsec \t = nowMsec
\t \t // call each update function
\t \t onRenderFcts.forEach(function(onRenderFct){
\t \t \t onRenderFct(deltaMsec/1000, nowMsec/1000)
\t \t })
\t })
})
</script>
</body>UPDATE: С тех пор я понял, что Проблема заключается не в самом разрешении видео, а в размерах. Я создал версию оригинального видео 1920x1080, которая работает нормально, поэтому единственное, что меня беспокоит, - это качество. Даже видео Full HD с разрешением 16000 Кбит/с кажется довольно пиксельным на моих Nexus 7 и ipad 4, я уверен, что он должен быть приятнее ...
Работает ли код в браузере? Мне кажется, что это может быть связано с cocoon.js, а не с tr.js – 2pha
Спасибо за ваш комментарий! Ну, я не уверен, как я могу проверить его в браузере. В отличие от «обычных» приложений phonegap/cordova, приложение разработчика Cocoon просто завершает мой исходный код и запускает приложение, я не вижу способа проверить его в браузере. Я был бы очень благодарен, если бы вы могли рассказать мне, как я могу это сделать, так как сейчас я могу только запустить приложение через приложение разработчика cocoon и посмотреть logcat для ошибок. С тех пор я обновил свой первоначальный пост, теперь только качество изображения - это то, что меня беспокоит ... – fmarton