Page MenuHomePhabricator

Consider having a light source casting shadows in the 3D viewer
Closed, ResolvedPublic

Description

See how nice this looks:

https://sketchfab.com/models/9a4f5906879449c4b6d845d9bb04c9e7#

image.png (980×1 px, 409 KB)

Compared to this:

https://commons.wikimedia.beta.wmflabs.org/wiki/File:Asad_Al-Lat.stl#/media/File:Asad_Al-Lat.stl

image.png (980×1 px, 143 KB)

It clearly makes the object more "legible", and thus more useful from an encyclopedic perspective.

Event Timeline

Yeah, I think we can greatly improve what objects look like, and I would prefer to attempt to nail it now that it's not yet deployed.

I've been messing around with textures, lights, etc for a bit, trying to get close to the example above (see examples below)
I also noticed the example image was smoothened - we could also do that, but probably shouldn't as it can cause some artifacts (see smoothened phone image)

currentchange in colors & lightssmoothened
np-cur.png (1×1 px, 630 KB)
np-shadow.png (1×1 px, 695 KB)
np-smooth.png (1×1 px, 880 KB)
phone-cur.png (1×1 px, 227 KB)
phone-shadow.png (1×1 px, 321 KB)
phone-smooth.png (1×1 px, 572 KB)

@Nirzar what do you think?

Change 386193 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/3D@master] [WIP] Improve 3D display

https://gerrit.wikimedia.org/r/386193

Yeah the shape smoothing is introducing significant artifacts on the phone example and I don't think it's a good idea for encyclopedic purposes.

The color and lights update are definitely an improvement, as they make details appear that are "burned" in the current way of displaying things. And the shadows improve the depth perception.

Like the colors, but be careful with keeping a good contrast difference of background and object. Contrast is the most important part of accessibility for visual impaired audiences.

Screenshot 2017-11-13 13.13.04.png (1×1 px, 500 KB)
Screenshot 2017-11-13 13.12.51.png (1×1 px, 257 KB)

I changed a few things:

  • shadows are less harsh
  • the color is slightly less yellow, more grey-ish
  • the object is slightly more shiny and light reflects a bit more off of it

How does that look?

Change 391581 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[3d2png@master] Improve 3D display

https://gerrit.wikimedia.org/r/391581

@matthiasmullie I gave a verbal okay during a stand-up a little while ago. Just wanted to be explicit here that I think this looks good!

Change 386193 merged by jenkins-bot:
[mediawiki/extensions/3D@master] Improve 3D display

https://gerrit.wikimedia.org/r/386193

Looks pretty good. I tried on a couple operating systems a bunch of browsers. Shading appears to be working.

Screen Shot 2017-11-20 at 5.27.20 PM.png (720×882 px, 193 KB)

Screen Shot 2017-11-20 at 5.19.55 PM.png (946×960 px, 279 KB)

The smoothing is definitely looking better than earlier... thanks @matthiasmullie

Change 391581 merged by MarkTraceur:
[3d2png@master] Improve 3D display

https://gerrit.wikimedia.org/r/391581

Change 408499 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/3D@master] Make textures better match style guide

https://gerrit.wikimedia.org/r/408499

Change 408499 merged by jenkins-bot:
[mediawiki/extensions/3D@master] Make textures better match style guide

https://gerrit.wikimedia.org/r/408499