인사와 개요

만나서 반갑습니다. 대학에서 WebVR에 대해 연구하고 있습니다.
작년부터 Qiita 투고자씨의 기사를 참고로 하면서, Unity나 A-Frame을 사용해 VR 컨텐츠를 개발하고 있었습니다.
최근에는 콘텐츠 개발의 문턱도 내려와 HTML 개발 초보자 나도 쉽게 개발할 수 있게 되었습니다. 특히 HTML 태그를 작성하는 것만으로 개발할 수 있는 A-Frame은 쉽고 편리했습니다.

하지만 역시 프로그래밍을 하는 것은 번거롭다.
HTML이나 JavaScript를 공부해야 합니다.
그러나 반대로 말하면, 쉽게 VR 개발할 수 있게 되면 블로그나 SNS로 도입하기 쉬워지고, VR도 퍼져 나가는 것이 아닐까요? 유행의 「인스타 감성」의 예도 있습니다.

이를 통해 간편하게 WebVR 컨텐츠를 제작할 수 있는 플랫폼을 개발합니다.

채용 기술

A-Frame
자바스크립트
a-mmd
Lat식 미쿠
(모델 부분은 @ 유토 타치바나씨의 기사를 참고로 했습니다)

프로토타입

WebVR_WorkPlatform

다운로드 후 WebVR_WorkPlatform.html을 열면 데모 이미지와 같은 화면이 열립니다.
(권장 동작 환경: Microsoft Edge)

데모

초기 화면


하나미를 이미지 한 VR 컨텐츠 작성


'소스 코드 만들기'에서 다운로드한 index.html을 WebVR 호환 브라우저(Nightly 등)에서 열면 만든 VR 콘텐츠를 시청할 수 있습니다.


자세한 조작 방법에 대해서는, Github의 Usage나, 파일안에 있는 설명서에 써 있습니다.
일부 배경 이미지 인용 원본 : h tp // 여기 g-에 fty. 코 m / st / 2013 / 12 / 린후 리코 h-0. HTML? 해 d=141245925#코멘 ts

요구사양 수립

다음으로, VR 컨텐츠 제작이 가능한 환경을 목표로 요구 사양을 결정합니다.
본 기사에서 실험과 앙케이트를 실시하고, 분석 결과를 바탕으로 사양서를 만들고, 프로토타입을 기반으로 보다 VR 제작하기 쉬운 개발 환경에 브러쉬 업합니다.

본 기사를 보시는 여러분에게도, 협력을 부탁하고 싶습니다.

실험

아래 링크에서 Github에서 VR 컨텐츠를 다운로드할 수 있습니다.
슈팅 게임
(권장 동작 환경: Unity2017)

3D 모델과 대면
포인터로 박스 조작
(권장 동작 환경: FireFox Nightly)

위 콘텐츠의 데모 이미지 등은 Github에 올라있는 것을 참고하십시오.

설문조사

다음 링크에서 설문조사에 답변할 수 있습니다.
htps //w w.すゔぇy 몬케 y. 이 m/r/8QJ2J7X

(실험 링크에 있는 콘텐츠를 체험한 후 답변해 주시면 감사하겠습니다)

마지막으로

끝까지 봐 주셔서 감사합니다.
HTML이나 JavaScript를 다룬 것은 이것이 처음입니다. 소스 코드를 봐 주시면 알 수 있을까 생각합니다만, 매우 낭비가 많은 기술이 되어 있습니다…
jQuery를 사용하면 설명을 생략 할 수있는 것 같습니다만, 어리석은 시간이 없다!

죄송합니다만, 디버그도 아직 달콤한 곳이 있습니다. 프로토타입이나 실험의 링크에 있는 VR 컨텐츠 등으로 개선점·버그 보고 등이 있었을 경우는 지적해 주셨으면 합니다.
그럼!