Anti Aliasing Three.js / WebGL - javascript

I have an issue with anti aliasing when i spin model with orbiter
i am using
renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true,
antialias: true });
it is helping but not resolving the issue fully.
in this position it looks ok:
Does anyone know how to resolve this? or have any idea what else can i try? ( code sample would be appreciated )
Thanks
EDIT:
Ok i have added this:
renderer.setPixelRatio(2);
and it has improved a LOT ( see result bellow ), but still shows a bit,
anyone has any other idea suggestion?

I am not completely sure if this will do the trick but it might be worth a try.
Using the example below, set your textures anisotropy to the renderers max anisotropy. (i am using the webglrenderer) this should enabel antialiasing on this texture and reduce jagged lines like in the first image.
texture.anisotropy = renderer.getMaxAnisotropy().

Are the lines textures?
If so, I had a simular issue then depending on the camera position not completely on top my texture would get blurry. Maybe this helps for you:
texture.minFilter = THREE.LinearFilter;

Related

Shadow map in Babylon JS

Im somewhat new to Babylon JS but I created a scene and filled it with some cubes, added a light and a shadow map using:
new BABYLON.ShadowGenerator(4096, light);
Im getting really aliased shadow edges. I would like to know how I can get the aliasing to be smaller without bumping up the shadow map size.
Its already at 4096 which is already fairly large. Am I missing something? Thanks!
you can try using one of the soft shadows flag, while reducing the shadow map size, because as you say - 4096 is way too large.
You can read more about it here, and try the following
shadowGenerator.useExponentialShadowMap = true;
// or!
shadowGenerator.usePoissonSampling = true;
It turns out that how spread out shadow casting objects are makes a difference in the shadow quality. For example, go here and change the "distance_range" var to 10:
https://playground.babylonjs.com/#ZSB485#3
I ended up just using shadowGenerator.useBlurExponentialShadowMap = true and that seemed to be good enough for me.

three.js rectAreaLight up to date

So this abandoned? feature of three.js seems to have become somewhat of a holy grail; I've tried to implement it a couple of times unsuccessfully.
The example working on an old release is here: https://threejs.org/examples/#webgl_lights_rectarealight
My minimal broken example is here:
https://jsfiddle.net/bitsofcoad/1k3arL33/
var width = 20;
var height = 20;
var rectLight = new THREE.RectAreaLight( 0xffffff, 500, width, height );
rectLight.intensity = 500.0;
rectLight.position.set( 0, 30, 0 );
rectLight.lookAt( mesh2.position );
scene.add( rectLight )
var rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );
I have made sure to include the proper rectarealight library in the jsfiddle.
This thread was particularly enlightening on the topic of why this PR had some difficulties:
https://github.com/mrdoob/three.js/pull/9234
And this thread was interesting to see how far other people had gotten in developing a similar type of light for three.js:
Improved Area Lighting in WebGL & ThreeJS
I don't really know what happened to break abelnation's example, or even if it is completely broken ( I may have screwed up my jsfiddle... ), but I think there is still considerable interest in this feature.
The soft edges look so nice, I'm tempted to cannibalize WestLangley's custom shader (http://jsfiddle.net/hh74z2ft/89/), which has pretty much all the functionality I need.
Anybody else able to get the basic functions working? Thanks!
Both MeshStandardMaterial and MeshPhysicalMaterial support area lights. The other materials do not.
three.js r.89

Three.js - sprite depths rendering backwards in r70+

It looks like something broke with r70+ regarding z-depth of sprites.
Here is a jsfiddle that works perfect with r69.
Here is the same jsfiddle except using r71.
You can see that now when the scene rotates, the depths of the sprites are not always shown correctly. Half the time they are rotated into view with wrong z-depths.
Is this a bug or is something new I need to add that I missed?
I've tried all variations of common commands below and nothing seems to work all around like it used to.
var shaderMaterial = new THREE.ShaderMaterial({
...
depthTest: false,
depthWrite: false,
transparent: true
});
particleSystem.sortParticles = true;
I'm aware of the new renderDepth, but that solution seems to be unrelated and doesn't explain why it would break previous behaviour. We don't need to continually update renderDepths manually for all camera angles now do we?
PointCloud.sortParticles was removed in three.js r70; see this commit.
In your original example (without transparency), you can get your desired behavior by enabling the depth test for your material:
var shaderMaterial = new THREE.ShaderMaterial({
...
depthTest: true
});
In your updated example (with transparency), it's necessary to sort the particles yourself in three.js r70.
Note that three.js still handles z-sorting when rendering THREE.Sprite objects. That could be worth investigating.

Three.js - Getting the low poly look

I'm trying to generate some terrain in the low poly style, for reference, this kind of style:
What I mean by this is each triangle is one shade.
When I attempt something like this, the shading is very smooth. Here's an example with only a few triangles:
(source: willdonohoe.com)
I also tried adding shadows, but this didn't create the desired effect either. Here's a shot with more triangles with added shadows:
(source: willdonohoe.com)
Looking through the Three documentation, the shading property on the materials class sounds like it would do the trick, but THREE.FlatShading and THREE.NoShading doesn't seem to have any effect.
Is there a special technique that I need to use create this effect? Any direction you can point my way would be much appreciated.
You can find my first demo here
Many thanks,
Will
EDIT: This answer was outdated. Updating:
material.shading = THREE.FlatShading is now material.flatShading = true.
You modified the vertex positions of your PlaneGeometry.
To generate flat shading with MeshLambertMaterial, you must update your normals by calling
geometry.computeFlatVertexNormals();
For other materials, simply setting material.flatShading = true is sufficient to get the flat look.
three.js r.87

Three.js shadows - how to improve?

I've been playing with three.js here - 2toria.com/pool
The issue I'm having is trying to get my shadows to look better. At the moment, they look like this:-
A bit pixellated. Is there a way I can make them look smoother, like here:-
I've tried a few things, but I can't find the right settings. My renderer is set up like this:-
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFShadowMap;
I thought shadowMapSoft would have done it, but no. Any ideas/help?
Indeed, I've had the same problem. My fix was to increase my light sources shadowMapWidth and Height. In my case it was a spotLight:
spotLight = new THREE.SpotLight( 0xAAAAAA );
spotLight.castShadow = true;
spotLight.shadowCameraFov = VIEW_ANGLE;
spotLight.shadowBias = 0.0001;
spotLight.shadowDarkness = 0.2;
spotLight.shadowMapWidth = 2048;
spotLight.shadowMapHeight = 2048;
Oh one more thing, if you increase the map size by power's of two you smooth out the shadow's more and more, but you will see a performance hit with complex geometry. So try 2048, maybe 4096 see how they work for ya.
I noticed you have renderer.shadowMapType. I'm gonna have to look into that, may make my own projects that much better, thanks :)

Categories