Three.JS model viewer feasible in phonegap? - ios

I'm trying to make a very simple 3D model viewer in a phonegap app for use on an iPhone 4. I'm using three.js which is working fine when I make a simple website. The problem is that when I try it out on the phone the 3D object doesn't appear. Simple geometrical shapes like a cube and cylinder will load on the canvas but obj files won't.
I use an objLoader to bring in the .obj file and have all relevant files in the same directory in the app just in case. I think the problem might lie with using webGL on iOS but I'm not really sure.
Thanks very much for your help. If anyone has any suggestions for building a model viewer in phonegap for display in iOS I'd be delighted to hear them.

As very few mobile browsers support WebGL at the moment I opted to use the canvas to render the 3D models. I used a simple web 3D object viewer called JSC3D to create a model viewer in PhoneGap on iOS. It can use webGL but I just went with rendering using the 2D canvas.
I tested my app on an iPhone 4 and the result was that the model took between 2 and 5 seconds to load up and when you go to rotate the object it takes some time to redraw it depending on how complex it is. While not the most satisfactory result it did do the job. I'm going to try it out on a more advanced phone in Android and I'll let you know the result.

I suggest you try use XDK Intel if you are packaging for iphone but for android use AIDE Phonegap. Make sure you use only var renderer = new THREE.CanvasRenderer();and avoid using
Anything that has to do with WebGL for its not supported on most devices except BB Playbook and BB 10.

I think IOS render ability is better than Android, some scene renders well in IOS, but not in the Android.
Usually the movile have more render ability, than tha mobile app. I use the firefox to render the three.js obj demo, it works well. But when I use the webview in the app, it renders nothing.
I've make an Android app to render stl models. First when I use the mobile browser to render the scene, it not render the full scene, and when I remove the shadow effect, it renders. Then I try to use webview with WebGlRenderer or CanvasRenderer, no works. Last I refer to the XWalkView of crosswalk a web engine which can used as an addin of the app, to replace the webview, I also close the shadow effect, I renders well.
You can refer this answer for more info.
Here is the render result.

You definitely should not use WebGL renderer of three.js as it's not supported on iOS. Try Canvas or SVG renderer.

Related

Is Using HTML5 canvas a good idea for Electron.JS?

I want to make an electron app that is similar to scratch in which it uses drag and drop features. I want to make these features using canvas. However, I don't know if this is a good idea as I tried searching it up and never got Electron and HTML5 Canvas in the same sentence.
I'm using canvas for rendering charts in my project and it works correctly. I have been researching a bit and I have not found any better alternative to replace it

View 3D PDF on iOS using objective-c

I have at hand a 3D PDF export using AUTOCAD, has some way to view this file in iOS?
Note that do not want to simply display a common PDF, I want to display a 3D object that is in it.
Any solution with other file formats like 3drw is already of great help.
Edit:
Note: I do not mean the applications that are in the apple store, what
I need is a way to implement the code as necessary to integrate it
into the app I'm working on.
3D PDF viewing on iOS is definitely possible. But it works a bit differently than it does on a PC. When you view a 3D PDF on a PC, Adobe Reader displays both the 2D and 3D portions of the PDF file. On iOS, the 3D portion is viewed using a separate app. CHeck out the free 3D PDF Reader from Tech Soft 3D for this:
https://itunes.apple.com/us/app/3d-pdf-reader

Should I use Quartz or Open GL ES for my drawing app? Or both of them combined?

This is my first iPhone/iPad app :S
It is a drawing app and I would like that user could save the current work and after that continue drawing on that same image (updating).
I already did something based on this and this. This uses Quartz.
So I would have to save it to some format that can be read back into the memory and displayed on the screen for updating (user draws another line or erases some before).
The images would be saved on server and I would like it to be in a format that in future Android devices also can read it (just read it, not update).
Also, a lot of transformations is going to be on that images after they are finished drawing (scale, projection...). I found that Open GL ES is great for this transformations --> Open GL ES
So the question is,
should I use Quartz for drawing since it is simple and convert the image somehow to Open GL because Open GL is good for transformations? And in which format to save the drawing so it could be used latter for updating and that Android devices could also read it?
To port to android latter Quartz won't help you, openGL is faster, in this case more portable and great for transformations (and effects, even better with ES 2.0 and shaders).
However if you haven't used openGL yet it's quite a different journey from quartz, so maybe read some tutorials on programming in openGL first to get a fell for it.

