exporting Bump and Specular maps - three.js

I have seen the new MeshPhongMaterial Bump and Specular highlights, and can't wait to get them into my game engine.
Currently i am using the python converter to convert an OBJ file into a .js file. However release 51 exporter doesn't seem to handle these materials.
I am also concerned that most of my meshes have 2 or more materials, and are using MeshFaceMaterial.
Will changing to MeshPhongMaterial break the multiple textures?
Should i use a different exporter to achieve this?
What is the best workflow to convert from .3ds files with Bump and Specular maps?
Should i wait a while for this topic to settle down?

I'm assuming you already use a diffuse texture (Lambert material perhaps?) and as such have also exported texture coordinates.
You can add mapBump and mapSpecular properties manually to the materials in question in the .js model file. They are strings pointing to the textures just like mapDiffuse. Also change the shading property to "Phong", and you should be good to go, though you might also want to tweak specularCoef and colorSpecular material properties.
Simply switching material type won't break the face materials.

Related

Issues in THREEJS with converted GLTF 2.0 models

I have over 100k of GLTF 1.0 models. We are in the process of converting to 2.0, and is hitting a brick wall.
The source models are Collada at first, and we used Collada2GLTF converter to generate the GLTF files. But we did do this using the KHR_materials_common setting, which created perfect results for us.
But now we want to convert the GLTF files to 2.0, and this is proven quite problematic. The process works fine, but the converted model gets the 'KHR_materials_common' extension. It is through that material that the texture is bound.
As we are using the THREE JS renderer, its GLTF loader does not yet support this extension, and no texture is displayed. It only gets a totally black surface.
I have given it (a quick) got to add that extension locally, using MeshBasicMaterial, but with no good result.
So, my question is, what are my options, if any?
Is there a way to convert and remove the KHR_materials_common from the GLTF 1.0 source?
Can the conversion process (gltf-pipeline) remove the extension?
Is there any work in progress to add the support in THREEJS GLTFLoader?
Conversion from source to GLTF 2.0 works, but I do not have all sources available. Some are customers property, and we do not store that.
Reversing back to COLLADA is not supported (here)
A quick summary of the material types in glTF 1.0 and glTF 2.0, as of late 2018:
glTF 1.0
(Core): Custom GLSL shaders.
KHR_materials_common: Blinn, Phong, Lambert, and Constant/unlit.
glTF 2.0
(Core): Metal/rough PBR.
KHR_materials_pbrSpecularGlossiness: Spec/gloss PBR.
KHR_materials_unlit: Constant/unlit.
KHR_techniques_webgl: Custom GLSL shaders. (in progress)
Note that there are no blinn, phong, or lambert materials in glTF 2.0. Do you know what types of materials, or what types of textures, are used by your 100,000 models? That will help to answer which glTF 2.0 material you should be using.
Three.js implements all of the glTF 2.0 material options, except KHR_techniques_webgl, for which the specification is not complete. Three.js does not implement KHR_materials_common, because it isn't part of glTF 2.0.
Most likely, if you used unlit materials in glTF 1.0, you should use the KHR_materials_unlit extension in glTF 2.0. If you used blinn, phong, or lambert, you should use metal/rough or spec/gloss PBR in glTF 2.0. The PBR conversion of those materials should look quite good, although if you're looking for an exact match of the legacy materials, you may need to consider the custom GLSL extension.
I don't think glTF-Pipeline can do this conversion, but it would be well worth filing an issue there (it looks like you already have?) to request it. If not, the conversion is probably something you can implement yourself. It's much easier, for example, than converting anything to/from a GLSL material.

Blender MakeHuman to Three.js

