Contenido 3D en la Web

Acerca de mi

Jaime Rosales

Sr. Technical Evangelist at Autodesk

Quien es ?

View and Data API

Photoshop/Illustrator para diseñadores visuales

AutoCAD para diseñadores de interiores

Rhino/Solidworks/Fusion para diseñadores industriales

Revit para arquitectos

Tradicionalmente

El diseñador crea un modelo

lo envia a su cliente

El cliente necesitara bajar el software requerido para ver el modelo

Los resultados son de formatos exclusivos

Unos cuantos formatos Universales

Cual es el Problema?

• Extremadamente "lossy"
• A menudo pierden el Meta-data como sus medidas, cantidad, altura
• Las imagenes y pdf se convierten en renders de 3D a 2D

Web 3D

Jelly Fish Demo

3D Water Demo

Particles Demo

3D Kia motors Demo

WebGL

JavaScript API que permite a los navegadores web hacer render de 3D

No es W3C standard...

Es una tecnologia bastante dificil dominar

Autodesk ha creado un viewer en 3D/2D ...

Es gratis!

Compremos una silla Aeron...

Preferirian ver esto en su e-commerce website..

o esto?

Formatos Soportados

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

Ok, yo quiero un website asi, Como empiezo???

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

En su pagina

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

Iniciamos el 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";
                            }

Es aconsejable escribir su propio servicio de Token

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
• Esta presentacion esta en http://jaimerosales.github.io/url-guatemala
• Pregunten, No sean Timidos