In three.js r71 the ambient property has been removed from THREE.Material.
Previously I used ambient to set correct rendering (lighting) effect of the materials that I used on my meshes. Now the appearance of all my meshes changed dramatically.
How can I get my materials rendered exactly as before r71?
Here comes the why...
According to #WestLangley; I quote from his post in the discussion (link from #pprchsvr):
material.ambient was the ambient reflectance of the material. For real-world objects, it should normally match material.color, the diffuse reflectance of the material. (Objects, after all, do not know where the photons came from.)
We chose to simplify the API, and hardwire material.ambient to match material.color. Consequently, material.ambient has been removed.
This means you will no longer be able to set an ambient color that differs from the material color and there is as far as I know no "quick fix" to get the same rendering results for those materials as before.
A possible solution would be to try make the material appear as before by tuning/changing the material color and the ambient lighting in your scene.
See also the three.js documentation for THREE.AmbientLight and THREE.MeshBasicMaterial (and the other materials) for reference.
Alternatively you could create your own shader material using THREE.ShaderMaterial where you (re)create a shader that allows you to explicitly set an ambient color.
This issue is discussed here:
https://github.com/mrdoob/three.js/issues/6501
Or you could override the r71 shader(s) with the earlier shader(s) (or just use the older version of three).
Related
What is the current solution in r136 to blend lights, shadows and color in a ShaderMaterial ? I already found the solution for the fog support.
I found some examples in previous revision (r108) like this codesandbox.
Actually, I'm looking for this kind of result : codesandbox.
Should I copy MeshPhongMaterial shaders as code base for my own shaders ?
The usage of custom shaders is mandatory in my projects, that's why i'm not using built-in materials.
Any idea or example ?
Thanks !
This question is huge, and does not have a single answer. Creating lights, shadows, and color varies from material to material, and includes so many elements that it would require a full course to learn.
However, you can look at the segments of shader code used by Three.js in this folder called /ShaderChunk. If you look up "light", you'll see shader segments (or "chunks"), for each material, like toon, lambert, physical, etc. Some materials need parameters to be defined at the beginning of the shader code, (those are the _pars files), some are calculated in the vertex shader, some in fragment, some need to split the code between _begin and _end, etc:
Shadows are even more complex because they require a separate render pass to build the shadowmap. Like I said, re-building your own lights, shadows, and color is a huge undertaking, and it would need a full course to learn. I hope this answer at least points you in the right direction.
So I know the documentation says that a bumpMap will be ignored if a normalMap is applied to a Standard/Physical material
BUT (and excuse my ignorance)
Can we not just turn off this restriction in the shader?
So we CAN have both.
I would eventually like to extend the bumpMap to have it's own repeat values so we I can have some nice tiled roughness bumps when we view the model up close
WHILE having a non repeat normalMap do it's magic
Distortion, color replacement on glb (gltf) models. Blue changes to green, and yellow changes to orange.
v106 three.js
v97 GLTFLoader.js
You're using an environment map in your preview in blender. That env map has a dominant color that will affect the coloring of your model. To compare these references, you want to make sure you're using the same envmap in both blender and webgl. If you are only using lights in your threejs scene, you'll want to make sure they are colored to match.
Another thing that can affect the coloring is the gamma output settings in your THREE.Renderer, and textures.
You can go through a lot of heroics to get the outputs of both renderers to match. Read this: https://discourse.threejs.org/t/whats-this-about-gammafactor/4264
If you just want a quicker fix.. tweak your lighting/envmaps, or tweak the colors/intensity of the lights you have set up in your threejs scene.
If this behavior is something that has changed between versions of THREE.. it may be something to file a bug report on.
There are now gamma related settings on both the threejs renderer and textures.
If this isn't enough info, let me know and I may know someone else who can help set you straight :) Hi Don!
Old question but for the record what caused it for me was the vertex colors under Object Data Properties:
Deleting the Col fixed the texture colors.
I'm looking for an way to give specify light for some objects.
I have added new light to object to remove shadow on it, but then, the other objects also affected by additional light, and I don't want it.
I have let the object's castShadow = false; receiveShadow = false, but it doesn't work.
When the camera is positioned with the light directions, camera will see the 'light' meshes, and at the opposite position, camera will see the dark side.
I want both sides to see 'light' meshes.
(I want to remove the shadow.)
Thanks for your help. :)
I have added new light to object to remove shadow on it, but then, the other objects also affected by additional light, and I don't want it.
What you are looking for is called "selective lighting" which is not yet supported by three.js. Check out the following issue for more information:
https://github.com/mrdoob/three.js/issues/5180
The only workaround right now is to work with multiple scenes and render passes.
When the camera is positioned with the light directions, camera will see the 'light' meshes, and at the opposite position, camera will see the dark side.
When using a single directional, point or spot light, it's normal that this setup produces a lit and unlit side of a sphere mesh. You can only avoid this by adding an additional light on the other side of the mesh, by using unlit materials or again by using different scenes with different lighting setups.
three.js R112
Is it possible to have a custom geometry emit light in Three.js?
There is a similar question from 5 years ago here.
In my particular case, I have created a TorusGeometry. I would like this torus to also give off light. Is that possible?
The only true way to do this is raytracing, in which case your torus becomes an "emitter" of photons and its geometry is used to calculate the initial directions of said photons.
Otherwise, light technically doesn't exist. Only (mathematical) descriptions of lights exist. (Remember, lights aren't visible/aren't rendered unless you're using a LightHelper.) These descriptions are used by material shaders, which use the light descriptions (and other objects in the scene, in the case of shadows) to determine the color the current fragment should contribute to a pixel.
With this in mind, if you could write a shader to handle a torus-shaped light, then all you need to do is provide that light's information to the shader. You can do this by extending a THREE.js light class to make your own TorusLight to add to the scene, then give the objects in your scene your custom shader.
THAT SAID, if you'd be satisfied with simulating the torus light, and want a visible torus, you can always add a PointLight at the position of your torus (or several throughout the body of the torus), and give your torus some kind of glow effect.