webgl-2d | Canvas2D API in WebGL | Canvas library

For most graphics API commands what happens is that the command is encoded in a command-buffer, at some point (asynchronously) those buffers are synchronized to the GPU by the graphics driver. For a command buffer to be predictable all data needs to be copied to be put into the buffer.

Now one problem with your code is that you're setting the data and immediately ask the GPU to draw from it, requiring a hard sync of the complete buffer. The driver expects uniforms to need syncing but not necessarily array buffers, the usage hints (DYNAMIC,STREAM and STATIC draw) don't really do much about that (actually in most cases STATIC_DRAW is faster even for dynamic data).

When these hard syncs happen you're almost always stalling the pipeline, meaning the GPU needs to wait for all the data to be transferred before it can continue doing whatever it was doing. You can avoid this by utilizing double or even triple buffering (write data for the next frame but render current one etc.).

However with all this being said, trying to optimize the draw of 6 quads is very problematic as (in this context) we're talking about immeasurable differences here, changing one thing over the other might change the frame-time but it doesn't say anything about scalability as you're really just measuring the (often static) overhead rather than the actual performance.

The PlaneBufferGeometry in three.js is using indexed vertices to share vertices so there are only 4 vertices and then 6 indices to use those 4 vertices to make 2 triangles. That means you can't give each triangle different solid colors because they share 2 vertices and a vertex can only have 1 color.

Further, the code is choosing random colors for each vertex so even if you you used 6 vertices so that the 2 triangles didn't share any you still wouldn't get the result you linked to, instead you'd get this result which is further down the page on the same tutorial.

Finally the code is only generating 3 floats per color so you need to set the number of components for the color attribute to 3 instead of 4

If you want to repeat the webgl sample you'll need to provide your own 6 vertices.

The reason is in your shader math, z = 0.

This line in your shader

I had a closer look at your code and reduced it to the absolute minimum. It turns out you can supply the starting value of the angle simply by putting it into the empty options argument of the initiatior method: $("#example").gmanUnitCircle({value: -Math.PI/3});. In my example I chose the value of -60° in radians.

There's a couple of things that needed to be done in my opinion to achieve this based on the example you provided. First, the main() function on lines 98 and 99 is setting up the sliders like so:

webglLessonsUI.setupSlider("#x", {slide: updatePosition(0), max: gl.canvas.width }); webglLessonsUI.setupSlider("#y", {slide: updatePosition(1), max: gl.canvas.height});

If we check the library you provided (around line 99) we can see that the function setupSlider returns an object with both the html reference and a function to update its value: