create3000 / x_ite

X_ITE X3D Browser, view and manipulate X3D and VRML scenes in HTML.
https://create3000.github.io/x_ite/
Other
66 stars 13 forks source link

Behavior of VRML SpotLicht #176

Open olafgithub opened 4 days ago

olafgithub commented 4 days ago

When working on a 3D photo gallery ( under construction at https://satadorus.eu/gallery/ ) I noticed some, I feel, strange behavior of the SpotLight mode. I liked to place a SpotLight in front and above each image. The idea behind it was that if you are near a photo the spotlight turns on and is visible on the wall and the passe-partout. I use a narrow beam and only a little falloff.

It looks like the spotlight only affects shapes that are COMPLETELY IN the beam. A shape close to the spotlight is not lighted at all. The VRML documentation for version 2.0 says the spotlights affect shapes that INTERSECT with the beam.

Not sure this is a bug.

Note: there is NO spotlight in the code example above. I do have a sample scene, but need to clean it up a bit.

Thanks,

Olaf

create3000 commented 4 days ago

There are two angles that determine how SpotLight lights up, cutOffAngle and beamWidth.

The cutOffAngle is the outer cone angle, from which there is no more light. Within beamWidth the light is maximised, and there is a transition between beamWidth and cutOffAngle.

cutOffAngle should always be larger than beamWidth.

Tip: For your scene it is probably fine if you use a local light for each photo (set global to false), and group the light to the photo, then you can have as many lights as photos.

olafgithub commented 4 days ago

Thanks.

I understand the concept of the SpotLight and the angles. What I mean is that if a shape is NOT FULLY in the beam, it Is not illuminated at all.

Imagine I shone a spotlight with cutOffAngle = 150 degrees and beamWidth = 50 degrees ( I know it must be in radians :-) at an infinite wall from a short distance. I expect to see a bright spot on the wall and a larger spot. With X_ITE I see nothing at all. When I shine this spotlight at a series of squares only the closer ones light up

The small spheres are the 3 narrow spotlights in Red, Green, and Blue. The point to -x (to the big square) beamWidth = 0.2 cutOffAngle = 0.4

See how the nearest squares are NOT illuminated.

spotlights

Olaf.

create3000 commented 4 days ago

I think I know what's causing the problems in your scene. Since you are probably using VRML 2.0 scenes, 'only' the Gouraud shader is used, which has a limited light fidelity. Only when you use the Phong shader, lights will cast nice gradients. However, this is only active by default for materials as of X3Dv4.

You have two options: Either you change the header to #X3D V4.0 utf8, or you set the browser option 'Shading' to 'PHONG'.

olafgithub commented 4 days ago

Thanks,

I will try this for sure. Glad it is not a bug...

Olaf

olafgithub commented 3 days ago

Phong shader works much better!

spotlights_2

Thanks,

Olaf

create3000 commented 3 days ago

Also notices you still import x_ite.css. With new \<x3d-canvas> element it is no more needed to import x_ite.css, it is done automatically. Also it is preferable to use x_ite URL 'https://cdn.jsdelivr.net/npm/x_ite@10.0.2/dist/x_ite.min.js' from jsDeliver either with specific version or version latest (possible but not recommended).

olafgithub commented 3 days ago

I read about the .css no longer required... Most projects are copy-paste code. I will change it later. By using the latest version I can report more bugs, if any :-)

Thanks for you help,

Olaf