I'm working on a website and trying to use the embeddable version of the 3D Viewer in order to show some models with textures (obj+mtl+tex as PNG).
I've pretty much followed the embeddable/fullscreen approach, by adding the following event listeners in my index.html:
<script type="text/javascript" src="assets/js/online3dembedder.js"></script>
<script type="text/javascript">
function OnResize() {
var canvas = document.getElementById('3dcanvas');
if (canvas != undefined) {
canvas.width = document.body.clientWidth * 0.7;
canvas.height = document.body.clientHeight * 0.7;
}
}
function OnLoad() {
OnResize();
LoadOnline3DModels();
}
window.addEventListener('load', OnLoad, true);
window.addEventListener('resize', OnResize, true);
window.addEventListener('reloadCanvas', OnLoad, true);
</script>
The reloadCanvas
event is a custom event I'm dispatching whenever a new model is selected by the user. The user does not actually own the model files as they're hosted on my website, they just select a logical entity from a list and this triggers the canvas reload with new, different sourcefiles.
Almost all the time when performing this operation I can see there is some problem (might be dirty context more than anything else) with what seems to be loading textures, as they're either applied wrongly to the model or what appears to be a previous texture is being used instead of the current one - this doesn't happen as soon as the new model is loaded, but only when the user zooms in/out of the model or rotates the model around.
When this happens the following is logged on the console:
three.min.js:543 WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program
v @ three.min.js:543
three.min.js:562 WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program
v @ three.min.js:562
WebGL: INVALID_OPERATION: uniform3f: location not for current program
WebGL: INVALID_OPERATION: uniform1f: location not for current program
[...]
three.min.js:558 WebGL: too many errors, no more errors will be reported to the console for this context.
v @ three.min.js:558
Most likely for my use-case i need some cleanup operations being performed on the viewer side when reloadCanvas
is being consumed? Sadly, I could not find any examples related to reloading canvas+switching models in embedded scenario, but I assume these changes would have to be made in the online3dembedder.js
file.
Bug preview: https://i.imgur.com/3w5ufGE.png
Website to replicate the bug (just fiddle around selecting different models and it will happen once u rotate/zoom in on the new model): https://mhw-model-viewer.web.app/
Project sourcecode: https://github.com/dsibilio/mhw-models-viewer
P.S.: Amazing work on the library! Ty very much for making this open-source 🥳 I'm also available for discussing this anywhere else you may see fit (eg. Discord or similar) for faster feedback and then report here once we get to the solution! 👋