Plotly ScatterGL Texture Error

by brian428

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.js"></script>
<h2>
Use modebar to pick Box Select, then try to select points.<br>Console will show numerous "WebGL: INVALID_ENUM: activeTexture: texture unit out of range" errors.<br>Also, numerous points appear to not display, though hover data points to their locations.
</h2>

<h4>
If you change `maxSymbolCount` in the code to 16 and re-run, no errors appear.
</h4>

<!-- Plots go in blank <div> elements. 
    You can size them in the plot layout,
    or give the div a size as shown here.
<div id="testChart" style="width:100vw; height:calc(100vh - 100px);"></div>
-->
<div id="testChart" style="width:100%; height:100%;"></div>
<div id="testChart2" style="width:100%; height:100%;"></div>
<div id="testChart3" style="width:100%; height:100%;"></div>

JavaScript

let lastSymbol = -1;

let symbolList = [
  "circle", "square", "diamond", "cross", "x", "triangle-up", "triangle-down", "triangle-left",
  "triangle-right", "triangle-ne", "triangle-nw", "triangle-se", "triangle-sw", "pentagon", 
  "hexagon", "hexagon2", "star", "diamond-tall", "bowtie", "diamond-x",
  "circle-cross-open", "circle-x-open", "square-cross-open", "square-x-open",
  "circle-open", "square-open", "diamond-open", "cross-open", "triangle-up-open", 
  "triangle-down-open", "triangle-left-open", "triangle-right-open", "triangle-ne-open", 
  "triangle-nw-open", "triangle-se-open", "triangle-sw-open", "pentagon-open", "hexagon-open", 
  "hexagon2-open", "star-open", "diamond-tall-open", "bowtie-open", "diamond-x-open", 
  "cross-thin-open", "asterisk-open", "y-up-open", "y-down-open", "line-ew-open", "line-ns-open"
];

console.log( "symbol array length:", symbolList.length );

function getNextSymbol() {
	let maxSymbolCount = symbolList.length;
  
  // limit symbol count to find exact number that will trigger WebGL errors.
  //maxSymbolCount = 16; // works
  maxSymbolCount = 49; // fails
  
  // Loop back to start if we run out of symbols
  if( lastSymbol === maxSymbolCount - 1 ) {
  	console.log( "resetting last symbol" );
  	lastSymbol = -1;
  }
  lastSymbol++;
  return symbolList[ lastSymbol ];
}

let colorList = [
	"#006385", "#F06E75", "#90ed7d", "#f7a35c", "#8085e9",
  "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1",
  "#5DA5DA", "#F06E75", "#F15854", "#B2912F", "#B276B2",
  "#DECF3F", "#FAA43A", "#4D4D4D", "#F17CB0", "#60BD68"
];

let testChart = document.getElementById('testChart');

let data1 = { x: [], y: [], color: colorList[0], symbol: [], size: 8 };
let data2 = { x: [], y: [], color: colorList[1], symbol: [], size: 8 };
let data3 = { x: [], y: [], color: colorList[2], symbol: [], size: 8 };
let data4 = { x: [], y: [], color: colorList[3], symbol: [], size: 8 };
let data5 = { x: [], y: [], color: colorList[4], symbol: [], size: 8 };
let...