GL ERROR :GL_INVALID_OPERATION : glDrawArrays: GL_BLEND with floating-point color attachments requires the EXT_float_blend extension

plotly.js
1

Just recently discovered this error. I m trying to plot 3D scatter plot and surface plot. The same code worked successfully previously.

let trace1 = {
            x: curve.data[0].periodcode1, y: curve.data[0].periodcode2, z: curve.data[0].layer2Means,
            mode: 'markers',
            name: `${curve.data[0].tradeDate.format('YYYY-MM-DD')}-BidAsk`,
            marker: {
                size: 5,
                line: {
                    color: 'rgba(217, 217, 217, 0.14)',
                    width: 0.1
                },
                opacity: 1
            },
            type: 'scatter3d',
            hoverinfo: 'text',
            text: hoverTextFortrace1
        };
        
        var trace2 = {
            x: curve.data[1].periodcode1, y: curve.data[1].periodcode2, z: curve.data[1].layer2Means,
            mode: 'markers',
            name: `${curve.data[1].tradeDate.format('YYYY-MM-DD')}-BidAsk`,
            marker: {
                size: 5,
                line: {
                    color: 'rgba(204, 204, 204, 0.14)',
                    width: 0.1
                },
                opacity: 1
            },
            type: 'scatter3d',
            hoverinfo: 'text',
            text: hoverTextFortrace2
        };        

        var data = [trace1, trace2];
        var layout = {
            title: `(${curve.data[0].product1})-(${curve.data[0].product2})-(${curve.data[0].tradeDate.format('YYYY-MM-DD')})`,
            
            height: 750,
            width: 1100,
            margin: {
                l: 30,
                r: 30,
                b: 10,
                t: 25,
                pad: 0
            },
            scene: {
                xaxis: {
                    title: `${curve.data[0].product1} Period Code`,
                    tickvals: curve.data[0].totalLeg1PeriodCodes,
                    ticktext: curve.data[0].totalLeg1PeriodCodes,
                    type: 'category',
                    ticklen: 0,
                    automargin: false
                },
                yaxis: {
                    title: `${curve.data[0].product2} Period Code`,
                    tickvals: curve.data[0].totalLeg2PeriodCodes,
                    ticktext: curve.data[0].totalLeg2PeriodCodes,
                    type: 'category',
                    ticklen: 0,
                    automargin: false
                },
                zaxis: {
                    title: 'Bid-Ask Spread',
                    automargin: false,
                },
            },
            autosize: false,
        };

PS : - curve.data[0].periodcode1 is list of string and curve.data[0].layer2Means is list float values

I am using Windows Server 2012 and Google Chrome Version 74.0.3729.131

@etienne

2

Thanks for reporting.

  • Could you the “data” / “layout” you used to generate your graph
  • Could you tell us which browser and OS you’re using

Thanks!

1 Like
3

I know this was a few months ago, but I ran into this error myself.
For me, I am running this locally with data updated using node.js and serving my files through express.

I realized Chrome has had issues with CORS in local development (not sure if related) but I got this error separately from the CORS error. Switching for local development from Chrome to using Firefox seems to work in the meantime. Not exactly sure why.