JSFiddle - React, Tailwind, and code Playground
HTML
<button onclick="go();">Go</button> <button onclick="stop();">Stop</button><br />
<canvas id="canvas" width="300" height="50" style="border: 1px solid #aaa;"></canvas><br/>
<textarea id="output" style="width: 300px; height: 300px;border: 1px solid #aaa;"></textarea>
JavaScript
// ****************************************************************
// Click 'GO' and within a minute, the browser will probably run
// out of memory and the tab will crash (check developer console).
// Any ideas why the memory isn't getting freed even though
// deleteBuffer() is getting called on all the buffers?
// ****************************************************************
var gl = null;
var buffers = [];
var numBuffers = 1000;
var bufferSize = 65000;
var loop = true;
function getContext() {
var name, names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
var canvas = document.getElementById("canvas");
while(name = names.pop()) {
try {
gl = canvas.getContext(name);
} catch (e) {}
if (gl) break;
}
}
function log(text) {
document.getElementById("output").value += text +"\n";
//console.log(text);
}
function go() {
if (!loop) {
log("stopped");
return;
}
getContext();
createBuffers();
deleteBuffers();
setTimeout(go, 2000);
}
function stop() {
log("stopping...");
loop = false;
}
function createBuffers() {
log("create buffers");
for (var i = 0; i < numBuffers; i++) {
var bufferData = new Float32Array(bufferSize);
for (var j = 0; j < bufferSize; j++)
bufferData[j] = i+j;
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, bufferData, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
buffers.push(buffer);
bufferData = null;
}
}
function deleteBuffers() {
log("delete buffers");
var buffer;
while (buffer = buffers.pop())
gl.deleteBuffer(buffer);
// release the context
gl = null;
}