I'm trying to integrate a animated 3D character in a Web navigator.
I use MakeHuman 1.02 to create a character which I import in Blender 2.74 in .mhx format.
I retarget to a BVH using the MakeWalk plugin for Blender. It's for the motion.
When I try to export the character in .json format (three.js), the following error appears :
MakeHuman is not a valid mesh object.
A mesh object is an object that we can modify properties or vertices, isn't it ?
I try others format like .dae format (collada) but it seems that the navigators doesn't find the skeleton and the textures of the character (even if they are in the same directory) necessary for the character's motion.
How to get the character like a mesh object ? Or somebody knows another process to success ?
Like Erica pointed out, you need to have a mesh selected to export it. The problem with this is it doesn't seem to work if you have multiple meshes. Only one will export. This is a problem when using MakeHuman because their clothes are separate meshes.
One way to fix this is to select all meshes and combine them into one (I believe that's CTRL + J). However, you'd have to somehow merge all your texture files into one big one and I have no idea how to do that.
What I do is to export the entire scene. Then it doesn't matter what is selected. All meshes get exported. You can load it using either the ColladaLoader, which I would recommend since you're retargeting to a BVH (worked great for me), or the new ObjectLoader.
If you have your own Scene object on the page that you want to use, you can still load the scene created by the exporter, traverse it to get the items you care about, and add those items to your scene that will display on the page.

3ds max material shows in render but not vrml export

I created a model of a bottle in 3ds max, and used a raytrace material (in Materials -> Standard -> Raytrace, not the raytrace map). Everything looks great in the 3ds max render, but when exported to vrml, all that shows up is the default blue colour as if it had no material assigned to it!
I have exported to vrml using "standard" materials with no problems, so is this material type unsupported in vrml or is there actually a way to get it to show up?
Thanks
edit: I'm in 3ds max 2013, in case that's relevant at all
It is unsupported. Usually exporters only handles certain materials during export (typically "standard" materials with bitmap textures).
Also raytrace material is not a material usually used in realtime applications, so there is no reason for them to support it.
Also rendering output and export output is two totally different things, so you cannot compare them, since the render output is made by the render engine you use, and the export output is dependent on both the format and the software used to display the output geometry.

How do I convert a ms3d model to three.js?

I'm trying to convert this model to the three.js model format:
http://tf3dm.com/3d-model/ninja-48864.html
Here's what i've tried so far:
I've imported the ms3d file in blender using the default addon. In blender, animations and mesh look correct; however, bones are only rendered as lines. Then I exported it to js using the three.js exporter. This results in a correct mesh, but the animation is not correctly exported. Only bone positions are exported (which are only rarely used in this specific model), NO rotations at all (except for a few identity quaternions).
It seems I have to modify the model in blender somehow, but since I'm a complete novice in 3d modelling, I'm kind of lost. I've also looked at other questions regarding blender+three.js but none of the tips (apply location/rotation/scale etc.) made a difference. It might also be a bug in the three.js exporter.
Can anybody help me do the conversion, one way or the other?
A nice Python utility is available for converting ms3d format to JSON format.
The link is: https://github.com/pyalot/parse-3d-files/blob/master/ms3d/convert.py
You can easily render this JSON model using THREE.JSONLoader() in three.js
Thanks.

How to import Blender 3D animation to iPhone OpenGL ES?

I am trying to do animations on iPhone using OpenGL ES. I am able to do the animation in Blender 3D software. I can export as a .obj file from Blender to OpenGL and it works on iPhone.
But I am not able to export my animation work from Blender 3D to OpenGL. Can anyone please help me to solve this?
If you have a look at this article by Jeff LaMarche, you'll find a blender script that will output a 3D model to a C header file. There's also a followup article that improves upon the aforementioned script.
After you've run the script, it's as simple as including the header in your source, and passing the array of vertices through your drawing function. Ideally you'd want a method of loading arbitrary model files at runtime, but for prototyping this method is the simplest to implement.
Seeing as you already have a method of importing models (obj) then the above may not apply. However, the advantage of using a blender script is that you can then modify the script to suit your own needs, perhaps also exporting bone information or model keyframes.
Well first off, I wouldn't recommend .obj for this purpose since the obj file format doesn't support animation, only static 3D models. So you'll need to export the animation data as a separate file that you load at the same time as the obj.
Which file format I would recommend depends on what exactly your animations are. I don't remember off the top of my head what file formats Blender supports, but as I recall it does not export Collada files with animation, which would be the most general recommendation. Other options would be md2 for character animations, or 3ds for simple "rigid objects moving around" animations. I think Blender's FBX exporter will work, although that file format may be too complicated for your needs.
That said, and assuming you only need simple rigid object movements, you could use .obj for the 3D model shapes and then write a simple Python script to export a file from Blender that has at the keyframes listed, with the frame, position, and rotation for each keyframe. Then load that data in your code and play back those keyframes on the 3D model.
This is an old question and since then some new iOS frameworks have been released such as GLKit. I recommend relying on them as much as possible when you can, since they take care of many inherent conversions like this, though I haven't researched the specifics. Also, while not on iOS, the new Scene Graph technology for OS X (which will likely arrive on iOS) in the future, take all this quite a bit further and a crafty individual could do some conversions with that tool and then take the output to iOS.
Also have a look at SIO2.
I haven't used recent versions of Blender, but my understanding is that it supports exporting mesh animation as a sequence of .obj files. If you can already display a single .obj in your app, then displaying several of them one after another will achieve what you want.
Now, note that this is not the most efficient form to export this type of animation, since each .obj file will have a lot of duplicated info. If your mesh stays fixed over time (i.e. only the vertices move with the polygon structure, uv coords, etc. all fixed) then you can just import the entire first .obj and from the rest just read the vertex array.
If you wanted to optimize this even more, you could compress the vertex arrays so that you only store the differences from the previous frame of the animation.
Edit: I see that Blender 2.59 has export to COLLADA. According to the Blender manual, you can export object transformations, and you can also export baked animation for rigged objects. The benefit for you in supporting the COLLADA format in your iPhone app is that you are free to switch between animation tools, since most of them export this format.

Resources