What are some ways we can enhance shadows in Three.js?

Exploring three.js over on 2toria.com/pool

Struggling with enhancing the quality of my shadows. Currently facing this issue:-

The shadows appear a bit pixelated. Is there a way to achieve smoother shadows like this:-

Experimented with different settings, but unable to find the perfect configuration. My renderer setup is as follows:-

renderer.shadowMapEnabled = true;   
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFShadowMap;

Expected shadowMapSoft to do the trick, but no luck. Any suggestions or tips?

javascriptthree.jswebgl

Answer №1

Yes, I faced a similar issue before. To solve it, I adjusted the shadowMapWidth and Height of my light sources. Specifically, for my 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;

Additionally, increasing the map size by powers of two can help smoothen out shadows even further, although this may impact performance when dealing with complex geometry. You might want to experiment with sizes like 2048 or 4096 to find the right balance.

I see you mentioned renderer.shadowMapType. I'll have to explore that further as it could enhance the quality of my own projects. Thank you for sharing! :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting ThreeJS Geometry into JSON Format for Exportation

I am looking to export Three Geometry to JSON in order to utilize it with xml3D. I have been searching for the THREE.GeometryExporter() but have not had any luck locating it. Has it possibly been deprecated? It was mentioned here After obtaining the Thr ...

three.jsxml3d

Utilizing the power of AngularJS with ng-class for dynamic styling and

I recently started learning AngularJs and I have a question about how angular handles the ng-class attribute. While working with external libraries for visualization, charts, etc., I often need to trigger the resize event: window.dispatchEvent(new Event( ...

javascriptangularjs

What purpose does `browser.call()` serve in the context of Protractor?

As I delve into the depths of the Protractor API, a particular method caught my attention: browser.call(). This method schedules a command to execute a custom function within the context of webdriver's control flow. Although I am interested in inc ...

javascriptseleniumtestingautomationprotractor

What is the best way to organize a table with multiple state variables using nested loops?

What is the best way to display multiple variables in a table using a loop, such as i,j,k? this.state = { materials: ['m1', 'm2'], quantity: ['2', '4'], unitPrice : ['12&apo ...

javascriptarraysreactjsjsx

Animation fails to initiate when the object enters the viewport

I attempted to inject some enchantment into my project by implementing code from a tutorial found on this CodePen. However, I encountered an issue where the code only functions properly within that specific CodePen environment. Even after copying the same ...

javascriptjqueryhtmlcssviewport

Challenges with form validation

Hello everyone, I'm a newbie to JS and struggling with my code. It seems like everything should work, but it just won't. The issue seems to be with the phone number form validation. I've written code that, in theory, should do the job, but ...

javascripthtml

What are the steps to caching a message using discord.js?

In order to create a Discord bot with a command !edit [id] [new content], I have implemented the following code: if (MessageContent.startsWith('!edit ')) { if (authority >= 3) { //if false if (args.length < 3) { ...

javascriptnode.jsdiscorddiscord.js

Retrieve the key values from an object of a generic type

Is there a way to retrieve the keys of the object when it is of type T? I attempted to accomplish this using different methods such as: function getGenericTypeKeys<T>(): string[] { return Object.keys({} as T); } and function getGenericTypeKeys< ...

javascriptnode.jstypescriptgenerics

Having issues with $emitting not working for parent-child components in Vue. Any ideas on what I might be doing incorrectly?

I have a login component that I need to call in the main vue component of App.vue. Within the login vue, when I click on any button, it should activate another vue component using Vue.js router to replace the login page. I have searched for solutions but h ...

javascriptlaravelvue.jsvuejs2

Manipulate a property within an array using JavaScript and AngularJS

I am working with an AngularJS model that looks like this: $scope.Model = { Users : [{ UserId: '', FirstName: '', LastName: '' }], Products :[{ ProductId: '', ...

javascriptarraysangularjs

React - Issue with state not being updated accurately

My current project involves using the <Select> component from Material-ui to create a drop-down menu. I need to update the state of the <Select> component after a selection has been made. To achieve this, I have set the value property of the & ...

javascriptreactjs

Exporting data from AngularJS to Excel is not functioning correctly in Internet Explorer. Additionally, the exported Excel file does not display properly in Firefox and

I have been attempting to Export a table from a jsp page to Excel using AngularJs. Is Angularjs not compatible with IE? I am also encountering this error SCRIPT5009: 'Node' is undefined In Chrome and Firefox, the Excel file only opens when save ...

javascripthtmlangularjsexceljsp

Typescript error: Unable to instantiate __WEBPACK_IMPORTED_MODULE_1_signature_pad__ as a constructor

Currently, I am working on a project using Angular2 and attempting to incorporate a JS library for signature input from https://github.com/szimek/signature_pad. In my code, I have tried utilizing the library in the following way: // .ts file import * as ...

javascriptangulartypescriptsignaturepad

Python Mechanize file uploading capabilities

Hey there! I've been experimenting with mechanize and Python to upload a file to a website. I've had some success so far, but now I'm facing a challenge at the upload page. I understand that mechanize doesn't support JavaScript, but I&a ...

javascriptpythonfileuploadmechanize

Is your jQuery search scope correctly restricted?

Upon coming across this code snippet, I can't help but wonder if it's merely limiting the scope or selecting both elements simultaneously. container = jQuery("#test", parent.document); jQuery("param[name=scale]", another.object) Would anyone b ...

javascriptjquery

Setting the default value of a multi-select dropdown in AngularJS from the controller

Currently, I have implemented AngularJS multi select drop down functionality on my website. The code for this can be found at the following source: MultiSelectDropDown In my HTML page, I have included the same drop down twice and I want to customize the ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

Implementing `block eval() in Content Security Policy header for an Angular 8 project

Is it possible to disable the eval function in CSP-Header for an Angular project, even if it's not being used directly? Are there any potential negative consequences or errors that could occur when deploying the project? Appreciate your insight. ...

javascriptangularevalcontent-security-policy

Retrieve a dynamic value from an object

Is it possible to dynamically pass a context from the server to the client so that the client can retrieve a value from an object more efficiently? For example, the server sends an object with a key-value pair like this: "booking__validating_carrier_ ...

javascriptarraysjsonfor-loopobject

Can you identify the transport protocol that serves as the foundation for XmlHttpRequest?

I'm interested in finding out if it's SOAP, plain HTTP, or something different. I tried looking up XmlHttpRequest on Wikipedia but couldn't find any information about it there. ...

javascriptjquery

Running on Node.js, the Promise is activated, yet there remains an issue with the function

I've encountered a strange issue that I can't seem to diagnose. It's showing a TypeError: My code is returning 'function is undefined', which causes the API call to fail. But oddly enough, when I check the logs and breakpoints, it ...

javascriptnode.jsexpresssequelize.js