I am having issues with the way my viewer is integrated inside my web application. On the first instance of running my viewer I don't experience any problems. See, there are many different viewers on each page of my application. However, when I want to open a second viewer, I get the standard console logs ...
"THREE.WebGLRenderer 71 WebGLRenderer.js:29:12 WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER. WebGLRenderer.js:232:30 WebGL Renderer: ANGLE (Intel(R) HD Graphics 400 Direct3D11 vs_5_0 ps_5_0, D3D11-27.20.100.8854) WebGLRenderer.js:237:20 WebGL Vendor: Google Inc. (Intel)"
... Followed by the error:
Rendering to a canvas that was resized to zero. If you see this message you may be accidentally leaking a viewer instance. ErrorCode:14. Logger.js:188:18
_reportError Logger.js:188
beginScene RenderContext.js:607
initialize Viewer3DImpl.js:368
initialize Viewer3D.js:608
initialize GuiViewer3D.js:59
start Viewer3D.js:374
showViewer showViewer.js:72
(Async: promise callback)
K envinit.js:718
showViewer showViewer.js:68
updateStatus showViewer.js:11
getStatus showViewer.js:48
i x12:2
fireWith x12:2
A x12:4
c x12:4
(Async: EventHandlerNonNull)
send x12:4
ajax x12:4
ajax xtrue:4
getStatus showViewer.js:37
showViewer showViewer.js:97
anonymous Autodesk-Forge-Viewer--testing--update--Forge-Viewer-.js:89
v x12:6
B x12:6
v x12:6
run_without_catching_not_ready x12:6
v x12:6
value x12:6
r x12:6
value x12:6
n x12:6
n x12:6
traceSpan x12:6
n x12:6
(Async: setTimeout handler)
exports x12:13
R x12:6
value x12:6
value x12:6
value x12:6
value x12:6
value x12:6
initialize x12:6
value x12:6
autorun_top x12:6
value x12:6
run x12:6
value x12:6
value x12:6
value x12:6
value x12:6
value x12:6
run_once x12:6
run x12:6
value x12:6
value x12:6
value x12:6
value x12:6
value x12:6
value x12:6
value x12:6
exports x12:6
value x12:6
value x12:6
Does anyone have any idea as to why this is happening? At first I thought "... accidentally leaking a viewer ..." error meant that the html element wasn't closed, but that wasn't the case. I'm at a loss, I'm not sure what the issue is. Here is my viewer code:
function showViewer(){
let viewer;
let options = {
env: 'AutodeskProduction',
api: 'derivativeV2',
getAccessToken: function(onTokenReady) {
var token = viewerAccessToken;
var timeInSeconds = 3600;
onTokenReady(token, timeInSeconds);
}
};
Autodesk.Viewing.Initializer(options, () => {
let htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
instance.data.viewer = viewer;
let startedCode = viewer.start();
viewer.setTheme("light-theme");
viewer.loadExtension("Autodesk.CustomDocumentBrowser").then(() => {
viewer.loadExtension("Autodesk.Viewing.MarkupsCore");
viewer.loadExtension("Autodesk.Viewing.MarkupsGui");
});
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
$("#loadingStatus").html("Failed to create a Viewer: WebGL not supported.");
return;
}
console.log('Initialization complete, loading a model next...');
});
let documentId = `urn:` + viewerUrn;
let derivativeId = `urn:` + instance.derivativeUrn;
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
function onDocumentLoadSuccess(viewerDocument) {
let defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
}
function onDocumentLoadFailure() {
console.error('Failed fetching Forge manifest');
$("#loadingStatus").html("Failed fetching Forge manifest.");
}
}
This issue is often caused by CSS layout. When you try and instantiate the viewer inside a <div> that either has a zero width and height, or has display set to none, the viewer would fail to initialize its WebGL rendering pipeline.
Here's a simple Forge app that initializes two viewers on a single page: https://github.com/petrbroz/forge-simple-viewer-nodejs/tree/sample/multiple-viewers (note that the code is in a branch called sample/multiple-viewers).