{"id":731,"date":"2017-04-25T10:38:21","date_gmt":"2017-04-25T08:38:21","guid":{"rendered":"http:\/\/davikingcode.com\/blog\/?p=731"},"modified":"2017-12-14T13:34:17","modified_gmt":"2017-12-14T12:34:17","slug":"building-a-3d-furniture-visualiser-with-three-js","status":"publish","type":"post","link":"https:\/\/davikingcode.com\/blog\/building-a-3d-furniture-visualiser-with-three-js\/","title":{"rendered":"Building a 3D furniture visualiser with Three.js"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Blanc Cambouis<\/a> is a company selling high end furniture to their customer. In order to let the customer visualize the product they are buying we were asked to create a custom real-time 3D object viewer, able to manage different kinds of models and to customize them on the fly.<\/p>\n

While Integral Service <\/a> worked on the web side of the product, us at Da Viking Code worked on the object viewer.<\/p>\n

In order to meet their requirement we built a Three.js<\/a> (WebGL<\/a> Based) app using the Haxe<\/a> language and yar3333\u2019s Haxe extern for Three.js<\/a>, we needed a modular solution to import the furniture into the engine, but also to enable the furniture’s multiple customization option without implementing new logic for each model.
\n<\/p>\n

Exporting with Unity<\/h4>\n

The first task for this project was to actually be able to create and customize the 3D scene to be exported into threeJS, as we were delivered fbx model and we wanted a Json scene.
\nFor this purpose we used Unity<\/a> for setting up the object’s scale, different object parts and the scene’s lights, then exported them with Nick Janssen\u2019s Three.js JSON Exporter<\/a>.<\/p>\n

\"\"<\/a>
\nUnity exporting scene<\/em><\/p>\n

Naming convention and customization<\/h4>\n

As the object was meant to have different customization option switchable in the engine (opened, closed, with or without a backplate, different wood materials, different reflectiveness and different colors on certain parts, sometimes with different patterns) we needed a way to express all thoses different states of the object so the same engine could manage each models with their particular options seamlessly.<\/p>\n

A naming convention was chosen so the engine can identify the dynamic objects, understand their behavior and apply changes on the model accordingly.
\nThe website just has to call certain functions with certain parameters and they can change color, texture, models, brightness on the fly\u00a0!<\/p>\n

\"\"<\/a>
\nexample of conventions and the way they behave<\/em><\/p>\n

 <\/p>\n

Customizing furniture patterns with a Three.js custom phong material<\/h4>\n

The furniture as we’ve seen, can be customizable in material (wood,plastic) , color (flat color) , or patterns (repeated printed patterns) for certain parts of each furniture models (panels, door handles…) .<\/p>\n

We chose to have a unified shader to display either a color, a texture, or a black and white pattern, where the black and white colors would get replaced by user chosen colors, giving patterns a lot more customizability. That way, a single material can be used for every case, and every sub objects of the viewed model.<\/p>\n

We started off writing a custom glsl shader for webgl, using three.js’s\u00a0 ShaderMaterial . However this would not take into account lighting info, shininess, or metalness, or environmental maps, or reflective maps, everything three.js has done and is available by default which would have to be rewritten from scratch assuming we could connect it properly to three.js default uniforms.<\/p>\n

So we decided to do it the three.js way : using its prewritten shader code snippets that are called “shader chunks”. Those are glsl code snippets ‘assembled’ at runtime by Three.js internally to build up its available default materials.<\/p>\n

A great idea to avoid redundancy of code and better maintainance of its source code I guess.
\nIt was hard to find a tutorial or good info on this topic, most “customize your own three.js shader” articles will tell you how to start from nothing… and end up maybe coloring something with a solid color, with no lights.<\/p>\n

Exploring how the basic phong material was defined and the three.js\/src\/renderers\/shaders\/ folder on Three.js’s github, we worked things out.<\/p>\n

Thankfully, all shader chunks, uniforms, are intuitively named so that you can figure out which chunk\/lib corresponds to what basic material – on top of that, once you get into the mind of people writing an open source project and you start understanding why things seem to be all over the place, it gets easier.<\/p>\n

It’s possible to crossreference which’ snippet’ needs to be ‘included’ where , going through the ShaderLib files for example. We’ll keep Phong as an example, and here <\/a>are its “specs” for which UniformLibs (snippet of code to defined uniforms in the shader program) to use.<\/p>\n

And from this you can also deduce which vertex \/ fragment shader snippet is used. Here’s the link<\/a> to the vertex one.<\/p>\n

And again from this, you can deduce which other dependencies you need to slowly reconstruct, recompile, a full phong shader which will allow us to use the shininess properties, all the lighting options and reflective maps (and so on) three.js offers, without actually rewriting everything… or decompiling stuff at runtime.<\/p>\n

So it is a painful process.
\nBut once that is done, you get to understand three.js more, and can customize any other shader without starting from scratch and allow yourself to expand on the contributors amazing work on lighting shaders for example.<\/p>\n

When coding in Haxe, there will be the problem of whether or not you have the necessary externs, however translating from .js to haxe , and adding to your externs so you get the necessary access is easy. The code might be long but things make sense you’ll see, it’s all about accessing “snippets” or “chunks” via statics.<\/p>\n

So here’s a full .js example which reconstitutes a Three.js Phong Material and customizes it by ‘injecting’ glsl code to modify the fragment colors before lighting is processed, or the vertex positions before<\/p>\n