Ugly shadows (jagged stairlike pattern)

[TheBricktop]

Description:

• A-Frame Version: 1.0.4
• Platform / Device: pc chrom/ firefox
• Reproducible Code Snippet or URL:

Setting up the scene, only need some basic soft shadows for emphasis

got weird pattern on shadows, effect seem to be the infamous shadow acne and i dont know how to deal with that

[dmarcos]

That's expected. Real time shadows is a very large topic in computer graphics. There's no solution that gives perfect results and good performance all the time. There are always compromises. Depending on your use case you can think about light baking for your 3D models. I don't think there's anything actionable here on the A-Frame side.

[TheBricktop]

Shucks, I've tried the nunustudio approach and his shadows rendered correctly. I've tried to use aframe for pcvr so for me the graphics are more of a concern than performance.

[tripdragon]

I change the shadowBias to -0.001, I only found this by futtzing with the light in the inspector. If the only light you have is from the imported file, you'll have to parse it in a model-loaded script Example for changing a material

document.querySelector("#modelLike").addEventListener("model-loaded", function(ev) {
          console.log("lksdfksdflksdf");
          var _t = this.object3D.getObjectByName("trunk");
          _t.material.color.setHex(0xc9bbdc);

        });

you can also try physicallyCorrectLights:true in renderer, DU KNOW about this but it looks better in a different project I have, also you might as well know about colorManagement: true while futtzing with model imports

<a-scene renderer="colorManagement: true; physicallyCorrectLights:true;"> ...

[TheBricktop]

and thats a usefull tip thank You!

[dmarcos]

@tripdragon Thanks for the tips. I don't think there's anything actionable here on the A-Frame side. It's up to content to select adequate parameters and shading techniques.

[tripdragon]

I know this is closed, but I would say there is some correlation to making things "just work" for aframe importing. Im currently working through the various workflows an artist might take for a project that is thinking of using Aframe. I already knew a good deal of THREE so its helped a lot of frustration ive had this being one of them.

But this is off topic here so I will hush about it

[dmarcos]

@tripdragon Thanks for the feedback and I understand. In many scenarios just work is hard to define because different kinds of content have different constraints. Higher quality shadows come with a performance penalty and most experiences pre-bake illumination to ensure consistent FPS. Current default real time shadowing have been good enough or just working for most cases we've seen so far. You're first person reporting an issue on that regard. We're always to hear alternatives and open to change the defaults after considering the trade-offs. I hope it makes sense.

[TheBricktop]

@tripdragon is there support for multi UV for lightbaking? cause sometimes the amount of things on more complex scenes makes it really hard to prebake everything with some more advanced shading techniques as tiled normal maps

[tripdragon]

@dmarcos threejs has these talks every now and then. I recall lights not having shadows at all by default in the past and they discussed how users from 3D apps would just expect that as a default.

Right now they are discussing gutting the examples directory and refactoring into modules but this breaks like all links in stackoverflow and with that goes a wealth of knowledge.

What has helped three and its artist users is making a discourse forum. Its easier to read through than stackoverflow for building a community and avoids much of github issues and the typical send it to stackoverflow replies, I know aframe and three have the discord as well. Just a bunch of places to manage and stick questions into the void.

[tripdragon]

@TheBricktop UGH lightmap baking, the time eater of all artists making asset creation.... Ive tested a bunch of performance tests stuff in Aframe and Three some of this arrises from the new glTF format just having nuance bugs. Like glTF saves the model(s) in a scene object so THREE just converts that into a group but leaves the naming.

Or that glTF textures need to be flipped Y I read. Need to do a test on this.

Its hard to debug Aframes imports cause the inspector does not have nested UI rolldown to dig through the models parents. So you cant tweak the materials. So instead I have to write parsers like above which is super annoying cause I have to keep reloading or dumping code into the chrome console.

Offtopic, but I dropped what I thought was broken uvs from glTF in THREEJS only into Substance painter and sure enough the uvs are offset there as well

[tripdragon]

@TheBricktop Not open but I found that Blender glTF export breaks some UV if you have non square faces. I submitted bug reports to the Blenders devs For now try this IF you're using Blender, maybe other apps have it enter edit mode, select all faces, find your "Triangulate quads to tris" feature Your texture should distort in the 3d view. While that tool is still active find its solver method in blenders case its "Beautify" and select "Fixed" that should return the UV back to nice looking. Export and test in glTF viewer web app

This worked for teh mapping bug I was trying to figure out!