Backfill normals about loaders.gl HOT 5 CLOSED

Most 3D libraries offer functions like calculateFaceNormals and calculateVertexNormals etc.

I actually have a half-finished implementation of these, I will look for it and put up a PR. I was doing this in math.gl since these calculations are completely webgl independent, though we can always discuss where it should go.

We should also consider @tsherif's proposal of using shader derivatives to automatically calculate normals in the shaders.

The "derivatives extension" seems to have 100% support, although those stats don't include headless-gl: https://webglstats.com/webgl/extension/OES_standard_derivatives. We should then decide if we use such calculation as a fallback in case normals are not provided etc.

In general, my instinct would be to resist adding normal calculations directly to loaders.gl, as it seems slightly outside the scope of this library. As an alternative, if we don't go the shader path, we could have the Geometry or Model classes autogenerate these if needed using functions e.g. from math.gl.

from loaders.gl.

I think Luma would be a good place for the normal calculations. Mesh processing seems outside the scope of math.gl. The Geometry class seems like a good place to me.

A couple of limitations to keep in mind:

• The derivatives version will only give you the normal of the actual face, so things will have a faceted, flat-shaded look.
• Vertex normal calculations can't do hard edges unless there's a separate vertex for each face, so you might end up rounding hard edges.

from loaders.gl.

I think Luma would be a good place for the normal calculations. Mesh processing seems outside the scope of math.gl. The Geometry class seems like a good place to me.

Yes, it would only make sense as part of a bigger initiative. I have what I think is a good plan here, but will add a PR on math.gl to explain my thinking before pushing ahead with this, we can implement this in luma in the mean-time.

The derivatives version will only give you the normal of the actual face, so things will have a faceted, flat-shaded look.

Yes. Ideally we would support both flat shading and smooth shading as an option (MeshLayer.flatShading: true/false).

• Flat Shading - Supplying a normal = filterNormal(normal) module in a new geometry shader module would seems like a great way to support flat shading. It would return the passed in normal unless a flatShading uniform was set, in which case it would use derivatives to calculate a normal.

Vertex normal calculations can't do hard edges unless there's a separate vertex for each face, so you might end up rounding hard edges.

(For indexed geometries, we could do calculate flat shaded normals by first expanding indexed geometries. But if we use shaders for flat shading, this is moot.)

• Smooth shading - We now only need to generate normals for the smooth shading case. Any geometry that uses indices does have the ability to encode that vertices are shared, and by adding face normals for each face using that vertex and then normalizing we get an average which can generate good results.

Obviously it is hard to generate normals in a predictable way for generic geometries. The results will depend on how vertices are shared in geometry which can depend on e.g. the exporter used to generate that geometry. But it will probably be reasonably good in many cases.

The smooth shading is harder to support in the general case. For non-indexed geometries it would require identifying shared vertices which is computationally more complex and expensive, so we may just generate flat normals for that case.

Does this sound like a plan or do you have other solutions in mind?

from loaders.gl.

If the only issue is a fallback for the SimpleMeshLayer when normals aren't provided, I can just add shader-generated normals to the SimpleMeshLayer fragment shader. For now, it could just be auto-enabled if the normals are missing.

from loaders.gl.

@loaders.gl/math has the initial algorithms for this. We can revive these if the need comes up again.

from loaders.gl.