google / model-viewer

Easily display interactive 3D models on the web and in AR!
https://modelviewer.dev
Apache License 2.0
6.95k stars 820 forks source link

Clipping planes, gamma and scrolling #1687

Closed ZeusLT closed 3 years ago

ZeusLT commented 3 years ago

Description

Is there a way to adjust near/far clipping planes so we could view interiors? (view live demo)

Gamma, I have found that model-viewer models are darker than in other software (when both are without environment maps), I think it might have something to do with gamma values.

Changing value in line 56409 - this.threeRenderer.gammaFactor = 3; seems to do the trick for me, but I don't want to have this file local just because of 1 modified value.

Scrolling, I need a way to allow page scrolling with a mouse wheel when hovering over model-viewer. Maybe this https://github.com/google/model-viewer/issues/1679 or this https://github.com/google/model-viewer/issues/1424 (I don't feel any difference after the update)

tl;dr: please expose clipping planes and gamma settings, add controls-ignorezooming-allowpagescrolling attribute.

Live Demo

https://archy.lt/modelviewer/ (It is fairly not optimized at this point, 100MB file, might take a while to load)

Version

Browser Affected

OS

elalish commented 3 years ago

Regarding gamma, have you tried changing the exposure? As for differences with other renderers, we have actually made a fair bit of effort to converge the various glTF renderers (though Babylon.js has a known brightness shift we had to correct for here). If you can share some screenshots of comparisons you've made, that would be helpful.

I'm not quite sure what you mean about viewing interiors (seems to work fine in your demo for me). You are welcome to set the camera radius to zero (you'll first need to set the minimum radius to zero and orbit-sensitivity to -1).

Disabling zoom entirely is a reasonable feature request. I might not even need a new API for it; how about if the minimum and maximum radius and field of view are equal, then we can deduce zooming is impossible and not take over the wheel in that case. Would that be reasonable?

ZeusLT commented 3 years ago

I'm not quite sure what you mean about viewing interiors (seems to work fine in your demo for me). You are welcome to set the camera radius to zero (you'll first need to set the minimum radius to zero and orbit-sensitivity to -1).

Camera seems to be orthographic, that means I can't go behind the wall with a camera, that is what I meant. I will test out what you suggested.

Disabling zoom entirely is a reasonable feature request. I might not even need a new API for it; how about if the minimum and maximum radius and field of view are equal, then we can deduce zooming is impossible and not take over the wheel in that case. Would that be reasonable?

Yes I already did that to remove zooming but I don't know how to allow page scrolling instead of modelviewer.

Regarding gamma, have you tried changing the exposure? As for differences with other renderers, we have actually made a fair bit of effort to converge the various glTF renderers (though Babylon.js has a known brightness shift we had to correct for here). If you can share some screenshots of comparisons you've made, that would be helpful.

I will in few hours.

ZeusLT commented 3 years ago

Blender: blender https://gltf-viewer.donmccurdy.com/: gltf-viewer Model-Viewer default gamma(2), exposure 1: defaultgamma2exposure1modelveiwer Model-Viewer gamma 3, exposure 1: gamma3exposure1modelviewer Model-Viewer gamma 3, exposure 0.5: gamma3exposure05modelviewer Model-Viewer default gamma(2), exposure 2: gamma2exposure2modelviewer

ZeusLT commented 3 years ago

and original texture: kilimas_Corona_Beauty

ZeusLT commented 3 years ago

Ah i realized default gamma value was 2.2 not 2, so they are a little bit brighter than in the picture but still too dark for me.

elalish commented 3 years ago

The primary difference between the three viewers you're showing is they all use different lighting. I would recommend crafting your own HDR environment and setting it using environment-image to have full control over the lighting of your scene.

ZeusLT commented 3 years ago

I've used emissive materials on all of them with disabled lighting

elalish commented 3 years ago

That's an interesting approach, but runs counter to the concept of physically-based rendering. There be dragons...

mjvo commented 3 years ago

@ZeusLT - by clipping planes, were you referring the ability to do a cross section through a 3D model? Here are a few examples from three.js:

What @elalish suggests allows you to "stand inside" the model, but for archiviz (as well as medical visualization), the ability to control cross-sections in modelviewer would be incredibly useful!

elalish commented 3 years ago

@mjvo you're the second user to ask for cross-sections. I agree that would be cool, though it's not on my short list of features to implement. However, if you're interested, I'd be happy to merge a contribution along these lines.

ZeusLT commented 3 years ago

@mjvo I was thinking of something more simple, to have a camera move past a part of model, but what you shared works as well.