stinkstudios / arkit-web

An experimental iOS app for rapidly prototyping ARKit experiences with WebGL.

ARKit Web

An experimental iOS app for rapidly prototyping ARKit experiences with WebGL.

Features

• Metal rendering for Camera feed
• WebGL library free - use whatever graphics library you prefer
• Rapid prototyping using ngrok and Safari web inspector tools
• Simple JavaScript API for configuring ARKit and subscribing to events

Example

import ARKit from './arkit/arkit';
import ARConfig from './arkit/config';

/* Turn on features */
ARConfig.imageFrame = true;
ARConfig.pointCloud = true;

/* Get latest frame data */
ARKit.on('frame', data => {});

Requirements

• iOS11 (currently in beta and can be installed from here)
• A device which has A9 and A10 processors

We recommend any of the following devices: iPad (2017), iPad Pro, iPhone 7 and 7 Plus.

Implemented

• ARPlaneAnchor
• ARAnchor
• ARLightEstimate
• ARHitTestResult
• ARPointCloud rawFeaturePoints
• ARSession remove(anchor:)
• Camera feed as base64 to WebGL texture

Getting started

This project is compromised of two parts:

1. A native iOS app that configures ARKit and exposes the frame data to a WKWebView layer.
2. A series of demos showing the features of ARKit and how to utilise the data with threejs.

Installation

1. Open your terminal and navigate to the arkit-web/Demos directory
2. If you don't have yarn globally run npm i yarn --global
3. Install the project dependencies by running yarn

Tasks

• yarn start - Start the dev server.
• yarn tunnel - Start an ngrok connection for live development

Check Demos/package.json for the other available tasks.

Demos

Each demo contains instructions for setting up and running.

• Anchors
• Shadows
• Bubbles
• PointCloud

Debugging

Use the Safari Technology Preview web inspector tools.

Resources

• https://developer.apple.com/documentation/arkit
• https://www.captechconsulting.com/blogs/arkit-fundamentals-in-ios-11

License

MIT

arkit-web's Issues

Is PostCSS setup really needed for one css file in Demos?

Can only see one css file

/Demos/src/base/main.css

Do we really need all the postcss plugins in /Demos/internals/postcss.config.js

I only see autoprefixer might be needed? But surely this is for latest browsers so doesnt really need it.

Define node version for `/Demos`

We need to define some basic requirements for people to run the demos against.

Add an engines config to /Demos/package.json

And perhaps nvm config file too.

`/Demos/.eslintrc` Eslint config should use eslint-config-airbnb-base instead of eslint-config-airbnb

/Demos/.eslintrc

You only need es6 and prettier rules.

No need for

• redux-saga
• react
• jsx-a11y
• compat

Please read through the whole setup for eslint and remove unnecessary config and cli.

Clean up scripts in `/Demos/package.json`

Can probably remove a few of the cli / scripts defined in /Demos/package.json

Check any licenses for packages used in project

We need to make sure any packages we are using in this are okay to open source.

Define NPM version for Demos

Add to [engines](https://docs.npmjs.com/files/package.json#engines_ the npm version the demos support.

Add authorisation to load any http links over the web

App Transport Security Settings
Allow Arbitrary Loads : yes

in the plist file to load any link / content in http

Error when loading assets not over HTTP

When trying to load assets locally in a bundle the following error gets thrown: Cross origin requests are only supported for HTTP.

There's a few similar issues that have been reported across different projects:

https://stackoverflow.com/questions/36451720/cordova-ios-cross-origin-requests-are-only-supported-for-http

crosswalk-project/crosswalk-ios#69

A solution could be to use a local web server to load the url request from:

httpswift/swifter#206

Define YARN version demos support

Add to [engines](https://docs.npmjs.com/files/package.json#engines_ the yarn version the demos support.

Is there a need for stylelint in this project?

If there is a need for stylelint please update the config to only include what is needed for this project.

/Demos/.stylelintrc

e.g

• ignoreFiles
• plugins

In `/Web/package.json` folder clean up npm dependencies

[/Demos/package.json]https://github.com/Stinkstudios/arkit-web/blob/f016d079721bf1549bc0f6ef6dcb79a12cb59e0b/Demos/package.json)
There are so many dependencies and devDependencies that arent being used in the project.

Also check which npm packages are dependencies or devDependencies.

So messy!