[WIP] normalmap space example

[pailhead]

Hi,

I made a simple geosphere in 3d studio max, mapped it into two UV islands, and baked a tangent and object space normal maps. There are lots of options to flip channels in max's baker.

This demo uses onBeforeCompile to inject the code that will be merged soon, this is more about the asset (a small obj with a corresponding baked normal map). @WestLangley do you think this might be useful?

The baked model looks a bit different in 3ds max (red is tangent, purple is object):

[pailhead]

Per conversation with @mrdoob this can wait until #14239 lands. If someone finds it interesting though, the model and textures are there to experiment with. It was generated in world space as opposed to local XYZ with the default settings for both tangent and object.

[mrdoob]

#14239 has now been merged 🙌

[WestLangley]

@WestLangley do you think this might be useful?

I did not provide an example because I did not think a separate example just to show an object-space normal map provided added benefit. But having and object-space normal map as part of an existing example seems like a good idea. Maybe one of the loader examples could use an object-space normal map?

Your tangent-space example has serious artifacts -- at the seams, apparently. I think it would be useful to figure out what is going on there.

Also, be aware that it does not make sense to include attribute vertex normals with an object-space normal map. The attribute vertex normals are not used.

[pailhead]

Also, be aware that it does not make sense to include attribute vertex normals with an object-space normal map. The attribute vertex normals are not used.

It's not needed for the tangent ones either essentially since it can be computed on the client. Was slightly easier to export than to look up what computeVertexNormals was actually called :D I can remove the normals, it would make the file smaller.

Your tangent-space example has serious artifacts -- at the seams, apparently. I think it would be useful to figure out what is going on there.

It's more than just seams, there's only one seam running around the circumference. I think "normal map" is a broad topic, but as is, this is a content authoring tool, generating two types of baked normal maps, and the example shows how they render with three.js. If not useful as public facing, perhaps it can be assessed as just that result of rendering content generated in 3ds max?

What do you suggest be done if anything with this? I was more curious about the "export with these settings" conclusion, whtat's the object space convention?

[pailhead]

Actually i stand corrected for the normals being needed. For OBJ in particular, i think exporting the normals, basically considers smoothing groups inside of 3ds max. Meaning, a hard edge that is generated by smoothing groups (shared vertices) in 3ds max, gets translated to a split (douple vertices) in three.js. Normals are needed to indicate this split (hard edge) i think. But, the source object could also be modified, to include an actual split at hard edges (double vertices).

[WestLangley]

Vertex normals are required for a tangent-space normal map. For proper rendering, they must be the same as the normals assumed when the normal map was created. computeVertexNormals() is a heuristic that computes 'reasonable' normals. I would not rely on the client using that method if a tangent-space map is being used.

What do you suggest be done if anything with this?

Nothing, really. It is well-known that modeling tools and rendering engines have differing approaches to dealing with normal maps.

[pailhead]

Vertex normals are required for a tangent-space normal map. For proper rendering, they must be the same as the normals assumed when the normal map was created.

They do not depend on normals alone, but I believe OBJ can't even store these. I think one might use a heuristic since the results are going to be subjectively incorrect (without the tangent frame, it's impossible to tell what "correct" is). Proper rendering thus may become arbitrary.

[mrdoob]

Live link:
https://rawgit.com/pailhead/three.js/normal-map-space-example/examples/webgl_materials_normalmap_space.html

[mrdoob]

How come the live link doesn't look like in the screenshot?

[pailhead]

umm i think i didnt flip some flag right, it was the shader code that's now inside ill look into it

[pailhead]

@mrdoob i'm confused, it seems to look fine once i rebased, but i need to double check some things. Is this raw git just running it off my branch? If so, maybe it didn't include the merge?

[pailhead]

Does the rawgit thing update? The demo should look exactly the same as the one posted if you click on the first screenshot.

[mrdoob]

Seems like it updated. Looks fine here 👌

I think we should simplify the example though. Do you mind removing DAT.GUI and showing 2 spheres next to each other, one using tangent space and another using object space?

[mrdoob]

Thanks for simplifying the example! Do you know why the tangent based normal map looks wrong?

Seems like 3DS Max tangents don't match with the ones the dfdx code computes.

[pailhead]

Yes, but it is a broad topic. You basically outlined the jist of it with your last sentence.

[mrdoob]

Closing in favour of #14593