Skip to content

mesh3d: Different lighting results with different hardware #1368

@jackparmer

Description

@jackparmer
Contributor

Consider this codepen:

http://codepen.io/monfera/full/ggByRW

On my 12 in Macbook, I see this:

image

@etpinard 's Thinkpad and @monfera 's Macbook show this:

image

Another example - consider this codepen:

http://codepen.io/monfera/pen/XjxZjZ

Result on my 12 in Macbook:

image

Result on larger Macbooks and Thinkpad:

image


I tried this in Chrome, Safari, and Firefox with the same result.

Computer specs:

image

Chrome specs:

image

Activity

rreusser

rreusser commented on Feb 9, 2017

@rreusser
Contributor

Hmm… looks like possible flipped normals to me. I'd suggest maybe gl_FrontFacing isn't properly supported, but 2016 seems pretty recent to fail on that, and reading the stack overflow issue more closely… not sure that's it.

See: https://github.com/gl-vis/gl-surface3d/blob/master/shaders/fragment.glsl#L28-L30

http://stackoverflow.com/questions/24375171/is-there-a-reliable-alternative-to-gl-frontfacing-in-a-fragment-shader

etpinard

etpinard commented on Feb 9, 2017

@etpinard
Contributor

cc @dfcreative which have insight about this.

monfera

monfera commented on Feb 9, 2017

@monfera
Contributor

I don't have access to this machine but guessing is always fun:

  • perhaps the gl floats are lowp - I think the standard is quite permissive about precision
  • or we're using an extension that silently causes an issue

One thing to try: visiting a bunch of WebGL content on the web to see if those work properly.

jackparmer

jackparmer commented on Feb 9, 2017

@jackparmer
ContributorAuthor

Quick update: It doesn’t seem to matter what value I set for diffuse or specular. I can set them to 0.1 or 1 or 1000 and nothing changes.

monfera

monfera commented on Feb 9, 2017

@monfera
Contributor

Do these work fine? http://webglsamples.org/

rreusser

rreusser commented on Feb 9, 2017

@rreusser
Contributor

Gotchas like pow(-abs(x), 2.0) being inconsistent across platforms bit me a couple times, but I didn't happen to catch anything obvious with a quick glance.

jackparmer

jackparmer commented on Feb 9, 2017

@jackparmer
ContributorAuthor

Do these work fine? http://webglsamples.org/

Yeah, nothing looks "off" with those. I can also change the diffuse and specular settings here:

http://multivis.net/lecture/phong.html

monfera

monfera commented on Feb 9, 2017

@monfera
Contributor

Not that it should inherently make it fail, but mesh3d uses the Cook-Torrance model. E.g. here one can choose the reflection model in a dropdown: http://www.calebjohnston.com/webgl.html

jackparmer

jackparmer commented on Feb 9, 2017

@jackparmer
ContributorAuthor

Seems to work too - I see this?

image

rreusser

rreusser commented on Feb 9, 2017

@rreusser
Contributor

Oops, sorry. I had the wrong module.

