Transparent background with Viewer - at long last...

Disclaimer: the code and approach demonstrated hereby should restrictly regarded as a temporary workaround and is effective as of Viewer v7.4 and below but subject to change without notice and has not been tested extensively as an officially supported feature so use this at own risk if transparent background is a must - otherwise we’d recommend to wait for official support of this feature available in upcoming Viewer upgrades.

Transparent backgrounds have been called for since long ago with Skybox being touted as an alternative approach to make amends. Today we are going to explore if it is possible to find a workaround to achieve true transparent background for Viewer.

If you have ever tried to achieve the same feat for your normal Three.js scene then it appears to be as simple as enabling the alpha channel when initializing the renderer (as of r71)

var renderer = new THREE.WebGLRenderer( { alpha: true } );

And as of r78 you can even specify background on a scene level:

scene.background = new THREE.Color( 0xff0000 );

However Viewer comes with a customized renderer with no apparent interface to enable alpha channel for the canvas background. Actually the alpha setting is still configurable for this customized renderer but the option is not explicitly exposed. Fortunately for us the renderer inherits its initialization options from a global object so we can sneak in our tweaks there - and be sure to flip alpha to true prior to Viewer’s initialization.

Autodesk.Viewing.Private.InitParametersSetting.alpha=true;  //enable alpha for the renderer

We can then turn on transparency for the canvas background like we normally do with vanilla Three.js afterwards :

NOP_VIEWER.impl.renderer().setClearAlpha(0) //clear alpha channel
NOP_VIEWER.impl.glrenderer().setClearColor( 0xffffff, 0 ) //set transparent background, color code does not matter
NOP_VIEWER.impl.invalidate(true) //trigger rendering

Last but not least make sure to neutralize the background settings of the canvas container:

.adsk-viewing-viewer{background:none!important}

And there goes our default background ... at long last:

Also see this live demo and working code here.