I have a bit of experience with React JS & React Native. Now I have just started with React VR. From what I have learnt so far, one can use React VR to create virtual reality experiences in web pages.
I have a web application which uses Three JS to create a virtual walkthrough (using panoramic images). I wanted to know whether it is possible to create a native mobile app for the same using React VR and React Native.
My main reason for wanting to do this is to harness the power of the native hardware for better performance of the app. I hope to keep most of the existing Three JS code intact by making it work with React VR.
React VR is essentially a React-ive wrapper for Three.js. So, yes, you can keep most of your Three.js code intact and pop it into an a React VR app. You can simply pop your Three.js code into the Client.js file of a React VR app.
Some of the newer phones are WebVR friendly (e.g. Google Pixel), and from my experience, work well with React VR apps. To this end, this does leverage the native hardware.
However, as for combining React VR and React Native, in short, its not possible. React VR makes Views renderable via WebGl and leverages the WebVR API that many browsers are becoming equipped with these days.
React Native on the other hand takes Views and renders them on a device as Java (android) or objective-C (iOS) Views. In short, React Native, at the time of writing this answer, does not have VR capabilities, and cannot be combined with React VR.
Check out this informative link for a more detailed discussion.
Related
I am developing react native app. I wanted to know about design screens that is automatically adjust to iOS and android devices. For example we are using auto layout for iOS apps which gives consistent view for all iPhones and iPads.
I am little bit confused about designing screens for android and iPhones. I know how to design UI for Native platform that is consistent for all devices.
Yes, you can create UI for both Android and IOS devices using the same js file.
Mainly u need to have a good idea about flexbox. It is the base of creating responsive UI for compatible all devices. Follow below tutorials and get a good idea about flexbox and design responsive UI
https://facebook.github.io/react-native/docs/flexbox
https://medium.com/the-react-native-log/a-mini-course-on-react-native-flexbox-2832a1ccc6
and You can find a good example of components https://github.com/jondot/awesome-react-native here.
I'm building an application where i render many images in swiper, flatlist and i'm using React Native Image Component, but the component loads the images very fast on Android and very slow on iOS, also the caching is better on android than ios although i use force-cache prop, is there any way to improve image performance for ios ?!
You might want to use react-native-web-image, it often gives a way faster experience.
I'm making a VR application. So far I've done the desktop version. For mobiles devices I plan to use google cardboard with a stereoEffect, but I'm using a cssRenderer and a webglRenderer together.
My question is how do I use stereoEffect and CSS3DStereoEffect together?
Here's an inline link to my demo app.
I would like to use interactive 3D models in a web page. The required functionality is:
Import dxf file which defines & displays a room.
Add/move prebuilt objects from javascript
Add/move lamp which cast shadows from javascript
Return room dimensions to javascript
Return object positions to javascript
Can I import dxf files into any WebGL engine?
I have a small repeat user base so a browser installation is no problem at all. Is there any plugin technology I could use? Java applets? Unity? Can I use an OpenGL engine as a plugin? How about a java3d applet?
I will start with desktop but would need to be targeting tablets soon and mobiles in two years or so.
I am becoming convinced I will need to hire an expert to write this but I want to understand the options. Can you recommend a suitable technology?
I think WebGL is an excellent choice for this application; the graphics functions you describe are well within its capabilities. I can't comment on model loading, though, as I'm not familiar with WebGL engines.
However, mobile is a big wrinkle. Regarding the techniques you mention:
WebGL is supported in Chrome and Firefox for Android. On iOS, Mobile Safari does not enable WebGL, but an implementation exists (used strictly for in-app ads), so it is likely that there may be broader WebGL support in the future (possibly requiring a custom web view wrapper to enable it).
Java applets are not supported by any browser on either Android or iOS.
Unity is a viable choice; the Unity Web Player browser plugin allows embedding Unity content in a web page. However, there is no such plugin for mobile-OS devices; Unity content may be compiled into a application for iOS or Android but it cannot be viewed within a web page.
News as of August 2014: Unity has announced that the upcoming Unity 5 will include publishing to JavaScript + WebGL (no plugin required). Assuming this works as promised, you can use Unity if your target platform has a browser with WebGL support.
So, if you absolutely need cross-platform 3D including iOS right now, Unity is where it's at, but WebGL is a good choice for desktop and Android now and likely to improve on mobile in the future, and is the only way to embed 3D in a web page, not an app across desktop and Android.
WebGL is not the only way to embed 3D in a web page - see phoria.js:
http://www.kevs3d.co.uk/dev/phoria/
https://github.com/kevinroast/phoria.js
Also three.js has a canvas rendering for without web-gl.
Phoria.js and others like it will work on iPhone/iPad and Android phones that don't support web-gl. Of course, the performance is MUCH lower but if you don't have complex models and want it to work everywhere...
I would lie to build a desktop app with Titanium and i thought that the API would give me access to a native ui for desktop. But reading the documentation it seems like the native ui api is directed only to mobile development, while for desktop you have to build the UI yourself in html and js and it will not be native code (with the risk of low performance animation and graphic).
Am i right?
Thanks
Yes you are right. Titanium Desktop only WebKit UI is possible: HTML5+js and/or PHP/Ruby/Python. You can see Tweetanium on git to see how Desktop/Mobile application can be designed. But simply also in mobile you can use a webkit view... It'sn't fast as native UI on mobile but it makes your UI code reusable in both world.
This is exactly what happens on PhoneGap project.