Cloud and Mobile

Forge Viewer Custom Shaders - Part 1

By Philippe Leefsma (@F3lipek)

    Shaders - They are probably the most powerful tool to customize how your models get rendered by the viewer, unfortunately this is also one of the most difficult to master... Anything that gets rendered on the screen is most likely customizable through shaders, so their applications are quite broad and their capabilities virtually unlimited.

    This post is not an introduction to shaders so if that term doesn't ring a bell for you, you probably need to read a bit about the topic, here for example: an introduction to shaders, by Aerotwist.

    Michael Ge, our regretted intern, wrote couple of articles a while ago about integrating custom shaders with the viewer:

• Using Shaders to Generate Dynamic Textures in the Viewer API
• Ace Editor for Three.js ShaderMaterials in the Forge Viewer

    This year I'm planning to start playing more seriously with shaders and I wanted to get things started with a very naive implementation: today's shader will provide a specific color to the affected components, using a uniform, the code will randomly change that color every 2 seconds, simply to illustrate how we can use a shader to dynamically change rendered properties on our components.

    Below is an example of how my model looks like after I select two of its components. You can see the custom color but my shader is so basic that it doesn't take care about rendering the lights, hence details on the components are not visible... Next time I will take a closer look at how lights can be rendered by the shader so it looks nicer. Stay tuned!

The code is so basic that I assume it is self-explanatory at this point ...

Deploying Forge ASP.NET samples to Appharbor

By Augusto Goncalves (@augustomaia)

Appharbor: Where .NET apps grow and prosper.  That's their slogan, but I like to think them as a "Heroku for ASP.NET". And they are that easy and have a free tier!

This post shows some basic steps on how to deploy a Github code (one of our samples, for instance), but can also be directly connected to another git. The very first step is to create an account. When properly registered, go to "Your applications" on the top menu, then "Create new application".

Next, on getting started, select Github deploy. The next page will show a list of all your repositories. You should select a .NET sample, if you don't have one, fork one of our ASP.NET samples.

Finally, we need to setup the Forge Client ID & Secret (assuming you already have a Forge Developer account with an app created). Go to "Configuration variables" section, then click on "New configuration variable" and add both FORGE_CLIENT_ID and FORGE_CLIENT_SECRET values. The image below show how it should look like when both variables are created.

Many of our samples will handle with upload of files, which needs to be uploaded to the app server (in this case, Appharbor) before the app can upload again to Autodesk servers. For that, go to "Settings" section and "Enable File System Write Access". Best practice is to upload files to /App_Data folder. Note: an app should not allow end-user to upload directly to Autodesk as this requires an access token with write capabilities, and if the end-user have such a token, this is a security breach. 

As a result, under your Github account settings, you should see Appharbor as an "Authorized application".

That's it. Now when you commit changes to the repository the Appharbor app will deploy and rebuild.

cURL Tips & Tricks Using JQ with Forge

by Jaime Rosales (@afrojme)

For quite sometime I've been playing with cURL and the Forge Platform, and to start this 2017 I will be posting about my research using cURL and JQ processor together with the Forge Platform.  

Using Terminal I found a quicker and simpler way for myself to use different workflows when using the Authentication API, such actions as obtaining 2 legged & 3 legged access tokens. With the Data Management API, I've been able to create, upload, request translation, access to Hubs and add new files to specific projects that I'm part of. Everything from the Terminal using cURL. But I know what you can be thinking "cURL from terminal, is so unorganized, so hard to read, so easy to mess up." I could not agree more with some of these thoughts. When your response has more than 1 line of JSON data returned, I agree it can be messy and hard to read. 

I know others have decided to use REST Apps such as Paw or Postman, since the fear of messing up one character in your cURL can give you problems and at the same time, you get a better organized JSON result. But bare with me, I found out about JQ while using cURL and since then It has made quite a difference when testing the api's. 

