P5.js: Some Materials not working on iPhone in 3D

[sjscotti]

Nature of issue?

• [XX ] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ XX] WebGL
• [ ] Other (specify if possible)

Which platform were you using when you encountered this?

• [ XX] Mobile/Tablet (touch devices)
• [ ] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: checked 0.5.11 and 0.7.2
• Web browser and version: Safari on iPhone
• Operating System: IOS 12.0.1
• Steps to reproduce this:
  On newer iPhones (8 and greater), the materials and shading in examples:
  https://p5js.org/examples/3d-multiple-lights.html 2
  https://p5js.org/examples/3d-materials.html 1
  https://p5js.org/examples/3d-textures.html 1
  are not showing up. It appears that when texture, ambientMaterial, or specularMaterial are used, the shaded objects do not show up. It appears to be the hardware, not the IOS version. The latest versions iOS 12.0.1 and iOS 12.1 on an iPhone 8+ definitely has this problem, and I have heard from colleagues that iPhone X also has the same issue
  It does not occur with iPhone 7+ with iOS 12.0 or 12.0.1
  

Feature enhancement details:

New feature details:

[danielemichieletto]

I confirm the bug, also with firefox, chrome in iOS 12.1.2

[odvnpx]

Confirm same issue on iOS 12.1.4.

[stalgiag]

Hi @danielemichieletto & @odvnpx, do you have the same hardware as sjscotti (Iphone 8+ or Iphone X)? Trying to narrow this down and want to determine if it is hardware as @sjscotti suggested. If it is hardware, then maybe it's connected to the A11 Chip?

[odvnpx]

@stalgiag hey, my device is an iPhone XR.

[danielemichieletto]

@stalgiag https://github.com/stalgiag hey, my device is an iPhone 8 and iphone 6s

Il giorno 18 feb 2019, alle ore 20:59, Stalgia Grigg [e-mail] ha scritto:

Hi @danielemichieletto https://github.com/danielemichieletto & @odvnpx https://github.com/odvnpx, do you have the same hardware as sjscotti (Iphone 8+ or Iphone X)? Trying to narrow this down and want to determine if it is hardware as @sjscotti https://github.com/sjscotti suggested. If it is hardware, then maybe it's connected to the A11 Chip https://en.wikipedia.org/wiki/Apple_A11?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/processing/p5.js/issues/3293#issuecomment-464858594, or mute the thread https://github.com/notifications/unsubscribe-auth/Al-uY9wRBVL3q4pj58nXMLc5Poi5slHPks5vOwYqgaJpZM4YEuvO.

[danielemichieletto]

a workaround of the problem is to use vertex instead of plane and set first textureMode(NORMAL);

beginShape();
vertex(-larg, -alt, 0, 0);
vertex(larg, -alt, 1, 0);
vertex(larg, alt, 1, 1);
vertex(-larg, alt, 0, 1);
endShape();

[rich-gg]

apparently the workaround doesn't work
in https://rich.gg I I replace all the rect() with the Shapes as described above and... it didn't fix the probleme

:(

[danielemichieletto]

this work for me: http://dotcode.it/p5_iphone8/

[rich-gg]

this work for me: http://dotcode.it/p5_iphone8/

@danielemichieletto

Would you try this variation of your code
https://rich.gg/iPhone8r/

Only difference is, at line 84/85 I added

    fill(255);
    box(100);

[rich-gg]

@stalgiag
Would it help knowing that
this works : http://dotcode.it/p5_iphone8/
this doesn't: https://rich.gg/iPhone8r/

and that the difference is
adding a 3D object (model or primitive)
makes the reste of the render unable to display textured objects

?

[stalgiag]

@rich-gg so odd.

Sorry I haven't made any progress on this yet. I am working on something else currently. This is still a priority. I just need to get my hands on one of these devices.

Obviously if anyone owns an Iphone 8+ and is interested in working on WebGL stuff then help is very welcome. Otherwise, I'll investigate as soon as I am able.

[rich-gg]

I wish that detail I just posted, about
the render being affected by
the presence of a model() or a 3D primitive
prior to the render of a textured object
can help the bug investigation

thanks for the good work :)

[sjscotti]

I just verified that the fix mentioned at https://github.com/processing/p5.js/issues/3518 that is in the new version located at https://raw.githack.com/stalgiag/stalgiag.github.io/master/p5.min-master-5-21-19.js has fixed the problem I originally identified. Does anyone know when this fix will be in the production version of p5.js?

And thanks for making the fix!