Build Multiplayer Apps with Apple ARKit and World Mapping

By definition, Augmented Reality (AR) is technology that superimposes a computer-generated image on the user’s view of the physical world. In 2016, Pokemon Go kickstarted the augmented reality revolution and generated massive player involvement. This cultural phenomenon opened peoples eyes to the potential AR has to offer.

With the release of Apple’s ARKit 2, connecting devices together to share objects in the same virtual space became easy with the Share World Map button.  However, there is still a lack of support for real-time multiplayer augmented reality experiences with devices connected together from across the globe.  PubNub’s APIs and infrastructure can help solve these problems for developers by providing a JSON Pub/Sub architecture that scales to support millions of simultaneously connected devices globally.

In this post, I interviewed Arvin Tehrani and Steffanie Fowler from Contrast Media Labs, a development company using PubNub to facilitate real-time experiences in augmented reality.

To learn how they created this magic AR giraffe, read the interview and check out the code tutorial below.

func didReceiveMessage(message: String, from: String) {
      if !message.isEmpty && isHosting {
          questionProcessor.addQuestion(questionText: message, from: from)
      }
}

Web (JS/React): Sending Messages

// Intialize PubNubReact with publish key and subscribe key and then pass in the React component during the React Component's initialization
this.pubnub = new PubNubReact({
  publishKey: PUBLISH_KEY,
  subscribeKey: SUBSCRIBE_KEY
});
this.pubnub.init(this);
// During componentWillMount subscribe to the PubNub channel
componentWillMount() {
  this.pubnub.subscribe({
    channels: [CHANNEL_NAME],
    withPresence: false
  });
}
// Unsubscribe on unmount
componentWillUnmount() {
  if (this.pubnub) {
    this.pubnub.unsubscribe({
      channels: [CHANNEL_NAME]
    });
  }
}
// Form submit event
onQuestionSubmit(event) {
  event.preventDefault();
  // We're storing the question in the component state
  if (this.state.question === "") {
     return; 
  }
  // Ensure question is valid using our custom validation logic then publish the message
  if (this.isQuestionValid()) {
    // Send question and reset state
    this.publishMessage(this.state.question);
    this.setState({ question: ""});
  } 
}
// Sends a message to PubNub channel
publishMessage(message) {
  this.pubnub.publish({
      message: { text: message, from: this.state.username},
      channel: CHANNEL_NAME
  });
}