I've written the following code so far, and it works fine for a couple thousand objects, but is reaaaally slow when scaling up to 100k.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | function draw(dt) { gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.useProgram(shader_program); var view = mat4.create(); view = mat4.rotate(view, view, glMatrix.toRadian(-50), vec3.fromValues(1.0, 0.0, 0.0)); view = mat4.translate(view, view, vec3.fromValues(camera.x, camera.y, camera.z)); // TEST camera.y += dt * 0.00001; var projection = mat4.create(); projection = mat4.perspective(projection, glMatrix.toRadian(45), gl.drawingBufferWidth / gl.drawingBufferHeight, 0.1, 100); var uniform_loc; uniform_loc = gl.getUniformLocation(shader_program, "view"); gl.uniformMatrix4fv(uniform_loc, gl.FALSE, view); uniform_loc = gl.getUniformLocation(shader_program, "projection"); gl.uniformMatrix4fv(uniform_loc, gl.FALSE, projection); var hex_indices = [0, 1, 2, 0, 2, 3, 0, 3, 5, 3, 4, 5]; gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indices_buffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(hex_indices), gl.STATIC_DRAW); // this could be elsewhere, but I'm just testing so far (and it is not the bottleneck, of course) var hex = create_hex(0, 0, 0.1); var hex_verts = []; for (var i = 0; i < 6; i++) { hex_verts = hex_verts.concat(hex_corner(hex, i)); } gl.bindBuffer(gl.ARRAY_BUFFER, array_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(hex_verts), gl.STATIC_DRAW); var vertexLocation = gl.getAttribLocation(shader_program,"position"); gl.enableVertexAttribArray(vertexLocation); gl.vertexAttribPointer(vertexLocation,3,gl.FLOAT,false,6 * 4,0); // draw every hexagon for (let hex of hexes) { // translate to hexagon position var model = mat4.create(); model = mat4.translate(model, model, vec3.fromValues(hex.x, hex.y, 0)); uniform_loc = gl.getUniformLocation(shader_program, "model"); gl.uniformMatrix4fv(uniform_loc, gl.FALSE, model); // set hexagon color var vertexColor = gl.getAttribLocation(shader_program,"color"); gl.vertexAttrib3f(vertexColor, hex.r, hex.g, hex.b); // draw hexagon gl.drawElements(gl.TRIANGLES,hex_indices.length,gl.UNSIGNED_SHORT,0); // draw hexagon outline var vertexColor = gl.getAttribLocation(shader_program,"color"); gl.vertexAttrib3f(vertexColor, 0, 0, 0); gl.drawArrays(gl.LINE_LOOP, 0, hex_verts.length/2/3); } requestAnimationFrame(draw) } |
Is it the sheer number of draw calls? Or is it the fact that I'm telling opengl to draw 100k+ objects which are mostly not even on the screen space? Or is it both?
I'm trying to think of a good way to fix the first one (maybe create a huge array with the vertices of all hexagons? Is this really the to go?), but I don't even know if the second one is a problem I should care about.
I would like the opinion of someone who is more experienced on what I should aim for.
Thank you guys in advance, this community is awesome.