29 Sep 2017

Show/Hide Textures of Object in Forge Viewer

Default blog image

For most source file formats, Model Derivatives service of Forge translate its material textures for rendering in Forge Viewer. While rendering materials would also cost some memory. Sometimes, the scenario focuses on model geometry only, yet textures can be ignored.

In Forge Viewer API, there is one method matman(), it returns all built-in materials and custom materials. So, we could simply iterate all materials, find out the materials we want to hide texture, set it to simple color or to grey out. In the same time, make the records for restore back. 

Noteļ¼šthis does not work on the material if without texture attached.  The demo is tested on the browser console, using the default viewer object NOP_VIEWER.

//store textures data
var oldTextures = new Array();
//store color data
var oldColors = new Array();

//remove texture
function hideTexture() {

    //get materials list
    var mats = NOP_VIEWER.impl.matman()._materials;

    //define a grey color
    var grey = new THREE.Color(0.5, 0.5, 0.5);

    //iterate materials 
    for (index in mats) {

        //index is the material name (unique string in the list)
        m = mats[index];

        //store texture info
        oldTextures[index] = m.map;
        oldColors[index] = m.color;

        //set the material without texture and the grey color
        m.map = null;
        m.color = grey;

        //mark the material dirty. The viewer will refresh
        m.needsUpdate = true; 
    }

    //refresh the scene
    NOP_VIEWER.impl.invalidate(true, true, false);
}

//show texture
function showTexture()
{
    //get materials list
    var mats = NOP_VIEWER.impl.matman()._materials;

    //iterate materials 
    for (index in mats) {

        //index is the material name (unique string in the list)

        m = mats[index];
 
       //restore
        m.map = oldTextures[index];
        m.color = oldColors[index];;
        m.needsUpdate = true; 
    }

    //refresh the scene

    NOP_VIEWER.impl.invalidate(true, true, false);

}

 

Before removing texture

before

 

After removing texture

after

 

I have not tested with shader material. probably there is more better way. I'd recommend these blogs my colleagues composed:

 

Using Shaders to Generate Dynamic Textures in the Viewer API

Ace Editor for Three.js ShaderMaterials in the Forge Viewer

Forge Viewer Custom Shaders - Part 1

Forge Viewer Custom Shaders - Part 1

 

 

Related Article