Skip to content
This repository has been archived by the owner on Dec 22, 2023. It is now read-only.

IridescentDishWithOlives for ior, specular and volume extensions #319

Merged
merged 12 commits into from
Jul 19, 2021

Conversation

echadwick-artist
Copy link
Contributor

@echadwick-artist echadwick-artist commented Jul 2, 2021

A glass dish with olives and matching glass cover. This is a “mascot” model for Phase 2 extensions, showcasing specular color, ior and volume extensions. An animation has been included to lift the refractive glass cover.

glassCover_animation

Edit: updating the animated GIF to match the latest commit.

A glass dish with olives and matching glass cover. This is a “mascot” model for Phase 2 extensions, showcasing specular color, ior and volume extensions.  An animation has been included to lift the refractive glass cover.
@echadwick-artist echadwick-artist changed the title Sample model for ior, specular and volume extensions PearlGoldOliveCoveredGlassDish for ior, specular and volume extensions Jul 2, 2021
Fixing mismatched case on `screenshot_Large.jpg`
@cx20
Copy link
Contributor

cx20 commented Jul 4, 2021

I experimentally added this model to gltf-test.
The current display results are as follows.

Library result
Three.js r130 image
Babylon.js v5.0.0 alpha.30 image
Filament v1.10.5 image

@echadwick-artist
Copy link
Contributor Author

Thanks to both of you for checking the submission.

Looks like I need to adjust the vertex normals on the gold leaf. The outer rim is looking at bit donut-shaped, rather than flat.

Filament seems a bit aggressive with transmission roughness, not sure what I can do there.

* goldLeaf recreated to be coplanar with bottom of glass, plus a 0.5mm gap.
* goldLeaf vertex normals adjusted to reduce exaggerated curvature along rim of plate.
* glassCover and glassDish specularColorFactor increased to [2,2,2] to improve specular response.
* glassCover and glassDish baseColorTextures removed (specularColorFactor provides this instead).
* Camera position and orientation adjusted to improve specular.
* glTF-Pathtracer version added: reduced glass roughness, baked the Scale of the normalTextures into the textures, removed animation, rotated cover upwards.
* Normal maps adjusted to look good in pathtracers at Scale:”1”. Reusing same textures for rasterizers. Adjusted Scale in rasterizer version.
* goldLeaf normal map edited to add bumps along rim.
* README updated.
Glass roughness values were too high, restored these to reasonable values.
@cx20
Copy link
Contributor

cx20 commented Jul 8, 2021

@echadwick-wayfair

HDRI Haven(hdrihaven.com) has recently moved to Poly Haven(polyhaven.com), so I think you should change the link.
before) https://hdrihaven.com/hdri/?h=artist_workshop
after) https://polyhaven.com/a/artist_workshop

HDRI Haven is moving to Poly Haven. Thanks for the tip @cx20
@cx20
Copy link
Contributor

cx20 commented Jul 8, 2021

@echadwick-wayfair Thank you for the quick fix.

And if possible, To be consistent with other samples, it is better to name the sample model file the same as the folder name is a good idea.

Folder Name File Name
Duck/glTF Duck.gltf
Duck/glTF-Binary Duck.glb
Folder Name File Name
PearlGoldOliveCoveredGlassDish/glTF PearlGoldOliveCoveredGlassDish.gltf
PearlGoldOliveCoveredGlassDish/glTF-Pathtracer PearlGoldOliveCoveredGlassDish.gltf

@cx20
Copy link
Contributor

cx20 commented Jul 8, 2021

Thanks for the update.
As for gltf-test, I have also updated the model and added a link to Pathtracer. After some time, it will be reflected in GitHub-Pages.

image

@cx20
Copy link
Contributor

cx20 commented Jul 8, 2021

For reference, the current display results are as follows.

model Three.js r130 Babylon.js v5.0.0 alpha.30 Filament v1.10.5
glTF image image image
Pathtracer image image image

@romainguy Are the results displayed by Filament as expected?

@romainguy
Copy link

Volume and specular are not implemented by Filament. Where can I download the glTF?

@echadwick-artist
Copy link
Contributor Author

The version within glTF-Pathtracer is meant for raytracers, it does not appear correctly in rasterizers (roughness too low, etc., see readme for details). The three renderers you're showing here are only rasterizers I think?

@romainguy
Copy link

Testing locally it seems like Filament has an issue with roughness mapping.

@abwood
Copy link
Contributor

abwood commented Jul 8, 2021

Testing locally it seems like Filament has an issue with roughness mapping.

The TransmissionRoughnessTest sample model may be helpful here.

