When i import a custom mesh and ask it to both cast and receive shadows, a lighting noise appears. Same with a simple mesh, but if there is more than one light source.
Does that come from my computer/browser/code ?
Lights in Three.js have a light.shadow.bias you can adjust to overcome this exact problem. I think you ou have to use trial-and-error to adjust it. The documentation says to adjust it in steps of 0.0001, but I solved my problem by setting it to minus 1/1,000,000 ( -1e-6 ).
Happy hunting :)
Three.js documentation on LightShadow
Related
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!!
Does anyone have any suggestion of how to implement such a light glow effect in Three.js ?
There is a TextGeometry mesh
Some BoxGeometry mesh as a background
How to make this glow between them?
I tried to put many PointLight between text and box, but after about 20 of PointLights the scene become very slow. I tried to put some RectAreaLights — but the same.
Does anyone have any suggestion of how to implement such a light glow effect in Three.js ?
The typical way of doing this is via post-processing. three.js offers a so called "Bloom" pass which is demonstrated in the following example: webgl_postprocessing_unreal_bloom. I suggest you start with this setup.
but after about 20 of PointLights the scene become very slow. I tried to put some RectAreaLights — but the same.
It's no good approach in general to add that number of light sources to a three.js scene. If you place some small sphere meshes (based on THREE.SphereGeometry) with a bright material color onto the text, you should get a good result with bloom pass.
Example here
I'm using PointLight in scene and ground reflects big light spot. What should I do to remove it? I only need to highlight some area on scene. So, I can decrease distance but it only decreasing size of spot. Not exactly I've expected. Should I use specific material on the ground or something like this?
Answer is very easy: set ground material's roughness to 1. I've updated example to see how roughness changes material.
I've been trying to add SSAO into my game, per this SSAO EXAMPLE
Unfortunately, my transparent trees now defected:
Please advise on how to fix it.
This is not a defect, during the depth-Path, which you need to pass to the SSAO shader further on, transparency is not taken into account, thus your leave-defining planes get detected as planar geometry and get the appropriate outline.
Concerning a solution, I cannot really help you. What you can do is hide all the transparent stuff before rendering the depth pass but then, the AO-pass gets multiplied over it, so you just trade in a visual problem against another one. To really solve this, i think you need an additional Three.MaskPass, see here:
Rendering multiple scenes, with only 1 using SSAO [Three.js]
Hope this helps.
You could pass the texture into the normal/depth fragment shader and discard any fragments with an alpha < 0.5
Does anyone have any ideas how to fix the below issue?
The red is just a plane (representing water) with a shader material. I have written a custom shader for the water material, but its very simple (I get it to display red). As you can see from the image below the two particle systems seem to mess up the draw order.
Weirdly - if I use a standard THREE material for the water, like phong or lambert, then the issue doesn't happen. Is there some define / property that I need to change on the shader material to prevent this from happening?
Many
Thanks