WebGL surface plot not rendering on Windows server

[sdx0112]

When I try surface plot in Viewer and Firefox on a Windows server, both say "Webgl is not supported by your browser - visit http://get.webgl.org for more info". But when visiting http://get.webgl.org in the error message shows a spinning cube.

[mdtusz]

I'm not very familiar with Windows servers or what Viewer is. Could you provide some more detail on the issue along with the following:

• what version of Firefox are you using?
• do other GL plots render correctly?
• are there any error messages in the Firefox console?

[collielimabean]

Hi,

I am currently running into this issue. From what I understand, this is only with the surface plot. This can be reproduced on both Chrome and Firefox, using a custom bundle. To be clear, I am in a React project, so I am using react-plotly.js to create my custom Plot element.

The specific error message is TypeError: Cannot read property scene.glplot is undefined. Chrome traces this to scene.js, line 194.

Stack trace:

index.js:2178 Error while plotting: TypeError: Cannot read property 'canvas' of undefined
    at initializeGLPlot (scene.js:194)
    at new Scene (scene.js:282)
    at Object.plotGl3d [as plot] (index.js:54)
    at drawData (plot_api.js:389)
    at Object../node_modules/plotly.js/src/lib/index.js.lib.syncOrAsync (index.js:338)
    at Object../node_modules/plotly.js/src/plot_api/plot_api.js.exports.plot (plot_api.js:446)
    at Object../node_modules/plotly.js/src/plot_api/plot_api.js.exports.newPlot (plot_api.js:671)
    at factory.js:77

Upon closer examination at frame 2 (new Scene, line 282), we see that initializeGLPlot(this, fullLayout) is called. However, initializeGLPlot has the following prototype definition initializeGLPlot(scene, fullLayout, canvas, gl). Since the gl param is undefined, this function call crashes.

Let me know if this helps at all.

[collielimabean]

I have traced this further, as I realized that the main bundle works correctly, but a custom bundle does not. The issue is not with the parameters, but rather the exception is coming from a shader compilation failure:

"gl-shader: Error compiling vertex shader of unknown name (see npm glsl-shader-name):
ERROR: 0:1: '.' : syntax error

Error compiling vertex shader of unknown name (see npm glsl-shader-name):
1: ./vertex.glsl
^^^ '.' : syntax error"

I'll continue digging to see if this is a straightforward fix.

[collielimabean]

I probably could have made this into one post, but it looks like the issue is that glslify is not taking effect in glplot3d/lib/shader.js. In other words, the shader source is not being substituted for the shader file name. If I had to guess, there needs to be a browserify or pre-processing step for custom bundles that I am not doing at the moment.

From what I understand, the prepackaged bundles don't have this problem since the shader sources are already embedded within the minified js.

Any thoughts or recommendations would be appreciated.

[etpinard]

@collielimabean see #2502 (comment)

[collielimabean]

Thanks for the recommendation. I attempted to use plotly-webpack to generate a minified custom bundle, but when I loaded it into my application, I got the following errors:

./src/util/bundle.js
  Line 1:   'Sizzle' is not defined      no-undef
  Line 1:   'Sizzle' is not defined      no-undef
  Line 1:   'Sizzle' is not defined      no-undef
  Line 1:   'MathJax' is not defined     no-undef
  Line 1:   'MathJax' is not defined     no-undef
  Line 1:   'gl' is not defined          no-undef
  Line 1:   'jQuery' is not defined      no-undef
  Line 1:   'jQuery' is not defined      no-undef
  Line 1:   'objHasKeys' is not defined  no-undef
  Line 14:  Unexpected use of 'self'     no-restricted-globals
  Line 14:  Unexpected use of 'self'     no-restricted-globals
  Line 14:  Unexpected use of 'self'     no-restricted-globals
  Line 14:  'MathJax' is not defined     no-undef
  Line 14:  'MathJax' is not defined     no-undef
  Line 25:  Unexpected use of 'name'     no-restricted-globals
  Line 25:  Unexpected use of 'name'     no-restricted-globals
  Line 25:  Unexpected use of 'name'     no-restricted-globals
  Line 25:  Unexpected use of 'name'     no-restricted-globals
  Line 25:  Unexpected use of 'name'     no-restricted-globals
  Line 37:  'ses' is not defined         no-undef
  Line 37:  'ses' is not defined         no-undef
  Line 37:  'ses' is not defined         no-undef

If I had to guess, something isn't getting put in the custom bundle, but I'm not sure how to resolve this.

[etpinard]

@collielimabean maybe someone on https://community.plot.ly/c/plotly-js can help you out.

[etpinard]

Closing, probably obsolete.