webglautodesk-forgewavefront

Autodesk Forge Reality Capture generated OBJ to 3D Web Viewer simple example sought


Include details about your goal

I am using Forge Reality Capture which returns me a URL to a zip file containing the OBJ of my model, and its auxiliary files.

I want to provide my users with an extremely simple viewer on a webpage that renders the Reality Capture model I generate, and view in a simple 3D object web viewer.

I am looking for a simple example HTML page that reads a URL from the GET string, and loads the object at the provided URL into a simple full window 3D object viewer.

Ideally I was hoping to find some example where all I would have to do is add this line to an HTML page, and it would load the model into an iframe on the web page that is dedicated to the viewer on that page.

I was imagining something like this:

<iframe src='https://3dviewer.domain:/path_to_viewer?url=url_of_my_model&any_other_setable_parameters'>

What I tried:

I looked at the viewer documentation on the Autodesk forge site. There is some complex instructions about how to set up separate client side and server side applications that involves installing and running node.js and a lot more. But I couldn't find any simple solution like what I was hoping for.

I found a page at http://masc.cs.gmu.edu/wiki/GViewer that seemed to work the way I wanted, because that page shows a single iframe that loads their OBJ bust of Beethoven into a simple web viewer. This is the HTML code that generates that viewer:

<iframe src="/objviewerframe.html?width=360&height=320&url=http%3A%2F%2Fmasc.cs.gmu.edu%2Fwiki%2Fuploads%2FObjViewer%2Fbeethoven.obj&dropable=true" width="380" height="340" frameborder="0" ></iframe>

I tried replacing just the width=, height=, and url= string with the url path to my own model, and its dimensions.

<iframe src="/objviewerframe.html?width=1920&height=1020&url=http://cloud1.tri-di.com/data/uploaded/20210800003/20210812173402/photoscene-r0KcxuqPKFG3pnu2Ryj6ac4nFjsB0XpzRFbDVehJMN8/result.obj&dropable=true" width="1920" height="1080" frameborder="0" ></iframe>

Expected results

Unfortunately, instead of showing my object in the viewer, G.viewer just shows a black box and invites me to drag and drop a local file on to it. But I am trying to build this into the work flow of an embedded system, where the user won't have a local copy of the obj file to view.

I also tried to use

https://viewer.autodesk.com/designviews

which works fine if I drag and drop my files to be displayed -- but I could not figure out how to just specify a URL to my models without uploading local files.

Does anyone have a simple example for me that I can use?


Solution

  • There are couple of aspects here:

    First, Forge Viewer was designed to handle large models with lots of metadata, usually originating from CAD files. To do so, it requires a special format called SVF and the Model Derivative service is the one responsible for converting 70+ file formats into SVF

    Among those formats you will find OBJ, but it will add little value mainly because OBJ doesn't contain metadata and it is just a bunch of triangles (and not hierarchically structured components as in CAD files) - from this aspect, a better option for you would be Sketchfab.

    Second, the Reality Capture service returns you a zip containing OBJ and the associated textures. I am not sure that you will find an OBJ viewer capable of consuming a zip file, which he has to unarchive and retrieve the needed files to display them.

    From this aspect, you will have to have a proxy server which will retrieve the zip file, unarchive them and prepare/expose the OBJ to a needed viewing solution.

    In case of Autodesk Forge ecosystem - the workflow would be to extract the resulted zip, upload into a bucket, trigger translation on the file and consume it using Forge Viewer - all this is covered in this tutorial: https://learnforge.autodesk.io/#/tutorials/viewmodels