Hi everyone, I have a question regarding the texture color when I export babylon from blender. In blender, the 3D avatar looks as the left one in the following image
After exporting the model to .babylon and then load the .babylon file in playground, I got the right one in the following image.
Here is the playground I am playing with 3D avatar from blender | Babylon.js Playground
Can anyone please help to have a look? Thank you
It is usually easier to look at the export log file that is also generated, but looking at the other file:
https://dl.dropboxusercontent.com/s/7tzo5bjthaah5yu/anime%20character(high).babylon
These are the materials:
"materials":[{"name":"eye001.000_baked","id":"eye001.000_baked","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"emissive":[0.8,0.5479,0.492],"roughness":0.2,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4,"emissiveIntensity":1,
"albedoTexture":{"name":"https://dl.dropbox.com/s/oa9001abo8tkqyb/eye001_000_baked_DIFFUSE.jpg","level":1,"hasAlpha":true,"coordinatesMode":0,"uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"wrapU":0,"wrapV":0,"coordinatesIndex":1},"useAlphaFromAlbedoTexture":true,
"emissiveTexture":{"name":"https://dl.dropbox.com/s/wip6ds1bzxr728n/eye001_000_baked_EMIT.jpg","level":1,"hasAlpha":true,"coordinatesMode":0,"uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"wrapU":0,"wrapV":0,"coordinatesIndex":1}},
{"name":"eye001.001_baked","id":"eye001.001_baked","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"emissive":[0.8,0.5479,0.492],"roughness":0.2,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4,"emissiveIntensity":1,
"albedoTexture":{"name":"https://dl.dropbox.com/s/gog2l6j7opnt0pe/eye001_001_baked_DIFFUSE.jpg","level":1,"hasAlpha":true,"coordinatesMode":0,"uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"wrapU":0,"wrapV":0,"coordinatesIndex":1},"useAlphaFromAlbedoTexture":true,
"emissiveTexture":{"name":"https://dl.dropbox.com/s/s0c8s0vr5f7ezfr/eye001_001_baked_EMIT.jpg","level":1,"hasAlpha":true,"coordinatesMode":0,"uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"wrapU":0,"wrapV":0,"coordinatesIndex":1}},
{"name":"Material.008","id":"Material.008","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"albedo":[0.8,0.8,0.8],"roughness":0.2,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4},
{"name":"Material.006","id":"Material.006","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"albedo":[0.8,0.8,0.8],"roughness":0.2,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4},
{"name":"Material.009","id":"Material.009","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"albedo":[0.8,0.8,0.8],"roughness":0.2,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4},
{"name":"Material.010","id":"Material.010","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"albedo":[0.8,0.8,0.8],"roughness":0.2,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4},
{"name":"Material.005","id":"Material.005","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"albedo":[0.8,0.8,0.8],"roughness":0.2,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4},
{"name":"anime boy hair_baked","id":"anime boy hair_baked","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"roughness":0.4472,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4,
"albedoTexture":{"name":"https://dl.dropbox.com/s/6xcgsacvdbzkprv/anime_boy_hair_baked_DIFFUSE.jpg","level":1,"hasAlpha":true,"coordinatesMode":0,"uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"wrapU":0,"wrapV":0,"coordinatesIndex":0},"useAlphaFromAlbedoTexture":true,
"reflectivityTexture":{"name":"https://dl.dropbox.com/s/e7qfy3szafagasi/anime_boy_hair_baked_GLOSSY.jpg","level":1,"hasAlpha":true,"coordinatesMode":0,"uOffset":0,"vOffset":0,"uScale":1,"vScale":1,"uAng":0,"vAng":0,"wAng":0,"wrapU":0,"wrapV":0,"coordinatesIndex":0}},
{"name":"Material.002","id":"Material.002","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"albedo":[0.8,0.8,0.8],"roughness":0.2,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4},
{"name":"Material.016","id":"Material.016","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"albedo":[0.8,0.8,0.8],"roughness":0.2,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4},
{"name":"Material.015","id":"Material.015","customType":"BABYLON.PBRMaterial","backFaceCulling":true,"checkReadyOnlyOnce":false,"maxSimultaneousLights":4,"environmentIntensity":1,"emissive":[0.8,0.8,0.8],"roughness":0.2,"alpha":1,"transparencyMode":0,"alphaCutOff":0.4,"emissiveIntensity":6}],
"multiMaterials":[],
The “baked” eye & hair materials have a node in them that has no direct translation, requiring they be baked. The log file would indicate the unsupported node type causing the issue, or at least the first one. The “hair” material actually looks like the skin , so I am not sure what you are doing there.
Your other materials do not have meaningful names, but are largely an off white. If you are staying inside of Blender, name of materials or meshes for that matter are not that important, but once you export to another environment, you need names for stuff for problems just like this.
I have 2 recommendations. First & most important, do not use the playground as the first step in your development process. Use the sandBox.
https://sandbox.babylonjs.com/
Drag or select the .babylon files along with all the texture files into it. You are doing too many things at once. The big advantage of the sandbox, especially for PBR materials, is there are no lights, and THERE IS an environment texture. While lights can be used with PBR, an environment texture is usually the way to go. Your PG does the opposite, and sometimes material problems are actually lighting problems.
The second is give names to stuff that is actually what things are, and post your log file.
Thank you @JCPalmer , great suggestions. I will follow your guidance and give it a try.
In addition, I looked into the log and, yes, there are some records like
WARNING: unsupported node type(ShaderNodeNewGeometry) will trigger baking
WARNING: unsupported node type(ShaderNodeTexNoise) will trigger baking
WARNING: unsupported node type(ShaderNodeBump) will trigger baking
WARNING: unsupported node type(ShaderNodeBsdfTranslucent) will trigger baking
WARNING: unsupported node type(ShaderNodeBsdfTranslucent) will trigger baking
When I drag the file to sandbox, I got
Now that is starting to show what PBR is really capable of, and that lighting / lack of env texture was the problem for the black from your PG. The red and black squares is because the texture file was not available. You sure you did not forget to make it part of your drag, or multi-select if using the dialog box?
Looks shiny, but from above JSON the roughness is set to 0.2. Since I do not see a setting for metallic property, I am guessing you are using a Diffuse node, rather than Principled node. Things can be adjusted from Blender. That is what the sandbox is good for. You cannot go by what Blender shows. Blender is not even all that consistent between EEVE & cycles renderers. FYI, neither are the browsers. Everything has a blue tinge on Chome & Edge.
Your hair may be a total loss with all those unsupported node types. Blender has many more things than BJS. I am guessing you got this model off the net, and did not do it yourself. You might just start over with a principled node. Here is what I am transferring for Blender 2.8. This may be simplified for Ambient Occlusion in the version of the exporter for Blender 2.93 release. You are using 2.83 which is good for now.
You do not need anything other than just the principled if you do not have any texture files. The mapping doc shows all possible connections. Good luck.
Hi @JCPalmer , yes, you are right, texture files were not loaded. Did not realise the sandbox can drop multiple files. After dropping the texture files, I got the following. Though a still looks weird but much better now.
Also, yes, I got this from online. I am very new to this domain and totally have no idea about it. I will try you suggestions.
Thanks a lot.
