frenchtoast747 / webgl-obj-loader

A simple OBJ model loader to help facilitate the learning of WebGL.
http://frenchtoast747.github.io/webgl-obj-loader/
MIT License
281 stars 59 forks source link

Documentation / Example for materials #46

Open dakom opened 6 years ago

dakom commented 6 years ago

Thanks for making this library! I'm looking forward to playing with it :)

One thing at a glance - I downloaded some basic sphere model from turbosquid and it comes with some material. When I load it via webl-obj-loader and console.log the mesh returned from downloadMeshes I see there's some materials.

Looking the source of material.js- I see lots of great comments on what a material is - e.g. diffuse, specular, etc.

However, I don't see any documentation of how to use this in a shader. I understand that there is no 1:1 correspondence since lighting is implementation specific, and using this library as opposed to Three.JS is all about getting down and dirty to DIY.

Still, any documentation or leads on how to get from materials to shader/js implementation is helpful. Sortof like nice how to you did with initMeshBuffers... e.g. maybe provide a helper util, but show code samples of the reasoning behind it so it's easier to build from scratch?

Right now I'm just learning WebGL and sortof at a place of basically understanding how to apply a directional light by formula (e.g. this article) - to give some context :)

Any thoughts on this are appreciated.

Thanks!

frenchtoast747 commented 6 years ago

Thanks for making this issue! It's always encouraging to see people using this library.

You're absolutely correct that the documentation is (severely) lacking for MTL support. We have been trying to add support for MTL's in phases with the actual code being the bulk of the support and the documentation is a part of the last phase. Part of my goal for the documentation is to convert the single README to a full suite of documentation including API specifics as well as tutorials/examples of how to use each component of this library.

As you can imagine, performing such a task requires a lot of time and I haven't had much to be able to devote to this library lately (at least, not since the implementation of the MTL support). However, this issue is a great reminder of the importance of this library for beginners to WebGL, so I will try my best to bump the priority of the webgl-obj-loader and add documentation soon.

dakom commented 6 years ago

Thanks! In the past couple days, after bouncing around the web- I eventually landed on glTF... seems like I'm going to be putting my energy more into trying to make that work as opposed to Obj parsing... but I have a lot to learn and your repo is one of the rare resources out there to learn from!

qtip commented 6 years ago

Thank you for your comments!

gltf is a very nice format for many reasons, one of them being that it has standardized its material parameters around a metallic/roughness PBR workflow. As a warning, your linked articles from webglfundamentals.org cover a blinn-phong shading model, which means you'll either need to do some conversion or learn from a different resource.

The cook-torrance paper has all the details, but it's not exactly easy reading. There are some really good notes from epic too.