Thanks @j-te!
1 Like
OK am finally getting somewhere. Iāve got it working with ConfigureCustomViewerElement() and inspector and drag and drop files. I have 3 other issues now:
CanvasViewerOptions.useRightHandedSystemdoesnāt seem to be implemented yet inViewerElement(Iām loading GLB files and checking to see if a__root__node is created on load, which means itās using the default left handed system)- For some reason I canāt seem to get the
CanvasViewOptions.onInitializedcallback to be called, so Iām having tosetTimeoutto show inspector - When the Inspector is shown, the icon sizes are incorrect and I havenāt yet found whatās interfering with it (I have no custom CSS yet)
1 Like
I havenāt yet used ConfigureCustomViewerElement() but this looks promising: Babylon.js docs.
However, it is created asynchronously, so utilizing the
viewerreadyevent is a way to know when theengine,scene, etc. have been recreated.
So make sure your await syntax is working as should be/use promise callbacks instead of setTimeout.
With the icons/sizes are you sure everything is being served properly? Look in devtools to see if there are any CORS issues with other assets. I canāt imagine it would be the issue, maybe changing the order of imports (styling clash)? Iām just speculating until the legend gets back.
1 Like
Thanks @j-te for helping with some answers on this! Some additional info:
-
If
useRightHandedSystemand/oronInitializedoptions are not working withHTML3DElementand/orConfigureCustomViewerElement, then this is a bug. I will take a look today. RegardingonInitializedthough, if you are using the HTML layer (HTML3DElementand/orConfigureCustomViewerElement), then itās probably better to use theviewerreadyevent as @j-te mentioned. -
From your screenshot, it looks like css issues. We have a manual test for Inspector + Viewer in the Viewer test app here: Babylon.js/packages/tools/viewer/test/apps/web/index.html at master Ā· BabylonJS/Babylon.js. Do you get the same behavior there, or different? Unfortunately the current Inspectorās management of CSS styles has some issues (potential name conflicts, needing to copy them around to different contexts, such as in this case where the canvas is inside the shadow dom of the Viewer), which might be causing the problem you are seeing, but could be app specific (in the case of CSS conflicts).
-
Regarding āThereās no default skybox environment (itās just white background), unlike the simpler CDN setup which does have a default environment,ā in general the new viewer does not have a skybox enabled by default. The simplest way to enable it is to set
environment="auto"(more details here: Viewer HTML Element Interface | Babylon.js Documentation). What is āthe simpler CDN setupā you are referring to?
3 Likes
Thanks @j-te and @ryantrem. Iāll try out your suggestions and check out the test app with Inspector integration, then report back.
Iām not sure how best to refer to it, but by āsimple setupā I mean just an html file with viewer code linked via CDN and <babylon-viewer> tag with attributes to configure it, rather than what Iāve been trying to do which is a custom app setup to get the viewer working with the Inspector and the useRightHandedSystem option.
There should never be a skybox loaded by default. Can you repro it in codepen or something?
Also, for the issue of useRightHandedSystem and onInitialized options being ignored, I have a PR out to address this here: Viewer: Fix ignored options bug & camera framing with multiple models by ryantrem Ā· Pull Request #16604 Ā· BabylonJS/Babylon.js. Thank you for calling out this issue!
2 Likes
Thanks @ryantrem!
I think I was just getting confused as initially I tried HTML3DElement with passed options including environment: "auto" but was not seeing an environment. However I think this is expected, according to ā¦
Ah, I see, then yes that is expected. To be clear, the html element has an attribute named environment that can be set to auto, and that is a shortcut for setting both the lighting and skybox environments. For the options, there is only environmentLighting and environmentSkybox. So if you set the environmentSkybox option to auto it will have the default skybox.
1 Like
viewerready worked, thanks.
I also tried your viewer/test/apps/web but using local node_modules:
"@babylonjs/core": "^8.4.2",
"@babylonjs/inspector": "^8.7.1",
"@babylonjs/viewer": "^8.7.1"
I did see the same Inspector CSS issues with this setup.
Using matching @babylonjs/core@8.7.1 results in build errors.
Anyway, Iāve managed to get useRightHandedSystem to work, if not on scene initialisation, at least for subsequently dropped files, and the Inspector is working apart from the icon styling, so Iām good for now 
Thanks for all your help so far. The new V2 Viewer is looking great!
After updating from 8.1 to 8.9 I have the next errors and the project will not compile. Example - CanvasViewer (forked) - StackBlitz (working version)
node_modules/@babylonjs/viewer/lib/index.js:1179:19:
1179 ā import('@babylonjs/materials/shadowOnly/shadowOnlyMaterial.js'),
āµ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "@babylonjs/materials/shadowOnly/shadowOnlyMaterial.js" as external to
exclude it from the bundle, which will remove this error and leave the unresolved path in the
bundle. You can also add ".catch()" here to handle this failure at run-time instead of
bundle-time.
cc @ryantrem to have a quick look
Thanks @labris for reporting this and sorry we let this one slip through! The viewer recently took a dependency on @babylonjs/materials, but we missed actually declaring the peerDependency in the package.json! This will be fixed in 8.9.1, which should be published momentarilyā¦
1 Like
Viewer Shadows (shadow map)
As of 8.9.1, the Viewer now supports shadow map based shadows! Huge thanks to @alexandremottet for the contribution! Docs and Configurator have not been updated, but will be soon!
Shadows are disabled by default, but can be enabled via:
<Babylon-viewer shadow-quality="normal"></Babylon-viewer>.
We also expect to have support for IBL shadows soon. Stay tuned!
7 Likes
Viewer Shadows (IBL)
As of 8.12.1, the Viewer now supports IBL based shadows (a new feature introduced with Babylon.js 8.0)! Another huge thanks to @alexandremottet for the contribution! Docs and configurator have also already been updated!
11 Likes
Viewer Shadows - dominant IBL light direction for shadow casting
As of 8.16.1, when using an environment for IBL lighting and using normal quality shadows (shadow map based shadows, not IBL shadows), the Viewer will estimate the dominant light direction from the environment to determine the position of the shadow casting light as well as the strength of the shadows.
For example, if your environment is outside and has a bright sunshine in the sky, or is a room with a lamp in the corner, that sun/lamp position in the environment will determine where shadows are cast. If there were multiple lamps, the strength of the shadow would also decrease (since light is coming from multiple angles).
Overall this produces more realistic lighting when using IBL for lighting and shadows maps for shadows. Huge thanks to @Thibaud for this contribution!
6 Likes
Coupled with Babylon.js docs you should be able to create amazing setup in no time
1 Like
Default Material & SSAO
As of 8.29.1, when loading a model without materials (usually a non-gltf model like an obj for example), the Viewer will create a default PBR material and also will enable (by default) SSAO (screen space ambient occlusion) for improved rendering with more realistic looking shading.
Huge thanks to @alexandremottet for this contribution! The configurator has also been updated to support the new ssao attribute (for manual control of enabling/disabling ssao). Docs will be updated soon.
7 Likes