How to handle transparency of objects in vts-browser-js?

[shrikant-panchal]

I am trying to draw a 3D object on top of VTS earth environment (vts-browser-js). Can I make that object semi-transparent by specifying some transparency factor somewhere in the code?

Also, if the model (.obj) is imported, can we play with its transparency?

I understand that we can apply a semi-transparent texture and import that texture along with mode(.obj,.mtl), but is there any other way to achieve the required transparency in vts-browser-js?

Any help would be really appreciated!

[shrikant-panchal]

Thanks Horky, As you mentioned, one way is to edit the materials in .obj file itself. I am wondering if it is possible to tune some transparency factor in VTS code? Or some other way to adjust transparency through code?

[davidmtech]

There is example how to draw transparent meshes: https://jsfiddle.net/ay6c5pxj/

Main prerequisite is to use render state where is blending enabled:

transparentMesh = renderer.createState({culling:true, blend:true});

and set this state when you render transparent meshes

renderer.setState(transparentMesh);

In case that you use build sharers, then you set opacity to desired value.

When you render transparent meshes then rendering order is important. There is no build in support for rendering transparent meshes. You have to sort it manually. Most common practice is to render non-transparent meshes first and then render transparent meshes. Rendering order of the transparent meshes should by sorted by distance from camera (most distant should be rendered first).