Tips for enhancing shadow clarity in three.js

Within a scene, there are multiple objects that I want to move across a wide plane that is capable of receiving shadows. However, when using only one point light or a very large directional light, the shadows cast by the objects tend to have rough edges, especially when they reach the corners. Here's an example:

https://i.sstatic.net/cdBl6.png

I am considering whether it would be better to use a light source for each individual object to ensure high-quality shadow edges as they move. In some cases, increasing the shadow map size may not be a feasible solution.

javascriptthree.jsshadowlight

Answer №1

There are various factors that influence the quality of shadows.

From my perspective, it seems like the size settings for your shadow cameras (left/right/top/bottom) may be too large, causing the shadow to cover a wider area than necessary.

Using multiple shadow casting lights can be resource-intensive, so it's best to avoid that approach.

Try adjusting the light.shadow.camera settings to concentrate the map on your objects better. Additionally, consider increasing the shadowmap size to 1024 or 2048 square pixels.

Switching to THREE.PCFShadowmapping instead of the default option can help soften the edges of your shadows.

On that note, exploring PCFSoftShadowMapping might be beneficial as well, although it could slow down rendering speed.

Mastering shadow mapping requires experimentation and fine-tuning.

It may also be helpful to attach a DirectionalLightHelper and CameraHelper to your light sources to understand the shadow casting area and direction more clearly.

https://i.sstatic.net/LQz2Z.jpg

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

Tips for preventing page breaks (when printing or saving as a PDF) in lengthy HTML tables

Here is the link to a single HTML file (including style and scripts): FQ.html The problem I'm facing can be seen in this image: https://i.sstatic.net/Nr4BZ.png I've tried several solutions, the latest of which involves the following CSS... @me ...

javascripthtmlcsspdfpage-break

Accordion feature that loads JSON data dynamically with AJAX

I am facing a challenge with my HTML structure and corresponding CSS styling. The HTML code includes an accordion container with multiple sections that can be expanded or collapsed. <div class="accordion-container"> <ul class="accordion"> ...

javascriptjqueryajaxjson

Is there a way to dynamically include an attribute using VueJS?

Is there a way in Vue to dynamically add an attribute, not just the value of an attribute using v-bind? I am aware that I can set a value to an attribute dynamically with v-bind, but I would like to add the attribute itself based on a condition. Something ...

javascripthtmlvue.js

Executing a series of functions in succession using jQuery

I am trying to iterate through an object that contains functions which need to execute consecutively. Ideally, I would like these functions to be chained together in a way where one function waits for the previous one to finish before executing (e.g., func ...

javascriptjqueryfunctionloopscallback

Best practices for implementing the map function with TypeScript

I'm currently working on mapping types in a DB using the Map function in JavaScript. This is my first time trying to do this, and I'm eager to learn but I've hit a roadblock. Here is the structure of the DB: const db = { data: [ { ...

javascriptreactjstypescripttypes

Error encountered: Attempting to spread non-iterable object, resulting in an invalid action

Whenever I attempt to add an item to the cart, I encounter this error. Unhandled Runtime Error. TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method. import { creat ...

javascriptreactjsnext.js

Having trouble getting my javascript integration to work in a Django template - any ideas on what could be causing

As a newcomer to Django, I'm working on creating a small webpage that displays a chart using Chart.js. My goal is to load the JavaScript file statically. To achieve this, I have set up a basic HTML file named data_table.html and included a "static" fo ...

javascriptpython-3.xdjangodjango-templates

Please be patient and allow the function to complete before moving forward

Currently, I am in the process of building my first nodejs/DynamoDB application and it involves working with JavaScript for the first time. My goal is to save a new record after scanning the table and using the results of the scan as a basis. After doing s ...

javascriptnode.jsexpress

Import the JSON data into the designated storage unit

$(".btn-primary").click(function(){ runSuccessFunction(jsonObj); }); If I need to update the JSON data in the JSFiddle Code example, how can I reload only the container by clicking a button? I want to run the code every time I make a change to the J ...

javascriptjsonhtml

AJAX-powered Form Validation

I am in the process of creating a login form that includes three input fields: one for entering a username, another for entering a password, and a submit button to log in. Currently, I am utilizing AJAX to validate the login information directly on the cl ...

javascriptphpajaxformsvalidation

Trouble with the width of the message container in CSS styling

I need to display a message at the top-center of my webpage. I have created a simple example for this: http://jsbin.com/eniwax/3/edit The issue I am facing is with the width of the message container. I want the container width to adjust dynamically based ...

javascriptjquerycss

Learn to leverage JavaScript in Node-RED to dynamically display messages based on selected dropdown options

After reviewing this Node-red flow: https://i.stack.imgur.com/y4aDM.png I am struggling with the implementation in my function. There are 3 options in each dropdown, one for meat type and the other for doneness. Once I select a combination from the drop ...

javascriptnode-red

Creating responsive HTML page text and table with the use of JavaScript

Trying to create a responsive webpage has been a bit challenging. I experimented with height,style.height, style.OffsetHeight, etc. but still struggling to dynamically make a square table. Although the code below changes the height, the table's width ...

javascripthtmlcsscordova

Is it possible for jquery JSON AJAX to block all users?

On my website, I use AJAX to load an RSS feed on the client side when the page loads. If a user repeatedly presses F5, could the owner of the RSS feed ban my entire website instead of just that one user? This would prevent others from loading the RSS feed ...

javascriptjqueryajax

The Javascript function fails to trigger during the OnKeyPress and OnKeyDown events

I have encountered an issue while trying to call a function called validateQty on both the onkeypress and onkeydown events of a text input field. When I was passing only one parameter, which is the event itself, everything was working perfectly fine. Howev ...

javascriptphphtml

Experiencing issues with overflowing columns in JQuery Datatables

I am currently facing an issue with my datatable where I need it to have a specific width while also displaying all its columns. The problem I am encountering can be summarized as follows: I came across solutions like Datatables Width Overflow For A ...

javascriptjquerycssdatatables

Symbol positioned beside the text in a react-select multiple label

Currently utilizing the react-select library, I am attempting to display icons next to the text of each label that can be added or removed using multiSelect. const data = [ { label: <svg /> && 'keyword one', value: 'keyword o ...

javascriptreactjsreact-select

The toggle button for columns is not triggering the callback action

When working with the following JSFiddle, I noticed that the action function does not seem to fire whenever a button to select a column in the column visibility tool is selected. Check out the code snippet below for reference: $(document).ready(function( ...

javascriptdatatables

Automating the selection of a drop down based on a condition in Angular 2: A step-by-step guide

I'm facing an issue with a drop-down menu where no default value is selected. On my homepage, I need to automatically select an option based on query parameters. I've attempted various methods but none have been successful. Below is the code snip ...

javascriptangularangular5

SCRIPT438: The operation failed because the object does not have the ability to use the 'forEach' property or method

Issue with IE8: Property or method 'forEach' not supported $('.tabs').tabs(); $('#search-consumables [data-ajax-call]').change(function() { var $this = $(this), settings = $this.data(), $target = $(setti ...

javascriptajaxjsoninternet-explorer-8