Q3D V-2.4 [3D Physics + Skeletal Animation UPDATE]

tunepunk,

The artwork in your game is beautiful!

I think you are probably right about doing an isometric view in 3D. The game seems like a really good candidate for it. Just switch the camera to orthogonal mode and you would be all set.

FWIW, 3D models are loaded into memory once, then reused on different layouts. The first load can take a while, so just make sure you have some sort of loading screen with callbacks to keep track of which objects have already loaded.

cjbruce I managed to import some of my models to try out. So far so good, but it seems all imported 3D objects and the camera are using a platform/side view angle. This get very confusing when you try to build a level as the axis doesn't compute in my brain. in a top down view Z should be up down movement on screen, and y would be closer/further to camera. Do you know of any way to change those settings? I think it's important i get this right otherwise the physics of the arrows are going to go bonkers.

tunepunk

I found this a little frustrating too. You will need to play around with the "Model properties" until everything you import comes in looking right. I recommend pulling in a shape that looks different in x,y,z (i.e. the Blender monkey with a missing ear) so you can tell what is happening. Section 1.2 (pages 12-20) of the Q3D manual has a pretty good discussion of getting sizing right when importing models, but it kind of glosses over the fact that rotation is critically important to get right before you start messing with the size.

https://www.dropbox.com/s/vpn0mbh4m7lo9zj/Q3D%20Users%20Manual%20V2-4_2.docx?dl=0

Under "Model properties":

1. Make sure Model Rotation X, Model Rotation Y, and Model Rotation Z are set correctly first.

2. Once the Model Rotation is set correctly, then you can work on Model Fit, Model Placement, and Model Scale.

I believe you can also do this in Blender during the export dialog, but this wasn't part of my workflow.

Also, are you exporting .json or .obj?

cjbruce after a bit if playing around i managed to get it right last night. I'm exporting obj with Maya LT. and directly importing the obj file, placed them upside down.... turning on physics for the object helped me correct the orientation and camera because i could see which way it was falling. LOL.

tunepunk

Nice!

I'm using both .obj and three.js .json files in my project. I found that .json worked better for terrain because I could import materials and textures as part of the .json file, but I had a little easier time with .obj files for anything that I needed to reskin (i.e. same wheel, different color).

Also, the .json files were coming in with lighting information prebaked, which looked weird as the sunlight shifted in the scene. I'm sure there is a solution to this problem, but I eventually ended up just leaving the sunlight where it was and living with it.

Do you know if Maya LT has a three.js exporter available? Are you finding that it does what you need it to do (as opposed to the full version of Maya)? I'm considering looking at it because our students are trained in Maya and I was hoping to at least be familiar with the program.

cjbruce Yes I've been using Full Maya for 15+ years, but when it comes to game development Maya LT is enough. The only thing Maya LT lacks is renderer, (which you probably only need if you're doing cutscenes, or movies and stuff like that). It has a built in shader builder as well, that supports PBS etc.

Maya LT is pretty much just a bit slimmed down version of Full Maya, and targeted for indie game developers so it should be fine.

I'm pretty sure there is a three.js exporter for Maya LT but i havn't tried it.

Found this link though, so it seems three provides exporter.

http://stackoverflow.com/questions/15117186/maya-export-to-three-js-json

Currently my next step will be to clean up some meshes to use my current models with Q3D, and as I'm not using any advanced shaders, the only thing i will bake is Ambient occlusion in the textures, as I'm going for a flat shaded look.

QuaziGNRLnose Every time I try to use a json model file with animations I get this error message. Do you have any guide on how to import animations? I'm using clara.io to generate the json file. Is you plugin using an old deprecated version of Three? Any help appreciated.

Need help on how to import animations.

This is the error message I get.

tunepunk

It uses version 71.

I'm pretty sure they made some change to the file format, you'll have to use the old blender exporter in the 71 .zip file until I update.

https://github.com/mrdoob/three.js/releases?after=r72

There should be the relevant exporters in "three.js-master\utils\exporters"

Because of the way three.js is maintained, it makes it very difficult to continually update the version because of massive breaking changes each revision introduces that require large amounts of code to be rewritten.

QuaziGNRLnose Thanks, I managed to get the animations working with the maya exporter. Now I only need to figure out how to have multiple animations in one json file, for tweening/animation blending. could you provide new links to examples as dropbox links are broken? I want to check out mobile morph demo, and get some more insight how to optimize for mobile.

I managed to solve it. It was pretty easy. I exported a json file with all the animations in one long animation. Then I just opened edited the json file and renamed the frames. frame1-4 idle, frame 5-9 walk, frame 10-13 death etc etc.

"morphTargets": [{ "name": "frame_1", < this was the only thing I hade to rename in the json file to have multiple animations. frame_1 was renamed to walk_1 etc etc.

Might be useful for anyone who is using an exporter that doesn't support multiple animations. Renaming the different frames is enough.

tunepunk

Nice!

3D is pretty taxing for mobile, but the best way to get increased performance is to avoid bone based animations and use morph targets (these run almost entirely in shaders so they can be quite fast), and to cap the resolution to something lower than the native screen resolution (in Q3D Master) since mobile GPUs lack the performance to keep up.

I managed to get about 40-60 fps now on pretty old midrange phone. with shadows on. with a bit lower resolution. A bit of tricks and optimizations I can probably get it a bit higher. A have a quistion about the raycaster, I can't direct it in any angle? or do i have to parent it to another object?

tunepunk

You can't direct it using euler angles, however you can set a direction with an XYZ vector which is essentially the same thing. You can use a dummy Q3D point, or the Q3D model you want it to rotate with it, e.g. if you want to specify euler angles set the raycasters direction to x,y,z=Q3Dpoint.nTx,Q3Dpoint.nTy,Q3Dpoint.nTz. and it's position to the object position. Just make sure its on an objects that isn't a child of other objects.

I managed to solve it. It was pretty easy. I exported a json file with all the animations in one long animation. Then I just opened edited the json file and renamed the frames. frame1-4 idle, frame 5-9 walk, frame 10-13 death etc etc.

"morphTargets": [{ > "name": "frame_1", < this was the only thing I hade to rename in the json file to have multiple animations. frame_1 was renamed to walk_1 etc etc.

Might be useful for anyone who is using an exporter that doesn't support multiple animations. Renaming the different frames is enough.

tunepunk

Would you mind posting a quick breakdown of your workflow from Maya to Q3D for morph animations? I'm working with an artist now, and we need to go from Maya bone animation to Q3D morph animation for midrange mobile devices.

tunepunk

Nice!

3D is pretty taxing for mobile, but the best way to get increased performance is to avoid bone based animations and use morph targets (these run almost entirely in shaders so they can be quite fast), and to cap the resolution to something lower than the native screen resolution (in Q3D Master) since mobile GPUs lack the performance to keep up.

For anyone who is interested, here is a modified version of the morph animation test. I got rid of the 5 point lights, and turned shadows off for the directional light.

https://dl.dropboxusercontent.com/u/55106174/morphanimationtest/index.html

Here is the .capx for the test:

https://dl.dropboxusercontent.com/u/55106174/morphanimationtest.capx

You can tap the text to get rid of models one at a time until the framerate becomes acceptable on your device. On a 2-year-old iPhone 6, I can have 25 animated models onscreen at 60 fps. On a Nexus 5, I can run about 4 animated models at an acceptable framerate.