P5.js: I can't see the examples in references

[hjco]

Hi there! I consult the reference for 3D Primitives and I can't see the examples. The console of Chromium show this error:

Uncaught TypeError: Cannot read property 'location' of undefined
    at d.RendererGL.createBuffers (p5.min.js:37)
    at e.d.sphere (p5.min.js:38)
    at draw (eval at s (render.js:178), <anonymous>:8:3)
    at e.d.redraw (p5.min.js:33)
    at e.<anonymous> (p5.min.js:32)
    at e.<anonymous> (p5.min.js:32)
    at new e (p5.min.js:32)
    at render.js:227

And this is how I see the example for sphere:

Most appropriate sub-area of p5.js?

• [x] 3D Primitives References

Which platform were you using when you encountered this?

• [x] Desktop/Laptop

[meiamsome]

What is your browser's version, OS and Graphics Card (If any)?

I am experiencing the same issue on Ubuntu 17.04 with Chrome & Firefox using the native rendering (nvidia graphics card). This does not happen with a software-based WEBGL.

[hjco]

Chromium and Firerox both update are installed in Manjaro, my laptop is a Lenovo Thinkpad T410i with Intel and Nvidia graphis card.

[meiamsome]

Okay, and I presume then that if you run chromium with the GPU disabled (--disable-gpu after chromium on the command line) the reference renders correctly?

[hjco]

Thank you!
I have downloaded the reference and works perfectly offline, but the problem is in the website

[vincenzoml]

@hjoaco Wait, exactly what did you do? I have the same error only if I enable webgl.

[copy]

@meiamsome I think this should be reopened, as disabling webgl isn't a proper fix.

[achimkoh]

Agree to reopen! My mobile browser (Android 7.0.0, Chrome 63.0.3239.111 32-bit) gives me the same error for all 3d primitives examples.

[Spongman]

this is fixed by #2349. some implementations of the webgl shader compilers optimize out attributes that aren't used by the program.

[tendau]

Hope this is related but I also cannot open any WEBGL examples getting the error
p5.min.js:37 Uncaught TypeError: Cannot read property 'location' of undefined
at d.RendererGL.createBuffers (p5.min.js:37)
at e.d.box (p5.min.js:38)
at draw (3d.js:31)
at e.d.redraw (p5.min.js:33)
at e. (p5.min.js:32)
at e. (p5.min.js:32)
at new e (p5.min.js:32)
at e (p5.min.js:32)

Using either the CDN or the newest version of p5.js

[Spongman]

can you try with this version?

p5.js.zip

(this is a build of the #2349 branch)

[tendau]

This seems to work! Will try some more testing but would also be interested to learn what the issue is. From my testing WEBGL shapes work on every IOS device I tested but none of the android phones. With this p5 it is working. Thank you very much!

[achimkoh]

Fixed my sketch on Chrome on Android as well 🙌

[Spongman]

it's a little subtle, but the bug is exposed by the fact that different WEBGL engines in the different browsers on different platforms have different implementations of compilers for the GLSL shader language (basically the tiny programs that run on the graphics hardware for every 3d vertex and pixel in the scene). these shader programs declare the attributes that are passed to them in each vertex (for things like position, texture coordinates, normal vectors, etc...), and p5js fills buffers that contain the values for those attributes. the problem is that sometimes, if a shader program declares those attributes and doesn't actually end up using them (eg. if no lights are defined), some GLSL compilers will remove them from the program, and currently the p5js code doesn't handle this optimization (because most desktop browsers don't do it).

[stalgiag]

fixed with #2349