Barebones WebGL in 75 lines of code

If you want to go beyond the &quot;hello, world&quot;, I highly recommend this huge series: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;channel&#x2F;UCSnyjB_8iVxi2ZAfn_1L6tA" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;channel&#x2F;UCSnyjB_8iVxi2ZAfn_1L6tA</a> (it&#x27;s up to episode 130-something now... but start at the beginning!)<p>After grokking the basics of WebGL I was stuck at where to go next. I could draw triangles, and I could give them perspective... but I didn&#x27;t know how to combine them into something bigger. The Sketchpunk series was really good at showing how to build it into a library and make real projects.<p>I used that knowledge to make this minecraft-y thing: <a href="https:&#x2F;&#x2F;github.com&#x2F;mrspeaker&#x2F;webgl2-voxels" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mrspeaker&#x2F;webgl2-voxels</a> (which I especially love as it doesn&#x27;t use any compilation&#x2F;build steps - just native modules and plain ol&#x27; javascript!).

&gt; The hard part of learning OpenGL for me has been the sheer amount of boilerplate needed to get the most basic image on the screen.<p>You think that now, but wait until you get to Vulkan.

Shameless plug: If you&#x27;re interested in building a complete engine, I published a book on WebGL 2, where readers go from the very basics all the way up to building a minimalistic rendering engine (THREE.js like) and use it to render a virtual 3D car showroom.<p><a href="https:&#x2F;&#x2F;www.amazon.com&#x2F;Real-Time-Graphics-WebGL-interactive-applications&#x2F;dp&#x2F;1788629698" rel="nofollow">https:&#x2F;&#x2F;www.amazon.com&#x2F;Real-Time-Graphics-WebGL-interactive-...</a>

For someone who wants to get started messing around with webgl I would recommend <a href="http:&#x2F;&#x2F;regl.party&#x2F;" rel="nofollow">http:&#x2F;&#x2F;regl.party&#x2F;</a>. I found it easier to work with webgl by learning about the concepts from tutorials like <a href="https:&#x2F;&#x2F;webglfundamentals.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;webglfundamentals.org&#x2F;</a> but then use regl for my actual coding, because you still need to understand the way webgl works but the API regl exposes is much more ergonomic.

It&#x27;s been a while since I touched WebGL, but this site was the most informative one I found, and is what I based most of my code on: <a href="https:&#x2F;&#x2F;webglfundamentals.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;webglfundamentals.org&#x2F;</a>

Hi, Here&#x27;s my tutorial for going much further than a colored triangle, with very few code too: <a href="https:&#x2F;&#x2F;xem.github.io&#x2F;articles&#x2F;webgl-guide.html" rel="nofollow">https:&#x2F;&#x2F;xem.github.io&#x2F;articles&#x2F;webgl-guide.html</a>

Recommend writing gl.getShaderInfoLog output to console unconditionally. It may contain information even if compilation is successful.