Lights in A-Frame have striped artifacts depending on distance from them
I am using the latest A-Frame 1.0.4 and I have tried both with spot light (in the picture attached) and with direct light.
The shadowBias is set to -0.0001, changing it affects the artifact only slightly.
If I set the shadowMapHeight and shadowMapWidth to 1024 the artifact shrinks back a bit from the source of light. To have it completely disappear I have to put 4096, which is a bit too much, performance-wise. I can't have all lights with a 4k shadow map.
A similar effect has increasing the shadowCamera far, from 500 to 5000 for example. but this introduces wrong shadows, distant from the objects (even if I tweak the shadowBias).
Am I doing something wrong? Why the lights with default settings have these problems? Does it perhaps depend on the models ?
Any clue would be appreciated
I was able to find the culprit! My models are double sided, and this resulted into the front face casting shadow on the back face together with the back face casting shadow on the front face, hence the striped glitch.
After having a look at three.js - material and confirming with material.side that it was actually double sided, I used material.shadowSide = THREE.BackSide to force the backside to cast shadow onto the frontside, regardless of the model/material double side property.
This solved the glitch!
Of course be mindful that if a model has wrong normals i.e. don't facing towards the outside / inverted , that face will have the glitch again.
- Prevent text selection after double click
- Check for browser optional chaining support in Angular project
- Is there a way to create dynamic ranges given an array of values, and counting how many belong to each range
- Can't use type-fest GreaterThan as parameter type
- Is there a way to get the JSX/TSX of a React component from the code itself?
- Check if optional chaining is supported
- What is the best way to remove a table row with jQuery?
- How can I generate a list of random shades of a particular color? (e.g. random shade of orange)
- Proper way to catch exception from JSON.parse
- xcode using wrong node.js version
- How to autosize a textarea using Prototype?
- How does one align a single row to the top in JQGrid?
- javascript number counting
- How to import one function from various files in the same folder in Javascript?
- useTemplateRef is not reactive for arrays?
- Regular expression that ignores HTML entities
- Handling Promise.race better
- Using Angular Signals with HostBinding to update style?
- Remove empty string field from a object contain nested object and array?
- Getting hash parameters from request url
- How to check if a variable is a blob in JavaScript
- Paginate Javascript array
- Adding an onclick event to google.map marker
- Why I can't read data from API (React app)
- How can I get the status code from an HTTP error in Axios?
- How do I refresh a page using JavaScript?
- XForms Refresh not working? (XSLTForms 1.7)
- Uncaught (in promise) Unable to find element in cloned iframe #2460
- Counting cells with a specific class in JavaScript
- Is it possible to return an empty slot from JavaScript's map() function?