How to make a screenshot of OpenGl ES on top of the live preview camera in iOS (Augmented Reality app)?

I am a very beginner in Objective-C and iOS programming. I spent a month to find out how to show a 3D model using OpenGL ES (version 1.1) on top of the live camera preview by using AvFoundation. I am doing a kind of augmented reality application on iPad. I process the input frames and show 3D object overlay with the camera preview in realtime. These was fine because there are so many site and tutorial about these things (Thanks to this website as well).
Now, I want to make a screen capture of the whole screen (the model with camera preview as the background) as the image and show in the next screen. I found a really good demonstration here, http://cocoacoderblog.com/2011/03/30/screenshots-a-legal-way-to-get-screenshots/. He did everything I want to do. But, as I said before, I am so beginner and don't understand the whole project without explanation in details. So, I'm stuck for a while because I don't know how to implement this.
Does anybody know any of good tutorial or any kind of source in this topic or any suggestion that I should learn more in order to do this screen capture? This will help me a lot to moving on.
Thank you in advance.
I'm currently attempting to solve this same problem to allow a user to take a screenshot of an Augmented Reality app. (We use Qualcomm's AR SDK plugged into Unity 3D to make our AR apps, which saved me from ever having to learn how to programmatically render OpenGL models)
For my solution I am first looking at implementing the second answer found here: How to take a screenshot programmatically
Barring that I will have to re-engineer the "Combined Screenshots" method found in CocoaCoder's Screenshots app.
I'll check back in when I figure out which one works better.
Here are 3 very helpful links to capture screenshot:
OpenGL ES View Snapshot
How to capture video frames from the camera as images using AV Foundation
How do I take a screenshot of my app that contains both UIKit and Camera elements
Enjoy

Language/Program for simple 2D animation

I want to write something like this: http://www.youtube.com/watch?v=5S4KpCkHDqM I mean, I want to have 2D gaming space, but to have stylized as 3D, so my characters will move on the surface, but will have nice 3D effect. I wounder if Flash/ActionScript will do? Any other suggestions?
Flash and Actionscript can definitely accomplish this. There are at least 2 ways to accomplish the 3D look in 2D space.
The easiest is to do as #Blender said in the comments. Render some 3D images and bring them into flash. There are easy tools in flash to create animated sprites, including a native movieClip class, that has a timeline to play back frame-based animation.
But there is also full 3D in flash. You can bring low-polygon 3D models into flash easily using free and open source libraries such as Away3d (away3d.org) and papervision (papervision3d.org). Presently, flash player 10 has runs slowly when using these libraries.
But Adobe is about to release a new version of the player (version 11) that supports open GL for 3D and has significant performance improvements.
Away3D and papervision have already developed version of their libraries to support the new beta player and openGL.
So to summarize, yes - flash can make a game like that. It is currently the best way to develop games that are intended to be played in a browser. Because at least for the time being it has the most widespread support, and is stable between platforms and browsers.
Your example is pretty much entirely 2D: it just uses effects like shadows, animation and parallax scrolling between layers to achieve a (mildly) 3D effect.
As Plastic Sturgeon and Blender have pointed out, Blender might help for creating your assets - but it has a pretty steep learning curve, and you might be more comfortable 'faking it' in Adobe Illustrator or Photoshop if you've used those before.
Once you've created your assets, you need a platform to put together your gameplay: Flash is one possibility, but you could also look at Unity3D, which has good support for 2D and 3D, and has a browser plug-in if you want to make your game web-based.
If you're looking for a java-based solution, you could try Processing, which is cross-platform, and can export to javascript for web deployment. It's not exactly designed as a gaming environment, but it might do the trick - and it's free.
Hope this helps.

Resources