CODEWITHSUNDEEP
javascriptthree.js
EnginO
EnginO

Reputation: 206

Threejs pixelated shadows

I made an app in which I created shelfs dynamically. All works fine except shadows. The problem is I don't even know what the problem is. Is it the Light or is it the Objects? Hope someone can Help me. here is a picture of my shadows

And here my Code for the lights:

addLights(){
this.ambientLight = new AmbientLight( 0xffffff, 0.8 );
this.scene.add( this.ambientLight );

this.shadowLight = new THREE.SpotLight( 0xffffff , 0.1 );
this.shadowLight.position.set( 10 , 100 , 10 );

this.shadowLight.target = this.mainGroup;

this.shadowLight.castShadow = true;

this.shadowLight.shadow.mapSize.width = 4096;
this.shadowLight.shadow.mapSize.height = 4096;

this.shadowLight.shadow.camera.near = 1;//500;
this.shadowLight.shadow.camera.far = 1000;//4000;
this.shadowLight.shadow.camera.fov = 30;

this.shadowLight.shadow.bias = -0.01;

this.scene.add( this.shadowLight );

this.spotLight = new THREE.SpotLight( 0xffffff , 0.8 );
this.spotLight.position.set( 10 , 100 , 10 );
this.spotLight.target = this.mainGroup;
this.spotLight.castShadow = false;
this.scene.add( this.spotLight );

}

And for my white boxes:

makeBox(elemColor: any, coordinates: [ number, number, number ], size: [ number, number, number ] ) {
// Box
this.geometry = new BoxBufferGeometry(size[0], size[1], size[2]);
this.material = new MeshLambertMaterial({ shading:FlatShading , color: elemColor });
this.mesh = new Mesh(this.geometry, this.material);
this.mesh.material.side = DoubleSide;
this.mesh.position.x = coordinates[0];
this.mesh.position.y = coordinates[1];
this.mesh.position.z = coordinates[2];
this.mesh.receiveShadow = true;
this.mesh.castShadow = true;
return(this.mesh);

}

All the other parts a Imported JSON Objects which i imported with the ObjectLoader. Created with Cheetah,Blender and/or Clara.io and exported as ThreeJS.json

I hope thats enough code, tell me if you need more

thanks for looking :)

EDIT // my renderer:

// RENDERER
this.renderer = new WebGLRenderer( { antialias: true } );
this.renderer.shadowMapType = THREE.PCFSoftShadowMap; // softer shadows
//this.renderer.physicallyCorrectLights = true;
this.renderer.setClearColor( this.scene.fog.color );
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( this.renderer.domElement );
this.renderer.shadowMap.enabled = true;
this.renderer.shadowMap.renderReverseSided = true;

Upvotes: 2

Views: 4681

Answers (1)

THERSET
THERSET

Reputation: 36

You may look at the settings of your lights. Some light types allow you to add shadow radius, bias and so on. This will allow you to smooth out the shadow pixels.

you have this.shadowLight.shadow.bias = -0.01; but shadow radius will give you the best result,

.radius : Float Setting this to values greater than 1 will blur the edges of the shadow. High values will cause unwanted banding effects in the shadows - a greater mapSize will allow for a higher value to be used here before these effects become visible. If WebGLRenderer.shadowMap.type is set to PCFSoftShadowMap, radius has no effect and it is recommended to increase softness by decreasing mapSize instead.

Note that this has no effect if the WebGLRenderer.shadowMap.type is set to BasicShadowMap.

Upvotes: 2

Related Questions