Shrinking buffers dynamically - webgl

Question

I am updating existing WebGl code (with only very basic knowledge about WebGl).
In the code there are a couple of functions to grow a set of buffers like this
this.tail = new Float32Array(0);
this.tail_buffer = gl.createBuffer();
this.tail_index = 0;
this.tail_colors = new Float32Array(0);
this.tail_colors_buffer = gl.createBuffer();
var length = 512;
this.head = new Float32Array(0);
this.head_buffer = gl.createBuffer();
this.tail_length = new Float32Array(0);
/**
* Update the tail buffer between two indexes.
* #param {number} a, with a <= b
* #param {number} b
*/
_update = function(a, b) {
var gl = this.gl;
var length = 512;
var buffer = this.tail.buffer;
gl.bindBuffer(gl.ARRAY_BUFFER, this.tail_buffer);
if (a == 0 && b == length - 1) {
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.tail);
} else {
var sublength = b - a + 1;
for (var s = 0; s < this.solutions.length; s++) {
var offset = s * 3 * length * 4 + 3 * a * 4;
var view = new Float32Array(buffer, offset, sublength * 3);
gl.bufferSubData(gl.ARRAY_BUFFER, offset, view);
}
}
};
/**
* Adjust all buffer sizes if needed.
*/
_grow_buffers = function() {
function next2(x) {
return Math.pow(2, Math.ceil(Math.log(x) * Math.LOG2E));
}
var gl = this.gl;
var count = next2(some_number);
var length = 512;
if (this.tail.length < count * length * 3) {
var old_tail = this.tail;
this.tail = new Float32Array(count * length * 3);
this.tail.set(old_tail);
gl.bindBuffer(gl.ARRAY_BUFFER, this.tail_buffer);
gl.bufferData(gl.ARRAY_BUFFER, count * length * 4 * 3, gl.DYNAMIC_DRAW);
this._update(0, length - 1);
}
if (this.tail_length.length < count) {
var old_tail_length = this.tail_length;
this.tail_length = new Float32Array(count);
this.tail_length.set(old_tail_length);
}
if (this.tail_colors.length < count * 3) {
this.tail_colors = new Float32Array(count * 3);
for (var i = 0; i < this.tail_colors.length; i++) {
var color = getColor(i);
this.tail_colors[i * 3 + 0] = color[0];
this.tail_colors[i * 3 + 1] = color[1];
this.tail_colors[i * 3 + 2] = color[2];
}
gl.bindBuffer(gl.ARRAY_BUFFER, this.tail_colors_buffer);
gl.bufferData(gl.ARRAY_BUFFER, count * 4 * 3, gl.STATIC_DRAW);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.tail_colors);
}
if (this.head.length < count * 3) {
this.head = new Float32Array(count * 3);
gl.bindBuffer(gl.ARRAY_BUFFER, this.head_buffer);
gl.bufferData(gl.ARRAY_BUFFER, count * 3 * 4, gl.DYNAMIC_DRAW);
}
};
I would like to write a function that shrinks the buffers (instead of growing them as the one above). The easy way is to use a function similar to the grow_buffers function but revert the if statements (from < to >). I think I am missing something though and that might not deallocate all the buffer space.
Here are some things I dont understand in the above code: what does gl.bufferSubData do? In the multiplication by 3 * 4 I dont understand the 4 (the 3 is probably the number of colors)