What is JQ? jq is a lightweight and flexible command-line JSON processor. A jq program is a “filter”: it takes an input, and produces an output. There are a lot of builtin filters for extracting a particular field of an object, or converting a number to a string, or various other standard tasks. It lets you visualize the JSON response in a organized way and it becomes easier to read when using terminal. How to use it? It requires a basic installation, JQ can be download for different OS platforms from here. After installation has been performed you should restart your Terminal and you would be ready for testing. You can check your version of JQ by simply typing "jq --version" in your terminal, which will assure you JQ was successfully installed.

Let's look at how the previous cURL actions to obtain a 2 legged access token and create a bucket looks after using JQ from Terminal.

As we can see JQ structures and color codes the result JSON from our REST call using cURL. Later on I will be posting the entire workflow on how to start from obtaining a 2 legged access token up to translating a file and get back the URN ready to be displayed in the Viewer. Followed by a 3rd post on how to access my a360 hubs and add a file to my project or another project I'm part of, all using cURL and the JQ processor. 

Thank you for reading. 

 

Hidding completely viewer nodes (no ghosting)

By Philippe Leefsma (@F3lipek)

    Here is a quicky to start 2017 from the right foot. The question has been asked by one of our customer: "How do you hide completely some viewer components?"

    When using viewer.hide or viewer.isolate, the default behaviour is that the invisible nodes will be ghosted, they are transparent but you can still see them and if you have a lot of hidden components this may somehow bloat the display of the visible ones.

    This pithy piece of code illustrates how to use visibilityManager.setNodeOff to implement a custom isolate function that will completely hide the unwanted nodes. In order to restore the visibility for all nodes, simply invoke the method again with an empty array [ ] (or no third argument at all since its defaulted already). The code is written using ES6 syntax:

    Examples with and without ghosting:

Why it still takes time to get metadata after the translation has been completed

By Xiaodong Liang

Question:

After a translating job completes by POST job and Get Manifest, the manifest is ready. Now when I tried to GET Metadata (:urn/metadata/:guid), it will take time until is is prepared. That is why the help talks about 202 status code: Request accepted but processing not complete. Call this endpoint iteratively until a 200 is returned.

My confusion is: I think since translating job has translated the source model to a format (say svf), those dataset of metadata should have been ready, why it still needs to start a separate process?

Answer:

The metadata request is separate from the SVF/LMV translation. This metadata is hidden/inside the svf and property db files but not yet generated in SVF/LMV translation. Generally speaking, the metadata is a hierarchy of svf/model. So unpack and parse the svf is needed.

probably you have know the sample https://extract.autodesk.io. It is to extract all dataset of an SVF from *svf file and download them one by one for local deployment. It shows the workflow of unpacking *svf and get the manifest, then the project downloads the relevant file one by one. Those lines are at line 218-220 in current version That more or less might also explain how the formal endpoint (...metadata) is working.

var pack =new zip (success, { base64: false, checkCRC32: true }) ;
success =pack.files ['manifest.json'].asNodeBuffer () ;
manifest =JSON.parse (success.toString ('utf8')) ;

 

In short, the separate process is current design.   your code will need to set a valid checking on if the metadata is prepared or not.

PHP revisited

By Adam Nagy (@AdamTheNagy)

 

Someone contacted me about using the viewer on his website to show a couple of his models. As you may know by now, the viewer requires a valid access token to display a file. In theory you could try to call the authentication endpoint from a client side JavaScript code as well. However, that way you would expose the Client Secret of your app.
The best thing is to use some server side processing to request the access token, which also helps you hide your app's Client Secret.   

If you already have a website hosted somewhere, then you might not want to migrate all that to another server just so that you could also run e.g. Node.js code. You could either just create another web server only for the authentication part, or simply add some server-side code to your existing webpage. Most servers (even the free hosting ones) support PHP, so you could probably go with that.

As a test I got a free website, http://adamenagy.com. After that I could simply follow what Augusto already talked about in this blog post.
I just needed to create and upload three files to the main folder of my webpage, where the index.html or index.php file is: viewer.html, auth.php, httpful.phar

