Giter VIP home page Giter VIP logo

g-day-ar's Introduction

AR/VR google day - 23 Jan 2020

The repo includes 2 parts a server and a client. The server is only necessary if you want to attempt to create something which has communication between multiple users.

Both were setup with typescript for your DX, of course you are not required to write typescript and as such we have set tsconfig to be js friendly. This was also done to make everything a touch more familiar to the angular peeps.

Gotchas

  • In multiplayer applications: It is not reasonable to expect two devices running the same application to process dynamic physics exactly the same way. From our experimentation different devices will always have slightly different results. this is most likely due to the nature of AR being a best effort technology and not being able to make guaranties about its interpretation of the real environment.

  • In multiplayer applications: it is important to not flood the websocket with updates, This will have an impact on your applications rendering performance (assuming the updates affect rendering). As it will hog the JS thread and trigger continuos re-renders on the client.

  • Android and iOS handle AR slightly differently ๐Ÿ˜”. For one you need to different versions of viroReact for the different platforms. This is why we created a ios-app, and android-app branch. The package is "react-viro": "^2.17.0" on iOS, and "react-viro": "react-viro@npm:@iskander508/[email protected]" on Android.

  • you require a Android device with ARCore support, for a list of supported devices please check developers.google.com/ar/discover/supported-devices.

Setup

for those who don't have react-native dev environment setup and who want to participate in coding part of event there are some suggestions:

  1. Make sure to do all the steps from this guide: https://facebook.github.io/react-native/docs/getting-started React Native CLI Quickstart -> your os -> your phone os
  2. Do "Running your React Native application" part of the guide above on the real device
  3. For ones who have iPhone you will need apple developer account (free one)
  4. If you fell yourself frustrated precisely following some RN-related guide and it's not working, don't worry, it's just a part of RN development ๐Ÿคช

At this point you are ready to try run the repo, or the demo examples from viro-react

Libraries

  • We are using react native, with react-viro. Pavol and Frane did an extensive investigation for us a few months ago into what the best options are for the google day ๐Ÿ™‡โ€โ™‚๏ธ (thanks gents). You can find there findings and there demo app here: github.com/pfulop/ar-pong.

Server

This is optional To help get you up and running quickly we setup this super tiny node Websocket server. to run it in auto reload mode just run yarn dev. This is a very simple websocket server that can be configured however you like. just take note that you send strings (or stringified JSON) over WebSockets and need to handle that yourself. You can see what I mean in our demo.

Tips

  • To make your life easier you can setup react native development to work over WiFi. This is done by following the following guide docs.

  • You can connect multiple devices to the same development machine. Even if you originally set them up on different machines over usb. Useful for rapid development and avoiding setting up a machine to work for android and iOS.

This is a best effort to make your lives easier on the google day. We also hacked this together on short notice so keep your opinions of the code to yourselves ๐Ÿ˜œ

g-day-ar's People

Contributors

perlo27 avatar jwfwessels avatar

Watchers

James Cloos avatar  avatar Mohamed Amine Aydoun avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.