소개

이 기사는 SAP Advent Calendar 2018 의 12월 20일 분의 기사로 작성되었습니다.

안녕하세요, 주식회사 KYOSO에서 엔지니어를 하고 있는 우에다라고 합니다.
잘 부탁드립니다.

이번에는 당사 요네쿠라가 SAP CloudPlatform과 온도 센싱을 조합하여 재미있는 것들을 만들고 있었으므로, 조금 놀아 본 것의 소개를 하겠습니다.

왜 낚시 게임인가?
온도 감지 부분의 하드웨어를 보면 한눈에


어떻게 봐도 낚시입니다.

그래서 낚시 게임을 시작하고 놀아보기로 했습니다.

환경(추가분만)

개발 환경 : SAP Web IDE Full-STACK
브라우저 : Google Chrome, Safari
라이브러리 : A-Frame

구성 개요

왼쪽에서 온도 감지 장치로 측정 된 온도 데이터는 SORACOM을 통해 SAP HANA로 흐릅니다.
이 온도 데이터를 취득하여 VR로 표현한 것이 이번에 만든 것이 됩니다.

화면

실제로 만든 낚시 게임의 화면입니다.



A-Frame이라는 WebVR 프레임 워크를 사용하여 브라우저에 실시간으로 그립니다.

그럼 조금 A-Frame에 대해 파고들고 설명하고 싶습니다.

A-Frame이란?

A-Frame은 Three.js를 기반으로 개발된 프레임워크로,
HTML 태그로 장면을 작성할 수 있습니다.

A-Frame은 다음과 같은 특징이 있습니다.
1. html 태그로 장면을 작성 가능
2. VR 사이트를 반응형으로 구축 가능
3. 물리 기반 렌더링에서 머티리얼 지정
4. 소스 프로그램은 MIT 라이센스로 공개

이제 A-Frame을 사용하는 코드를 살펴 보겠습니다.
물고기(안쪽의 타이야키)를 표시하고 있는 부분의 코드입니다.

<a-scene>
  <!-- sakana -->
  <a-image id="fish" position="1 0 -20" scale="2 2 0.1"
           src="img/sakana.png">
    <a-animation id="fish_anime" attribute="position" from="1 0 -20" to="1 0 -20" direction="normal" dur="1000" easing="linear"
                 repeat="0"></a-animation>
  </a-image>
</a-scene>

태그가 물고기를 표시하는 태그입니다.
표시에 필요한 정보를 속성으로 표시합니다.


속성 이름
내용


position
표시 위치( X Y Z )

스케일
표시 크기( X Y Z )

src
물고기 이미지


또한이 물고기는 애니메이션으로 이동하도록 설정되어 있습니다.
이 애니메이션 설정을 태그로 지정합니다.
이쪽도 마찬가지로 속성 지정으로 세세한 설정을 하고 있습니다.


속성 이름
내용


attribute
애니메이션 대상의 속성치 position 는 표시 위치를 변경

from
시작 위치 ( X Y Z )

to
종료 위치( X Y Z )

dur
from 에서 to 까지 애니메이션 하는데 필요한 시간 ( 단위는 ms )

easing
변경 속도 (리너는 일정)

repeat
반복 횟수

A-Frame Inspector

A-Frame을 사용할 때 HTML 태그를 직접 설명하고 3D 객체를 배치하는 것은 현실 문제로 엄격하다고 생각합니다.
거기서 그래픽에 3D 오브젝트를 배치하거나 할 수 있는 A-Frame Inspector 라고 하는 GUI 툴이 준비되어 있습니다.



A-Frame Inspector는 <a-scene> 태그에 문장을 추가 한 다음 ctrl + alt + i로 시작합니다.

<a-scene inspector="url: https://aframe.io/releases/0.3.0/aframe-inspector.min.js">

A-Frame Inpsector에서 생성 및 설정한 3D 객체는 그대로 HTML 파일에 저장할 수 있으므로 디자인만이라면 마우스 조작만으로 (거의) 만들 수 있습니다.

마지막으로

이 낚시 게임의 개발은 SAP Web IDE Full-STACK에서 완료되었습니다.
SCP는 Fiori가 닫히는 경우가 많지만 Fiori와 관계없는 개발에서도
인터넷 환경만 있으면 갖추는 것이 SCP의 강점일까라고 생각합니다.