I got puter graphics course. So I want to learn, how to render OBJ model. Of course, I cannot use such three.js libs.

Let`s consider model from webgl-obj-loader.

            #   OBJ File Generated by Blender
            #
            ####
            o my_cube.obj
            v 1 1 1
            v -1 1 1
            v -1 -1 1
            v 1 -1 1
            v 1 1 -1
            v -1 1 -1
            v -1 -1 -1
            v 1 -1 -1
            vn 0 0 1
            vn 1 0 0
            vn -1 0 0
            vn 0 0 -1
            vn 0 1 0
            vn 0 -1 0
            f 1//1 2//1 3//1
            f 3//1 4//1 1//1
            f 5//2 1//2 4//2
            f 4//2 8//2 5//2
            f 2//3 6//3 7//3
            f 7//3 3//3 2//3
            f 7//4 8//4 5//4
            f 5//4 6//4 7//4
            f 5//5 6//5 2//5
            f 2//5 1//5 5//5
            f 8//6 4//6 3//6
            f 3//6 7//6 8//6

To parse this model is obviously very simple. But I don't know, how to render this.

The author of this lib give some example, but this code do nothing, when I run it.

I got puter graphics course. So I want to learn, how to render OBJ model. Of course, I cannot use such three.js libs.

Let`s consider model from webgl-obj-loader.

            #   OBJ File Generated by Blender
            #
            ####
            o my_cube.obj
            v 1 1 1
            v -1 1 1
            v -1 -1 1
            v 1 -1 1
            v 1 1 -1
            v -1 1 -1
            v -1 -1 -1
            v 1 -1 -1
            vn 0 0 1
            vn 1 0 0
            vn -1 0 0
            vn 0 0 -1
            vn 0 1 0
            vn 0 -1 0
            f 1//1 2//1 3//1
            f 3//1 4//1 1//1
            f 5//2 1//2 4//2
            f 4//2 8//2 5//2
            f 2//3 6//3 7//3
            f 7//3 3//3 2//3
            f 7//4 8//4 5//4
            f 5//4 6//4 7//4
            f 5//5 6//5 2//5
            f 2//5 1//5 5//5
            f 8//6 4//6 3//6
            f 3//6 7//6 8//6

To parse this model is obviously very simple. But I don't know, how to render this.

The author of this lib give some example, but this code do nothing, when I run it.

• javascript
• graphics
• rendering
• webgl

1 Answer 1

There is an example project on a different branch of the webgl-obj-loader: https://github./frenchtoast747/webgl-obj-loader/tree/gh-pages

Of course, the code is tailored to that particular project, but it should give you a good idea of how it can be used within a project.

In that project, there is a helper function in helpers.js called drawObject(). This is basically what the example is doing. Compare the code in both to try and understand what is going on. (Hint: model is just a JS object that contains a pointer to an OBJ.mesh instance and the OBJ.mesh has already been initialized by the call to initMeshBuffers()).

Without knowing what you've tried and since even the most basic WebGL scripts require a lot of boilerplate code (with a lot of places for things to break), I can't really help out any more than that.

Also, checkout the development branch for the absolute basic setup required to use the loader: https://github./frenchtoast747/webgl-obj-loader/tree/development/development