2017년 4월 17일 월요일

aframe 일기 - controller는 중구난방

webVR 쪽 일을 할 수도 있을 거 같아 들이대보려는 중.
aframe 이 확 끌린다.
x3dom은 솔직히 너무 구렸어. 그리고 느렸어. 별로야.
https://jsbin.com/suloji/edit?html,js,output
비슷한데 쉽다. korat을 사용해서 코드는 좀 독특한데 어쨌든.

https://aframe.io 는 데모도 좋고
ctrl+alt+I로 전용 inspector가 열리는 것도 좀 신박했어
내가 좋아하는 MagicaVoxelBlender도 지원하는 로더들이 있고
무엇보다 컨트롤러 지원이 있었어.
그래, 컨트롤러가 VR에서 반 이상은 되지.
원래 또 내가 한 컨트롤러 좋아하지.
난 gaze control이 너무 싫어.
정말 멍청한 생각이야.
도구를 쓰라고 도구를!

보니까 가격이 비싸든 싸든 헤드기어 쪽은 어느 정도 수준이 올라온 것 같은데 가격대비 공신력(?)에서 Daydream이 좀 끌리긴 했다.
싸고 가볍고 간편하고 구글이고 훌륭하지. 듀얼콘은 아니고 Wii 컨트롤러 같은데 감도도 그렇고 좋아보인다.
근데, 화웨이, 에이수스, 모또롤라, ZTE 미만 잡이래.
S7이 있음 뭐하나 제기랄.
https://github.com/domination/gvr-services-emulator/blob/master/apks/README.md
보니까 gvr-service를 손봐서 일반 폰에서 쓸 수 있게 한게 있는데 페인트 예제 앱 두 바퀴 빙빙 칠하다가 주저앉고 나서 더 해볼까 싶어도 결국 Daydream은 시작조차 해볼 수 없더라.

가지고 놀아보고 싶었는데 노는 건 나중에.
자료를 찾아보면 이젠 거의 자동인데 https://github.com/aframevr/awesome-aframe 시리즈 먼저 체크.
https://proxy-controls.donmccurdy.com/ 라는 훌륭한 것이 있군.
두개의 웹브라우저.
하나는 컨트롤러, 하나는 뷰어. 그리고 webRTC datachannel까지.
완벽해! 테스트해보자.

음? 좋긴한데 데스크톱에서 키보드나 게임패드로 폰을 제어하는 리모트라 내가 생각하던거랑은 반대.

https://github.com/ryanbetts/dayframe
오히려 이게 찾던 것.
데모는 웹소켓이로 Heroku라 엄청 느리다. 개량을 하던 새로 만들던 해야겠구만.
소스 코드를 보니

            window.addEventListener('devicemotion', handleMotionEvent, true);
            window.addEventListener('deviceorientation', handleOrientationEvent, true);
            // prevent the remote from moving around on the page
            window.addEventListener('touchstart', function (evt) {
                evt.preventDefault();
            });
            trackpadEl.addEventListener('touchstart', function (evt) {
                socket.emit('trackpad:touchstart');
                trackpadContactEl.classList.remove('hidden');
            });
            trackpadEl.addEventListener('touchmove', function (evt) {
             trackpadEl.addEventListener('touchend', function (evt) {
                socket.emit('trackpad:touchend');
                trackpadContactEl.classList.add('hidden');
            });
            trackpadHammer.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
            trackpadHammer.on('doubletap', function (evt) {
                socket.emit('trackpad:click');
            });
            trackpadHammer.on('swipeleft', function (evt) {
                socket.emit('trackpad:swipeleft');
            });
            trackpadHammer.on('swiperight', function (evt) {
                console.log('swiperight');
                socket.emit('trackpad:swiperight');
            });
            trackpadHammer.on('swipeup', function (evt) {
                console.log('swipeup');
                socket.emit('trackpad:swipeup');
            });
            trackpadHammer.on('swipedown', function (evt) {
                console.log('swipedown');
                socket.emit('trackpad:swipedown');
            });
            homeBtnHammer.on('tap', function (evt) {
                socket.emit('home:tap');
                orientationCenter = lastOrientation;
            });
            appBtnHammer.on('tap', function (evt) {
                socket.emit('app:tap');
            });
이정도가 핵심 코드인가 봄.