The only thing I needed to add to the original code was the scoping for the access token request: scope=data:read (line 39 in auth.php)
And of course I had to add my app's Client ID and Client Secret to the code (line 11 & 12 in auth.php)
My server's PHP did not like the "define()" parts, but adding what Maxence suggested in the comments of Augusto's post helped: use double quotes in them for the constant names (line 11-13 in auth.php)

Now I can just go on http://adamenagy.com/viewer.html and the viewer shows the model whose URN I insert in the text box.

The three files (viewer.html, auth.php, httpful.phar): https://github.com/adamenagy/AuthenticateInPHP  

IoT Tech Expo, London

By Adam Nagy (@AdamTheNagy)

Two of my colleagues and I will be attending IoT Tech Expo in London next Monday and Tuesday (23-24 January, 2017). We'll have a booth there where we'll show how Forge can be used in the IoT field, and also take part in panel discussions.

If you are attending the expo then do drop by to say hello :)

 

Debug ASP.NET in incognito mode and avoid cache issues

By Augusto Goncalves (@augustomaia)

Cache is a common source of problems during web development. It's not unusual to solve some mysterious problems by cleaning the browser history (or just the pages stored locally). So why not do our localhost debug in incognito/private mode?

To make it the default option on Visual Studio is quite simple: on the "Run" toolbar button, click on the dropdown arrow, then select "Browse With..."

Next, on select your browser. For Chrome add the --incognito argument, or -private-window for Firefox or -private for Edge. Add a "Friendly name" such as "Chrome Incognito" and click "Set as Default" to make it even easier. 

That's it. Now when you close the browser and restart everything is cleaned and you should avoid cache problems during development.

Once your app is published, if you use a HTTPS, it also avoids cache as there is no local copy of files.

Forge DevCon 2017 - Change of date and venue

By Stephen Preston (@_stephenpreston)

The Autodesk Forge DevCon conference, originally scheduled for June 27-28 in San Francisco, will now be held on November 13-14 in Las Vegas.

One time. One location. Two great conferences.

We received feedback from many of last year's Forge DevCon attendees that it was hard to travel to two Autodesk conferences in a year. This change will allow you to attend Forge DevCon and Autodesk University in Las Vegas in a single trip. There will be DevCon-only, AU-only, and AU+DevCon ticketing options available.

Because the conference will now be held five months later, we have postponed the Call For Proposals and attendee registration.

New Date. New Location. Same Great Experience.

Last year, our first Forge DevCon offered two-days of the most up-to-date training, technologies, news, and insights around design, simulation, reality capture, AR, VR, and IoT. It was an indispensable experience for anyone working with the Forge platform.

At this year's event you can expect more of the same. Only more so.

Stay tuned for updates and please visit the Forge DevCon 2017 site to learn more.

If you have any questions please don't hesitate to contact us at [email protected].

Show up Mesh Triangles from Data of HitTest

By Xiaodong Liang

We have some extensions that can get the triangles of viewer model, such as Autodesk.ADN.Viewing.Extension.MeshData.js. It is useful for geometry analysis, simulation etc. I tried to write more codes to calculate the hit point on one object, check which triangle the point locates in and build the THREE.js face above the corresponding viewer triangle.

It can work, but finally I got to know I missed one existing method viewer.impl.hitTest. By passing a screen point, it can return the corresponding interaction point on the face, and the face information! This is quite useful. It tells the index of the vertices, the fragment Id and face normal. By this method, the codes will be more clean and simple.

GIF (Click it to open a new page, in which you can see the animation)

I am sharing the codes as below. After the extension is loaded, the triangle will be displayed accordingly when mouse moving like the gif shows.

Some extra information: in recent Accelerators in China, a requirement is to identify the topology face of the model in the format of Forge Viewer. Unfortunately, from our engineer team, such information is not stored with current viewer API. The information would probably available with a separate file (prefix is 'topology') in svf package, but it is not always available when the source model is complex. In addition, there is not yet API to get it out. Only the primitives (triangles) of the mesh is provided by Forge Viewer.