Is it possible to hide some objects from the viewer for AR output? We have some extra objects in the scene that give a sense of scale, but in the AR viewer we would like to only show the main geometry output.
They already have different named geometry outputs and we are using the AR functionality in the viewer API, like:
// check if this device is capable and load either AR or the QR code
const loadAR = async () => {
const token = viewport.addFlag(FLAG_TYPE.BUSY_MODE);
if (viewport.viewableInAR()) {
await viewport.viewInAR();
} else {
qrImage = new Image();
const qr = await viewport.createArSessionLink(undefined, true);
qrImage.src = qr;
qrPlaceholder.style.display = "none";
arDialog.style.display = "flex";
qrContainer.appendChild(qrImage);
}
viewport.removeFlag(token);
};
arButton.addEventListener("click", loadAR);
Is it possible? Maybe it could work like for geometry exports, where we have a component in GH for stuff that will be sent to the AR viewer? But doing it in code would also be fine.
You can hide certain nodes by switching their visible property to false before calling createArSessionLink or convertToGlTF, afterwards make them visible again. The scene should not be re-rendered immediately when switching off visibility, i.e. the user wonât notice.
Thank you. I have noticed that if I include the AR and QR code generation stuff in my code, that the resulting .js file we build grows from 4KB to 2649KB. Presumably it includes some huge libraries it needs for it.
Is there a better solution? This is almost a 1000 times increase in size for this small function!?
What exactly was 4kB? Please explain in detail. Seems like a distorted comparison that you made here. Itâs hard to imagine that a transpiled js bundle containing core functionality of our viewer only has 4kB.
Yes, the code for glTF export (which is required for createArSessionLink) and QR code generation is intense.
This is for a .js file written in TypeScript and uses the Viewer API to load the viewer, take a bunch of data outputs from the model and display them on the webpage. The viewer itself is loaded from your CDN.
The built .js file is 5.36KB in size according to the console during building in VS Code:
If we add the code to create the QR code and add AR button, the code is now 2.59MB in size and we actually get a warning that it exceeds the recommended max. size:
J:\Studio JHH Dropbox\JHH SERVER\1_PROJEKTE\121_manifest\11_MFT_WEBSITE\mod_monulith.com\Webflow-Dev-Setup>npm run build
> webflow_dev_template@1.0.0 build
> webpack --config webpack.prod.js
asset bundle.js 2.59 MiB [emitted] [minimized] [big] (name: main) 2 related assets
orphan modules 244 KiB [orphan] 34 modules
runtime modules 921 bytes 5 modules
modules by path ./node_modules/@shapediver/ 5.88 MiB 388 modules
modules by path ./node_modules/axios/ 56.8 KiB 32 modules
modules by path ./node_modules/qrcode/lib/ 70.9 KiB
modules by path ./node_modules/qrcode/lib/core/*.js 62.6 KiB 22 modules
modules by path ./node_modules/qrcode/lib/renderer/*.js 6.22 KiB 3 modules
modules by path ./node_modules/qrcode/lib/*.js 2.11 KiB
./node_modules/qrcode/lib/browser.js 1.84 KiB [built] [code generated]
./node_modules/qrcode/lib/can-promise.js 275 bytes [built] [code generated]
+ 19 modules
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Microsoft Windows [Version 10.0.22621.1702]
(c) Microsoft Corporation. All rights reserved.
So I am just curious if this is intended or known behavior or if something odd is going on. Shouldnât the QR code image be requested from the server directly instead of having a whole library that can create a QR code on the fly? It sends an export request anyways, so why not send a request for an image of a QR code that is generated on your server?
What library is being loaded for the AR or QR code stuff that is so large?
EDIT:
Oh, I think I see what is going on. If the AR/QR code is in there it is actually loading the Shapediver Viewer and adding it to the bundle.js file!?
modules by path ./node_modules/@shapediver/ 5.88 MiB 388 modules
That would mean I donât have to load the Shapediver Viewer separately?
But if I remove CDN link to the viewer, I now get an error saying:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'createViewport')
Our documentation provides detailed explanations on how to use the viewer either via CDN as a pre-built JavaScript bundle or as an npm package. If this doesnât work for you, please provide a minimal reproducible example, referencing the precise steps in our documentation that do not work.
Thanks for clarifying some things around the viewer and how it is loaded.
Okay, letâs get back to the original question. Can you show in a simple example how this would work. Here is a code sandbox with the necessary code to create the AR:
Now I could not get your high-level instructions to work yet, for a lack of concrete code examples. I understand what needs to happen, but not exactly how to implement it.
For example it always tells me that the scene property in session.scene.getSceneTree(); does not exist on type âISessionApiâ.
The geometry outputs in my Grasshopper model are called âObjectâ for the round object and âBackgroundâ for the photo background, which I want to hide in AR.
Just press âView in ARâ to trigger it. On desktop you will see a QR code to load the AR model on your phone or on the phone you should get the model directly.
here is an example where I hide an object for AR. By setting the visibility of all objects you donât want in AR to false (and setting it again to true after) you can decide which objects are visible in the AR scene.
