
Barebones WebGL in 75 lines of code - akdas
https://avikdas.com/2020/07/08/barebones-webgl-in-75-lines-of-code.html
======
mrspeaker
If you want to go beyond the "hello, world", I highly recommend this huge
series:
[https://www.youtube.com/channel/UCSnyjB_8iVxi2ZAfn_1L6tA](https://www.youtube.com/channel/UCSnyjB_8iVxi2ZAfn_1L6tA)
(it's up to episode 130-something now... but start at the beginning!)

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'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.

I used that knowledge to make this minecraft-y thing:
[https://github.com/mrspeaker/webgl2-voxels](https://github.com/mrspeaker/webgl2-voxels)
(which I especially love as it doesn't use any compilation/build steps - just
native modules and plain ol' javascript!).

~~~
Arnavion
>If you want to go beyond the "hello, world", I highly recommend this huge
series:
[https://www.youtube.com/channel/UCSnyjB_8iVxi2ZAfn_1L6tA](https://www.youtube.com/channel/UCSnyjB_8iVxi2ZAfn_1L6tA)
(it's up to episode 130-something now... but start at the beginning!)

Playlist link for the series:
[https://www.youtube.com/watch?v=LtFujAtKM5I&list=PLMinhigDWz...](https://www.youtube.com/watch?v=LtFujAtKM5I&list=PLMinhigDWz6emRKVkVIEAaePW7vtIkaIF)

------
BearOso
> 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.

You think that now, but wait until you get to Vulkan.

~~~
Impossible
Yes, every HN graphics thread has a group of people that complain that Vulkan
isn't used everywhere. Most of them have not written any Vulkan because many
HN graphics threads complain about the amount of boilerplate required to get a
triangle onscreen in higher level APIs like OpenGL. I can't find a Vulkan C
API hello triangle that is less than 1000 LOC, although Vulkan-hpp reduces
that significantly, and many of the examples are OpenGL size.

[https://github.com/KhronosGroup/Vulkan-
Hpp](https://github.com/KhronosGroup/Vulkan-Hpp)

~~~
Jasper_
The complexity that Vulkan introduces is not just the extra code, it's a
substantial rethink of the mental model of graphics that involves a lot more
precision about things like synchronization, and baking of device state. Those
who argue "Vulkan requires more boilerplate" are missing the point, imho.

~~~
mewse
Or to put that same idea differently: If you treat the extra code required as
“boilerplate”, then you’re unlikely to get much of a benefit from switching to
Vulkan.

~~~
esrauch
The issue is that OpenGL isn't going to get any new versions, so if you're
trying to be forward looking there's only Vulkan even if you don't need the
delta that you get performance-wise between that and GL.

Its a little surprising there's no real movement for an API that is closer to
ES3 in difficulty that targets Vulkan and Metal underneath. I guess maybe
webgpu will be that thing eventually.

------
FarhadG
Shameless plug: If you'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.

[https://www.amazon.com/Real-Time-Graphics-WebGL-
interactive-...](https://www.amazon.com/Real-Time-Graphics-WebGL-interactive-
applications/dp/1788629698)

------
wetmore
For someone who wants to get started messing around with webgl I would
recommend [http://regl.party/](http://regl.party/). I found it easier to work
with webgl by learning about the concepts from tutorials like
[https://webglfundamentals.org/](https://webglfundamentals.org/) 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.

------
dlbucci
It'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:
[https://webglfundamentals.org/](https://webglfundamentals.org/)

~~~
akdas
Thanks for the heads up. I actually did look at that reference, and in
particular, the WebGL State Diagram is fantastic. Unfortunately, it still uses
some helper libraries that, for me, obscure the core APIs. That said, WebGL
Fundamentals is definitely going to be one of my references going forward.

~~~
Jasper_
I do recommend writing some DSA-like helpers for OpenGL, its global state is
annoying to wrangle and not that meaningful to the actual GPU. The tricky part
of OpenGL is understanding when something is a bad API accident and when
something is actually meaningful.

Texture bindings are a good example of something that came about mostly by
accident, as they didn't want to break legacy code. So we went from "the
texture" to "the current texture", and then had to introduce "the active
texture" once multi sampling entered the picture.

~~~
akdas
100% agreed that I'll be writing abstractions as the program grows. But
without understanding the underlying APIs, I don't know which abstractions to
write.

As another commenter asked: what does "DSA-like helpers" mean in this case?

~~~
Jasper_
DSA is Direct State Access, it's an OpenGL extension to remove some (not all!)
of the more annoying binding state.

[https://www.khronos.org/opengl/wiki/Direct_State_Access](https://www.khronos.org/opengl/wiki/Direct_State_Access)

~~~
Twisol
Ah, so for "DSA-like helpers" you're suggesting additional helpers that will
take care of binding the given object, making manipulations, and unbinding it?

~~~
Jasper_
Yep. Though it's a lot trickier than just bind/unbind, e.g. if you have a VAO
bound, you need to unbind the VAO before binding a vertex buffer, or else you
might have overwritten the VAO's vertex buffer binding slot. And I've
encountered many, many similar cases like that and edge cases, especially
around framebuffer management.

The OpenGL programming model is unfortunate.

------
xem
Hi, Here's my tutorial for going much further than a colored triangle, with
very few code too: [https://xem.github.io/articles/webgl-
guide.html](https://xem.github.io/articles/webgl-guide.html)

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

