Pompidou WebGL Viewer

Aerilius · 2 Jun 2012, 10:52

I extracted a list of methods from the Pompidou WebGL viewer (http://pompidouviewer.appspot.com/compiled.js
sketchup.geom.BoundingBox sketchup.**doc**.Material sketchup.**doc**.Scene sketchup.**doc**.Model sketchup.**doc**.Style sketchup.geom.Line sketchup.geom.Mesh sketchup.geom.Plane sketchup.geom.Point sketchup.geom.Transform[].**makeAdjoint_** sketchup.geom.Transform[].**perspective** sketchup.geom.Transform[].**transpose** sketchup.geom.Vector sketchup.tool.Tool[].**onMouseWheel** sketchup.ui.Toolbar sketchup.**util**.Color ... viewer_.camera.eye viewer_.pickRay viewer_.renderOptions.groundColor viewer_.toolManager.setActiveTool ...
Interesting is that it looks sustainably designed, very similar to the Ruby API, with some new methods and some restructuring.

@unknownuser said:

„the web viewer we just announced (somewhat secretly)“

@unknownuser said:

„Though I'm personally curious what people would think of a Javascript API...“

list.txt

Aerilius · 3 Jun 2012, 23:19

Ok, I tried myself with maybe the first Pompidou Plugin. It's relatively easy to register additional Tools. We only can't yet work with entities or geometry-picking/intersection (understandably).

1.) Visit the PompidouViewer directly (it works not through the iframe):
for example: http://pompidouviewer.appspot.com/viewer.html?Pompidou/Airport_Cafe.dae
2.) Open the JavaScript Console (in Chromium/Chrome: Ctrl+Shift+I)
3.) Paste and hit enter.

// Let's register another Tool;
sketchup.tool.LookAround = function () {
    this.lastY = this.lastX = 0;
    this.isLDragging = !1;
    this.isMDragging = !1;
    this.ORBIT_SENSITIVITY = 300;
    this.MOUSEWHEEL_ZOOM_FRACTION = 12;
    this.upVector_ = new sketchup.geom.Vector(0, 0, 1);
    this.moveDir = new sketchup.geom.Vector(1, 0, 0);
};
goog.inherits(sketchup.tool.LookAround, sketchup.tool.Tool);
goog.exportSymbol("sketchup.tool.LookAround", sketchup.tool.LookAround);


sketchup.tool.LookAround[$$PROP_prototype].onLButtonDown = function (a, b, c, d) {
    this.isLDragging = !0;
    this.onButtonDown(a, b, c, d);
    this.interval_ = null;
    // Once the mouse button is pressed, we want to walk no matter whether the mouse moves.
    this.interval_ = window.setInterval( function(){
        // this was tricky because "this.isLDragging" etc.
        // is not available in the context of window.setInterval
        var tool = viewer.toolManager.toolStack_[0];
        var e = viewer.camera.eye.offset(tool.moveDir),
            t = viewer.camera.target.offset(tool.moveDir);
        viewer.camera.setView(e, t, tool.up);
        viewer.viewChanged();
        viewer.stopAnimation();
        if (!tool.isLDragging && tool.interval_) window.clearInterval(tool.interval_);
    }, 50);
};
// No idea why we have to do this at all;
goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onLButtonDown", sketchup.tool.LookAround[$$PROP_prototype].onLButtonDown);


sketchup.tool.LookAround[$$PROP_prototype].onLButtonUp = function () {
    this.isLDragging = !1;
};
goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onLButtonUp", sketchup.tool.LookAround[$$PROP_prototype].onLButtonUp);


sketchup.tool.LookAround[$$PROP_prototype].onMButtonDown = function (a, b, c, d) {
    this.isMDragging = !0;
    this.onButtonDown(a, b, c, d);
};
goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onMButtonDown", sketchup.tool.LookAround[$$PROP_prototype].onMButtonDown);


sketchup.tool.LookAround[$$PROP_prototype].onMButtonUp = function (a, b, c, d) {
    this.isMDragging = !1;
};
goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onMButtonUp", sketchup.tool.LookAround[$$PROP_prototype].onMButtonUp);


// (no standard event, only for my own use in onLButtonDown and onMButtonDown)
sketchup.tool.LookAround[$$PROP_prototype].onButtonDown = function (a, b, c, d){
    this.lastX = b;
    this.lastY = c;
    a.center = {
        x; GLOBAL_window[$$PROP_innerWidth] / 2,
        y; GLOBAL_window[$$PROP_innerHeight] / 2
    };
    b = a.doPick(a.center.x, a.center.y, {
        spread; 0.5
    });
    if (d[$$PROP_shiftKey]){
        var d = a.pickRay(a.center.x, a.center.y),
            b = new sketchup.geom.Plane(a.camera[$$PROP_target].clone(), d[$$PROP_direction]),
            c = a.pickRay(a.center.x + 1, a.center.y),
            a = a.pickRay(a.center.x, a.center.y + 1),
            d = b.intersect(d),
            c = b.intersect(c),
            a = b.intersect(a);    
        this.panPerX = d.vectorTo(c);
        this.panPerY = d.vectorTo(a);
    }
}


