Home

Awesome

overview

High-performance animation with react that compiles to both native mobile (iOS for now) and web. Originally I tried doing it with react-native but it was way too slow and janky. Instead, this project uses Ejecta which natively implements a subset of WebGL that works with threejs and thus react-three. Ultimately, it would be great if we could integrate this into react-native somehow.

how?

For iOS compatibility, the minimum we need is a combination of Ejecta, threejs, and react-three, and of course react 0.14+. For creating fast functional animations in the demonstration game I used react-imation, react-stateful-stream, and updeep. You could use immutable-js instead of updeep (I have no idea which one is faster), but updeep is more fun to use.

getting started

Clone this repo then:

npm install

build and run for iOS

    npm run build            # build
    open Ejecta.xcodeproj/   # open xcode

run the commands above then click run in XCode

Note: When you build for iOS, the output is App/index.js.

build and run for web

Without Hot Module Reload (HMR)

    npm start # start webpack and dev server

Run the command above then goto http://localhost:3420/dev.html. This configuration has inline source maps enabled. Although this configuration doesn't support hot-reload, the page will auto-refresh with any change.

With HMR

    npm run hot-web # start webpack and dev server with HMR

Run the command above then goto http://localhost:3420/dev.html. Note: needs improvement, generates a lot of WebGL warnings on hot loads. This configuration has inline source maps disabled so that hot reloads are faster.

images directories

The default setup of this project is that there are two images/ dirs:

Whenever you add an image to one dir, you should also add the same image to the other dir. If all of your web images will be the same resolution as your mobile images, it would probably be best to modify the build config such that it avoids unnecessary copying.

npm run scripts

Here are all of the build scripts and how you can use them:

FAQ