When I import my model (.fbx) to draw a texture in the substance painter and export it to the .gltf format, I find that the metal I paint is gone and replaced by the shiny black, and then when I put the exported model in the three.js/examples/webgl_load_gltf.html case, I found that my model was dark and needed to be added a directLight can only see a point, the effect is not very good, but the case of importing the painter painter does not have any problems.
It looks as good as the model in the original example.
I would like to know what causes this two problems.
The problem is that your demo has only a single instance of HemisphereLight. The materials of your meshes are instances of MeshStandardMaterial with metalness values of 1.0. Since hemisphere lights are sources of indirect diffuse light, they are not reflected by pure metals. More information about this topic in: https://github.com/mrdoob/three.js/issues/9228
You should use a different light setting e.g. add a directional light. Or try to fix the material settings in your model.
DUDE I JUST WENT THROUGH THIS, it was a nightmare. I had a very shiny gold car with windows and all types of shit going on. Looked great as a USDZ! Then tried to export GLTF. Black.
Turned off all channels except normal and base color, looked fine.
Then went and turned on metallic and again black.
Then i realized "Oh, I didn't bake my mesh maps" like an idiot. Boom, metallic, roughness and opacity all suddenly worked.
Always ALWAYS bake your mesh maps. Substance is pointless without it.
I know this is 2 years old but apparently all the early adopters of Substance figured this out long ago, so this is for you, random person just learning this stuff. AR is only going to become more in demand, thank god I know how to make it cross-platform now.
Related
I worked with a freelancer to create a few 3D models and I'm now trying to apply materials to them in Xcode, but some of the models are behaving weirdly. When I import the .dae file, instead of the default gray color models usually have, they are part green, part black, and part transparent. When I try to apply a material, the material only applies to the green parts, and any color seems to blend with the green.
The freelancer is at a loss because he says there shouldn't be anything different about the models that are working and the ones that aren't.
I've attached a screenshot of one of the broken models and one of the working ones, both with the same material applied.
Any help would be much appreciated!
I tried playing around with different material settings and searching for materials that were secretly applied to broken model, but to no avail.
I fixed this issue by removing a Colors item that was in Geometry Sources. I'm still not sure exactly what it is (I'm a SceneKit noob), but removing it did the trick.
This answer is just to illustrate the issue you might have with the texture coordinates. If you use one single color and not textures, you'll be good. But if you plan to add some texturing, you might want to unwrap your model in a different way. the following images should illustrate that.
This model shows texture coordinates that looks like a perspective projection and you loose a lot of space. It cannot be textured in a good manner. it should be unwrapped differently (illustration from Blender).
This model here is perfectly unwrapped with non overlapping textures and alomst every free space on the image texture is used for anything (illustration from Blender).
hope I could help in some manner.
I'm about to make a 3D Scene in Unity, where you can move through a house.
But right now I'm stuck with the lighting of the scene. What I wanted to try is to bake my directional light (Sun) into the Scene. But right there is my first problem:
If I didn't bake something (clear baked data) it looks quite good, but after baking, the Scene is really dark, what I don't understand, because I set Environment Light and before the Bake everything just looks fine.
Here are some samples before the baking, of the settings and after the baking:
notBaked(no Lightmaps!)-LightingSettings-Scene
notBaked(no Lightmaps!)-LightingSettings-Environment
not Baked(no Lightmps!)-DirectionalLight(Sun)
while Baking - ReflectionProbeSettings
Baked Light
As you can see, the Scene gets really dark and it seems that for any reason, the ambient Light/Environment Light is missing after the bake.
Another problem is the warning of overlapping UV's. What's the reason for that and how can I fix it?
The aim of the project is to also publish it as a WebGL version. But if I build it as a WebGL version and try it on my server, the textures doesn't work. I looked up in the internet and read that directional lightmaps doesn't work for WebGL. But if I switched the directional Mode to non-Directional and replaced the directional light and only baked a Point light, the Texturemaps also didn't work in WebGL.. Does anybody know, how to use lightmaps for WebGL?
Thanks a lot!!
After simplifying glb successfully with the answer in this post.
The textures in are not being applied to the model any more (it appears completely black and unreflective(no material)
How would I programmatically get the textures to work with this new simplified geometry?
I think its something to do with the uv's but im not to sure how to have it work according to simplified geometry, if even possible.
THREE.SimplifyModifier currently does not preserve UVs in the geometry, which you'll need for textures to work. See: https://github.com/mrdoob/three.js/issues/14058. There is a workaround suggested in that issue (via changes to SimplifyModifier) but as discussed there, some artifacts will likely be visible in the result. If you can do the simplification in Blender or another modeling tool, you may have more control over the process and can get better results.
I'm currently rendering a skybox to a THREE.CubeCamera target and am then using that target as the environment map on a material. The idea being that I want to have the colour of a cube affected by the colour of the sky around it, though not fully reflecting it (like how a white matte cube would look in the real world).
For example, here is what I have so far applying the environment map to a THREE.LambertMaterial or THREE.PhongMaterial with reflectivity set to 0.7 (same results):
Notice in the first image that the horizon line is clearly visible (this is at sunset when it's most obvious) and that the material is very reflective. The second image shows the same visible horizon line, which moves with the camera as you orbit. The third image shows the box at midday with blue sky above it (notice how the blue is reflected very strongly).
The effect I'm trying to aim for is a duller, perhaps blurred representation of what we can already see working here. I want the sky to affect the cube but I don't want to fully reflect it, instead I want each side of the cube to have a much more subtle effect without a visible horizon line.
I've experimented with the reflection property of the materials without much luck. Yes, it reduces the reflection effect but it also removes most of the colouring taken from the skybox. I've also tried the shininess property of THREE.PhongMaterial but that didn't seem to do much, if anything.
I understand that environment maps are meant to be reflections, however my hope is that there is a way to achieve what I'm after. I want a reflection of the sky, I just need it to be much less precise and instead more blurred / matte.
What could I do to achieve this?
I achieve this writing my own custom shader based on physically based rendering shading model.
I use cook-torrance model that consider roughness of the material for specular contribution. It's not an easy argument that I can talk in this answer, you can find great references here http://graphicrants.blogspot.it/ at the specular BRDF article.
In this question you can find how I achieve the blurry reflection depending on material roughness.
Hope it can help.
I solved this by passing a different set of textures that were blurred to be the cubemap for the object.
I've got a question regarding the exporting of Blender scenes to be loaded into Three.js, with the focus on lighting.
We're using Blender to create our 3D environments, interiors in this case. In Blender the scenes look like they should. Here's an example I've put together with a single point light with Energy: 50 and Distance: 30. I've made these values so high so the problem is visible clearly inside Three.js. Here is a screen from blender:
Now, when exported using the Three.js exporter for Blender and imported using the SceneLoader, the result in Three.js is:
Don't might the ugly brightness, the problem is the fact that it lights only parts of the scene. It looks like Three.js incorrectly lights different triangles of an object. Our 3D artist makes the objects in Blender using quads.
To make sure the problem lies not within the exporting and importing process, I've created a PointLight within Three with the same position, distance and brightness. This gives the exact same result as above.
I've tried using different lights as well. So far only the Sun light (Directional in Three) seems to give the correct result. The other lights don't work at all when exported from blender, but that is a problem outside of the scope of this post.
My question is: Is it in fact the triangles Three.js creates that cause the problem? Would making the triangles in Blender to begin with fix this problem, or is there a different approach that might fix the problem?
EDIT: Using Phong mats fixed it, but lighting seems incorrectly divided over objects individually: