Forge – CAD Models on the Web

source on GitHub

About Me

Jeremy Tammik

Developer Evangelist at Autodesk

@jeremytammik

Design Tools

Photoshop/Illustrator for visual designers

AutoCAD for interior designers

Rhino/Solidworks/Fusion for industrial designer

Revit for architects

Traditionally

the designer makes up a design

they send it over to their client

client needs to download software to view the file

Outputs are proprietary formats

Universal formats out there

The problem?

  • Extremely lossy
  • Meta data like quantity, width, height is ignored
  • Rendered images and pdf are flattened from 3D into 2D

More seriously...

WebGL

JavaScript API that lets browsers render 3D

It's not a W3C standard...

but every browser supports it

Water simulation – Pearl boy rows and dives

It's a difficult technology to master

Would you rather see this on your e-commerce website..

or this?

Autodesk provides...

Forge web services and viewer for CAD models

Upload, translate and query CAD model

REST API

View in any browser

JavaScript API

It's free!

Forge platform

https://360.autodesk.com/viewer

Supported File Formats

3dm, 3ds, asm, catpart, catproduct, cgr, collaboration, dae, dgn, dlv3, dwf, dwfx, dwg, dwt, dxf, exp, f3d, fbx, g, gbxml, iam, idw, ifc, ige, iges, igs, ipt, jt, model, neu, nwc, nwd, obj, pdf, prt, rcp, rvt, sab, sat, session, skp, sldasm, sldprt, smb, smt, ste, step, stl, stla, stlb, stp, stpz, wire, x_b, x_t, xas, xpr, zip']['3dm, 3ds, asm, asm, catpart, catproduct, cgr, collaboration, dae, dgn, dlv3, dwf, dwfx, dwg, dwt, dxf, exp, f3d, fbx, g, gbxml, iam, idw, ifc, ige, iges, igs, ipt, jt, model, neu, neu, nwc, nwd, obj, pdf, prt, prt, rcp, rvt, sab, sat, session, skp, sldasm, sldprt, smb, smt, ste, step, stl, stla, stlb, stp, stpz, wire, x_b, x_t, xas, xpr, zip

Forge Demo Sites

published list of cool forge demos...

Synchronised 2D/3D can make sense for the AEC industry

LMV Nav demo

Forge components

Yes, I'm sold
How do I get Started?

go to developer.autodesk.com

try it out live at lmv.rocks

tweet me @jeremytammik

The Stack

Server-Side REST API

  • Upload
  • Translation
  • Storage

Client-Side JavaScript API

  • Viewing – THREE.js
  • Embed in Webpage
  • Various JavaScript APIs

Server-Side

REST API

Server-side Workflow

  • Register + create app
  • Get access token
  • Create bucket
  • Upload file/object to bucket
  • Request translation
  • Access from client
Quick Start Guide

Client-Side

JavaScript API

On your page

Reference the following JavaScript Libraries:

<link rel="stylesheet" href="https://viewing.api.autodesk.com/viewingservice/v1/viewers/style.css" type="text/css">
          <script src="https://viewing.api.autodesk.com/viewingservice/v1/viewers/viewer3D.min.js"></script>

Create a div with id "viewer"

<div id="viewer"></div>

Initialize with JavaScript


          function initialize() {
          var options = {
          'document' : 'urn:(Your own URN)',
          'env':'AutodeskProduction',
          'getAccessToken': getToken,
          'refreshToken': getToken,
          };
          var viewerElement = document.
          getElementById('viewer');
          var viewer = new Autodesk.
          Viewing.Viewer3D(viewerElement, {});

          Autodesk.Viewing.Initializer(options,function() {
          viewer.initialize();
          loadDocument(viewer, options.document);
          });
          }

token

function getToken() {
          return "GX6OONHlQ9qoVaCSmBqJvqPFUT5i";
          }

You should write your own token service.

loadDocument


          function loadDocument(viewer, documentId) {
          // Find the first 3d geometry and load that.
          Autodesk.Viewing.Document.load(documentId,
          function(doc) {
          var geometryItems = [];
          geometryItems = Autodesk.Viewing.Document.
          getSubItemsWithProperties(doc.getRootItem(), {
          'type' : 'geometry',
          'role' : '3d'
          }, true);

          if (geometryItems.length > 0) {
          viewer.load(doc.
          getViewablePath(geometryItems[0]));
          }
          }, function(errorMsg) {// onErrorCallback
          alert("Load Error: " + errorMsg);
          });
          }

Resources