Новые публикации

2019-05-08T10:53:09.645Z
Всем привет!

С недавнего времени я начал осваивать VR-программирование (если конкретней, то с использованием JS-фреймворка a-frame). К сожалению, мне не удалось найти хоть какого-то сообщества AR/VR-разработчиков в рунете, поэтому я решил запустить свое сообщество. Пока что оно состоит из одного человека:), но надеюсь, что все-таки оно будет расти, во всяком случае я для этого приложу усилия.

Вообще, я пока еще весьма слаб в AR/VR, но у меня довольно богатый опыт в работе с базами данных, программировании на PHP и JS (сейчас уже совсем отошел от PHP), так что, думаю, и AR/VR тоже смогу освоить. По мере освоения буду выкладывать полезную информацию.

Если вам это направление интересно, присоединяйтесь!
2019-03-03T06:57:58.175Z
Всем привет!

Сегодняшняя статья тоже больше в формате заметки, интересных визуальных примеров не будет. Но на освоение этого ушло несколько часов, поэтому тоже надо записать, чтобы не забыть.

В прошлой статье я писал уже про компонент Raycaster. Он позволяет определить какие объекты в трехмерном пространстве пересекаются при прохождении заданного луча. Это нужно, к примеру, чтобы при наведении мышкой определять на сцене те объекты, на которые мышка наведена.

Но вчера я потратил еще кучу времени на его освоение, ибо не все задачи решаются приведенными в прошлой статье примерами, а так же многое не очевидно и есть некоторая путаница, которые я и попытаюсь здесь объяснить.

В предыдущем примере (как и во многих других), начальная точка луча - это текущая активная камера. То есть, начальная точка луча будет "выходить" из центра экрана. Можно, конечно, объект Raycaster поместить и в любой другой объект в пространстве, и тогда он будет выходить из центра указанного объекта. Пример
<a-entity id="player" collider-check> <a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity> </a-entity> <a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
Тогда этот объект будет начальной точной для луча, а куда мышка будет направлена, там и будет целевая точка, куда будет проходить луч.

