Because this is what a modern programmable pipeline looks like. You can go from that same ~100 lines of code to 80,000 triangles and have it still run well.
You need:
1. A way to send opaque data to the GPU (this is a buffer)
2. A way to programmatically transform that data (this is a shader)
3. A way to specify input parameters to those transforms not found in the data (a uniform)
4. A way to decompose that opaque data into tangible (an attribute)
With not much more code, you can go from that to something like e.g. http://magcius.github.io/pbrtview/ using the same exact primitives. This is an example of a custom WebGL2 engine (not using three.js) in action. Leaf through https://github.com/magcius/pbrtview/blob/gh-pages/src/models... and you'll still see the same createBuffer, bufferData, drawArrays. There's not much more that I added on top.
The truth is a tiny amount on top could significantly reduce the boilerplate for true beginners: a spec defined trivial fragment and vertex shader that has an associated glBindDefaultShaders() would already go a long way.
The truth is that it doesn't really make sense to make the "render one triangle" easier since it only makes sense to use OpenGL if you are going to go deep on how it works, so accelerating the first two days down to one day isn't going to make a huge impact on the learning curve (compared with other apis where cutting the first two days to one would be a huge deal).
My two biggest shelf pulls are Real-Time Rendering [0] by Akeine-Moller, Haines and Hoffman. 3D Math Primer for Graphics and Games [1] by Dunn & Parberry
I also read a ton of presentations and papers. Highly recommend the famous PBR SIGGRAPH course notes [0], especially the intro to light & physics by Naty Hoffman. GPU-Driven Rendering Pipelines [1] is another recent goodie.
You need:
1. A way to send opaque data to the GPU (this is a buffer)
2. A way to programmatically transform that data (this is a shader)
3. A way to specify input parameters to those transforms not found in the data (a uniform)
4. A way to decompose that opaque data into tangible (an attribute)
With not much more code, you can go from that to something like e.g. http://magcius.github.io/pbrtview/ using the same exact primitives. This is an example of a custom WebGL2 engine (not using three.js) in action. Leaf through https://github.com/magcius/pbrtview/blob/gh-pages/src/models... and you'll still see the same createBuffer, bufferData, drawArrays. There's not much more that I added on top.