WebGL 2: Creating binary model files

Publish your Blender models in their own binary file, so they can be loaded directly in WebGL! This will really only cover single-object binary files, but I'll give you some hints on how to extend this to multi-object files and files that contain non-vertex data as well. The code we write in this video is available in this series' Github repo.

If you want more details on how to extend this to handle other situations, write a comment and maybe I'll cover that in a future video.

You can find supplementary materials on this video series' GitHub page:

This series on WebGL 2 was produced for anyone who, like me, had major problems getting a firm understanding of WebGL's intermediate and advanced concepts. Every video is focused on a single concept. If I've done this well, you shouldn't really need to "get up to speed" before watching any of these videos. There are no external libraries. I'm not building up to a custom API or injecting any abstractions. And I don't expect you to have watched from episode #1 to get "how I'm doing things with WebGL."

Complete playlist:

Videos:

I really hope someone out there will find this series helpful.

[kirillholt]

I just wanted to thank you again for this series, very underrated !

[vvatashi]

Triangulation is actually relatively simple process.

If you have a quad with vertices numbered 0, 1, 2 and 3 clockwise, then you can always split it into two triangles with vertices 0, 1, 2 and 0, 2, 3. (And if you start not from the first, but from the second vertex, then it will be divided along a different diagonal... which could matter if the quad is non-planar.) If your OBJ file consists only of triangles and quads, which I think is quite common, you can stop here.

And if you have a convex n-gon you can, in the same way, turn it into a triangle fan with vertices (0, 1, 2), (0, 2, 3), (0, 3, 4)... (0, n-1, n), or into a triangle strip with vertices (0, 1, 2), (1, 2, 3), (2, 3, 4)... (n-2, n-1, n).


I'm not sure if Blender will export non-convex shapes at all... with a non-convex n-gon things get a little more complicated: with a certain choice of the first vertex the edge to another vertex can go beyond the boundaries of the figure and create an incorrect geometry. In this case, you can find a pair of vertices such that the edge between them does not go beyond the boundaries of the figure, split the n-gon into two figures along this edge, and repeat the process for both figures. There may still be edge cases in which such a pair of vertices does not exist, but then most likely this is not a valid geometry at all.

[roblouie]

Love the videos. Small thought, I think you can just do values.map(value => parseFloat(value)) rather than making a whole other function with a temp array and all that. Also my understanding of obj files is that faces can be interleaved with other data and have negative values, indicating a relative position. Not sure how many tools do that though