I have a simple material on my object like:
THREE.MeshPhysicalMaterial({
roughness:1,
color: 0xffffff,
dithering:true
})
and one simple directional light. Now, i thought the "dithering" would do something like this with the shadows:
However, it doesn't seem to do anything. What does the dithering attribute actually do? Or did i forget to configure something?
Dithering in the material is a very subtle effect that helps prevent banding when colors aren’t blending smoothly. The effect you’re showing in your screenshot is much more pronounced, black and white, and largely pixelated. The default materials don’t have this functionality.
The effect you want can be achieved as a post-process pass. Threejs has a demo on how to do it here: https://threejs.org/examples/?q=post#webgl_postprocessing
Here’s the source code for that demo. Notice that it uses the DotScreenShader shader pass.
Related
I'm trying to render multiple radial gradients, with the goal of their colors adding up where they overlap. I'm doing a very simple three.js code for that, see fiddle here.
However, I'm getting an unexpected effect - the borders of overlapping gradients seem to be making the other gradients darker, see the dark lines in this screenshot:
I don't understand why this is happening. If I understand the OpenGL documentation correctly, GL_FUNC_ADD should simply add the component values (and, I assume, clamp to 1.0). I'm using GL_SRC_ALPHA and GL_ONE (or rather, their equivalents in three.js) for source/destination factors, e.g.
const mat = new THREE.MeshBasicMaterial({
alphaMap: grad2,
blending: THREE.CustomBlending, // Similar with THREE.AdditiveBlending
blendEquation: THREE.AddEquation,
blendSrc: THREE.SrcAlphaFactor,
blendDst: THREE.OneFactor,
});
What am I missing?
It is doing what you want, I think. The borders are not darker, it is other areas that are brighter.
Trying to achieve this kind of effect, but not sure which direction to head to.
I have tried to use a Multi-side Refraction technique using shaders, but can’t really seem to achieve the effect. Is there a simpler approach by any chance?
What I’ll have is a plane in the background, using shaders to achieve the marquee effect. That’s all fine and working. However, I need that geometry to have some sort of frosted glass effect, and at the same time, distort the text in the background. Would using some sort of material on the geometry, and adding transparent, which some parameters work?
Hoping for some guidance
This effect (as opposed to simpler alpha blending transparency) is called "transmission", and the frosted part is called "transmission roughness". THREE.MeshPhysicalMaterial is the preferred way to do that in three.js, see these examples:
https://threejs.org/examples/?q=transmission#webgl_materials_physical_transmission
However, the material type does not yet support refraction, the distortion of the background shown above. three.js#21000 includes some discussion of supporting that in the future.
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.
in Three.js, I have a standard-material mesh cube sitting between two RectAreaLight strips. By default, it renders like this:
I wanted to add shadows under the cube, so I set the renderer's shadowMap:
renderer.shadowMap.enabled = true;
When I do this, suddenly my cube is reflecting the light strips:
(to clarify, only the two horizontal strips are RectAreaLight instances. The 3 vertical strips shown are just planes.)
This effect is kind of neat, but it's too sharp: it looks pixellated because my cube is relatively low-poly, and each facet has a different angle.
My understanding is that MeshStandardMaterial's 'roughness' property can be used to diffuse and soften reflections, but neither roughness nor metalness have any effect on this effect; no matter what I set it to, these harsh reflections remain.
I'd love to find a way to soften the reflections. I've also noticed that lines in general tend to look pretty aliased, even though I've set renderer.antialias to true. Perhaps a better anti-aliasing strategy would kill two birds with one stone?
Docs mention no shadow support with rectAreaLights:
https://threejs.org/docs/#api/en/lights/RectAreaLight
I wouldn't be surprised if there were other issues with the materials as well... RectAreaLights are implemented in a different branch of the render pipeline, as indicated by the requirement of including custom uniforms, but I don't know enough about the details to give you a better answer.
I would love to see other responses to this though, because RectAreaLights can create some really cool looks...
I am rendering a sofa using r71 but the texture quality is not proper. If I render it through r58 then it looks really good. It is a bug or what?? Below are the images, first one is rendered via r58 and second one via r71.
Coming from r58 a lot of things has changed, for you especially how they calculate gamma and hardwireing the ambient term to the diffuse color.
The main difference I see is your model appears darker.
To make the model appear brighter you could set the materials color to white: material.color.setHex( 0xFFFFFF );.
If this is still not bright enough I discovered a little Hack by setting the HSL Lighting value to something > 1. material.color.setHSL( 0, 0, 6 );
Without providing the code on how you create your material its only a shot in the dark.