Striped artifacts can be observed in the lights of A-Frame technology, with their appearance varying depending

Question

Striped artifacts can be observed in the lights of A-Frame technology, with their appearance varying depending

I'm currently using A-Frame version 1.0.4 and have experimented with both spotlights (as shown in the attached image) and direct light sources.

Adjusting the shadowBias to -0.0001 only minimally impacts the artifact issue.

By setting shadowMapHeight and shadowMapWidth to 1024, the artifact reduces slightly from the light source. However, completely eliminating it requires increasing it to 4096, which is a performance hit as all lights can't have a 4k shadow map.

An alternate effect is seen by extending the shadowCamera far distance, for example, from 500 to 5000. This, however, results in incorrect shadows being cast away from objects—even after adjusting the shadowBias.

Am I missing something? Why do default light settings pose these issues? Could it be related to the models used?

Any insights on this matter would be highly valued.

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

javascript three.js 3d aframe virtual-reality

Answer 1

Answer №1

I discovered the culprit! It turns out my models were double sided, causing shadows to be cast on both the front and back faces simultaneously, resulting in a striped glitch.

After consulting the three.js material documentation and verifying with material.side that the models were indeed double sided, I utilized

material.shadowSide = THREE.BackSide

to ensure that the backside casts shadows onto the front side, regardless of the model's properties. This simple adjustment fixed the glitch!

It is important to note that if a model has incorrect normals, meaning they are not facing outward or are inverted, the glitch will reoccur on those particular faces.

Answer 2

I discovered the culprit! It turns out my models were double sided, causing shadows to be cast on both the front and back faces simultaneously, resulting in a striped glitch.

After consulting the three.js material documentation and verifying with material.side that the models were indeed double sided, I utilized

material.shadowSide = THREE.BackSide

to ensure that the backside casts shadows onto the front side, regardless of the model's properties. This simple adjustment fixed the glitch!

It is important to note that if a model has incorrect normals, meaning they are not facing outward or are inverted, the glitch will reoccur on those particular faces.

Answer 3

Answer №2

After downloading a intricately detailed and animated model (found here) in glTF format from Sketchfab, I managed to achieve relatively accurate shadows using the following parameters:

<a-entity shadow="cast: true; receive: true" id="model1" gltf-model="scene.gltf"
  position="6 1.5 -12" scale="0.5 0.5 0.5" animation-mixer>
</a-entity>

<a-entity light="type: ambient; intensity:0.1;"></a-entity>

<a-entity id="sun" light="type: directional; color: #FFF; intensity: 0.9; castShadow: true; shadowCameraFar: 500;
    shadowCameraVisible: false;
    shadowBias: -0.001;
    shadowMapHeight:2048; shadowMapWidth:2048;
    shadowCameraLeft: -50; shadowCameraRight: 50;
    shadowCameraBottom: -50; shadowCameraTop: 50;" position="10 50 -10">
</a-entity>

The outcome appeared satisfactory: https://i.sstatic.net/VN0Lr.png however, there were still some imperfections visible. Moreover, it turned out to be slightly taxing for the Oculus Quest.

In hindsight, I opted for shadow baking when dealing with my own models, even though it's not applicable to animated models.

I recall encountering an issue with z-buffer fighting on one of my models, rather than with the shadows themselves.

If you decide to experiment with this model, adjusting the parameters accordingly, you may encounter similar results before incorporating your own model into the mix.

Perhaps this insight will prove useful.

Answer 4

After downloading a intricately detailed and animated model (found here) in glTF format from Sketchfab, I managed to achieve relatively accurate shadows using the following parameters:

<a-entity shadow="cast: true; receive: true" id="model1" gltf-model="scene.gltf"
  position="6 1.5 -12" scale="0.5 0.5 0.5" animation-mixer>
</a-entity>

<a-entity light="type: ambient; intensity:0.1;"></a-entity>

<a-entity id="sun" light="type: directional; color: #FFF; intensity: 0.9; castShadow: true; shadowCameraFar: 500;
    shadowCameraVisible: false;
    shadowBias: -0.001;
    shadowMapHeight:2048; shadowMapWidth:2048;
    shadowCameraLeft: -50; shadowCameraRight: 50;
    shadowCameraBottom: -50; shadowCameraTop: 50;" position="10 50 -10">
</a-entity>

The outcome appeared satisfactory: https://i.sstatic.net/VN0Lr.png however, there were still some imperfections visible. Moreover, it turned out to be slightly taxing for the Oculus Quest.

In hindsight, I opted for shadow baking when dealing with my own models, even though it's not applicable to animated models.

I recall encountering an issue with z-buffer fighting on one of my models, rather than with the shadows themselves.

If you decide to experiment with this model, adjusting the parameters accordingly, you may encounter similar results before incorporating your own model into the mix.

Perhaps this insight will prove useful.

Striped artifacts can be observed in the lights of A-Frame technology, with their appearance varying depending

Answer №1

Answer №2

Similar questions

Generating a sequential array of dates and times in Angular

Tips for restoring lost data from localStorage after leaving the browser where only one data remains

What is the best way to retrieve the second element based on its position using a class name in Jquery?

I'm struggling to find a way to showcase my JSON data in HTML. Update: I have a clear vision of how I want it to look, but I'm struggling to display it in any format other than raw JSON

How can a function be invoked in a child component from a parent component?

Utilizing the principles of object orientation in Javascript to enhance event management

What is causing the error message "Uncaught TypeError: Cannot read properties of null (reading 'push')" to be displayed when running this code?

Utilizing React-map-gl in combination with either useContext or useState to update the viewport from a separate component

Unveiling the Truth about Svelte Transitions

Is there a way to make my for loop search for the specific element id that I have clicked on?

What sets apart importing components in computed from importing components in dynamic import in Vue.js?

Customizing Material UI Select for background and focus colors

Partially extended texture in Three.js

Please ensure that the menu is included within the HTML file

Vanishing Act: React-js MUI Tooltip vanishes upon clicking

Here is a unique version: "A guide on centering a carousel item in jquery upon being clicked."

Exploring the potential of utilizing the "wait" function in Selenium WebDriver for

Click on the hyperlinks one by one that trigger ajax events

Is Eslint functioning in just one Sublime Text project?

Replace Original Image with Alternate Image if Image Error Occurs Using jQuery (Bootstrap File Input)