WebVR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 보는 8(핀의 물리적 형상의 중심) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. A-Frame 측 설정에서 핀의 물리적 모양과 렌더링되는 모양의 중심 편차를 조정할 수 있는지 확인합니다. 예 1) 복합 모양의 cylinder를 이용하여 offset으로 위치 조정 설정했습니다. 위치 조정이 가능했습니다. 공을 굴려 보자. 물리적인 형상에 box를 지정하고 있었을 때보다, 충돌시에 하단의 가장자리로 둘러싸게 되... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 보는 7(핀 모델) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 마지막으로, 핀의 물리적 모양을 설정했고, sphere와 cylinder에서 중심 불일치가 보였다. 이번에는 이용하는 모델에 따라 차이가 있는지 여부를 확인해 보겠습니다. 예 1) pin1 이전부터 이용하고 있는 모델입니다. 중심이 어긋나 있습니다. 예 2) pin2 지금까지와 다른 모델을 사용해 보겠습니다. 이것도 어긋나 있습... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 6(핀의 형상) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. cylinder가 합당한 느낌이 듭니다만, 자동적으로 할당했을 경우에 어떠한 형상이 할당되는 것일까요. 예 1) shape=auto 상자가 선택된 것 같습니다. 예 2) shape=primitive 상자가 선택된 것 같습니다. 예 3) shape=box 상자를 설정합니다. 예 4) shape=hull 레인을 빠져 나갔습니다. 공... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 5(볼의 회전에 대한 저항) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 회전에 대한 저항을 살펴봅니다. 각도 감쇠라고 하는 것 같습니다. 회전에 대한 저항이 늘어나면 어떻게 되는지, 조금 이미지가 솟지 않습니다. 볼은 구르고 있기 때문에 구르기 어려워지는지,,, 그것이라고 이 볼링의 예에서는 선형 감쇠와의 구별이 붙지 않습니다. 우선 해보겠습니다. 예 1) angularDamping=0.01 기본값... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 4(볼의 평행 이동에 대한 저항) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 이번에는 공의 평행 이동에 대한 저항을 검증합니다. 예 1) linearDamping=0.01 기본값입니다. 실제 볼링이라면 더 부드럽게 굴러가는 느낌이 듭니다. 저항을 변화시킴으로써 실현할 수 있는 것이 아닐까 생각합니다. 예 2) linearDamping=1 저항을 높이십시오. 공이 날아 가지 않고 조용히 떨어졌습니다. 레인... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다2(볼의 형상) 공은 구체이므로 sphere입니다만, 변경하면 어떻게 되는지 시험해 봅니다. 예 1) auto 전회와 차이는 없을 것 같습니다만, debug 모드로 와이어 프레임도 표시시켜 확인해 봅니다. 예 2) primitive primitive는 平面/円柱/球。対応するAフレームプリミティブで自動的に使用されます。여기도 자동으로 sphere가 선택됩니다. 추후, 핀에도 형상을 설정해 시험해 보고 싶습니다. ... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 1(볼의 속도) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 개별 설정값이 어떠한 의미에서 무엇을 어떻게 설정하면 어떤 효과가 있는지를 검증해 나갑니다. 최종적으로는 볼링 같은 행동을 시키기 위한 설정치를 찾아내는 것을 목표로 합니다. 이번에는 공에 주는 속도를 확인합니다. 레인과 핀과 공을 장면에 준비합니다. 공에 속도를 제공합니다. 속도를 변경한 예를 아래에 게재합니다. 예 1) z ... WebVR프런트 엔드HTMLA-FrameVR A-FRAME: 360° 이미지 뷰어 만들기 여행하러 왔기 때문에, 그때의 360° 화상을 VR 고글에서 볼 수 있도록 해 보았습니다. 요 전날 조금 만났으므로, A-FRAME를 이용해 보았습니다. 링크에 커서를 맞추면 3장의 이미지가 차례로 바뀝니다. 자이로 문제 iOS 12.2 이상에서 자이로 센서가 꺼져 있습니다. 내 iPhoneSE는 iOS12.4.1이므로 설정 변경이 필요했습니다.設定 > Safari > モーションと画面の向きの... WebVR프런트 엔드HTMLA-FrameVR SAP Cloud Platform과 VR과 IoT를 결합하여 낚시 게임을 만들어 보았습니다. 이번에는 당사 요네쿠라가 SAP CloudPlatform과 온도 센싱을 조합하여 재미있는 것들을 만들고 있었으므로, 조금 놀아 본 것의 소개를 하겠습니다. 왜 낚시 게임인가? 온도 감지 부분의 하드웨어를 보면 한눈에 개발 환경 : SAP Web IDE Full-STACK 왼쪽에서 온도 감지 장치로 측정 된 온도 데이터는 SORACOM을 통해 SAP HANA로 흐릅니다. 이 온도 데이터를 취득... WebVRSAPA-FrameIoT거 조치 [연재] WebVR 입문 vol.5 이 기사는 의 18일째 기사입니다. 그런데, 지금까지의 연재는 WebVR 입문이라고 하는 것으로, 기본적인 것과 WebVR을 어떻게 하면 이용할 수 있을까 하는 점에 관해서 써 왔습니다. (이 라이브러리 자체도 내부는 한층 더 Three.js를 이용하고 있기 때문에, 점점 생으로 무엇인가를 쓰는, 라고 하는 케이스는 없어진다고 생각합니다) 그런데, boilerplate의 리포지토리를 떨어뜨리... 자바스크립트WebGLWebVR [연재] WebVR 입문 vol.4 이번에는 까지 만든 것에 모바일 대응을 넣고 싶습니다. Three.js의 examples에 있는 위의 스크립트를 로드합니다. 이 스크립트는 스마트 폰의 자이로 센서를 읽고 그 상태를 카메라에 반영해줍니다. 그래, VR에는 빠뜨릴 수 없는 디바이스의 방향을 카메라에 반영시켜 주는 훌륭한 스크립트입니다. 연재 제1회째로 VREffect.js 를 사용하면 간편하게 WebVR이 취급할 수 있는 것을... 자바스크립트WebGLWebVR [연재] WebVR 입문 vol.3 그래서 이번에는 이것에 조금 손을 넣어 VR로 멋지게하는 것을 만들려고 생각합니다. 새벽 어둠 속에 큐브가 떠 있는 것을 입체시해도 아무것도 재미있지 않네요. (뭐 평소 경험할 수 없는 것 같은 것을 체험할 수 있는 것도 VR의 묘미입니다만 w) 그래서 여기에 Skybox를 추가해 보겠습니다. VR의 이야기에서 약간 그렇기 때문에 별로 자세한 것은 설명하지 않습니다만, Sky3D 세계는 어쨌... 자바스크립트WebGLWebVR
A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 보는 8(핀의 물리적 형상의 중심) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. A-Frame 측 설정에서 핀의 물리적 모양과 렌더링되는 모양의 중심 편차를 조정할 수 있는지 확인합니다. 예 1) 복합 모양의 cylinder를 이용하여 offset으로 위치 조정 설정했습니다. 위치 조정이 가능했습니다. 공을 굴려 보자. 물리적인 형상에 box를 지정하고 있었을 때보다, 충돌시에 하단의 가장자리로 둘러싸게 되... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 보는 7(핀 모델) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 마지막으로, 핀의 물리적 모양을 설정했고, sphere와 cylinder에서 중심 불일치가 보였다. 이번에는 이용하는 모델에 따라 차이가 있는지 여부를 확인해 보겠습니다. 예 1) pin1 이전부터 이용하고 있는 모델입니다. 중심이 어긋나 있습니다. 예 2) pin2 지금까지와 다른 모델을 사용해 보겠습니다. 이것도 어긋나 있습... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 6(핀의 형상) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. cylinder가 합당한 느낌이 듭니다만, 자동적으로 할당했을 경우에 어떠한 형상이 할당되는 것일까요. 예 1) shape=auto 상자가 선택된 것 같습니다. 예 2) shape=primitive 상자가 선택된 것 같습니다. 예 3) shape=box 상자를 설정합니다. 예 4) shape=hull 레인을 빠져 나갔습니다. 공... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 5(볼의 회전에 대한 저항) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 회전에 대한 저항을 살펴봅니다. 각도 감쇠라고 하는 것 같습니다. 회전에 대한 저항이 늘어나면 어떻게 되는지, 조금 이미지가 솟지 않습니다. 볼은 구르고 있기 때문에 구르기 어려워지는지,,, 그것이라고 이 볼링의 예에서는 선형 감쇠와의 구별이 붙지 않습니다. 우선 해보겠습니다. 예 1) angularDamping=0.01 기본값... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 4(볼의 평행 이동에 대한 저항) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 이번에는 공의 평행 이동에 대한 저항을 검증합니다. 예 1) linearDamping=0.01 기본값입니다. 실제 볼링이라면 더 부드럽게 굴러가는 느낌이 듭니다. 저항을 변화시킴으로써 실현할 수 있는 것이 아닐까 생각합니다. 예 2) linearDamping=1 저항을 높이십시오. 공이 날아 가지 않고 조용히 떨어졌습니다. 레인... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다2(볼의 형상) 공은 구체이므로 sphere입니다만, 변경하면 어떻게 되는지 시험해 봅니다. 예 1) auto 전회와 차이는 없을 것 같습니다만, debug 모드로 와이어 프레임도 표시시켜 확인해 봅니다. 예 2) primitive primitive는 平面/円柱/球。対応するAフレームプリミティブで自動的に使用されます。여기도 자동으로 sphere가 선택됩니다. 추후, 핀에도 형상을 설정해 시험해 보고 싶습니다. ... WebVR프런트 엔드A-Frame자바스크립트VR A-FRAME: 물리 연산으로 볼링 같은 움직임을 실현해 본다 1(볼의 속도) A-Frame을 사용하여 물리 연산을 할 수 있도록 해 봅니다. 개별 설정값이 어떠한 의미에서 무엇을 어떻게 설정하면 어떤 효과가 있는지를 검증해 나갑니다. 최종적으로는 볼링 같은 행동을 시키기 위한 설정치를 찾아내는 것을 목표로 합니다. 이번에는 공에 주는 속도를 확인합니다. 레인과 핀과 공을 장면에 준비합니다. 공에 속도를 제공합니다. 속도를 변경한 예를 아래에 게재합니다. 예 1) z ... WebVR프런트 엔드HTMLA-FrameVR A-FRAME: 360° 이미지 뷰어 만들기 여행하러 왔기 때문에, 그때의 360° 화상을 VR 고글에서 볼 수 있도록 해 보았습니다. 요 전날 조금 만났으므로, A-FRAME를 이용해 보았습니다. 링크에 커서를 맞추면 3장의 이미지가 차례로 바뀝니다. 자이로 문제 iOS 12.2 이상에서 자이로 센서가 꺼져 있습니다. 내 iPhoneSE는 iOS12.4.1이므로 설정 변경이 필요했습니다.設定 > Safari > モーションと画面の向きの... WebVR프런트 엔드HTMLA-FrameVR SAP Cloud Platform과 VR과 IoT를 결합하여 낚시 게임을 만들어 보았습니다. 이번에는 당사 요네쿠라가 SAP CloudPlatform과 온도 센싱을 조합하여 재미있는 것들을 만들고 있었으므로, 조금 놀아 본 것의 소개를 하겠습니다. 왜 낚시 게임인가? 온도 감지 부분의 하드웨어를 보면 한눈에 개발 환경 : SAP Web IDE Full-STACK 왼쪽에서 온도 감지 장치로 측정 된 온도 데이터는 SORACOM을 통해 SAP HANA로 흐릅니다. 이 온도 데이터를 취득... WebVRSAPA-FrameIoT거 조치 [연재] WebVR 입문 vol.5 이 기사는 의 18일째 기사입니다. 그런데, 지금까지의 연재는 WebVR 입문이라고 하는 것으로, 기본적인 것과 WebVR을 어떻게 하면 이용할 수 있을까 하는 점에 관해서 써 왔습니다. (이 라이브러리 자체도 내부는 한층 더 Three.js를 이용하고 있기 때문에, 점점 생으로 무엇인가를 쓰는, 라고 하는 케이스는 없어진다고 생각합니다) 그런데, boilerplate의 리포지토리를 떨어뜨리... 자바스크립트WebGLWebVR [연재] WebVR 입문 vol.4 이번에는 까지 만든 것에 모바일 대응을 넣고 싶습니다. Three.js의 examples에 있는 위의 스크립트를 로드합니다. 이 스크립트는 스마트 폰의 자이로 센서를 읽고 그 상태를 카메라에 반영해줍니다. 그래, VR에는 빠뜨릴 수 없는 디바이스의 방향을 카메라에 반영시켜 주는 훌륭한 스크립트입니다. 연재 제1회째로 VREffect.js 를 사용하면 간편하게 WebVR이 취급할 수 있는 것을... 자바스크립트WebGLWebVR [연재] WebVR 입문 vol.3 그래서 이번에는 이것에 조금 손을 넣어 VR로 멋지게하는 것을 만들려고 생각합니다. 새벽 어둠 속에 큐브가 떠 있는 것을 입체시해도 아무것도 재미있지 않네요. (뭐 평소 경험할 수 없는 것 같은 것을 체험할 수 있는 것도 VR의 묘미입니다만 w) 그래서 여기에 Skybox를 추가해 보겠습니다. VR의 이야기에서 약간 그렇기 때문에 별로 자세한 것은 설명하지 않습니다만, Sky3D 세계는 어쨌... 자바스크립트WebGLWebVR