3D Content on the Web

About Me

Jaime Rosales

Developer Evangelist at Autodesk

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 a software to view the file

Outputs are proprietary formats

Universal formats out there

The problem?

• Extremely lossy
• Often lose meta data like quantity, width, height
• Rendered images and pdf are 3D into 2D

WebGL

JavaScript API that lets browsers render 3D

It's not a W3C standard...

It's a difficult technology to master

Autodesk came out with a 3D/2D viewer...

It's free!

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

or this?

Buying an Aeron chair...

Supported File Formats

ipt, neu, stla, stl, xlsx, jt, jpg, skp, prt, dwf, xls, png, sldasm, step, dwg, zip, nwc, model, sim, stp, ste, f3d, pdf, iges, dwt, catproduct, csv, igs, sldprt, cgr, 3dm, sab, obj, pptx, cam360, jpeg, bmp, gbxml, exp, ppt, doc, wire, ige, rcp, txt, dae, x_b, 3ds, rtf, rvt, g, sim360, iam, asm, dlv3, x_t, pps, session, xas, xpr, docx, catpart, stlb, tiff, nwd, sat, fbx, smb, smt, ifc, dwfx, tif

What about the AEC industry?

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

developer.autodesk.com

Tweet me @AfroJme

The Stack

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

Client-Side

JavaScript API

On your page

<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>

<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

• Developer Portal
• Samples page on GitHub
  • quick start guides
  • sample apps
  • libraries
• These slides are on http://jaimerosales.github.io/responsive-web-meetup
• Ask, Don't be shy