Skip to content

Instantly share code, notes, and snippets.

@redhog

redhog/Results

Last active May 26, 2022 17:49
Show Gist options
  • Save redhog/a8a71ee55efb0dce979d to your computer and use it in GitHub Desktop.
Save redhog/a8a71ee55efb0dce979d to your computer and use it in GitHub Desktop.
Download ZIP
GL.bufferData and GL.drawArrays performance test
Raw
Results
Data size: 1000 000 points times 2 coords + 3 color values:
Load time for 1 arrays of 1000000 points = 39.8480000148993
Load time for 10 arrays of 100000 points = 57.4979999801144
Load time for 100 arrays of 10000 points = 53.67699998896569
Load time for 1000 arrays of 1000 points = 184.61100000422448
Load time for 10000 arrays of 100 points = 1469.6359999943525
Draw time for 1 arrays of 1000000 points = 0.15499998698942363
Draw time for 10 arrays of 100000 points = 0.3859999997075647
Draw time for 100 arrays of 10000 points = 1.6199999954551458
Draw time for 1000 arrays of 1000 points = 17.727999977068976
Draw time for 10000 arrays of 100 points = 165.69900000467896
Data size: 10 000 000 points times 2 coords + 3 color values:
Load time for 10000 arrays of 1000 points = 2167.93600001256
Load time for 1000 arrays of 10000 points = 721.0849999974016
Load time for 100 arrays of 100000 points = 357.99700001371093
Load time for 10 arrays of 1000000 points = 318.5630000079982
Load time for 1 arrays of 10000000 points = 694.6849999949336
Draw time for 10000 arrays of 1000 points = 184.12299998453818
Draw time for 1000 arrays of 10000 points = 30.34900000784546
Draw time for 100 arrays of 100000 points = 2.3629999777767807
Draw time for 10 arrays of 1000000 points = 0.5550000059884042
Draw time for 1 arrays of 10000000 points = 0.15699997311457992
Raw
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<script src="js/libs/jquery-1.10.2.min.js"></script>
<script type="text/shader" id="vertex-shader">
attribute vec2 position; //the position of the point
attribute vec3 color; //the color of the point
varying vec3 vColor;
void main(void) { //pre-built function
gl_Position = vec4(position, 0., 1.); //0. is the z, and 1 is w
gl_PointSize = 1.0;
vColor=color;
}
</script>
<script type="text/shader" id="fragment-shader">
precision mediump float;
varying vec3 vColor;
void main(void) {
gl_FragColor = vec4(vColor, 1.);
}
</script>
<script type="text/javascript">
$(document).ready(function() {
var CANVAS=$("#your_canvas")[0];
CANVAS.width=window.innerWidth;
CANVAS.height=window.innerHeight;
try {
var GL = CANVAS.getContext("experimental-webgl", {antialias: true});
} catch (e) {
alert("You are not webgl compatible :(") ;
return false;
} ;
function get_shader_program(GL) {
var shader_vertex_source = $("#vertex-shader").text();
var shader_fragment_source = $("#fragment-shader").text();
var get_shader=function(source, type, typeString) {
var shader = GL.createShader(type);
GL.shaderSource(shader, source);
GL.compileShader(shader);
if (!GL.getShaderParameter(shader, GL.COMPILE_STATUS)) {
alert("ERROR IN "+typeString+ " SHADER : " + GL.getShaderInfoLog(shader));
return false;
}
return shader;
};
var shader_vertex=get_shader(shader_vertex_source, GL.VERTEX_SHADER, "VERTEX");
var shader_fragment=get_shader(shader_fragment_source, GL.FRAGMENT_SHADER, "FRAGMENT");
var SHADER_PROGRAM=GL.createProgram();
GL.attachShader(SHADER_PROGRAM, shader_vertex);
GL.attachShader(SHADER_PROGRAM, shader_fragment);
GL.linkProgram(SHADER_PROGRAM);
return SHADER_PROGRAM;
}
var SHADER_PROGRAM = get_shader_program(GL);
var _color = GL.getAttribLocation(SHADER_PROGRAM, "color");
var _position = GL.getAttribLocation(SHADER_PROGRAM, "position");
GL.enableVertexAttribArray(_color);
GL.enableVertexAttribArray(_position);
GL.useProgram(SHADER_PROGRAM);
var datasetsnr = 1;
var datasetpointsnr = 100000000;
var datasets = [];
for (var i = 0; i < datasetsnr; i++) {
var dataset = {};
datasets.push(dataset);
dataset.points = new Float32Array(2 * datasetpointsnr);
dataset.color = new Float32Array(3 * datasetpointsnr);
for (var j = 0; j < datasetpointsnr; j++) {
dataset.points[j*2] = Math.random()*2-1;
dataset.points[j*2 + 1] = Math.random()*2-1;
dataset.color[j*3] = Math.random();
dataset.color[j*3+1] = Math.random();
dataset.color[j*3+2] = Math.random();
}
}
var start = performance.now();
for (var i = 0; i < datasetsnr; i++) {
dataset = datasets[i];
dataset.pointBuffer= GL.createBuffer();
dataset.colorBuffer= GL.createBuffer();
GL.bindBuffer(GL.ARRAY_BUFFER, dataset.pointBuffer);
GL.bufferData(GL.ARRAY_BUFFER, dataset.points, GL.STATIC_DRAW);
GL.bindBuffer(GL.ARRAY_BUFFER, dataset.colorBuffer);
GL.bufferData(GL.ARRAY_BUFFER, dataset.color, GL.STATIC_DRAW);
}
var end = performance.now();
console.log("Load time for " + datasetsnr + " arrays of " + datasetpointsnr + " points = " + (end - start));
GL.clearColor(0.0, 0.0, 0.0, 0.0);
GL.viewport(0.0, 0.0, CANVAS.width, CANVAS.height);
GL.clear(GL.COLOR_BUFFER_BIT);
var start = performance.now();
for (var i = 0; i < datasetsnr; i++) {
var dataset = datasets[i];
GL.bindBuffer(GL.ARRAY_BUFFER, dataset.pointBuffer);
GL.enableVertexAttribArray(_position);
GL.vertexAttribPointer(_position, 2, GL.FLOAT, false, 0, 0);
GL.bindBuffer(GL.ARRAY_BUFFER, dataset.colorBuffer);
GL.enableVertexAttribArray(_color);
GL.vertexAttribPointer(_color, 3, GL.FLOAT, false, 0, 0);
GL.drawArrays(GL.POINTS, 0, datasetpointsnr);
}
var end = performance.now();
console.log("Draw time for " + datasetsnr + " arrays of " + datasetpointsnr + " points = " + (end - start));
GL.flush();
});
</script>
</head>
<body style='margin:0px'>
<canvas id='your_canvas' style='position: absolute; background-color: black;'></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment