DEV Community

Cover image for Working with 3D models in WebGL
Adam Crockett 🌀
Adam Crockett 🌀

Posted on

Working with 3D models in WebGL

Credits: model in cover by Meeee

This is a lazy checklist for your workflow talking about the wonderful GLTF format. Your going to need JavaScript to view this stuff so its tagged with that.

I am exploring its capabilities and what workflow you or I will need in Blender to achieve the results we want. First off you wont achieve the results you want, anyone familiar with photo realism in blender will know about Cycles renderer, it's not going to look like that so lower your expectations a pinch, then do that again 5 or 6 times.

As soon as I found out about GLTF I downloaded a copy of blender and made my first model in 12 months or more, I built that lovely watch model in the cover image (I love watches!). I am not fully happy with this model because its missing a few things, but still thats not the point.

Exporting this to a GLTF file using Blenders built in GLTF exporter yielded some results with let's say... potential.

The first thing you will notice and perhaps this is not a shock, GLTF does not respect blenders modifiers which resulted in my first attempt having only quarter of the model visible, fortunately the exporter has an option to apply said modifiers without any distractive results to the original model.

The next problem, although GLTF does handle PBR materials, my glass was opaque, it looked good but not good for a watch. "Hey whats the time, IDK I have an opaque watch you moron!". I probably should use Glass BSDF shader?

Lastly performance, my model is not optimised, in-fact its so bad internally that If I where to target the web again (which I will), a lot and I mean a lot of cleanup would need to be done, I will look into this in a further article, but for the moment, 16FPS was what I got.

Anyways here is the checklist:

  • Apply modifiers in export
  • Dont expect lighting to work
  • Materials will look more like material preview then render
  • Consider if transperncy works
  • Optimise mesh and clean it up, only keep what is visible, simplify what you can get away with

Whats next, GLTF animation of the hands :)
Thanks for reading.

Top comments (0)