
WebGL Tutorial: Rendering Wavefront 3D Models - chinedufn
http://www.chinedufn.com/webgl-step-by-step-load-wavefront-obj
======
hacker_9
_" Right now we have an f16-model.obj file. This file is a text file that
contains data about our model’s vertices. In order to make use of this data,
we parse it into more readily accessible structure and store it as JSON."_

Wait what? This is completely redundant and will negatively impact performance
and memory.

~~~
tincture
WebGL doesn't really understand "file formats", so you're left to load the
file into a buffer yourself. JSON is a reasonable way to do that.

Once you hand off the vertices to the WebGL context, it's all the same bits;
your file loading strategy has no performance or memory impact.

~~~
hacker_9
But a .json file surely will be 2x or even 3x as big as the .obj file, because
of all the extra fluff the format adds. What is wrong with parsing an obj
file, and building up your vertex and index buffer straight away? Parsing a
.json file would also be like twice as slow. I'm not versed in WebGL but if
you have to have .json in the middle of everything that seems like a really
dumb decision by the designers, especially for the web.

~~~
zeta0134
Ordinarily I would agree with you except for what .json is: a JavaScript
Object. Or, more correctly, its serialized-to-text form. Parsing it is a
matter of invoking an extremely common function built into every JavaScript
implementation in every browser, and likely optimized to death.

This is one of those weird cases where, despite obj being a simpler format on
paper, it would likely be slower to parse due to having to hand-roll the
parser in JavaScript and not use the browser's native built-in parser instead.

~~~
microcolonel
Given that .OBJ is largely a text file which contains a vertex list and an
element list. It seems like it would make more sense to store it as a binary
in the format which is sent to the GL driver, especially given that WebGL
requires typed array buffers anyhow. Just need the offset, extent, type, and
number of axes of each buffer.

~~~
hccampos
Enter gltf
[https://github.com/KhronosGroup/glTF](https://github.com/KhronosGroup/glTF)

~~~
microcolonel
Sadly glTF is JSON, and not typed array buffers (as far as I can tell). I was
going to mention it, but it seems like in terms of performance almost anything
can be as good or better than glTF.

------
tincture
If you're already familiar with Javascript, and you want to learn WebGL, I
recommend just diving into THREE.js instead.

The problem with this tutorial is that almost all of it is hidden behind an
opaque "loadWFObj", so you don't get the critical aha moments of "wait so the
model is just a bunch of 3d triplets?", "whoa every camera is just a 4x4
matrix you multiply by", and "shaders are a C program that runs on a pixel".

I promise you'll pick up all of these things naturally by fiddling around with
THREE.js. But, you probably won't get there by copying a WebGL context
initialization example that does everything interesting inside an opaque
library.

~~~
greggman
THREE.js is awesome but it is not WebGL. It's a 3D Library that happens to use
WebGL (and can use other backends as well).

If you want to learn WebGL itself try
[http://webglfundamentals.org](http://webglfundamentals.org)

If you just want to get 3D on your page without having to learn WebGL use
THREE.js

------
hccampos
This might be useful for people who want to get started with WebGL and web-
based 3D engines:

[https://playcanvas.com/](https://playcanvas.com/)
[http://babylonjs.com/](http://babylonjs.com/)
[https://threejs.org/](https://threejs.org/)
[https://github.com/GooTechnologies/goojs](https://github.com/GooTechnologies/goojs)
[https://whsjs.io/#/](https://whsjs.io/#/)

