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.
Related
I am trying to figure out how to use a blend model in my three.js code.
My code looks like the following:
const loader = new THREE.JSONLoader();
loader.load( "models/test.blend", function(geometry){
let material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Nothing is showing. Every tutorial I can find directs me here which is now deprecated and I cannot find anything in the docs.
I have also tried using a dae file and followed the answer here, but this didn't work either. I used the new THREE.ColladaLoader(); to try and load this file.
read this
specifically it addresses a tool :
https://github.com/KhronosGroup/glTF-Blender-Exporter
Loading 3D models
3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although three.js provides many loaders, choosing the right format and workflow will save time and frustration later on. Some formats are difficult to work with, inefficient for realtime experiences, or simply not fully supported at this time.
This guide provides a workflow recommended for most users, and suggestions for what to try if things don't go as expected.
Before we start
If you're new to running a local server, begin with how to run things locally first. Many common errors viewing 3D models can be avoided by hosting files correctly.
Recommended workflow
Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.
this is from the above link and the THREE.js documentation. in it it explains that they deprecated that to increase workflow productivity, which means it wasn't working very well anyway....
the link you provided has substitute resources for exporting blender models as glTF which is recommended for transmission due to its compact size and speed
I can make gltf files with the collada to gltf converter.
But is there a way to reverse this?
UPDATE - October 2019 - Blender 2.80 has shipped with full glTF 2.0 import/export capability. It also has COLLADA import/export capability, so can be used to convert one to the other.
UPDATE - November 2018 rewrote answer for glTF version 2.0, which has almost completely replaced 1.0 in the time since this question was originally asked.
glTF 2.0 can be processed by a variety of tools, many of which are listed on the glTF Tools section of the official Khronos glTF README.
Older glTF 1.0
While there are numerous command-line utilities for converting to glTF, the options are much more limited going the other way, from glTF to COLLADA or anything else. One thing to understand about this is that glTF is intended to be a runtime delivery format, not an interchange format like COLLADA. glTF strives to store its internal data in as close to GPU-ready form as possible, with mesh data organized into data structures that can be used as vertex attributes, and so on. Khronos has a tagline that glTF is "the JPG of 3D" meaning that it has wide distribution to rendering engines of all kinds.
So, importing a glTF into a 3D editing package is something like loading a JPG into a paint program. You can do it, but after the import you want to avoid any unnecessary round-trips to and from the delivery format. So you would use the paint program's native save format (.psd or .xcf etc), or the 3D modeler's native save format, to keep your own editable copy of your work, and ship the exported JPG or PNG or glTF for wide distribution.
Even so, I do expect more importers to become available as time goes on. glTF version 1.0 had an internal structure that made this quite difficult (its vertex shaders would use swaths of attribute data without explicitly marking them as positions or normals, etc.) glTF 2.0 replaced those custom shaders with modern pbr pipeline assets, with clearly marked mesh position, normal, and other data, opening the door for future import tools and utilities of all kinds.
Iv'e tried every setting of so many exporters to get this to work, the blacktowers modified exporter for three.js, Inka3d, clara.io and online converters, and trying opening the FBX with animation into blender to no avil.
The FBX has animation and plays on websites such as clara.io and inside of Maya / 3DS Max, however when exporting the .json or .js it doesn't work inside the online editor or offline editors.
Is there any other way to get Animations with skinned bones / joints from Maya to .js / .json that will work inside of Three.Js?
The other answer is inaccurate. It is possible (and, indeed, common) to export animations and bones to three.js-friendly JSON files, from all the major 3d formats (FBX, DAE, etc.). The most robust and foolproof way seems to be through the JSON exporter in Blender - sometimes it still requires some fidgeting with, but the pipeline is mostly functional in 99% percent of the cases I've seen.
Currently (Jan '16) there is no need to use the blacktower exporter; the standard JSON exporter for Blender works just fine.
This is a good tutorial, although current practices (at least my own) differ slightly and you may have to play with various exporter options to make it work for you. If you're still running into problems, please post a clearer description of your specific issue and I'll try to help you get it working.
None of the JSON formats for ThreeJS support keyframe or bone data I understand. Right now I believe on Collada and possibly the MD* file types can be imported into ThreeJS directly with bone and keyframe data.
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.
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.