Maybe………(though this is necessarily positive, isn't it?)? https://github.com/stackgl/glsl-specular-cook-torrance/blob/master/index.glsl#L26

monfera

monfera commented on Feb 9, 2017

@monfera
Contributor

One more thing - possibly relating to the above possibility (lower precision floats): I needed to tweak the EPSILON value in the normals calculation. The brain mesh is made up of very small triangles. With the wrong EPSILON value, whole swaths of lighting just don't happen. This is my current best guess.

Way to test it: load some coarser mesh3d content from eg. plot.ly and see if that works fine.

Also, my old commits made EPSILON configurable from within Plotly: mikolalysenko/normals@a519d8a#diff-f02129f250a223ce2d22f0b6e4fa7297

jackparmer

jackparmer commented on Feb 9, 2017

@jackparmer
ContributorAuthor

Changing diffuse and specular still doesn't seem to have an effect though:

I can actually see visible changes with diffuse when ambient is turned down, I don't see any changes with specular.

image

monfera

monfera commented on Feb 9, 2017

@monfera
Contributor

I added the epsilon attribs to the codepen, with their respective default values: http://codepen.io/monfera/pen/XjxZjZ

Could you test if lower values make it work? E.g. 1e-9 instead of 1e-6, or 1e-15 instead of 1e-12. Or some much more ambitious change.

11 remaining items

jackparmer

jackparmer commented on Jan 31, 2018

@jackparmer
ContributorAuthor

One things that is weird, I don't see any shading issues in this gl-mesh3d example:
https://gl-vis.github.io/gl-isosurface3d/brainbrowser.html
I would expect to see the same issue as the plotly.js mesh3d brains.
image

monfera

monfera commented on Jan 31, 2018

@monfera
Contributor

Just a minor note, these last two images aren't too different; both seem to be primarily or exclusively lit by ambient light; it appears that the darker one simply has a lower light level. A high ambient level is usually not good because it "washes away" detail and reduces plasticity, as can be seen on the brainbrowser example. Neither seem to have eg. the specular component, compare to this:

image

In short, I think the dark brain above wants to be like what's seen in the codepen example, but misses components other than the (justly) subdued ambient component. I go by the look so I may well be wrong.

jackparmer

jackparmer commented on Feb 3, 2018

@jackparmer
ContributorAuthor

@monfera The issue is that the same mesh looks completely different depending on the viewer's computer. Here's another example: https://plot.ly/~empet/14759/. This mesh look completely different on my laptop versus my phone. These are the exact same plot (no lighting as been adjusted).

This is a huge bug IMO. Plotly meshes shouldn't look completely different depending on what computer you're using.

iPhone:
image

Laptop:
image

dy

dy commented on Feb 3, 2018

@dy
Contributor

We have that fixed in gl-mesh3d gl-vis/gl-mesh3d#8, it takes a separate effort meeting the requirements here though

jackparmer

jackparmer commented on Feb 3, 2018

@jackparmer
ContributorAuthor

AFAICT it's a GPU issue. The MBP where Plotly.js meshes appear dark has an Intel 515 GPU, but the exact same MBP (same model, OS, and Chrome) with an Intel 5300 GPU displays meshes with "normal" lighting.

The Plotly Cloud image server also renders Plotly.js meshes overly dark, wonder what GPU it's using ATM:

image

jackparmer

jackparmer commented on Feb 5, 2018

@jackparmer
ContributorAuthor

Note: @nicolaskruchten also sees this with an Intel Iris GPU on his MBP

nicolaskruchten

nicolaskruchten commented on Feb 5, 2018

@nicolaskruchten
Contributor

Here are my specs, for the record

image

nicolaskruchten

nicolaskruchten commented on Apr 17, 2018

@nicolaskruchten
Contributor

FWIW the first few links now look great on my machine :)

nicolaskruchten

nicolaskruchten commented on Apr 17, 2018

@nicolaskruchten
Contributor

(ah, but they look fine with 1.35.0 also... What's an updated test case I can try?)

etpinard

etpinard commented on Apr 17, 2018

@etpinard
Contributor

FWIW the first few links now look great on my machine :)

Strange. I haven't updated the CDN links yet.

nicolaskruchten

nicolaskruchten commented on Apr 17, 2018

@nicolaskruchten
Contributor

Sorry, too quick on the draw! I had initially seen these issues in a Dash app that showed a brain. Not sure what an easy-to-access test case is. Happy to check on anything pre/post if you like on my machine.

etpinard

etpinard commented on Apr 17, 2018

@etpinard
Contributor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugsomething broken

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @nicolaskruchten@dy@rreusser@monfera@jackparmer

      Issue actions

        mesh3d: Different lighting results with different hardware · Issue #1368 · plotly/plotly.js