@romainguy
Copy link

When using screen space refraction/transmission, Filament attempts to remap the roughness to try and match the screen space effect's gaussian approximation of the GGX NDF. It's that remapping that increases roughness too much it seems.

@romainguy
Copy link

Is there a screenshot of the path traced reference with the same roughness (0.15 instead of 0.035) used in the rasterizer asset?

@romainguy
Copy link

I'm actually starting to doubt three.js and Babylon here. I would expect the result to be more blurry with a roughness of 0.15. I think Filament blurs too much but three/Babylon too little. I did change Filament's roughness remapping to match the glTF spec (at IOR 1.0, roughness shouldn't apply to transmission) but otherwise our screen space refraction matches cubemap refraction at equivalent roughness.

According to @sebavan, Babylon only uses regular texture mip levels for screen space refraction where Filament uses roughness-aware Gaussian-filtered mip levels, which would explain the difference.

@sebavan
Copy link

sebavan commented Jul 8, 2021

Yup I can validate that the blur would be more accurate from filament than babylon in this case as we chose to only optim for perf in this case.

@echadwick-artist
Copy link
Contributor Author

If equivalent roughness cannot be rendered at a performant level on low- or mid-level devices (e.g. mobile) then do we still need different materials for high-end devices and non-realtime renderers?

@echadwick-artist
Copy link
Contributor Author

What about the issue of crossing multiple boundaries in raytracers, vs. a single boundary in rasterizers?

If a glass surface is set to "roughnessFactor":0.15 then wouldn't this cause a raytracer to apply a total roughness of 0.6?

Pathtracer_Roughness

@sebavan
Copy link

sebavan commented Jul 8, 2021

The material can actually be the same, this is only the refraction texture creation and sampling which uses different techniques.

About this issue, I think @MiiBond had implemented smthg for it in Babylon (simulation of course) and could probably detail more ?

* Asset renamed from PearlGoldOliveCoveredGlassDish to IridescentDishWithOlives.
* glTF-Pathtracer variant removed, since rasterizers and pathtracers should render similarly enough.
* Animation changed to start at partially open, so pathtracers without animation support can render the same partially-open view as rasterizers.
* Glass roughness reduced to match pathtracer ground-truth results; rasterizers will catch up.
* glassCover thicknessTexture re-baked from geometry thickness, then softened to reduce hard edges from low-res geometry.
* glassCover UVs redone because we don't need unique UV space for inside, and glassCover textures cropped from 2048x1024 to 1024x1024 to match new UVs.
* glassCover inside assigned a different material from the outside, so the inside can use zero roughness to improve rendering in pathtracers.
* glassDish geometry adjusted to reduce thickness and improve profile; glassCover and olives geometry adjusted to match new dish shape.
* glassDish occlusion texture removed, reusing the goldLeaf occlusion texture.
* glassDish now has KHR_maerials_volume for more accurate refraction.
@echadwick-artist echadwick-artist changed the title PearlGoldOliveCoveredGlassDish for ior, specular and volume extensions IridescentDishWithOlives for ior, specular and volume extensions Jul 9, 2021
@cx20
Copy link
Contributor

cx20 commented Jul 10, 2021

@echadwick-wayfair It's a trivial matter, but the title of README.md is still old (PearlGoldOliveCoveredGlassDish).

https://github.com/KhronosGroup/glTF-Sample-Models/blob/PearlGoldOliveCoveredGlassDish/2.0/IridescentDishWithOlives/README.md#pearlgoldolivecoveredglassdish

Rename heading to match folder name.
@donmccurdy
Copy link
Contributor

Of the four extensions (KHR_materials_ior, KHR_materials_specular, KHR_materials_transmission, KHR_materials_volume) three.js currently implements only transmission, so I'm afraid it won't be much help for comparison here.

@romainguy
Copy link

Speaking of which, I just added KHR_materials_volume to Filament. It will be in 1.11.0 which we'll release on July 19. It can be tested in our main branch right now.

@coderextreme
Copy link

https://playcanv.as/p/wQgQBgkE/

Looky, real-time animated 3 channel chromatic dispersion (even runs on some smartphones). Thanks to J3D, mick and Web3d folks!

@donmccurdy
Copy link
Contributor

donmccurdy commented Jul 10, 2021

@coderextreme the sample here is for supporting particular definitions of PBR Transmission, IOR, and Volume defined by very recent extensions to the glTF format... it doesn't look like the PlayCanvas glTF implementation supports those just yet (screenshot below), but it would be an exciting addition. 🙂

Screen Shot 2021-07-09 at 11 41 39 PM

* glassCover now uses single material, so the volume can be a single closed surface.
* glassCover now uses a roughnessTexture to set exterior roughness (0.1) and interior roughness (0.0) instead of using two materials.
* glassCover UVs and textures adjusted to fit new layout with interior and exterior in the same material.
* glassCover specularColorFactor increased to improve specular coloration.
* glassDish occlusionTexture removed, so it can reuse the goldLeaf occlusion.
* goldLeaf baseColorTexture hue adjusted to match photos.
* IBL rotation adjusted for screenshots using "Artist Workshop" so more of the windows appear in the specular color: glTF Sample VIewer uses -X environment rotation, and Dassault PBR Sample Renderer uses -180 IBL rotation to match.
* Readme and images updated.
* Animation renamed to "glassCover rotation".
@cx20
Copy link
Contributor

cx20 commented Jul 12, 2021

I updated the library and model and tried to display it again.

Library IridescentDishWithOlives.gltf - closed IridescentDishWithOlives.gltf - open
glTF Sample Viewer image image
Three.js r131dev + PR image image
Babylon.js v5.0.0 alpha.30 image image
Filament v1.10.7 image image

@donmccurdy
Copy link
Contributor

donmccurdy commented Jul 12, 2021

Thanks to @takahirox's work, three.js will support 3 of the 4 extensions soon (just missing KHR_materials_specular). I assume that is the reason the iridescent effect is missing in the three.js render above.

EDIT: It looks like the IBL orientation is a bit different as well, unrelated.

@emackey
Copy link
Member

emackey commented Jul 13, 2021

Any further discussion needed on this model? I think this looks good to merge.

@echadwick-artist
Copy link
Contributor Author

There's a bit more I could add to the readme to explain why the roughness is different on the inside of the glassCover, and how the specularColor is being used. But I think the asset itself is complete.

@emackey
Copy link
Member

emackey commented Jul 13, 2021

Looks like the press release is hitting the wire now. 🚀

@cx20
Copy link
Contributor

cx20 commented Jul 15, 2021

I updated the development version of Three.js and tried testing this model again.
Perhaps the thicknessTexture is now handled correctly and I think it has improved.

Library IridescentDishWithOlives.gltf - open
Three.js r131dev (3 days ago) image
Three.js r131dev (latest) image

BTW, it is a known problem, but there is a problem with CubeMap/IBL used in the Three.js sample of gltf-test.
For example, the left and right are reversed.

The CubeMap/IBL you are currently using refers to an older version in the glTF-Sample-Environments repository. I think it has been fixed in the latest version, but it is in ktx2 format and cannot be used as CubeMap/IBL as it is. And because it uses LFS, it can't be hosted on GitHub Pages.
Anyone who can solve this problem is welcome.

@cx20
Copy link
Contributor

cx20 commented Jul 16, 2021

BTW, it is a known problem, but there is a problem with CubeMap/IBL used in the Three.js sample of gltf-test.
For example, the left and right are reversed.

I think that the problem of CubeMap/IBL of the Three.js sample of gltf-test has been solved.
Thanks to the Rhodonite team for working on improving the cubemap texture.

Library IridescentDishWithOlives.gltf - closed IridescentDishWithOlives.gltf - open
glTF Sample Viewer image image
Three.js r131dev image image

@cx20
Copy link
Contributor

cx20 commented Jul 17, 2021

@echadwick-wayfair As a minor question, is it intentional that relative paths are used to reference textures in the current directory?
https://github.com/KhronosGroup/glTF-Sample-Models/blob/PearlGoldOliveCoveredGlassDish/2.0/IridescentDishWithOlives/glTF/IridescentDishWithOlives.gltf#L613-L645

"uri": "./glassdish_spec.png"

The glTF specification does not have a problem with relative paths being used, but I have tried several online glTF viewers (For example, PlayCanvas glTF Viewer) and they seem to give an error if relative paths are used. (This is probably a problem that needs to be fixed by the glTF viewer.

However, I don't think it is necessary to specify a relative path because the sample model should be simple.

@echadwick-artist
Copy link
Contributor Author

This is an artifact from the Max2Babylon exporter. Thanks for the info about compatibility. I'll file an Issue in their repo, and remove them from this model as I think you're right, these seem to be redundant here.

Redundant relative bitmap paths removed. Normal map for the glassCover edited to reduce 8bit pixellation artifacts.
@echadwick-artist
Copy link
Contributor Author

Max2Babylon issue reported here BabylonJS/Exporters#985

Copy link
Member

@emackey emackey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @echadwick-wayfair!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

9 participants