Idea: React Native component

[fuleinist]

Main purpose is to bring aframe to native apps and download assets into local storage.

Combining three.js/webgl with react native is not a new idea at all. https://discuss.reactjs.org/t/webgl-in-react-native/2123 https://github.com/ProjectSeptemberInc/gl-react-native http://jlongster.com/First-Impressions-using-React-Native http://stackoverflow.com/questions/37167090/react-native-and-three-js-webgl-library-integration

I think aframe-reactnative would a great approach to connect to native device api and resolve the large assets long loading time issue.

@ngokevin Any suggestion?

[ngokevin]

Don't think it's possible without rewriting a web to OpenGL binding from scratch.

first link says to use webview second link binds react directly to opengl, which doesn't work for webgl third link only mentions opengl fourth link is also webview

Let me know if it's possible.

[ngokevin]

Possible? https://github.com/gilbox/react-three-ejecta-boilerplate

[fuleinist]

Don't know about that after your feedback but maybe it's a good idea to look at their official approach now : )

https://developer.oculus.com/webvr/

[trusktr]

Yeah, I think the most ideal way to do this would be with a web view in the target platform. Simply put,

<Scene>
</Scene>

in react-native would behave a little differently than <Scene> in react for the web: instead of just creating a canvas, it would create a web view and then a canvas inside that.

After that, the rest of the components would behave much the same.

It's not that hard to do.

[trusktr]

In fact, there doesn't have to be a separate aframe-reactnative, aframe-react's <Scene> component can simply detect the environment, then either create a canvas like normal if in the web, otherwise create a webview with a canvas inside.

[fuleinist]

Guys, just some updates.

Managed to use both Object-c and React Native to embed aframe. works with both remote website or local html in iOS app. local and remote resources (e.g. video and firebase db connection) can work well together within the webview.

Only problem is I noticed a little performance drop with embedded Webview against just a safari bookmark. Frame drop are worse with React Native Webview. Guess something to do with it's virtual dom technology?

[lithodomos]

@fuleinist Got any details on your setup? Did you have to modify anything to get aframe working in the webview?

[fuleinist]

@LithodomosVR Yes, as per mentioned, the webview setup recomended by @trusktr works well on iOS with all local assets (3D objects, images and video) bind via Xcode

I have managed to deliver an internal iOS app via company MDM for a meeting session and ran it simutaniously on >150 devices using Firebase to control content.

Unfortunely I can not share any content since it's built for internal use but happy to answer any addtional question : )

[lithodomos]

@fuleinist Thanks for that, sounds like just what we're planning on. Could you clarify exactly what you mean by "bind via xcode" please?

[fuleinist]

@LithodomosVR, I mean to add media and js bundle files to the .app bundle.

Here is a reference http://stackoverflow.com/questions/12904830/how-to-load-local-html-assets-in-directories-js-images-css-in-a-uiwebview

[lithodomos]

@fuleinist Ah thanks. Next question :) I'm running a simple test and getting an error in the emulator "One of the sources for assign has an enumerable key on the prototype chain..." reported on aframe-master.js. Have you run into this?

[fuleinist]

@LithodomosVR No I haven't, for development issue like that I'd recommend to check in StackOverflow since it may related to other component apart from aframe. I can try to help you from there if you send me the question.

Cheers

[lithodomos]

@fuleinist Thanks Chris, SO question here: http://stackoverflow.com/questions/42196398/react-aframe-object-assign-error

[lithodomos]

For more reference, it looks like the Object.Assign definition causes this error deliberately, but looking at the react-native repo I can't see any past version where this was different, so maybe you used a different version of react-native entirely @fuleinist ?

[lithodomos]

@fuleinist I fiddled a lot and got to the point where if I comment out the polyfills.js from react-native, it loads with this error:

"undefined is not an object (evaluating a.substr)

reported from line 77220 of aframe-master.js, which maps to this apparently:

if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) {
      _isMobile = true;
    }

I'm wondering whether it's because I commented out the polyfill or if it's a deeper issue of aframe trying to do a device check in the browser and not being able to because it's inside react-native. I don't know enough about the internals to work it out - is this something that will require a major PR for aframe-react?

[fuleinist]

@LithodomosVR this error remind me as I used to have similar ones if I tried to force enter VR mode on desktop Chrome in mobile test mode. However still have no clue what could be the cause iin you app. I've left you a comment in SO and will wait for your test result.

[bnjm]

Anyone still interested in this? Looks like this project could be used to take care of the OpenGL bindings: https://github.com/react-community/react-native-webgl

[milcktoast]

There is GLView in the Expo React Native framework:

A View that acts as an OpenGL ES render target. On mounting, an OpenGL ES context is created. Its drawing buffer is presented as the contents of the View every frame.

[lokiiarora]

Any updates on this?