// If dragging with middle mouse button; inverse the orbit function (= look around),
// if dragging with left mouse button; set only camera properties, but update the view in the loop in onLButtonDown.
sketchup.tool.LookAround[$$PROP_prototype].onMouseMove = function (a, b, c, d) {
    if (this.isLDragging || this.isMDragging) {
        var e = b - this.lastX,
            f = c - this.lastY;
        this.lastX = b;
        this.lastY = c;
        var c = a.camera.eye.clone(),
            b = a.camera[$$PROP_target].clone(),
            g = new sketchup.geom.Vector(1, 0, 0),
            h = new sketchup.geom.Vector(0, 1, 0),
            i = new sketchup.geom.Vector(0, 0, 1),
            j = (new sketchup.geom.Point(c.x, c.y, b.z)).vectorTo(b),
            k = c.vectorTo(b),
            h = h.angleBetween(j),
            i = k.angleBetween(i),
            g = g.angleBetween(j),
            j = j.angleBetween(k),
            l = b.distanceTo(c);
        g > GLOBAL_Math.PI / 2 && (h = 2 * GLOBAL_Math.PI - h);
        j > GLOBAL_Math.PI / 2 && (i = 2 * GLOBAL_Math.PI - i);
        if (d[$$PROP_shiftKey]) d = this.panPerX.clone(), h = this.panPerY.clone(), SETPROP_length(d, d[$$PROP_length] * -e), SETPROP_length(h, h[$$PROP_length] * -f), c[$$PROP_offset](d), c[$$PROP_offset](h), b[$$PROP_offset](d), b[$$PROP_offset](h);
        else {
            if (this.isLDragging){
                h += e / this.ORBIT_SENSITIVITY;
                i += f / this.ORBIT_SENSITIVITY;
            } else if (this.isMDragging){
                h -= e / this.ORBIT_SENSITIVITY;
                i -= f / this.ORBIT_SENSITIVITY;
            };
            if (i > GLOBAL_Math.PI || 0 > i) i += f / this.ORBIT_SENSITIVITY;
            b.x = c.x + GLOBAL_Math.sin(h) * l * GLOBAL_Math.sin(i);
            b.y = c.y + GLOBAL_Math.cos(h) * l * GLOBAL_Math.sin(i);
            b.z = c.z + GLOBAL_Math.cos(i) * l
        }
        if (this.isLDragging){
            this.moveDir = k;
            this.moveDir.setLength(5);
            a.camera.setView(c, b, this.upVector_);
        } else if (this.isMDragging){
            a.camera.setView(c, b, this.upVector_);
            a.viewChanged();
            a.stopAnimation();
        };
    }
}
goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onMouseMove", sketchup.tool.LookAround[$$PROP_prototype].onMouseMove);


// Inherit the Zoom function for the mousewheel.
goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onMouseWheel", sketchup.tool.Orbit[$$PROP_prototype].onMouseWheel);


// This does not yet have an effect. The canvas seems not to get keyboard events.
sketchup.tool.LookAround[$$PROP_prototype].onKeyDown = function (a, b, c, d) {
    console.log("onKeyDown; "+[a,b,c,d])
}
goog.exportProperty(sketchup.tool.LookAround[$$PROP_prototype], "onKeyDown", sketchup.tool.LookAround[$$PROP_prototype].onKeyDown);


// Extra bonus; Select the new tool now!
viewer.toolManager.setActiveTool(new sketchup.tool.LookAround)

Existing tools:
%(#000000)[viewer.toolManager.setActiveTool(new **sketchup.tool.Orbit**) viewer.toolManager.setActiveTool(new **sketchup.tool.Pan**) viewer.toolManager.setActiveTool(new **sketchup.tool.Zoom**)]
also:
%(#000000)[viewer.zoomExtents() viewer.selectLastSketchUpScene() viewer.playScenes()]
...

adebeo · 21 Jun 2012, 05:50

great !!!!!

gilles · 21 Jun 2012, 20:09

It could be cool to have the choice between Orbit, Pan,Position camera and Walktool.

Just my thought.

OOPs I should read all the post.

Aerilius · 21 Jun 2012, 20:27

The SketchUp people have not yet made a %(#000000)[sketchup.ui.Toolbar] to hold their tools
(But maybe they will add that in another variant of the Viewer.)

driven · 22 Jun 2012, 01:04

hi

can't run the js on mac, just get undefined message?

john

BaptisteC · 2 Jul 2012, 09:45

hi, do we have some more informations about this viewer? Will it be available to include into our websites?

alexschreyer · 3 Jul 2012, 03:17

It will be interesting when the API is officially released. In the meantime - has anyone tried this with models on other sites, like:

http://pompidouviewer.appspot.com/viewer.html?http://somesite.com/Airport_Cafe.dae

(this needs to be URL encoded, of course)

CHeers,
Alex

gbuc · 3 Jul 2012, 14:15

is it possible to control layer visibility with the webgl api?

Aerilius · 3 Jul 2012, 19:24

(You could look it up in the above list). I found only a couple of times something with "layer", and no method to set/change visibility of a layer. I suppose all the layer methods (like many others) are up to now only empty place holders.

In addition to that, it depends on what features can be read from the .dae model. As we know, SketchUp's .dae exporter doesn't preserve scenes and layers (but on the SketchUp Showcase they have scenes!). Similarly, the Pompidou Viewer also contains methods for handling geometric primitives and materials (edges etc.) but models are up to now only loaded as a big mesh object, without distinction into single entities.