Но как программно задать Raycaster, без необходимости помещать его в какой-то объект и задать ему произвольные точки начала и конца? И вот тут возникла путаница... Дело в том, что в AFrame используется THREE-js. Именно THREE-js отвечает за отрисовку, все эти рейкасты и т.д. и т.п. В документации AFrame не оказалось нужного примера, но он есть в документации THREE-js. Вот он:
var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseMove( event ) { // calculate mouse position in normalized device coordinates // (-1 to +1) for both components mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; } function render() { // update the picking ray with the camera and mouse position raycaster.setFromCamera( mouse, camera ); // calculate objects intersecting the picking ray var intersects = raycaster.intersectObjects( scene.children ); for ( var i = 0; i < intersects.length; i++ ) { intersects[ i ].object.material.color.set( 0xff0000 ); } renderer.render( scene, camera ); } window.addEventListener( 'mousemove', onMouseMove, false ); window.requestAnimationFrame(render);

Здесь для нас самое главное (определения источника путаницы) вот это:
raycaster.intersectObjects( scene.children );
То есть после его создания и задания ему начальных координат и координат мыши, мы ему должны скормить массив объектов, которые надо проверить на факт пересечения с лучом. В данном случае это scene.children. И вот путаница возникла в том, что в HTML у NODE-элементов тоже есть свойство children и при передачи ноды a-scene никаких ошибок не возникает, но и результат всегда пустой массив приходит, хотя явно пересечения имеются.

Суть проблемы кроется в том, что THREE-js оперирует массивами mesh-объектов и он предполагает, что на вход придет именно массив мешей. А у нас получается даже не массив, а HTMLCollection из DOM-нод. На самом деле THREE-js ругается, но не сильно, то есть выводит сообщение, что это не массив в warn (просто проверяя, что это не массив, хотя тем способом, что он делает перебор, можно и HTMLCollection было перебрать). Но если мы HTMLCollection преобразуем в массив и скормим его, получим фатальную ошибку, что у object нет метода reacast. Дело в том, что a-entity AFrame не имеет этого свойства. ОК, копаем чуть глубже и находим, что есть этот метод у a-entity.object3D. ОК, передаем массив этих объектов.
const objects = [...scene.querySelectorAll('a-entity')].map(n => n.object3D);
ОК, теперь не ругается. Но и результат все еще пустой массив. Не растет каменный цветок...
Смотрел-смотрел, что не так, и выяснил, что метод raycast у этих объектов - пустая функция, ничего не выполняющая. Тупо заглушка... А реальная функция находится в объекте a-entity.object3DMap.mesh. ОК, переписываем так:
const objects = [...scene.querySelectorAll('a-entity')].map(n => n.object3DMap.mesh).filter(n => n);
Вот теперь наконец-то работает!

UPD: забыл сказать, для базового понимания основ 3D, векторов, определения расстояния между точками и векторами, вот отличная статья: https://habr.com/ru/post/334580/
2019-02-27T00:42:11.675Z
Всем привет!

Моя первая заметка по существу в данном блоге. Скорее всего их будет много, так как программирование виртуальной реальности - это что-то очень объемное, непонятное, безграничное. Слишком много всего, о чем даже не подозреваешь. Поэтому по началу будут заметки чуть ли не на каждый чих, потому что даже простейшие на первый вид вещи делаются не так просто, освоение занимает часы, а через несколько дней можно забыть напрочь (пока осваиваешь другие непонятные вещи). До этого были некоторые задачи, но я их не стал описывать, ибо до этого времени вообще все слишком абстрактно было. А сейчас вот уже какие-то ощутимые шаги есть, боле менее понятные задачи и какие-то решения по ним найдены. Вот и решил, что уже можно.

Но данная статья пока еще не в формате мануала "виртуальная реальность с нуля", а просто личная заметка по событиям. Но, думаю, скорее всего какой-то цикл статей по этой теме появится скоро, когда боле менее сформируется понимание этой области. Пока что, кому интересно, можете начать с довольно простого примера: aframe-react, или вот еще очень хорошая вводная статья: https://habr.com/ru/post/439416/.
Итак, сегодняшняя тема: навесить события на отдельные объекты (кубы, конусы и т.п.) в нашей виртуальной реальности. Отдельная заметка возникла по причине того, что этот момент весьма неочевиден. Приводится множество примерно, но они в большинстве случаев не работают в браузере. Вероятно, в VR-шлеме оно и будет все работать, но пока что тесты проводятся в браузере, а там они не работают, события не срабатывают.

Методом проб и ошибок, а так же на основе отдельных примеров, вывел два варианта:

1. Добавить на сцену камеру с курсором. Пример:
<a-camera> <a-cursor></a-cursor> </a-camera> // ....
Тогда на сцене по центру появится курсов. Когда двигаем сцену и курсор попадает на какой-нибудь объект, все события (клики и т.п.) в любой части сцены вызываются на целевом объекте.

2. Добавить атрибут cursor тегу сцены. Пример:
<a-scene cursor="rayOrigin: mouse" >
Тогда объекты становятся кликабельными, а при наведении мышкой появляется вполне привычный курсов. В таком случае события срабатывают на конкретных конечных объектах, что очень удобно.

Здесь есть момент: в таком виде выпоняемый код генерит предупреждения:
components:raycaster:warn [raycaster] For performance, please define raycaster.objects when using raycaster or cursor components to whitelist which entities to intersect with. e.g., raycaster="objects: [data-raycastable]".
Примерная суть сообщения: в целях улучшения производительности укажите с каким атрибутом объекты должны учитываться в событиях.
То есть для решения этого надо указать маску, а объектам добавить эти параметры. Пример:
<a-scene cursor="rayOrigin: mouse" raycaster="objects: [data-raycastable]" > <a-box data-raycastable position="1 1 1" width="440.0" height="1.0" depth="443.0" color="#969696" onClick={function (event) { console.log("onClick", event, event && event.target); }} />
То есть если у вас на сцене несколько объектов, события будут срабатывать только на тех, которые имеют атрибут data-raycastable.



2019-02-27T00:00:21.275Z
Всем привет!

Собственно, сабж. Есть у кого-нибудь опыт в этом направлении (дополненная и виртуальная реальность)?
Сам я в настоящий момент усиленно пытаюсь освоить. По-моему, очень интересное и перспективное направление. Из того, с чем столкнулся, наибольший интерес вызвал фреймворк от мозиллы - A-Frame (идет как надстройка над three.js) и AR.js.

UPD: запустил отдельное сообщество: https://ar-vr.dev/
Присоединяйтесь;-)