search

mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
100.32k stars 35.2k forks source link

Alternate GroundProjectedSkybox #27422

Closed elalish closed 6 months ago

elalish commented 6 months ago

Description

I recently tried to use GroundProjectedSkybox in <model-viewer> and utterly failed. I'm not sure I can list all the problems I found, but here are a few:

1) There is a radius parameter, but the object also seems to need to be scaled (possibly to this same radius, possibly independent?). 2) If the parameters have units, then I'm dubious of the math - the example uses a height of 15 (presumably meters, since it's loading a glTF car) and I personally doubt anyone put their camera that high, unless it was a drone. 3) When I tried to apply it to other scenes, I could find no combination of parameters that gave a sensical result, and no system of parenting that allowed a model to appear fixed on the ground. I'm not actually sure it's possible, because I noticed that even in the example, the ground appears to slip under the wheels as the camera zooms, and it doesn't enable pan at all:

https://github.com/mrdoob/three.js/assets/97088/22266465-0d5c-4474-851d-7f489ff9f440

Note the sand ripple under the front tire.

I could find no clear way to fix it, so I just wrote my own. It's dramatically simpler (no custom shaders), and pretty much the only drawback is that it's slower to dynamically update the parameters, though I see no problem with this in practice since the three.js example is pretty much the only place I would imagine actually doing that on a per-frame basis.

Mine also has the advantage of making a smooth curve from the flat ground to the sky sphere:

image

It's not much code, but curious if anyone would like to see it upstreamed, and if so, in what form? @mrdoob @WestLangley @bhouston

Reproduction steps

  1. Attempt to pan around a model with a GroundProjectedSkybox.

Code

See my alternative here

Live example

Current: https://threejs.org/examples/?q=ground#webgl_materials_envmaps_groundprojected Mine: https://modelviewer.dev/examples/lightingandenv/#groundedSkybox and https://modelviewer.dev/examples/augmentedreality/#ar

Screenshots

No response

Version

r159

Device

No response

Browser

No response

OS

No response

mrdoob commented 6 months ago

I would vote for just replacing it with the new code. The fact that it doesn't require custom shaders makes it easier to maintain and also render with WebGPURenderer.

bhouston commented 6 months ago

beautiful!

hybridherbst commented 6 months ago

Thanks so much! I assume your version also doesn't have the visible seam from the original?

It is possible to adjust/use the current one nicely (and hide the swimming somewhat): https://engine.needle.tools/samples/ground-projection

elalish commented 6 months ago

Sure, I can replace this if you want - do you still want it called GroundProjectedSkybox or my GroundedSkybox or something else? Any other changes you want from this?