webgl error in Create React App

[archmoj]

https://community.plotly.com/t/webgl-is-not-supported-by-your-browser-for-3d-scatter/43415/6

[archmoj]

Addressed in #5233.

[handeer]

sorry, bug yet not resolve

[archmoj]

sorry, bug yet not resolve

@handeer could you tell us which error you would get in the console when using

“plotly.js”: “git://github.com/plotly/plotly.js.git#5d4c888407306f2719c76c67d79f8203bcdaac1a”,

[alexcjohnson]

@handeer note the issue closed when the PR that fixed it was merged, but this fix hasn't yet been released in a published version.

[handeer]

sorry, bug yet not resolve

@handeer could you tell us which error you would get in the console when using

“plotly.js”: “git://github.com/plotly/plotly.js.git#5d4c888407306f2719c76c67d79f8203bcdaac1a”,

yes, i got it.
import Plotly from "plotly.js/lib/index"; error
import Plotly from "plotly.js/dist/plotly"; ok

[ityoung2016]

I don't know if this helps but I get the same error message from my app on an iPad (iPadOS v14.2) through a Safari console attached to my iPad. The complete message is:

"webgl setup failed possibly due to enabling preserveDrawingBuffer config. The device may not be supported by is-mobile module! Inverting preserveDrawingBuffer option in second attempt to create webgl scene."

After the "second attempt" the 3D view is rendered perfectly. To test, the app is free on the Apple App Store under the name "StochasticS" and there are several places where 3D plots are made. The message above came from Laboratory Exercise 10.6 but the same message on the console can be found in exercises 8.1, 10.5, and 10.7.

[silviubogan]

With the latest Plotly.js commit in master (997946b) I get this error when using scatter 3d (the code I work on is here and the package.json is accessible in the same project):

The props of the PlotlyComponent:

The code loads a partial bundle (a correct one, I verified) and the same chart data works in react-chart-editor, in the same web page.

If I go to https://get.webgl.org/ I get the green message: "Your browser supports WebGL" and a spinning cube.

In the DevTools console I get this:

react_devtools_backend.js:2430 WARN: webgl setup failed possibly due to false preserveDrawingBuffer config. The mobile/tablet device may not be detected by is-mobile module. Enabling preserveDrawingBuffer in second attempt to create webgl scene...
overrideMethod @ react_devtools_backend.js:2430
push../src/addons/volto-plotlycharts/node_modules/plotly.js/src/lib/loggers.js.loggers.warn @ loggers.js:53
push../src/addons/volto-plotlycharts/node_modules/plotly.js/src/plots/gl3d/scene.js.proto.tryCreatePlot @ scene.js:154
push../src/addons/volto-plotlycharts/node_modules/plotly.js/src/plots/gl3d/scene.js.proto.initializeGLPlot @ scene.js:201
Scene @ scene.js:87
plot @ index.js:55
push../src/addons/volto-plotlycharts/node_modules/plotly.js/src/plot_api/subroutines.js.exports.drawData @ subroutines.js:593
push../src/addons/volto-plotlycharts/node_modules/plotly.js/src/lib/index.js.lib.syncOrAsync @ index.js:417
continueAsync @ index.js:412
Promise.then (async)
push../src/addons/volto-plotlycharts/node_modules/plotly.js/src/lib/index.js.lib.syncOrAsync @ index.js:420
plot @ plot_api.js:399
newPlot @ plot_api.js:576
react @ plot_api.js:2612
(anonymous) @ factory.js:82
Promise.then (async)
updatePlotly @ factory.js:73
componentDidMount @ factory.js:110
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
onChange @ View.jsx:36
(anonymous) @ visibility-sensor.js:381
setInterval (async)
(anonymous) @ visibility-sensor.js:268
componentDidMount @ visibility-sensor.js:400
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
hydrate @ react-dom.development.js:24823
(anonymous) @ start-client.jsx:45
checkReadyState @ loadable.esm.js:428
(anonymous) @ loadable.esm.js:438
loadableReady @ loadable.esm.js:413
(anonymous) @ start-client.jsx:44
(anonymous) @ client.js:8
./src/client.js @ client.js:13
__webpack_require__ @ bootstrap:873
fn @ bootstrap:150
1 @ theme.js:2
__webpack_require__ @ bootstrap:873
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ vendors~client.chunk.js:1
Show 33 more frames

[archmoj]

@silviubogan thanks for the report.
Could you please let us know about the OS and browser you are on?

[silviubogan]

@archmoj Chromium Versiunea 87.0.4280.88 (Versiune oficială) Arch Linux (64 de biți) on Manjaro Linux latest stable version at the moment I am writing this.

[archmoj]

@silviubogan now could you please test this branch and report the error messages you get?

[silviubogan]

@archmoj I get an empty canvas and no errors, until I resize the viewport, when I get this console output for almost each resize event. If I change the type of the chart from Scatter 3D to Line 2D in the react-chart-editor I get a working plot, when I switch back to 3D scatter, the canvas is empty. In the preview of react-chart-editor the 3D plot is correctly shown. Thanks!

[archmoj]

@silviubogan could you expand and paste longMessage regarding the shader error please?

[silviubogan]

@archmoj

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

[silviubogan]

@archmoj

A screenshot, HTH.

[JakenHerman]

The above happens on Windows 10/MS Edge and Windows 10/Mozilla Firefox as well.