Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Maze VR

368 views

Published on

Expansion how to make a mobile WebVR game via A-Frame

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Maze VR

  1. 1. Mobile WebVR game https://github.com/daoshengmu/aframe-lesson Daosheng Mu 05/25/2016
  2. 2. What is a mobile VR game?
  3. 3. A general 3D game - 3D scene - Game character - Game controller - Monoscopic camera - Sound effect - Collision detection
  4. 4. A Mobile VR game needs? - 3D scene - Game character - Game controller 
 Auto movement - Stereoscopic camera - Sound effect - Collision detection

  5. 5. Training Stage
  6. 6. 3D Coordinate
  7. 7. 3D Transform Object3D http://math.hws.edu/graphicsbook/c3/s5.html
  8. 8. 3D Transform Object3D http://math.hws.edu/graphicsbook/c3/s5.html Model matrix Rotate Translate Scale
  9. 9. 3D Transform https://glumpy.github.io/modern-gl.html Camera Object3D - model matrix - position- viewport - near / far - projection matrix *View matrix inherit
  10. 10. 3D Transform https://glumpy.github.io/modern-gl.html x M[]projx M[]view Object3D M[]model Camera space Screen spaceWorld space
  11. 11. Game Design • First-Person viewport • Character • Camera control • Auto movement • GUI • Collision detection • Sound effect
  12. 12. Game State Menu Game Game start Game End Game loop Init
  13. 13. 1. FPV: Character <a-entity id="vehicle"> <a-entity geometry="primitive: box; depth: 3; height: 1; width: 1" material="color: #AAAA44"></a-entity> <a-entity mixin="sphere" material="color: #999999" position="-0.7 -0.5 1.5" scale="0.3 0.3 0.3"></a-entity> <a-entity mixin="sphere" material="color: #999999" position="0.7 -0.5 1.5" scale="0.3 0.3 0.3"></a-entity> <a-entity mixin="sphere" material="color: #999999" position="-0.7 -0.5 -1.5" scale="0.3 0.3 0.3"></a-entity> <a-entity mixin="sphere" material="color: #999999" position="0.7 -0.5 -1.5" scale="0.3 0.3 0.3"></a-entity> </a-entity>
  14. 14. 1. FPV: Camera control <a-entity id=“camera" wasd- controls camera look-controls position="0 5 2"> <a-entity id="cursor" cursor="fuse: false; maxDistance: 30; timeout: 500" position="0 0 -5" geometry="primitive: ring; segmentsTheta: 8; segmentsPhi: 2" material="color: #4CC3D9; shader: flat" scale="0.1, 0.1, 0.1"> </a-entity> </a-entity>
  15. 15. 2. GUI entity.setAttribute('rotation', { x: radianToDegree(cameraRotate.x), y: radianToDegree(cameraRotate.y), z: radianToDegree(cameraRotate.z) }); entity.setAttribute('position',{ x: cameraPos.x + lookAtVector.x + offset.x, y: cameraPos.y + offset.y, z: cameraPos.z + lookAtVector.z + offset.z }); <a-entity class="menu" id="playButton" mixin="menu" material="transparent: true; src: #playBtnTexture"scale="0.4 0.2 1" visible="true"> <a-animation begin="hovered" attribute="visible" from="true" to="false"> </a-animation> </a-entity>
  16. 16. 3. 3D Scene <a-entity physics-body="primitive: box; boundingBox: 200 2 200; mass: 0; velocity: 0.2 0 0" geometry="primitive: box" material="color: #117777" position="0 0 0" scale="100 1 100”> </a-entity> X N times
  17. 17. 3. 3D Scene { "geometry": "box", "position": {"x": -50, "y": 10, "z": 0}, "scale": {"x": 0.1, "y": 20, "z": 100}, "rotation": {"x": 0, "y": 0, "z": 0}, "material": {"color": "#aaaaaa"} }, { "geometry": "box", "position": {"x": 50, "y": 10, "z": 0}, "scale": {"x": 0.1, "y": 20, "z": 100}, "rotation": {"x": 0, "y": 0, "z": 0}, "material": {"color": "#aaaaaa"} } To save your works!
  18. 18. 4. Collision detection <a-entity physics-body="primitive: box; boundingBox: 200 2 200; mass: 0; velocity: 0.2 0 0" geometry="primitive: box" material="color: #117777" position="0 0 0" scale="100 1 100"></a-entity> https://github.com/ngokevin/aframe-physics-components
  19. 19. 5. Audio • Support formats: mp3*, wav, ogg <a-mixin id="menu-hovered" material="color: #11dd22" scale="7 3 1" sound="src: asset/kick.wav; autoplay: true”> </a-mixin> *mp3 is more compatible on browsers
  20. 20. Third-party A- Frame components • https://github.com/ aframevr/ awesome-aframe • https://github.com/ donmccurdy/ aframe-extras
  21. 21. Optimization • Stats • Control entity no. • Face no. of Sphere
 • Text: aframe-text-component • Run on your target device frequently <a-mixin id="sphere" geometry="primitive: sphere; segmentsWidth: 4; segmentsHeight: 4" scale="1 1 1"></a-mixin> <a-scene stats> </a-scene>
  22. 22. Thanks for your attention https://github.com/daoshengmu/aframe-lesson • Build from BasicScene 1.Modify map 2.Making GUI 3.Implement hitting function

×