Through the Interface: HTML

Sun	Mon	Tue	Wed	Thu	Fri	Sat
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

HTML

June 12, 2013

Embedding a 123D Catch scene in an HTML page

A little over a year ago I first saw the HTML version of 123D Catch. My first thought was “that’s cool!” and my second was “I wonder whether you can embed the WebGL control to host a 123D Catch scene in an external web-page?”. Basically allowing bloggers – or people posting to forums, perhaps – to embed 3D content captured using 123D Catch in their pages, much as you would do with a YouTube video.

At the recent technical conference in Boston, I asked someone about the feature. Sure enough it had been added some time ago (probably around the time I was thinking about it, originally) and I was provided with instructions on how to make use of it.

Firstly – and logically enough – you need to publish a scene to the 123D Catch gallery. I went ahead and created a really quick scene (I’m working on something more complex, but it’s taking longer than I’d hoped to get right, so it’ll be for another day) and published it to the gallery:

On balance my choice of a ZX Spectrum – which has semi-reflective patches of plastic and lots of uniform area – probably wasn’t the best, but this is really about the process of embedding, not about capturing a model.

Once up there, it was pretty straightforward to log into the 123D Catch website and find it in my list of recent work.

Clicking on the embed icon to the right brought up the options to customize the HTML fragment and copy it into your page:

And here is the end result (although of a slightly cleaner model than the one shown above), which needs a WebGL-capable browser (Chrome, Firefox or Safari) for the 3D mode to work. You'll also need to remember to click on "3D view" in the filmstrip at the bottom to bring up that view.

Posted at 09:12 PM in HTML, Reality capture | Permalink | Comments (0)

May 02, 2013

Jigging an AutoCAD circle using JavaScript

After talking about the architecture of our JavaScript API in this recent post – and mentioning the approach we expect developers to take when creating geometry in one of the comments – I thought it would be worth spending the time to write my first JavaScript jig in AutoCAD.

For those of you who haven’t come across jigs in either ObjectARX or AutoCAD .NET, jigs are the primary way applications request users to dynamically specify geometric parameters while providing them with graphical feedback. As users select points or specify distances, the object or objects they’re creating are updated in real-time to reflect these choices. Much as you’d use a standard AutoCAD command to create geometry.

If you want to define a jig for a single object using .NET, you’ll probably use an EntityJig. The other main type of jig – a DrawJig – is not bound to a single object, although it can be used to create one. It basically allows the application to decide what gets drawn, rather than calling a particular object’s drawing methods.

Given the fact the JavaScript API doesn’t provide access to AutoCAD drawing objects – and there are currently no plans to provide this access – it made sense to expose the DrawJig capability to JavaScript. This allows applications to display custom, transient graphics during the jig’s operation, and then fire one or more AutoCAD commands to generate the drawing object(s) once done. Given there’s some IPC needed to communicated between the process hosting JavaScript and AutoCAD, you clearly don’t want to be marshaling huge objects (such as we saw in this recent post): not only would the XML generated to communicate the transient graphics to be displayed be large, so would the command-string you’d need to compose and send to generate the final database-resident representation.

So with that in mind, I set about creating what’s probably the simplest of jigs: to create a circle at a given point, asking the user to select the radius.

Here’s the JavaScript code I created, embedded into an HTML page to be loaded into a palette, based on the one we saw in this previous post:

<html>
  <head>
    <title>Jig a circle</title>
    <script
      type="text/javascript"
      src="http://www.autocadws.com/jsapi/v1/Autodesk.AutoCAD.js">
    </script>
    <script type="text/javascript">
 
      var doc = Acad.Application.activedocument;
      var center = new Acad.Point3d(0, 0, 0);
      var radius = 0;
      var trId;
 
      var colors = new Array();
      colors['Red'] = "#ff0000";
      colors['Yellow'] = "#ffff00";
      colors['Green'] = "#00ff00";
      colors['Cyan'] = "#00ffff";
      colors['Blue'] = "#0000ff";
      colors['Magenta'] = "#ff00ff";
      colors['White'] = "#ffffff";
 
      function pointToString(pt) {
        var ret =
          pt.x.toString() + "," +
          pt.y.toString() + "," +
          pt.z.toString();
        return ret;
      }
 
      function createCircle(cen, rad, first) {
 
        // Build an XML string containing data to create
        // an AcGiTransient that represents the circle
 
        var props = '';
        var cursor = '';
 
        if (first != true) {
 
          var color = document.getElementById('ColCB').value;
          var linetype = document.getElementById('LTCB').value;
          var lineweight = document.getElementById('LWCB').value;
          var filled = document.getElementById('Filled').checked;
          props =
            'color="' + colors[color] +
            '" lineweight="' + lineweight +
            '" linetype="' + linetype +
            '" filled="' + filled + '"';
          var cursorType = document.getElementById('Cursor').value;
          if (cursorType == 'None')
            cursor = '';
          else
            cursor = ' cursor="' + cursorType + '"';
        }
 
        var drawable =
          '<?xml version="1.0" encoding="utf-8"?>' +
          '<drawable ' +
          'xmlns="http://www.autodesk.com/AutoCAD/drawstream.xsd" ' +
          'xmlns:t="http://www.autodesk.com/AutoCAD/transient.xsd" '+
            't:onmouseover="onmouseover"' + cursor + '>' +
            '<graphics id="id1" ' + props + '>' +
              '<circle center ="' + pointToString(cen) +
                '" radius ="' + rad.toString() + '"/>' +
            '</graphics></drawable>';
 
        return drawable;
      }
 
      function circleJig() {
 
        function onJigUpdate(args) {
 
          var res = JSON.parse(args);
          if (res) {
 
            // The value being updated is the distance
 
            radius = res.distance;
 
            // Use it to create the XML for a transient
            // circle and ask for it to be displayed
 
            var x = createCircle(center, radius);
            doc.transientManager.updateTransient(trId, x);
          }
 
          return true;
        }
 
        function onJigComplete(args) {
 
          // When the jig is over, remove the transient
 
          doc.transientManager.eraseTransient(trId);
 
          var res = JSON.parse(args);
          if (res && res.dragStatus == Acad.DragStatus.kNormal) {
 
            Acad.Editor.executeCommandAsync(
              '_.CIRCLE ' + pointToString(center) + ' ' + radius
            );
          }
        }
 
        function onJigError(args) {
          write('\nUnable to create circle: ' + args);
        }
 
        function onPointSelected(args) {
 
          var res = JSON.parse(args);
          if (res) {
            center =
              new Acad.Point3d(
                res.value.x,
                res.value.y,
                res.value.z
              );
 
            // Now we can create our transient
 
            var tran = new Acad.Transient();
            trId = tran.getId();
 
            // And ask for it to be drawn
 
            var x = createCircle(center, 0, true);
            doc.transientManager.addTransient(tran, x);
 
            // Set up our jig options
 
            var opts =
              new Acad.JigPromptDistanceOptions('Point on radius');
            opts.basePoint = center;
            opts.useBasePoint = true;
 
            // Run the jig to select the distance
 
            var jig = new Acad.DrawJig(onJigUpdate, opts);
            Acad.Editor.drag(jig).then(onJigComplete, onJigError);
          }
        }
 
        function onPointError(args) {
          write('\nUnable to select point: ' + args);
        }
 
        // Ask the user to select the center point before we
        // start the jig
 
        var opts = new Acad.PromptPointOptions('Select center');
        Acad.Editor.getPoint(opts).then(
          onPointSelected, onPointError
        );
      }
 
    </script>
 
    <style type="text/css">
      td, body
        { font-family: sans-serif; font-size: 10pt; }
      body
        { background-color: #686868;
          padding:0;
          margin:5px 5px 5px 5px;
          color:#FFF; }
      textarea
        { font-family: Consolas; font-size: 8pt; }
    </style>
  </head>
  <body>
    <div id="canvas" class="shadow_box">
      <h3>Jig a circle</h3>
      <table border="0">
        <tr>
          <td align='right'>Color</td>
          <td>
            <select id='ColCB'>
              <option selected="selected">Red</option>
              <option>Yellow</option>
              <option>Green</option>
              <option>Cyan</option>
              <option>Blue</option>
              <option>Magenta</option>
              <option>White</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align='right'>LineType</td>
          <td>
            <select id='LTCB'>
              <option selected="selected">LineTypeSolid</option> 
              <option>Dashed</option>
              <option>Dotted</option>
              <option>Dash_Dot</option>
              <option>Short_Dash</option>
              <option>Medium_Dash</option> 
              <option>Long_Dash</option>
              <option>Short_Dash_X2</option> 
              <option>Medium_Dash_X2</option>
              <option>Long_Dash_X2</option>
              <option>Medium_Long_Dash</option>
              <option>Medium_Dash_Short_Dash_Short_Dash</option>
              <option>Long_Dash_Short_Dash</option>
              <option>Long_Dash_Dot_Dot</option> 
              <option>Long_Dash_Dot</option> 
              <option>Medium_Dash_Dot_Short_Dash_Dot</option>
              <option>Sparse_Dot</option>
              <option>Solid_6_Pixels_Blank_6_Pixels</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align='right'>LineWeight</td>
          <td>
            <select id='LWCB'>
              <option>0</option>
              <option>5</option>
              <option>9</option>
              <option>13</option>
              <option>15</option>
              <option>18</option>
              <option>20</option>
              <option>25</option>
              <option selected="selected">30</option>
              <option>35</option>
              <option>40</option>
              <option>50</option>
              <option>53</option>
              <option>60</option>
              <option>70</option>
              <option>80</option>
              <option>90</option>
              <option>100</option>
              <option>106</option>
              <option>120</option>
              <option>140</option>
              <option>158</option>
              <option>200</option>
              <option>211</option>
            </select>
          </td>
        </tr>
        <tr>
          <td align='right'>Filled</td>
          <td>
            <input type='checkbox' id='Filled'/>
          </td>
        </tr>
        <tr>
          <td align='right'>Cursor</td>
          <td>
            <select
              id='Cursor'
              title='Cursor to be displayed on hover'>
              <option selected="selected">None</option>
              <option>None</option>
              <option>Arrow</option>
              <option>Ibeam</option>
              <option>Wait</option>
              <option>Cross</option>
              <option>UpArrow</option>
              <option>SizeNWSE</option>
              <option>SizeNESW</option>
              <option>SizeWE</option>
              <option>SizeNS</option>
              <option>SizeAll</option>
              <option>No</option>
              <option>Hand</option>
              <option>AppStarting</option>
              <option>Help</option>
            </select>
          </td>
        </tr>
        <tr>
          <th>&nbsp;</th>
          <td>
            <input
              type='button'
              onclick='circleJig()'
              value='Jig Circle' />
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

When we load and run the palette – using the same .NET loader we saw in the post that first showed how to implement a palette using JavaScript – we see we can use it to launch our jig and create circles. Bear in mind that the settings in the palette are only respected during the jig: the CIRCLE command will simply pick up the current layer, linetype etc. when it creates the final circle.

The jig doesn’t operate as smoothly as you’d expect it to from ObjectARX or .NET, but then there is some marshaling overhead involved, after all. You’ll have to weigh the trade-offs between (future) portability, development effort and performance. (It’s also not clear it’s easier to develop using JavaScript than .NET… it’s probably easier than C++ but the tools available to debug your JavaScript code are still not that great).

Also, I found some trickiness when selecting the point to terminate the jig which then causes the command to be launched inside AutoCAD. If we comment out the code to display transient graphics it works perfectly, but otherwise you may have to click a few times to make it work. This is something that requires some further research – it feels as though some messages are getting swallowed, but it could be due to something else entirely.

Anyway, this is to say that there are still some rough edges around this API, which is natural given its relative age. My recommendation is to play around with it, but not to over-invest just yet: use the opportunity to get familiar with the tools and technology, and you’ll hopefully see us make the experience smoother over the next few releases.

Posted at 09:33 PM in AutoCAD, AutoCAD .NET, HTML, JavaScript, Jigs | Permalink | Comments (0)

March 28, 2013

Implementing an AutoCAD palette using HTML5 and JavaScript

After introducing the new JavaScript API as one of the new features in AutoCAD 2014, in the last post we looked at a simple command defined using JavaScript. In this post, we’re going to implement a simple, palette-based UI inside AutoCAD using HTML5 and JavaScript.

Let’s start by looking at the HTML code (with the JavaScript embedded, for simplicity):

<html>
  <head>
    <title>Draw a transient circle or rectangle</title>
    <script
      type="text/javascript"
      src="http://www.autocadws.com/jsapi/v1/Autodesk.AutoCAD.js">
    </script>
    <script type="text/javascript">
 
      // Some global variables
 
      // The cursor for "OnMouseOver", as specified in the UI
 
      var cursor = ' ';
 
      // Colors for our transient definition, as they are
      // presented to the user in the UI
 
      var colors = new Array();
      colors['Red'] = "#ff0000";
      colors['Yellow'] = "#ffff00";
      colors['Green'] = "#00ff00";
      colors['Cyan'] = "#00ffff";
      colors['Blue'] = "#0000ff";
      colors['Magenta'] = "#ff00ff";
      colors['White'] = "#ffffff";
 
      // Some point information, as populated by user prompting
 
      var pt0 = new Array();
      var pt1 = new Array();
      var pt2 = new Array();
      var pt3 = new Array();
 
      // A function to create the XML definition for the
      // transient rectangular polyline we want to create
 
      function createPolyline() {
 
        // Get some parameters from the page
 
        var color = document.getElementById('ColCB').value;
        var linetype = document.getElementById('LTCB').value;
        var lineweight = document.getElementById('LWCB').value;
        var filled = document.getElementById('Filled').checked;
        var cursorType = document.getElementById('Cursor').value;
        if (cursorType == 'None')
          cursor = ' ';
        else
          cursor = ' cursor="' + cursorType + '"';
 
        // Set other rectangle corners based on the picked corners
 
        pt1[0] = pt0[0];
        pt1[1] = pt2[1];
        pt1[2] = pt0[2];
 
        pt3[0] = pt2[0];
        pt3[1] = pt0[1];
        pt3[2] = pt0[2];
 
        var drawable =
          '<?xml version="1.0" encoding="utf-8"?> \
          <!-- the event handler will receive the id--> \
          <drawable \
            xmlns="http://www.autodesk.com/AutoCAD/drawstream.xsd"\
            xmlns:t="http://www.autodesk.com/AutoCAD/transient.xsd"\
            t:onmouseover ="onmouseover"'
            +
            cursor
            +
          '>\
            <graphics color="' + colors[color] +
              '" id="id1" lineweight="' + lineweight +
              '" linetype="' + linetype +
              '" filled="' + filled + '">\
              <polyline isClosed="true">\
                <vertices>\
                  <vertex>' + pt0.toString() + '</vertex>\
                  <vertex>' + pt1.toString() + '</vertex>\
                  <vertex>' + pt2.toString() + '</vertex>\
                  <vertex>' + pt3.toString() + '</vertex>\
                </vertices>\
              </polyline>\
            </graphics>\
          </drawable>';
 
        return drawable;
      }
 
      // A function to create the XML definition for the
      // transient circle we want to create
 
      function createCircle() {
 
        // Get some parameters from the page
 
        var color = document.getElementById('ColCB').value;
        var linetype = document.getElementById('LTCB').value;
        var lineweight = document.getElementById('LWCB').value;
        var filled = document.getElementById('Filled').checked;
        var cursorType = document.getElementById('Cursor').value;
        if (cursorType == 'None')
          cursor = ' ';
        else
          cursor = ' cursor="' + cursorType + '"';
 
        // Use Pythagoras' theorem to get the radius of the circle
        // based on the points selected
 
        var radius =
          Math.sqrt(
            Math.pow(pt2[0] - pt0[0], 2) +
            Math.pow(pt2[1] - pt0[1], 2)
          );
 
        var drawable =
          '<?xml version="1.0" encoding="utf-8"?> \
          <!-- the event handler will receive the id--> \
          <drawable \
            xmlns="http://www.autodesk.com/AutoCAD/drawstream.xsd"\
            xmlns:t="http://www.autodesk.com/AutoCAD/transient.xsd"\
            t:onmouseover ="onmouseover"'
            +
            cursor
            +
          '>\
            <graphics color="' + colors[color] +
              '" id="id1" lineweight="' + lineweight +
              '" linetype="' + linetype +
              '" filled="' + filled + '">\
              <circle center ="' + pt0.toString() +
                '" radius ="' + radius.toString() + '"/>\
            </graphics>\
          </drawable>';
 
        return drawable;
      }
 
      // "Command" to draw a rectangular transient
 
      function drawRectangularTransient() {
 
        function on1stComplete(args) {
 
          var res = JSON.parse(args);
          if (res && res.value) {
            pt0[0] = res.value.x;
            pt0[1] = res.value.y;
            pt0[2] = res.value.z;
 
            // Once we have the first point, get the other corner
 
            var pco =
              new Acad.PromptCornerOptions(
                'Pick second corner point',
                new Acad.Point3d(pt0[0], pt0[1], pt0[2])
              );
            Acad.Editor.getCorner(pco).then(on2ndComplete, onError);
          }
        }
 
        function on2ndComplete(args) {
 
          var res = JSON.parse(args);
          if (res && res.value) {
            pt2[0] = res.value.x;
            pt2[1] = res.value.y;
            pt2[2] = res.value.z;
 
            // And when we have both first and second,
            // we can generate the XML for the transient
            // and ask for it to be drawn
 
            var doc = Acad.Application.activedocument;
            var drawable = createPolyline();
            var tran = new Acad.Transient();
            doc.transientManager.addTransient(tran, drawable);
          }
        }
 
        function onError(args) {
          alert('Unable to create rectangular transient: ' + args);
        }
 
        // The body of our function, where we get the first point
 
        var ppo =
          new Acad.PromptPointOptions(
            'Pick first corner point',
            new Acad.Point3d(0, 0, 0)
          );
        Acad.Editor.getPoint(ppo).then(on1stComplete, onError);
      }
 
      // "Command" to draw a circular transient
 
      function drawCircularTransient() {
 
        function on1stComplete(args) {
 
          var res = JSON.parse(args);
          if (res && res.value) {
            pt0[0] = res.value.x;
            pt0[1] = res.value.y;
            pt0[2] = res.value.z;
 
            // Once we have the center point, get one on the
            // circumference
 
            var ppo =
              new Acad.PromptPointOptions('Pick point on circle');
            ppo.useBasePoint = true;
            ppo.basePoint =
              new Acad.Point3d(pt0[0], pt0[1], pt0[2]);
            Acad.Editor.getPoint(ppo).then(on2ndComplete, onError);
          }
        }
 
        function on2ndComplete(args) {
 
          var res = JSON.parse(args);
          if (res && res.value) {
            pt2[0] = res.value.x;
            pt2[1] = res.value.y;
            pt2[2] = res.value.z;
 
            // And when we have both first and second,
            // we can generate the XML for the transient
            // and ask for it to be drawn
 
            var doc = Acad.Application.activedocument;
            var drawable = createCircle();
            var tran = new Acad.Transient();
            doc.transientManager.addTransient(tran, drawable);
          }
        }
 
        function onError(args) {
          alert('Unable to create circle transient: ' + args);
        }
 
        // The body of our function, where we get the first point
 
        var ppo =
          new Acad.PromptPointOptions(
            'Pick center point',
            new Acad.Point3d(0, 0, 0)
          );
 
        Acad.Editor.getPoint(ppo).then(on1stComplete, onError);
      }
    </script>
 
    <style type="text/css">
      td, body
        { font-family: sans-serif; font-size: 10pt; }
      body
        { background-color: #686868; 
          padding:0;
          margin:5px 5px 5px 5px; 
          color:#FFF; }
      textarea
        { font-family: Consolas; font-size: 8pt; }  
    </style>
  </head>
  <body>
    <!-- Create a tabular UI with headings and comboboxes -->
    <h3>Transient circle or rectangle</h3>
    <table border="0">
      <tr>
        <td align='right'>Color</td>
        <td>
          <select id='ColCB'>
            <option selected="selected">Red</option>
            <option>Yellow</option>
            <option>Green</option>
            <option>Cyan</option>
            <option>Blue</option>
            <option>Magenta</option>
            <option>White</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align='right'>LineType</td>
        <td>
          <select id='LTCB'>
            <option selected="selected">LineTypeSolid</option>
            <option>Dashed</option>
            <option>Dotted</option>
            <option>Dash_Dot</option>
            <option>Short_Dash</option>
            <option>Medium_Dash</option>
            <option>Long_Dash</option>
            <option>Short_Dash_X2</option>
            <option>Medium_Dash_X2</option>
            <option>Long_Dash_X2</option>
            <option>Medium_Long_Dash</option>
            <option>Medium_Dash_Short_Dash_Short_Dash</option>
            <option>Long_Dash_Short_Dash</option>
            <option>Long_Dash_Dot_Dot</option>
            <option>Long_Dash_Dot</option>
            <option>Medium_Dash_Dot_Short_Dash_Dot</option>
            <option>Sparse_Dot</option>
            <option>Solid_6_Pixels_Blank_6_Pixels</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align='right'>LineWeight</td>
        <td>
          <select id='LWCB'>
            <option>0</option>
            <option>5</option>
            <option>9</option>
            <option>13</option>
            <option>15</option>
            <option>18</option>
            <option>20</option>
            <option>25</option>
            <option selected="selected">30</option>
            <option>35</option>
            <option>40</option>
            <option>50</option>
            <option>53</option>
            <option>60</option>
            <option>70</option>
            <option>80</option>
            <option>90</option>
            <option>100</option>
            <option>106</option>
            <option>120</option>
            <option>140</option>
            <option>158</option>
            <option>200</option>
            <option>211</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align='right'>Filled</td>
        <td><input type='checkbox' id='Filled'/></td>
      </tr>
      <tr>
        <td align='right'>Cursor</td>
        <td>
          <select
            id='Cursor'
            title='Cursor to be displayed on hover'>
            <option selected="selected">None</option>
            <option>None</option>
            <option>Arrow</option>
            <option>Ibeam</option>
            <option>Wait</option>
            <option>Cross</option>
            <option>UpArrow</option>
            <option>SizeNWSE</option>
            <option>SizeNESW</option>
            <option>SizeWE</option>
            <option>SizeNS</option>
            <option>SizeAll</option>
            <option>No</option>
            <option>Hand</option>
            <option>AppStarting</option>
            <option>Help</option>
          </select>
        </td>
      </tr>
      <tr>
        <th>&nbsp;</th>
        <td>
          <input
            type='button'
            style="width: 220px"
            onclick='drawRectangularTransient()'
            value='Draw Rectangle Transient' />
        </td>
      </tr>
      <tr>
        <th>&nbsp;</th>
        <td>
          <input
            type='button'
            style="width: 220px"
            onclick='drawCircularTransient()'
            value='Draw Circle Transient' />
        </td>
      </tr>
    </table>
  </body>
</html>

Some notes on the implementation…

As mentioned last time, we use callbacks to deal with code continuation on completion of selection events.
- The two "commands" (they're not really commands in the AutoCAD sense – they're functions called when buttons are clicked on the palette) each have two selection events: for circle creation to pick the center and a point at the radius, and for rectangle creation to pick the two corners. You can already see the code starts to look a lot less linear because of this, but there you go: that’s JavaScript for you.
The various selection methods set global state with the results.
- There may well be a better way of doing this – I picked up much of this part of the implementation from some internal unit test samples – but this way works, at least.
You'll notice we create XML fragments to generate transient graphics, essentially via a declarative API that allows us to (among other things) assign HTML DOM-like event handlers such as onmouseover.

As mentioned when we first looked at the JavaScript API, we need to have a simple loader module that adds this palette into an AutoCAD-resident PaletteSet. Here’s as simple piece of C# code for this:

using Autodesk.AutoCAD.Runtime;
using Autodesk.AutoCAD.Windows;
using System;
 
namespace JavaScriptLoader
{
  public class Commands
  {
    static PaletteSet _ps = null;
 
    [CommandMethod("JSP")]
    public void JavaScriptPalette()
    {
      if (_ps == null)
      {
        _ps = new PaletteSet(
          "JavaScript Demo",
          new Guid("61135FFD-EE9A-4A5D-B3E1-993AB17E93BD")
        );
      }
 
      if (_ps.Count != 0)
      {
        _ps[0].PaletteSet.Remove(0);
      }
 
      var p =
        _ps.Add(
          "JavaScript Test",
          new Uri(
            "http://through-the-interface.typepad.com/files/" +
            "TransientPalette.html"
          )
        );
 
      _ps.Visible = true;
    }
  }
}

Here’s a screenshot of the palette (that I’ve gone ahead and undocked) with the results of clicking on the “Draw Circle/Rectangle Transient” buttons a few times with various options set, selecting various points.

Some good news: I did find a way to invalidate the internal browser cache between AutoCAD sessions, to force a reload from the web-site when loading a page (whether WEBLOADing a .js file or using PaletteSet.Add() or one of the other new methods to load an HTML file). I deleted the contents of the following folder, which seemed to do the trick (and should be safe as they’re stored beneath the temp folder): “C:\Users\username\AppData\Local\Temp\cache”

I still need to check in on the situation with UNDO: for now the transient graphics you create can either be removed programmatically (something I’ve kindly omitted from this sample ;-) or you can close the current drawing.

I expect my next post on the JavaScript API is going to focus more on some of the implementation details (such as the choice of browser control, the out-of-process architecture, etc.). I’ve so far avoided such details as I wanted to show some concrete examples beforehand.

I’m now going offline for the long Easter weekend (both Friday and Monday are holidays, here in Switzerland). I have a post queued up already for Monday, though, so do check back then.

Posted at 04:07 PM in AutoCAD, Graphics system, HTML, JavaScript | Permalink | Comments (3)

February 22, 2013

A gamification experiment: Apollonian Obliteration

Gamification is happening all over the place. In case you’ve missed what it’s all about, this short video should help. To get even more background, here’s another from the same source on augmented reality games, which is a follow-on from this video on alternate reality games.

After having managed to get Apollonian Packings brought into the very cool PointCloud Browser, I thought it’d be fun to integrate some of the code from another of the PointCloud Browser sample apps, creating a little augmented reality game.

Here’s the basic idea: each level consists of a packing brought into PointCloud Browser from the Apollonian web-service, and you have twice as many bullets as there are spheres to pop them all (which you do by aiming the cross-hairs and tapping the screen). The good news is that each time you pop a sphere you get two more bullets (an idea copied directly from the original Ball Invasion sample, along with much of its code).

What you end up with is something that is actually pretty fun – and surprisingly therapeutic… it’s a bit like popping 3D bubble-wrap – and is an interesting way to experience the internal structure of a 3D fractal. My 6-year old is now regularly pestering me to let him play it, which I take as a good sign. :-)

Here are some screenshots:

Here’s a video of me playing the game. It was a bit tricky capturing what was being shown on the iPad and playing the game at the same time, but it settles down after about a minute (please don’t give up on it straight away).

The game has a few quirks that I haven’t yet ironed out: some spheres just end up being impossible to shoot, which I’m guessing is due to the (usually invisible) base plane stopping the bullets from reaching them. It should be simple enough to fix, but please don’t get too frustrated if this happens to you.

I’ve also left the game open-ended: the levels just keep on going. The Apollonian web-service will only serve up packings for up to level 10, but I’ve in any case found that my iPad 2 slows down in a big way when it gets to level 5 (with 989 spheres) and is basically unusable at level 6 (with 2,837). It may be that more recent iPad devices manage later levels very well, so I haven’t capped them at all.

I do wonder whether gamifiying design work is an interesting concept or not (I mostly suspect not, but I could well be wrong). Very interestingly two of the entrants of the APPHACK at AU 2012 were focused on the idea of gamifying AutoCAD usage, providing awards, etc. when you use certain commands. Perhaps gamifying augmented reality clash detection in BIM 360 or in-place analysis via Simulation 360 would be fun and compelling (and yes, I’m pulling these examples out of thin air, so there’s really no need to tell if you find them ridiculous).

Anyway, here’s the code. I’ve avoided a separate JavaScript file (which I’d probably have used under normal circumstances for the bulk of this implementation) to make it simpler to post here.

You can load this page directly in the PointCloud Browser by entering the following in the application’s address-bar: http://autode.sk/apparg.

<!DOCTYPE html>
<html>
  <head>
    <title>Apollonian Obliteration</title>
    <meta
      name="viewport"
      content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="viper-init-options" content="manual"/>
 
    <link
      rel="viper-app-icon" type="images/png"
      href="resources/images/appicon2.png"/>
    <link
      rel="stylesheet" href="css/common.css" type="text/css"
      charset="utf-8"/>
    <link
      rel="stylesheet" href="resources/css/ballinvasion.css"
      type="text/css" charset="utf-8"/>
 
    <script
      type="text/javascript"
      src="http://code.jquery.com/jquery-1.7.1.min.js">
    </script>
    <script type="text/javascript" src="js/common.js"></script>
 
    <script type="text/xml" id="library">
      <library>
        <sound
          id="fire" pitch="1.0" volume="0.8"
          src="resources/sounds/fire.mp3"/>
        <sound
          id="explosion" prototype="fire"
          src="resources/sounds/explosion.mp3"/>
        <sound
          id="bounce" pitch="1.0" volume="0.5"
          src="resources/sounds/bounce.mp3"/>
        <sound
          id="reset" pitch="1.0" volume="0.5"
          src="resources/sounds/reset.mp3"/>
 
        <mesh
          id="cameracube_mesh" primitive="cube" width="0.05"
          height="0.05" len="0.05"
          texture_src="resources/images/explosion.png"/>
 
        <mesh
          id="bullet_mesh" primitive="sphere" radius="0.01"
          details="2" color="0.3,0.3,0.3,1.0"/>
 
        <mesh
          id="base_plane_mesh" primitive="plane" width="1.0"
          height="1.0"
          texture_src="resources/images/init_texture.png"/>
 
        <mesh
          id="sphere_mesh" radius="0.1" primitive="sphere"
          details="2" />
 
        <node
          id="sphere_node" static="true"
          notify_collisions_with_classes="bullet"
          bounce_factor="0" friction_factor="0.99">
          <model
            texture_src="resources/images/white-4x4.png"
            id="sphere_model" mesh="sphere_mesh"/>
        </node>
 
        <node
          id="bullet" class="bullet" mass="1.0" bounce_factor="0.3"
          friction_factor="0.90">
          <model mesh="bullet_mesh"/>
          <animation
            class="fadeout" duration="1.5s" delay="1.5s"
            autostart="true">
            <property name="alpha" from="1.0" to="0.0"
              function="linear"/>
          </animation>
        </node>
 
        <node id="explosion_node" scale="0.1" alpha="1.0">
          <model
            id="explosion_model" blending="luminous"
            texture_src="resources/images/explosion.png"/>
          <animation
            class="explosion" duration="0.4" autostart="true">
            <property
              name="scale" from="0.1" to="2.0" function="ease-out"/>
            <property
              name="alpha" from="1" to="0" function="ease-out"/>
          </animation>
        </node>
      </library>
    </script>
 
    <script type="text/xml" id="scene">
      <scene
        base="relative-center" gravity_constant="0.5"
        notify_collisions_with_classes="bullet">
        <light id="main_light" 
          intensity="1.0"
          fade="constant"
          ambient="0.2, 0.2, 0.2, 0.2" 
          diffuse="1.0, 1.0, 1.0, 1.0"
          specular="1.0, 1.2, 1.2, 1.0" 
          position="3, 0.5, 2, 0"/>
 
        <node id="base_plane" position="0,0,0" alpha="0.0">
          <model mesh="base_plane_mesh" blending="no_shadows"/>
          <animation
            class="color_animation" id="show" duration="0.3">
            <property
              name="alpha" from="0.0" to="1.0" function="ease-out"/>
          </animation>
          <animation
            class="color_animation" id="hide" duration="0.3">
            <property
              name="alpha" from="1.0" to="0.0" function="ease-out"/>
          </animation>
        </node>
 
      </scene>
    </script>
 
    <script type="text/javascript">
 
      var appobliteration = {
        STATE_MENU : 0,
        STATE_GAME_STARTING : 1,
        STATE_GAME_ONGOING : 2,
        state : -1,
 
        init : function() {
          appobliteration.game.init();
          appobliteration.menu.init();
        },
 
        onStartGameRequested : function(course) {
          if (!viper.isCameraEnabled()) {
            viper.setCameraEnabled();
          }
 
          // Hide menu regardless...
 
          appobliteration.menu.fadeOut();
 
          // ...then determine whether we need to initialize a map,
          // or whether we can start the game right away
 
          if (viper.hasTracking()) {
            appobliteration.startGame();
          }
          else {
            appobliteration.state =
              appobliteration.STATE_GAME_STARTING;
            var resetExistingMap = false;
            viper.requireRealityMap(resetExistingMap);
          }
        },
 
        startGame : function() {
          appobliteration.state =
            appobliteration.STATE_GAME_ONGOING;
          appobliteration.game.resetGame();
          appobliteration.game.fadeIn();  
        },
 
        endGame : function() {
          appobliteration.state = appobliteration.STATE_MENU;
          appobliteration.showMenu();
        },
 
        showMenu : function() {
          appobliteration.game.fadeOut();
          appobliteration.menu.fadeIn();
        },
 
        onMapCreated : function() {
          if (
            appobliteration.state ==
              appobliteration.STATE_GAME_STARTING
          ) {
            // Start the game when map has been created 
            // (called as a result of viper.requireRealityMap();
            // above)
 
            appobliteration.startGame();
          }
          else if (
            appobliteration.state == appobliteration.STATE_MENU
          ) {
            // May happen if we load a map from the browser UI
            // while in the game menu
 
            appobliteration.menu.fadeIn();
            appobliteration.game.fadeIn(true);  
          }
          else {
            // Do nothing if we're already playing a game
          }
        },
      }
 
      appobliteration.menu = {
 
        menuView : null,
 
        init : function() {
          this.menuView = $("#menu");
          this.menuView.bind("webkitTransitionEnd", function() {
            if ($(this).css("opacity") == 0.0) {
              $(this).css("display", "none");
            }
          });  
        },
 
        fadeIn : function() {
          this.menuView.css("display", "block");
          this.menuView.css("opacity", 1.0);
        },
 
        fadeOut : function() {
          this.menuView.css("opacity", 0.0);
        },
 
        pushView : function(view) {
          $("#menutitle").html(view.attr('title'));
          $("#content").html(view.html());
 
          var $panelbuttons = $("#content").find(".panelbutton");
          appobliteration.ui.prepareButtons(
            $panelbuttons,
            appobliteration.menu.onMenuButtonClick
          );
        },
 
        onMenuButtonClick : function($elem) {
          viper.log("on menu button click: " + $elem.attr('id'));
          if ($elem.attr('id') == 'play') {
            appobliteration.onStartGameRequested();
          }
          else if ($elem.attr('id') == 'action') {
            viper.goHome();
          }
          else if ($elem.attr('id') == 'more') {
            viper.launchSystemURI("http://autode.sk/ttif");
          }
        },
      }
 
      appobliteration.ui = {
 
        sightSource : "",
 
        showSplash : function() {
          var sight = $("#sight")[0];
          appobliteration.ui.sightSource =
            sight.style.backgroundImage;
          sight.style.backgroundImage =
            "url(resources/images/splash.png)";
        },
 
        hideSplash : function() {
          $("#sight")[0].style.backgroundImage =
            appobliteration.ui.sightSource;
        },
 
        prepareButtons : function($elem, fnc) {
          viper.log("preparing button");
          var maxMove = 16;
 
          $elem.unbind();
          $elem.bind("touchstart", function(e) {
            viper.log("touched button");
            var touch =
              e.originalEvent.touches[0] ||
              e.originalEvent.changedTouches[0];
            $(this).data(
              'touchdown',
              {x: touch.pageX, y: touch.pageY}
            );
          });
 
          $elem.bind("touchend", function(e) {
            var touch =
              e.originalEvent.touches[0] ||
              e.originalEvent.changedTouches[0];
            var touchDown = $(this).data('touchdown');
            var maxMoveSq =
              Math.pow((touchDown.x - touch.pageX),2) +
              Math.pow((touchDown.y - touch.pageY), 2);
 
            if (maxMoveSq < Math.pow(maxMove,2)) {
              viper.log("executing function");
              fnc($(this));
            }
          });
        },
      }
 
      appobliteration.game = {
 
        score : 0,
        level : 1,
        spheres : [],
        bulletCount : 0,
        sphereCount : 0,
        roundsFired : 0,
        cameraTransform : 0,
        isRunning : false,
 
        init : function() {
          this.gameView = $("#game");
          this.gameView.bind("webkitTransitionEnd", 
            function() {
              if ($(this).css("opacity") == 0.0) {
                $(this).css("display", "none");
              }
            }
          );
 
          this.gameNode = viper.getScene();
 
          this.spheresForLevel(this.level);
 
          var $buttons = $("#game").find(".clickable");
 
          appobliteration.ui.prepareButtons(
            $buttons, appobliteration.game.onGameButtonClick
          );
        },
 
        onGameButtonClick : function($elem) {
          if ($elem.attr('id') == 'recharge') {
            appobliteration.game.populateWithSpheres(
              appobliteration.game.spheres
            );
            appobliteration.game.updateDashboard();
 
            viper.find("#reset").play();
          }
          else if ($elem.attr('id') == 'toggle_baseplane') {
            viper.log('toggle baseplane');
            appobliteration.game.toggleBasePlane($elem);
          }
          else if ($elem.attr('id') == 'toggle_points') {
            appobliteration.game.togglePoints($elem);
          }
        },
 
        togglePoints : function($elem) {
          if (!$elem.data('on')) {
            $elem.data('on', true);
            $elem.addClass('selected');
            viper.showTrackedPoints(true);
          }
          else {
            $elem.data('on', false);
            $elem.removeClass('selected');
            viper.showTrackedPoints(false);
          }
        },
 
        toggleBasePlane : function($elem) {
          if (!$elem.data('on')) {
            $elem.data('on', true);
            $elem.addClass('selected');
            var anim = viper.find("#base_plane").find("#show");
 
            anim.start();
          }
          else {
            $elem.data('on', false);
            $elem.removeClass('selected');
            var anim = viper.find("#base_plane").find("#hide");
            anim.start();
          }
        },
 
        populateWithSpheres : function(spheres) {
 
          viper.log(
            "Populate with spheres: " + spheres.length
          );
 
          // Hard-code the colour for each level in an array
 
          var colors =
            [ "0,0,0,1", "1,0,0,1", "1,1,0,1", "0,1,0,1",
              "0,1,1,1", "0,0,1,1", "1,0,1,1", "0.9,0.9,0.9,1",
              "0.6,0.6,0.6,1", "0.3,0.3,0.3,1", "1,1,1,1",
              "1,1,1,1" ]
 
          // Process each sphere, adding it to the scene
 
          $.each(
            spheres,
            function (i, item) {
 
              // Get shortcuts to our JSON data
 
              //viper.log("Processing item " + i + ": " + item);
 
              var x = item.X, y = item.Y, z = item.Z,
                  rad = item.R, level = item.L;
 
              // Create a spherical node
 
              var nodeID = "sphere_" + i;
              var position = new viper.math.Vector(x, y + 1, z);
              var sphere = new viper.Node(nodeID, position);
              sphere.setPrototype("sphere_node");
              sphere.setScale(rad * 10);
              sphere.setTint(colors[parseInt(level)]);
 
              appobliteration.game.gameNode.addChild(sphere);
            }
          );
 
          appobliteration.game.sphereCount = spheres.length;
          appobliteration.game.bulletCount = spheres.length * 2;
 
          appobliteration.game.updateDashboard();
        },
 
        spheresForLevel : function(level) {
 
          viper.log("Spheres for level: " + level);
 
          appobliteration.ui.showSplash();
 
          // Make sure CORS is enabled
 
          jQuery.support.cors = true;
 
          // Call our web-service with the appropriate level
 
          $.ajax({
            url:
              'http://apollonian.cloudapp.net/api/spheres/0.3/' +
              level,
            crossDomain: true,
            data: {},
            dataType: "json"
          }).done(function(results) {
 
            viper.log("Successfully called web service.");
 
            appobliteration.game.spheres = results;
            appobliteration.game.populateWithSpheres(results);
 
            appobliteration.ui.hideSplash();
          });
        },
 
        resetGame : function() {
          viper.find("#reset").play();
          appobliteration.game.start();
        },
 
        createBullet : function(position, referenceNode) {
          try {
            var nodeID = "bullet_" + this.roundsFired;
            var bulletNode = new viper.Node(nodeID);
 
            // Get all properties from the prototype
 
            bulletNode.setPrototype("bullet");
            bulletNode.setPosition(position, referenceNode);
 
            return bulletNode;
          }
          catch (ex) {
            alert(ex);
          }
        },
 
        fire : function() {    
          if (appobliteration.game.bulletCount <= 0) { return; }
 
          var camera = viper.getCamera();
          var bullet =
            this.createBullet(
              new viper.math.Vector(0,(0.2+0.01),0), camera
            );
 
          appobliteration.game.gameNode.addChild(bullet);
 
          try {
            var forceVector = null; 
 
            if (appobliteration.deviceAngle == 0) {
              forceVector =
                viper.Math.unit(new viper.math.Vector(0, 1.0, 0.2));
            }
            else if (appobliteration.deviceAngle == 90) {
              forceVector =
                viper.Math.unit(new viper.math.Vector(0.2, 1.0, 0));
            }
            else if (appobliteration.deviceAngle == 180) {
              forceVector =
                viper.Math.unit(new viper.math.Vector(0, 1.0, -0.2));
            }
            else if (appobliteration.deviceAngle == 270) {
              forceVector =
                viper.Math.unit(new viper.math.Vector(-0.2, 1.0, 0));
            }
 
            var innerPosition = viper.math.Vector(0,0,0);
            bullet.push(1.1, forceVector, innerPosition, camera); 
            viper.log(
              "Fired bullet in (local) direction " +
              forceVector.toArray()
            );
 
            appobliteration.game.bulletCount--;
            appobliteration.game.updateDashboard();
          }
          catch (ex) {
            alert(ex);
          }
 
          viper.find("#fire").play();
 
          this.roundsFired++;
        },
 
        updateDashboard : function() {
          try {
            $("#disp_current_score").html(
              appobliteration.game.score
            );
            $("#disp_level").html(appobliteration.game.level);
            $("#disp_bulletcount").html(
              appobliteration.game.bulletCount
            );
            $("#disp_spherecount").html(
              appobliteration.game.sphereCount
            );
          }
          catch (ex) {
            alert("error updating dash: " + ex);
          }
        },
 
        onBounce : function(event) {
          var bullet = event.element;
          var bounceCount = bullet.getMeta('bounce_count', 0);
          bounceCount++;
          bullet.setMeta('bounce_count', bounceCount);
 
          var pitch = 1.0;
          var volume = 1 / (bounceCount*2);
 
          viper.find("#bounce").play(pitch, volume);
        },
 
        onCollision : function(event1, event2) {
          try {
            // Determine which event belongs to which class
            // (sphere vs bullet)
 
            var bullet_collision = null;
            var sphere_collision = null;
 
            if (event1.element.getClass() == "bullet") {
              bullet_collision = event1;
              sphere_collision = event2;
            }
            else if (event2.element.getClass() == "bullet") {
              sphere_collision = event1;
              bullet_collision = event2;
            }
            else {
              return;
            }
 
            // Bullet explosion
 
            var bullet_explosion =
              new viper.Node(
                bullet_collision.element.id + "_explosion",
                bullet_collision.position
              );
            bullet_explosion.setPrototype("explosion_node");
            bullet_explosion.find("#explosion_model").
              setMesh("bullet_mesh"); // Replace the mesh
 
            // Sphere explosion
 
            var sphere_explosion =
              new viper.Node(
                sphere_collision.element.id + "_explosion",
                sphere_collision.position
              );
            sphere_explosion.setPrototype("explosion_node");
            sphere_explosion.find("#explosion_model").
              setMesh("sphere_mesh"); // Replace the mesh
 
            viper.log(
              'Collision position: ' +
              sphere_collision.position.toArray()
            );
 
            viper.find("#explosion").play();
 
            // Remove the colliding objects
 
            bullet_collision.element.remove();
 
            var sphereSuperNode =
              sphere_collision.element.getOwnerNode();
            if (
              sphereSuperNode &&
              sphereSuperNode.getClass() == "supernode"
            ) {
              // Remove the sphere superclass, if any
 
              viper.log("Removing sphere supernode");
              sphereSuperNode.remove();
            }
            else {
              // Remove the sphere directly
 
              viper.log("Removing sphere directly");
              sphere_collision.element.remove();
            }
 
            // Add the explosion objects
 
            viper.getScene().addChild(sphere_explosion);
            viper.getScene().addChild(bullet_explosion);
 
            // Update numbers
 
            appobliteration.game.score += 200;     // A good score
            appobliteration.game.sphereCount--;    // 1 less sphere
            appobliteration.game.bulletCount += 2; // 2 for each hit
 
            // Update dashboard
 
            appobliteration.game.updateDashboard();
 
            if (appobliteration.game.sphereCount <= 0)
            {
              appobliteration.game.spheresForLevel(
                ++appobliteration.game.level
              );
            }
          }
          catch (ex) {
            viper.log("Error: " + ex);
          }
        },
 
        onAnimationFinished : function(animationElement) {
          var animClass = animationElement.getClass();
          if (
            animClass != "color_animation" && animClass != null
          ) {
            var node = animationElement.getOwnerNode();
            if (node) {
              node.remove();
            }
          }
        },
 
        fadeIn : function() {
          var $fireFrame = $("#fireframe");
          $fireFrame.css("display", "block").bind(
            "touchstart",
            function() {
              if (
                appobliteration.state ==
                  appobliteration.STATE_GAME_ONGOING
              ) {
                appobliteration.game.fire();
              }
            }
          );
 
          this.gameView.css("opacity", 1.0);
        },
 
        fadeOut : function() {
          this.gameView.css("opacity", 0.0);
          $("#fireframe").unbind().css("display", "none");
        },
 
        pause : function() {
          this.isRunning = false;
        },
 
        start : function() {
          this.isRunning = true;
        }
      }
 
      function onAppLoaded() {
      }
 
      function onViperReady() {
 
        viper.setLoggingEnabled(false); // Logging is slow in IOS
        viper.setBrowserBounce(false);  // No browser window bounce
        viper.resetRealityMap();        // Reset any existing map
        viper.showTrackedPoints(false); // Default is points off
 
        appobliteration.init();
 
        var observer = {
          onTrackingLost: function () {
          },
 
          onTrackingFound: function () {
            viper.find("#base_plane").setPosition(
              new viper.math.Vector(0, 0, 0), viper.getBasePlane()
            );
          },
 
          onMapCreated: function () {
            viper.find("#base_plane").setPosition(
              new viper.math.Vector(0, 0, 0), viper.getBasePlane()
            );
            appobliteration.onMapCreated();
          },
 
          onMapCreationCancelled: function () {
            appobliteration.showMenu();
          },
 
          onCollision: function (element1, element2) {
            appobliteration.game.onCollision(element1, element2);
          },
 
          onBounce: function (element1) {
            appobliteration.game.onBounce(element1);
          },
 
          onAnimationFinished: function (animationElement) {
            appobliteration.game.onAnimationFinished(
              animationElement
            );
          },
 
          onDeviceOrientationChanged: function (angle) {
            appobliteration.deviceAngle = angle;
            var $screen = $("#screen");
            var classname = "screen_orientation_" + angle;
            $screen.removeClass().addClass(classname);
          },
 
          handleTouchStart: function (x, y) {
            viper.log("GAME: Touch start at " + x + ", " + y);
            return false;
          },
 
          handleTouchMove: function (x, y, dX, dY) {
            return false;
          },
 
          handleTouchEnd: function (x, y) {
            return false;
          }
        }
 
        // Attach the observer to viper 
 
        viper.setObserver(observer);
 
        appobliteration.menu.pushView($("#mainmenu"));
        appobliteration.menu.fadeIn();
      }
    </script>
  </head>
  <body>
    <div id="screen">
      <div id="menu">
        <div id="header">
          <div class="inner"><div class="logo"></div></div>
        </div>
        <div class="headershade"></div>        
        <div class="menupanel">
          <div class="stripes">
            <div class="header">
              <div id="menutitle">Title</div>
            </div>
            <div class="content_outer">
              <div class="headershade"></div>
              <div id="content"></div>
              <div class="footershade"></div>
            </div>
            <div class="footer"></div>
          </div>
        </div>
        <div id="mainmenu" class="menuview" title="Main Menu">
          <div class="mainmenu_content">
            <div id="play" class="panelbutton">
              <div class="icon"></div>
              <div class="title">Play the Game</div>
              <div class="subtext">
              Blast some Apollonian Packings
              </div>
              <div style="clear:both;"></div>
            </div>
            <div id="action" class="panelbutton">
              <div class="icon"></div>
              <div class="title">Go Home and Relax</div>
              <div class="subtext">
              Go back to the home page
              </div>
              <div style="clear:both;"></div>
            </div>
            <div id="more" class="panelbutton">
              <div class="icon"></div>
              <div class="title">Visit Kean's blog</div>
              <div class="subtext">
              Find out more about all this
              </div>
              <div style="clear:both;"></div>
            </div>
          </div>
        </div>
      </div>      
      <div id="game">
        <div id="fireframe"></div>
        <div id="header">
          <div class="inner"><div class="logo"></div></div>
        </div>  
        <div id="dashboard">
          <div class="inner">
            <div class="score_column">
              <div class="caption">Current Score</div>
              <div id="disp_current_score">0</div>
            </div>
            <div class="score_column">
              <div class="caption">Level</div>
              <div id="disp_level">0</div>
            </div>
            <div class="score_column">
              <div class="caption">Bullets</div>
              <div id="disp_bulletcount">0</div>
            </div>
            <div class="score_column">
              <div class="caption">Enemies</div>
              <div id="disp_spherecount">0</div>
            </div>
            <div style="clear:both;"></div>
          </div>
        </div>
        <div class="headershade"></div>        
        <div id="sight"></div>
        <div id="toggle_buttons">
          <div id="toggle_baseplane" class="clickable"></div>
          <div id="toggle_points" class="clickable"></div>
        </div>
        <div id="recharge" class="button clickable">Reset</div>
      </div>      
      <div id="log"></div>
    </div>
  </body>
</html>

Posted at 07:36 AM in Augmented Reality, Geometry, HTML, JSON, SaaS | Permalink | Comments (2)

February 15, 2013

An augmented reality view of an Apollonian packing using PointCloud Browser

After my initial (only partially successful) attempt, earlier in the week, to get 3D geometry from the Apollonian web-service into a PointCloud Browser session, I finally managed to get it working properly.

Given the currently fairly light documentation available – especially for the Viper JavaScript namespace which gives access to the 3D rendering capabilities in the browser – I ended up posting a question to the PointCloud forum. The answer was very instructive – I was able not only to get spheres of different radii displayed using the same mesh…

… but also to apply different colours to the same mesh via tinting. Here’s an intermediate step I hit (I’m not fully sure why the colours came out as they did, but anyway)…

… before getting much more satisfactory results. With fewer lines of code.

Here’s the updated HTML page (also available here and at this shortened URL):

<!DOCTYPE html>
<html>
  <head>
    <title>Apollonian</title>
    <meta
      name="viewport"
      content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="viper-init-options" content="manual"/>
 
    <link
      rel="viper-app-icon" type="images/png"
      href="resources/images/appicon.jpg"/>
    <link
      rel="stylesheet" href="./css/common.css" type="text/css"
      charset="utf-8"/>
 
    <script
      type="text/javascript"
      src="http://code.jquery.com/jquery-1.7.1.min.js">
    </script>
    <script type="text/javascript" src="./js/common.js"></script>
 
    <script type="text/xml" id="library">
      <library>
        <mesh
          id="sphere_mesh" radius="1" primitive="sphere"
          details="2" />
        <node id="sphere_node">
          <model
            texture_src="resources/images/white-4x4.png"
            id="sphere_model" mesh="sphere_mesh"/>
        </node>
      </library>
    </script>
 
    <script type="text/xml" id="scene">
      <scene base="relative-baseplane">
        <light id="main_light" 
          intensity="1.0"
          fade="constant"
          ambient="0.2, 0.2, 0.2, 0.2" 
          diffuse="1.0, 1.0, 1.0, 1.0"
          specular="1.0, 1.2, 1.2, 1.0" 
          position="3, 0.5, 2, 0"/>
      </scene>
    </script>
 
    <script type="text/javascript">
      function startup() {
        viper.requireRealityMap();
      }
 
      /*
      * This function is called when the web app is fully loaded
      * (e.g. sounds, textures, image descriptors)
      * and we're completely ready to go
      */
      function onAppLoaded() {
        startup();
 
        var nodeListener = new viper.NodeListener();
        viper.getCamera().attachListener(
          nodeListener,
          function(node, data) {
            var pos = data.position.getTranslation();
            viper.log(
              "Received camera pos update: " +
              pos.getX() + "," + pos.getY() + "," + pos.getZ()
            );
          }
        );
      }
 
      /*
       * This function is called when the Viper JavaScript API is
       * ready for use 
       */
      function onViperReady() {
        viper.setLoggingEnabled(true);
 
        var scene = viper.getScene();
        populateWithLevel(scene, 5);
 
        // Create an observer. This observer contains the callback
        // functions that may be called from the engine layer. 
        // We only need to add the functions that we are interested
        // in.
 
        var observer = {
          /*
          * Called when the user clicked cancel in the map creation
          * view
          */
          onMapCreationCancelled: function () {
            startup();
          }
        }
 
        // Attach the observer to viper 
 
        viper.setObserver(observer);
      }
 
      function populateWithLevel(scene, level) {
 
        viper.log("Populate with level: " + level);
 
        // Make sure CORS is enabled
 
        jQuery.support.cors = true;
 
        // Call our web-service with the appropriate level
 
        $.ajax(
          {
            url:
              'http://apollonian.cloudapp.net/api/spheres/0.3/' +
              level,
            crossDomain: true,
            data: {},
            dataType: "json",
            error: function (err) {
              alert(err.statusText);
            },
            success: function (data) {
 
              viper.log("Successfully called web service.");
 
              // Hard-code the colour for each level in an array
 
              var colors =
                [ "0,0,0,1", "1,0,0,1", "1,1,0,1", "0,1,0,1",
                  "0,1,1,1", "0,0,1,1", "1,0,1,1", "0.9,0.9,0.9,1",
                  "0.6,0.6,0.6,1", "0.3,0.3,0.3,1", "1,1,1,1",
                  "1,1,1,1" ]
 
              // Process each sphere, adding it to the scene
 
              $.each(
                data,
                function (i, item) {
 
                  // Get shortcuts to our JSON data
 
                  viper.log("Processing item " + i);
 
                  var x = item.X, y = item.Y, z = item.Z,
                      rad = item.R, level = item.L;
 
                  var length = Math.sqrt(x * x + y * y + z * z);
 
                  // Only add spheres near the edge of the outer one
 
                  if (length + rad > 0.29) {
 
                    // Create a spherical node
 
                    var nodeID = "sphere_" + i;
                    var position = new viper.math.Vector(x, y, z);
                    var sphere = new viper.Node(nodeID, position);
                    sphere.setPrototype("sphere_node");
                    sphere.setScale(rad);
                    sphere.setTint(colors[parseInt(level)]);
                    scene.addChild(sphere);
                  }
                }
              );
            }
          }
        );
      }
    </script>
  </head>
  <body/>
</html>

The page depends on an additional texture (which you can get here) but that should be of modest inconvenience).

To really get a sense of the responsiveness of the PointCloud Browser when viewing this 3D geometry, here’s a quick video I recorded this morning to show it in action:

For fun, here’s a level 7 packing (you can tweak the level in the call to populateWithLevel(), above). This change does slow down the load considerably – which stalls the “reality map acquisition” process for several seconds – even though the runtime performance on my iPad 2 remains pretty good. So I’ve left the posted versions at level 5.

Posted at 08:05 AM in AJAX, Augmented Reality, Geometry, HTML, JavaScript, JSON, SaaS | Permalink | Comments (0)

February 11, 2013

Using SLAM-based Augmented Reality to visualize 3D geometry

I first became aware of the work being done by 13th Lab a couple of years ago, but just last week someone pinged me about it again and re-triggered my interest (thanks, Jim :-).

13th Lab is a small Swedish company that has created some really interesting Augmented Reality technology. Many AR systems make use of fiduciary markers (which often look like sections of QR codes) to make it easier to determine where the 3D content should be positioned and visualized in the 2D image of the scene being fed from your device’s camera.

Ideally, though, you want a markerless AR system. 13th Lab have created just that, making use of a technique borrowed from the world of robotics called simultaneous localization and mapping (SLAM).

I’m far from being an expert in AR, but I thought I’d have a play around with some technology that 13th Lab have recently released into Beta (both of which are “FREE (even for commercial use)”). They’ve created two products: an SDK (currently for iOS and Unity 3D – apparently Android support is on its way) – which I decided not to spend time on – and a browser you run on an iOS device that loads custom web-pages.

The PointCloud Browser can be installed from the App Store and pointed at one of the samples that show you how to use the JavaScript APIs to do something simple such as add basic 3D primitives or go much further and implement an AR-based game. Using one of these samples as a base, I created my own web-page that pulls down 3D fractal data from the web-service I implemented as part of last year’s the Cloud & Mobile series (if you try to load this page in a standard browser you’ll get uninteresting results, by the way).

Once loaded, you can point your camera at a flat surface with some helpful detail (SLAM systems are presumably greatly helped by the existence of unique visual detail). I chose the whiteboard in our kitchen:

When you tap the screen, the browser then uses computer vision techniques to capture information about the surface:

At which point you should first see your 3D geometry:

As you move the device around, you see difference views on the geometry, of course. Here’s a close up:

And here’s a view from the other side of the whiteboard:

The results aren’t yet quite as I want them, even if they prove the concept: the spheres currently all have the same radius, for instance, as that gets set at the mesh level (and mesh objects are ideally shared by multiple nodes). Some work will be needed either to find a way to set this per instance or to establish an efficient way of generating mesh objects for unique size/colour combinations.

Here’s the HTML and JavaScript code that integrates this data from the web-service:

<!DOCTYPE html>
<html>
  <head>
    <title>Apollonian</title>
    <meta
      name="viewport"
      content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="viper-init-options" content="manual"/>
 
    <link
      rel="viper-app-icon" type="images/png"
      href="resources/images/appicon.jpg"/>
    <link
      rel="stylesheet" href="./css/common.css" type="text/css"
      charset="utf-8"/>
 
    <script
      type="text/javascript"
      src="http://code.jquery.com/jquery-1.7.1.min.js">
    </script>
    <script type="text/javascript" src="./js/common.js"></script>
 
    <script type="text/xml" id="library">
      <library>
        <mesh
          id="sphere_mesh1" radius="0.03" primitive="sphere"
          color="0,0,0,1" details="3" /> 
        <mesh
          id="sphere_mesh2" radius="0.03" primitive="sphere"
          color="0.5,0,0,1" details="3" /> 
        <mesh
          id="sphere_mesh3" radius="0.03" primitive="sphere"
          color="0.5,0.5,0,1" details="3" /> 
        <mesh
          id="sphere_mesh4" radius="0.03" primitive="sphere"
          color="0,0.5,0,1" details="3" /> 
        <mesh
          id="sphere_mesh5" radius="0.03" primitive="sphere"
          color="0,0.5,0.5,1" details="3" /> 
        <mesh
          id="sphere_mesh6" radius="0.03" primitive="sphere"
          color="0,0,0.5,1" details="3" /> 
        <mesh
          id="sphere_mesh7" radius="0.03" primitive="sphere"
          color="0.5,0,0.5,1" details="3" /> 
        <mesh
          id="sphere_mesh8" radius="0.03" primitive="sphere"
          color="0.9,0.9,0.9,1" details="3" /> 
        <mesh
          id="sphere_mesh9" radius="0.03" primitive="sphere"
          color="0.6,0.6,0.6,1" details="3" /> 
        <mesh
          id="sphere_mesh10" radius="0.03" primitive="sphere"
          color="0.3,0.3,0.3,1" details="3" /> 
        <mesh
          id="sphere_mesh11" radius="0.03" primitive="sphere"
          color="1,1,1,1" details="3" /> 
        <mesh
          id="sphere_mesh12" radius="0.03" primitive="sphere"
          color="1,1,1,1" details="3" /> 
 
        <node id="masterSphere1" static="true">
          <model id="sphere_model" mesh="sphere_mesh1"/>
        </node>
        <node id="masterSphere2" static="true">
          <model id="sphere_model" mesh="sphere_mesh2"/>
        </node>
        <node id="masterSphere3" static="true">
          <model id="sphere_model" mesh="sphere_mesh3"/>
        </node>
        <node id="masterSphere4" static="true">
          <model id="sphere_model" mesh="sphere_mesh4"/>
        </node>
        <node id="masterSphere5" static="true">
          <model id="sphere_model" mesh="sphere_mesh5"/>
        </node>
        <node id="masterSphere6" static="true">
          <model id="sphere_model" mesh="sphere_mesh6"/>
        </node>
        <node id="masterSphere7" static="true">
          <model id="sphere_model" mesh="sphere_mesh7"/>
        </node>
        <node id="masterSphere8" static="true">
          <model id="sphere_model" mesh="sphere_mesh8"/>
        </node>
        <node id="masterSphere9" static="true">
          <model id="sphere_model" mesh="sphere_mesh9"/>
        </node>
        <node id="masterSphere10" static="true">
          <model id="sphere_model" mesh="sphere_mesh10"/>
        </node>
        <node id="masterSphere11" static="true">
          <model id="sphere_model" mesh="sphere_mesh11"/>
        </node>
        <node id="masterSphere12" static="true">
          <model id="sphere_model" mesh="sphere_mesh12"/>
        </node>
      </library>
    </script>
 
    <script type="text/xml" id="scene">
      <scene base="relative-baseplane">
        <light id="main_light" 
          intensity="1.0"
          fade="constant"
          ambient="0.2, 0.2, 0.2, 0.2" 
          diffuse="1.0, 1.0, 1.0, 1.0"
          specular="1.0, 1.2, 1.2, 1.0" 
          position="3, 0.5, 2, 0"/>
      </scene>
    </script>
 
    <script type="text/javascript">
      function startup() {
        viper.requireRealityMap();
      }
 
      /*
      * This function is called when the web app is fully loaded
      * (e.g. sounds, textures, image descriptors)
      * and we're completely ready to go
      */
      function onAppLoaded() {
        startup();
 
        var nodeListener = new viper.NodeListener();
        viper.getCamera().attachListener(
          nodeListener,
          function(node, data) {
            var pos = data.position.getTranslation();
            viper.log(
              "Received camera pos update: " +
              pos.getX() + "," + pos.getY() + "," + pos.getZ()
            );
          }
        );
      }
 
      /*
       * This function is called when the Viper JavaScript API is
       * ready for use 
       */
      function onViperReady() {
        viper.setLoggingEnabled(true);
 
        var scene = viper.getScene();
        populateWithLevel(scene, 5);
 
        // Create an observer. This observer contains the callback
        // functions that may be called from the engine layer. 
        // We only need to add the functions that we are interested
        // in.
 
        var observer = {
          /*
          * Called when the user clicked cancel in the map creation
          * view
          */
          onMapCreationCancelled: function () {
            startup();
          }
        }
 
        // Attach the observer to viper 
 
        viper.setObserver(observer);
      }
 
      function populateWithLevel(scene, level) {
 
        viper.log("Populate with level: " + level);
 
        // Make sure CORS is enabled
 
        jQuery.support.cors = true;
 
        // Call our web-service with the appropriate level
 
        $.ajax(
          {
            url:
              'http://apollonian.cloudapp.net/api/spheres/1/' +
              level,
            crossDomain: true,
            data: {},
            dataType: "json",
            error: function (err) {
              alert(err.statusText);
            },
            success: function (data) {
 
              viper.log("Successfully called web service.");
 
              // Process each sphere, adding it to the scene
 
              $.each(
                data,
                function (i, item) {
 
                  // Get shortcuts to our JSON data
 
                  viper.log("Processing item " + i);
 
                  var x = item.X, y = item.Y, z = item.Z,
                      rad = item.R, level = item.L;
 
                  var length = Math.sqrt(x * x + y * y + z * z);
 
                  // Only add spheres near the edge of the outer one
 
                  if (length + rad > 0.99) {
 
                    // Create a spherical node
 
                    var nodeID = "sphere_" + i;
                    var position =
                      new viper.math.Vector(x/3, y/3, z/3);
                    var sphere = new viper.Node(nodeID, position);
                    sphere.setPrototype("masterSphere" + level);
 
                    scene.addChild(sphere);
                  }
                }
              );
            }
          }
        );
      }
    </script>
  </head>
  <body/>
</html>

If you want to give this a try yourself, install the PointCloud Browser and enter “http://autode.sk/appar” in the address bar: this will re-direct to the longer URL on my blog.

Once I’ve found a way to adjust the radii per instance, I think I’m going to investigate exporting simple 3D geometry from AutoCAD, to see what’s possible (the browser does support .OBJ for more complex objects – I’ll be looking at fairly simple stuff).

Posted at 05:14 PM in AJAX, Augmented Reality, Geometry, HTML, JavaScript, JSON, SaaS | Permalink | Comments (0)

June 04, 2012

Cloud & mobile series summary

As we reach the end of this long series of posts on moving code to the cloud – and a look at ways to use the functionality from a wide variety of applications, many of them on mobile devices – I felt it was worth putting together a quick summary post to reinforce the overall message (which may have been a bit lost in the sheer volume of information).

Firstly, here are the posts in this series, including those looking at the original creation of the “desktop” application functionality:

Creating the core desktop functionality

Moving it to the cloud

Using the web-service from various clients

Here are the client application projects I’ve posted for Android, iOS & WinRT.

Perhaps it’s time to say a few words about the experience I had with each of these environments…

Unity3D was great and would certainly allow you to create a 3D app that could be used in any of the other environments (with the possible exception of WinRT for now, at least). I’d definitely consider this again to create a cross-platform 3D app.
Android surprised me: I really liked the language (Java), the chosen 3D framework (Rajawali) and the development tool (Eclipse).
WebGL & Three.js proved to be both easy to use and extremely powerful. Definitely an area to watch as WebGL gets more browser support, especially on mobile platforms.
iOS was very strange for me, but didn’t prove to be so awful to develop for: while I found the Objective-C syntax to be quite jarring and the Xcode tool to be both confusing and somewhat unstable, the capabilities of the platform and its primary language were quite mature: you can do quite a lot with relatively few lines of (admittedly pretty weird-looking ;-) code. I found iSGL3D reasonably good, although I was ultimately disappointed with the results I was personally able to get from it.
WinRT was fairly familiar – given my history with .NET – although the lack of a higher-level framework (with a simple sphere primitive, for instance) meant I struggled more with this than I’d have thought. I hope/expect that to be addressed by somebody at some point: while SharpDX allowed me to at least use C# to create a Metro-style Direct3D app, I really would have benefited from a higher abstraction layer to code against.

And to conclude…

This series was really intended to demonstrate that there are significant benefits in making core algorithms cloud-based, not only from an architectural perspective, but from the broad range of applications it enables you to provide to your customers in the long term. And also that this technology really isn’t hard: most of the client apps took a day or two to develop and none took more than a week.

I’ve chosen to deal with graphical data in this series of posts – mainly to make them more visually interesting – but it’s arguably even more compelling to broaden the reach of associated, non-graphical design data using this kind of approach.

Hopefully some of you have followed along with these posts, and derive at least some benefit from seeing similar code working in a variety of languages on a variety of technology stacks. It’s certainly been a fun one to work on: diving so deeply into the respective technologies has at times been challenging but highly educational. :-)

photo credit: blakespot via photo pin cc

Update:

For a further visualization of this data in an augmented reality application, see these posts:

Posted at 09:01 AM in AJAX, Android, ASP.NET, Augmented Reality, AutoCAD, AutoCAD .NET, Azure, F#, HTML, iOS, Java, JSON, Mobile, REST, SaaS, Unity3D, Web/Tech, WinRT | Permalink | Comments (5)

May 23, 2012

Creating a 3D viewer for our Apollonian service using HTML5 – Part 3

To finish off our look at developing an HTML5-based 3D viewer for our Apollonian web-service, today’s post integrates the trackball capability of the Three.js library. Many thanks to Jeff Geer for once again pointing me in the right direction on this. :-)

The trackball capability allows you not to worry about manual implementation of 3D navigation inside your viewer: you simply set up some basic parameters to indicate the size of your model and the speed with which you want navigation to occur – as well as the keys for rotate, zoom and pan – and then you just let it fly.

Here’s the updated file for you to try in either Chrome or Firefox (or elsewhere with WebGL enabled), with the A, S and D keys mapped to rotate, zoom and pan, respectively.

Here’s a video of the trackball capability in action:

And here’s the updated source code:

<!doctype html>
<html>
  <head>
    <title>Apollonian Viewer</title>
  </head>
  <body>
    <script
      type="text/javascript"
      src="http://code.jquery.com/jquery-1.7.1.js">
    </script>
    <script type="text/javascript" src="js/xdr.js"></script>
    <script type="text/javascript" src="js/Three.js"></script>
    <script type="text/javascript">
      var animateWithWebGL;
      var container, root = null;
      var camera, scene, renderer, trackball;
      var zoomScale, xRotation, yRotation;
      var changingLevel = false;
 
      init();
      animate();
 
      // Feature test for WebGL
 
      function hasWebGL()
      {
        try
        {
          var canvas = document.createElement('canvas');
          var ret =
            !!(window.WebGLRenderingContext &&
                (canvas.getContext('webgl') ||
                 canvas.getContext('experimental-webgl'))
              );
          return ret;
        }
        catch(e)
        {
          return false;
        };
      }
 
      function init()
      {
        zoomScale = 1;
        xRotation = 0;
        yRotation = 0;
        var rotInc = 0.05;
 
        animateWithWebGL = hasWebGL();
 
        container = document.createElement('div');
        container.style.background = "#000000";
        document.body.appendChild(container);
 
        // Set the scene size (slightly smaller than the
        // inner screen size, to avoid scrollbars)
 
        var WIDTH = window.innerWidth - 25,
            HEIGHT = window.innerHeight - 25;
 
        // Set some camera attributes
 
        var VIEW_ANGLE = 45,
            ASPECT = WIDTH / HEIGHT,
            NEAR = 0.1,
            FAR = 200;
 
        // Create the renderer, camera, scene and trackball
 
        renderer =
          animateWithWebGL ?
            new THREE.WebGLRenderer() :
            new THREE.CanvasRenderer();
        camera =
          new THREE.PerspectiveCamera(
            VIEW_ANGLE,
            ASPECT,
            NEAR,
            FAR
          );
        scene = new THREE.Scene();
 
        trackball =
          new THREE.TrackballControls(camera, container);
        trackball.rotateSpeed = 1.4;
        trackball.zoomSpeed = 2.0;
        trackball.panSpeed = 0.5;
        trackball.noZoom = false;
        trackball.noPan = false;
        trackball.staticMoving = true;
        trackball.dynamicDampingFactor = 0.3;
        trackball.minDistance = 1;
        trackball.maxDistance = 100;
        trackball.keys = [65, 83, 68]; // [a:rotate, s:zoom, d:pan]
        trackball.addEventListener('change', render);
 
        // The camera starts at 0,0,0 so pull it back
 
        camera.position.z = 4;
 
        // Create a point light
 
        var pointLight = new THREE.PointLight(0xFFFFFF);
 
        // Set its position
 
        pointLight.position.x = 2;
        pointLight.position.y = 10;
        pointLight.position.z = 26;
 
        // Add to the scene
 
        scene.add(pointLight);
 
        // And the camera
 
        scene.add(camera);
 
        // Start the renderer
 
        renderer.setSize(WIDTH, HEIGHT);
 
        // Attach the renderer-supplied DOM element
 
        container.appendChild(renderer.domElement);
 
        $(document).keypress(
          function (event)
          {
            // On Firefox we need event.which rather than keyCode
 
            var code = event.keyCode ? event.keyCode : event.which;
            switch (String.fromCharCode(code))
            {
              case '0':
              case '1':
              case '2':
              case '3':
              case '4':
              case '5':
              case '6':
              case '7':
              case '8':
              case '9':
                var level = code - '0'.charCodeAt();
                populateWithLevel(level == 0 ? 10 : level);
                break;
            }
          }
        );
 
        populateWithLevel(10);
      }
 
      function populateWithLevel(level)
      {
        // Make sure we're not already changing levels
 
        if (changingLevel)
          return;
 
        changingLevel = true;
 
        // If we already have a level loaded, remove the
        // root from the scene and delete it
 
        if (root != null)
        {
          scene.remove(root);
          delete root;
        }
 
        // Make sure CORS is enabled
 
        jQuery.support.cors = true;
 
        // Call our web-service with the appropriate level
 
        $.ajax(
          {
            url:
              'http://apollonian.cloudapp.net/api/spheres/1/' +
              level,
            crossDomain: true,
            data: {},
            dataType: "json",
            error: function(err)
            {
              alert(err.statusText);
            },
            success: function(data)
            {
              // Create the spheres' materials
 
              var materials =
                [
                  new THREE.MeshLambertMaterial({ color: 0x000000 }),
                  new THREE.MeshLambertMaterial({ color: 0xFF0000 }),
                  new THREE.MeshLambertMaterial({ color: 0xFFFF00 }),
                  new THREE.MeshLambertMaterial({ color: 0x00FF00 }),
                  new THREE.MeshLambertMaterial({ color: 0x00FFFF }),
                  new THREE.MeshLambertMaterial({ color: 0x0000FF }),
                  new THREE.MeshLambertMaterial({ color: 0xFF00FF }),
                  new THREE.MeshLambertMaterial({ color: 0xA9A9A9 }),
                  new THREE.MeshLambertMaterial({ color: 0x808080 }),
                  new THREE.MeshLambertMaterial({ color: 0xD3D3D3 }),
                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF }),
                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF })
                ];
 
              // Set up the sphere vars
 
              var rootRad = 0.01, segs = 9, rings = 9;
 
              // Create our root object
 
              var sphereGeom =
                new THREE.SphereGeometry(rootRad, segs, rings);
 
              // Create the mesh from the geometry
 
              root =
                 new THREE.Mesh(sphereGeom, materials[0]);
 
              scene.add(root);
 
              // Process each sphere, adding it to the scene
 
              $.each(
                data,
                function (i, item)
                {
                  // Get shortcuts to our JSON data
 
                  var x = item.X, y = item.Y, z = item.Z,
                      rad = item.R, level = item.L;
 
                  var length = Math.sqrt(x * x + y * y + z * z);
 
                  // Only add spheres near the edge of the outer one
                  // (and only the front half if not animating)
 
                  if (
                    length + rad > 0.99 &&
                      (animateWithWebGL || z > 0)
                  )
                  {
                    // Create the mesh from the geometry
 
                    var sphere =
                      new THREE.Mesh(sphereGeom, materials[level]);
 
                    sphere.position.x = x;
                    sphere.position.y = y;
                    sphere.position.z = z;
                    var scaledRad = rad / rootRad;
                    sphere.scale.x = scaledRad;
                    sphere.scale.y = scaledRad;
                    sphere.scale.z = scaledRad;
 
                    root.add(sphere);
                  }
                }
              );
 
              // Draw!
 
              renderer.render(scene, camera);
 
              changingLevel = false;
            }
          }
        );
        }
 
      function animate()
      {
        requestAnimationFrame(animate);
        trackball.update();
      }
 
      function render()
      {
        renderer.render(scene, camera);
      }      
    </script>
  </body>
</html>

I was able to strip out all the code enabling zoom/spin, although I left the piece in that lets you change levels with the number keys. Once again Three.js and WebGL have really impressed me: this is very interesting technology, and really feels comparable with a native, GPU-enabled 3D graphics experience.

Over the next few posts, we’re going to wrap up this series by implementing a Metro-style 3D viewer using WinRT and DirectX. Fun, fun, fun! :-)

Posted at 11:53 AM in AJAX, ASP.NET, Azure, HTML, JSON, REST, SaaS, Web/Tech | Permalink | Comments (4)

May 18, 2012

Creating a 3D viewer for our Apollonian service using HTML5 – Part 2

In the last post, we created another, basic 3D viewer for the data from our Apollonian web-service – this time using HTML5 via Three.js. In this post, we’ll extend the code to listen for keyboard events and manipulate the model according to user-input, as well as enabling feature detection of WebGL (allowing the same implementation to call into the canvas rendering code when WebGL isn’t present).

We’re introducing keyboard-based commands to enable zoom, rotate (meaning spin, although not continuously) and the change of levels:

+
- Zoom in
-
- Zoom out
, or %
- Rotate left
. or /
- Rotate right
& or a
- Rotate up
( or z
- Rotate down
0 – 9
- Change level (0 == 10)

You’ll see some strange choices for some of the rotate keys, above: on browsers other than Chrome, the keypress event gets called with symbols representing the arrow keys (left: ‘%’ right: ‘/’ up: ‘&’ down: ‘(‘). But because of an issue with Chrome that means its doesn’t receive the keypress event for arrow keys, we’re also checking for other characters, too (left: ‘,’ right ‘.’ up: ‘a’ down: ‘z”).

For changing levels: we might also have confirmed the change of level with the user via a message-box, but in the end I felt it wasn’t too disruptive to just do it.

Before we see the code, here’s a quick demo video and a link to the page:

[Errata: I mistakenly said “level 5” in the below video instead of “level 10”, and I also should have reinforced that the view was really using WebGL rather than basic HTML5 Canvas.]

Here’s the updated HTML code:

<!doctype html>
<html>
  <head>
    <title>Apollonian Viewer</title>
  </head>
  <body>
    <script
      type="text/javascript"
      src="http://code.jquery.com/jquery-1.7.1.js">
    </script>
    <script type="text/javascript" src="js/xdr.js"></script>
    <script type="text/javascript" src="js/Three.js"></script>
    <script type="text/javascript">
      var animateWithWebGL;
      var container, root = null;
      var camera, scene, renderer;
      var zoomScale, xRotation, yRotation;
      var changingLevel = false;
 
      init();
      animate();
 
      // Feature test for WebGL
 
      function hasWebGL()
      {
        try
        {
          var canvas = document.createElement('canvas');
          var ret =
            !!(window.WebGLRenderingContext &&
                (canvas.getContext('webgl') ||
                 canvas.getContext('experimental-webgl'))
              );
          return ret;
        }
        catch(e)
        {
          return false;
        };
      }
 
      function init()
      {
        zoomScale = 1;
        xRotation = 0;
        yRotation = 0;
        var rotInc = 0.05;
 
        animateWithWebGL = hasWebGL();
 
        container = document.createElement('div');
        container.style.background = "#000000";
        document.body.appendChild(container);
 
        // Set the scene size (slightly smaller than the
        // inner screen size, to avoid scrollbars)
 
        var WIDTH = window.innerWidth - 25,
            HEIGHT = window.innerHeight - 25;
 
        // Set some camera attributes
 
        var VIEW_ANGLE = 45,
            ASPECT = WIDTH / HEIGHT,
            NEAR = 0.1,
            FAR = 200;
 
        // Create the renderer, camera and scene
 
        renderer =
          animateWithWebGL ?
            new THREE.WebGLRenderer() :
            new THREE.CanvasRenderer();
        camera =
          new THREE.PerspectiveCamera(
            VIEW_ANGLE,
            ASPECT,
            NEAR,
            FAR
          );
        scene = new THREE.Scene();
 
        // The camera starts at 0,0,0 so pull it back
 
        camera.position.z = 4;
 
        // Create a point light
 
        var pointLight = new THREE.PointLight(0xFFFFFF);
 
        // Set its position
 
        pointLight.position.x = 2;
        pointLight.position.y = 10;
        pointLight.position.z = 26;
 
        // Add to the scene
 
        scene.add(pointLight);
 
        // And the camera
 
        scene.add(camera);
 
        // Start the renderer
 
        renderer.setSize(WIDTH, HEIGHT);
 
        // Attach the renderer-supplied DOM element
 
        container.appendChild(renderer.domElement);
 
        $(document).keypress(
          function (event)
          {
            // On Firefox we need event.which rather than keyCode
 
            var code = event.keyCode ? event.keyCode : event.which;
            switch (String.fromCharCode(code))
            {
              case '-': // Zoom out
                zoomScale -= 0.1;
                break;
              case '+': // Zoom in
                zoomScale += 0.1;
                break;
              case '=': // Reset view
                zoomScale = 1;
                root.rotation.x = 0;
                root.rotation.y = 0;
                break;
              case '\'': // Rotate right
              case '.':
                yRotation = rotInc;
                break;
              case '%': // Rotate left
              case ',':
                yRotation = -rotInc;
                break;
              case '&': // Rotate up
              case 'a':
                xRotation = -rotInc;
                break;
              case '(': // Rotate down
              case 'z':
                xRotation = rotInc;
                break;
              case '0':
              case '1':
              case '2':
              case '3':
              case '4':
              case '5':
              case '6':
              case '7':
              case '8':
              case '9':
                var level = code - '0'.charCodeAt();
                populateWithLevel(level == 0 ? 10 : level);
                break;
            }
          }
        );
        populateWithLevel(10);        
      }
 
      function populateWithLevel(level)
      {
        // Make sure we're not already changing levels
 
        if (changingLevel)
          return;
 
        changingLevel = true;
 
        // If we already have a level loaded, remove the
        // root from the scene and delete it
 
        if (root != null)
        {
          scene.remove(root);
          delete root;
        }
 
        // Make sure CORS is enabled
 
        jQuery.support.cors = true;
 
        // Call our web-service with the appropriate level
 
        $.ajax(
          {
            url:
              'http://apollonian.cloudapp.net/api/spheres/1/' +
              level,
            crossDomain: true,
            data: {},
            dataType: "json",
            error: function(err)
            {
              alert(err.statusText);
            },
            success: function(data)
            {
              // Create the spheres' materials
 
              var materials =
                [
                  new THREE.MeshLambertMaterial({ color: 0x000000 }),
                  new THREE.MeshLambertMaterial({ color: 0xFF0000 }),
                  new THREE.MeshLambertMaterial({ color: 0xFFFF00 }),
                  new THREE.MeshLambertMaterial({ color: 0x00FF00 }),
                  new THREE.MeshLambertMaterial({ color: 0x00FFFF }),
                  new THREE.MeshLambertMaterial({ color: 0x0000FF }),
                  new THREE.MeshLambertMaterial({ color: 0xFF00FF }),
                  new THREE.MeshLambertMaterial({ color: 0xA9A9A9 }),
                  new THREE.MeshLambertMaterial({ color: 0x808080 }),
                  new THREE.MeshLambertMaterial({ color: 0xD3D3D3 }),
                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF }),
                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF })
                ];
 
              // Set up the sphere vars
 
              var rootRad = 0.01, segs = 9, rings = 9;
 
              // Create our root object
 
              var sphereGeom =
                new THREE.SphereGeometry(rootRad, segs, rings);
 
              // Create the mesh from the geometry
 
              root =
                 new THREE.Mesh(sphereGeom, materials[0]);
 
              scene.add(root);
 
              // Process each sphere, adding it to the scene
 
              $.each(
                data,
                function (i, item)
                {
                  // Get shortcuts to our JSON data
 
                  var x = item.X, y = item.Y, z = item.Z,
                      rad = item.R, level = item.L;
 
                  var length = Math.sqrt(x * x + y * y + z * z);
 
                  // Only add spheres near the edge of the outer one
                  // (and only the front half if not animating)
 
                  if (
                    length + rad > 0.99 &&
                      (animateWithWebGL || z > 0)
                  )
                  {
                    // Create the mesh from the geometry
 
                    var sphere =
                      new THREE.Mesh(sphereGeom, materials[level]);
 
                    sphere.position.x = x;
                    sphere.position.y = y;
                    sphere.position.z = z;
                    var scaledRad = rad / rootRad;
                    sphere.scale.x = scaledRad;
                    sphere.scale.y = scaledRad;
                    sphere.scale.z = scaledRad;
 
                    root.add(sphere);
                  }
                }
              );
 
              // Draw!
 
              renderer.render(scene, camera);
 
              changingLevel = false;
            }
          }
        );
      }
 
      function animate()
      {
        requestAnimationFrame(animate);
 
        render();
      }
 
      function render()
      {
        if (root != null)
        {
          // Apply rotations around X and/or Y
 
          if (xRotation != 0)
          {
            root.rotation.x += xRotation;
            xRotation = 0;
          }
          if (yRotation != 0)
          {
            root.rotation.y += yRotation;
            yRotation = 0;
          }
        }
 
        // Apply the zoom
 
        camera.position.z = 4 / zoomScale;
 
        camera.lookAt(scene.position);
 
        renderer.render(scene, camera);
      }      
    </script>
  </body>
</html>

A few things to note:

The hasWebGL() function returns true if the browser supports the use of WebGL. We use the result of this function to determine whether to create and use a WebGL or a Canvas renderer.
We use jQuery to assign a handler to the document’s keypress() event.
- We need to check event.keyCode in most browsers but event.which on Firefox.
When changing levels we set a flag: if we kick off multiple level changes – very easy to do with the longer-loading levels – then we run the risk of stomping on our geometry list… safest to protect it with a rudimentary critical section.

That’s about all there is to it. The application itself works surprisingly well on WebGL-enabled browsers. If I use it for long enough, I can usually crash the page in Chrome (as you’ll see from the demo video), but in Firefox the page is rock solid (which leads me to be believe it’s a browser issue rather than a problem with the code).

Since publishing the last post (and this one was already pretty well baked, too), Jeff Geer has pointed me at the trackball capability in Three.js, which allows you to more simply create a user-interface to control 3D orientation of your model. In the next post we’ll take a look at integrating that – probably alongside some of the existing keypress-enabled level changing – to see what that provides.

Posted at 09:11 AM in AJAX, ASP.NET, HTML, JSON, Mobile, REST, SaaS, Web/Tech | Permalink | Comments (1)

May 16, 2012

Creating a 3D viewer for our Apollonian service using HTML5 – Part 1

After looking at how to bring data from our Apollonian web-service into Unity3D, Android and iOS over the last few weeks, it seemed natural to extend this series to cover HTML. A big thanks to Jeff Geer for suggesting Three.js, which is the HTML5-based framework I ended up adopting for this project.

I like Three.js for a number of reasons: just as jQuery (another library I’ve used in this project, to good effect) attempts to abstract away the messiness inherent in supporting multiple browsers, Three.js does the same for the world of browser-resident 3D.

The other main reason I like Three.js is that it’s open source. I know, I know – I work for a proprietary software vendor… :-) But unless there’s a trusted, proprietary vendor providing platform technology, I really do prefer to have the peace of mind of having access to the framework’s source. And for my adjacent, experimental projects, I tend not to want to spend money on fully-fledged toolkits/frameworks, either, which means I gravitate to open source tools, or at least those that have versions available for free.

In terms of getting started with Three.js, the online tutorial deals with creating a simple scene with a sphere in it, so that was just perfect. :-)

The coding was reasonably straightforward: the main issue – on all fronts – was to enable cross-domain scripting of our web-service. On the server side, we had done so using a crossdomain.xml file when we first needed to call it from Unity, but we needed to go one step further, this time: we had to modify the Web.config file of our ASP.NET project and redeploy the project to Windows Azure. Not a big deal, but it needed doing.

That addressed the issue of calling our web-service from most browsers, but then some additional work was needed for IE9. While it worked well enough from a local HTML file, we had to implement a special ajaxTransport to make it work (another one was suggested, in this bug report against jQuery, but even resolving this obscure issue, I couldn’t get that one to work.. so I took the previously suggested .js file, minified it, and posted it as xdr.js to the blog’s supporting folder).

Here’s the HTML code for our basic viewer application:

<!doctype html>
<html>
  <head>
    <title>Apollonian Viewer</title>
  </head>
  <body>
    <script
      type="text/javascript"
      src="http://code.jquery.com/jquery-1.7.1.js">
    </script>
    <script type="text/javascript" src="js/xdr.js"></script>
    <script type="text/javascript" src="js/Three.js"></script>
    <script type="text/javascript">
      var animateWithWebGL = false;
      var container, root = null;
      var camera, scene, renderer;
 
      init();
      animate();
 
      function init()
      {
        container = document.createElement('div');
        container.style.background = "#000000";
        document.body.appendChild(container);
 
        // Set the scene size (slightly smaller than the
        // inner screen size, to avoid scrollbars)
 
        var WIDTH = window.innerWidth - 25,
            HEIGHT = window.innerHeight - 25;
 
        // Set some camera attributes
 
        var VIEW_ANGLE = 45,
            ASPECT = WIDTH / HEIGHT,
            NEAR = 0.1,
            FAR = 200;
 
        // Create the renderer, camera and scene
 
        renderer =
          animateWithWebGL ?
            new THREE.WebGLRenderer() :
            new THREE.CanvasRenderer();
        camera =
          new THREE.PerspectiveCamera(
            VIEW_ANGLE,
            ASPECT,
            NEAR,
            FAR
          );
        scene = new THREE.Scene();
 
        // The camera starts at 0,0,0 so pull it back
 
        camera.position.z = 4;
 
        // Create a point light
 
        var pointLight = new THREE.PointLight(0xFFFFFF);
 
        // Set its position
 
        pointLight.position.x = 2;
        pointLight.position.y = 10;
        pointLight.position.z = 26;
 
        // Add to the scene
 
        scene.add(pointLight);
 
        // And the camera
 
        scene.add(camera);
 
        // Start the renderer
 
        renderer.setSize(WIDTH, HEIGHT);
 
        // Attach the renderer-supplied DOM element
 
        container.appendChild(renderer.domElement);
 
        jQuery.support.cors = true;
 
        // We'll just load level 8 - good detail, but also quick
 
        $.ajax(
          {
            url: 'http://apollonian.cloudapp.net/api/spheres/1/8',
            crossDomain: true,
            data: {},
            dataType: "json",
            error: function(err)
            {
              alert(err.statusText);
            },
            success: function(data)
            {
              // Create the spheres' materials
 
              var materials =
                [
                  new THREE.MeshLambertMaterial({ color: 0x000000 }),
                  new THREE.MeshLambertMaterial({ color: 0xFF0000 }),
                  new THREE.MeshLambertMaterial({ color: 0xFFFF00 }),
                  new THREE.MeshLambertMaterial({ color: 0x00FF00 }),
                  new THREE.MeshLambertMaterial({ color: 0x00FFFF }),
                  new THREE.MeshLambertMaterial({ color: 0x0000FF }),
                  new THREE.MeshLambertMaterial({ color: 0xFF00FF }),
                  new THREE.MeshLambertMaterial({ color: 0xA9A9A9 }),
                  new THREE.MeshLambertMaterial({ color: 0x808080 }),
                  new THREE.MeshLambertMaterial({ color: 0xD3D3D3 }),
                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF }),
                  new THREE.MeshLambertMaterial({ color: 0xFFFFFF })
                ];
 
              // Set up the sphere vars
 
              var rootRad = 0.01, segs = 9, rings = 9;
 
              // Create our root object
 
              var sphereGeom =
                new THREE.SphereGeometry(rootRad, segs, rings);
 
              // Create the mesh from the geometry
 
              root =
                 new THREE.Mesh(sphereGeom, materials[0]);
 
              scene.add(root);
 
              // Process each sphere, adding it to the scene
 
              $.each(
                data,
                function (i, item)
                {
                  // Get shortcuts to our JSON data
 
                  var x = item.X, y = item.Y, z = item.Z,
                      rad = item.R, level = item.L;
 
                  var length = Math.sqrt(x * x + y * y + z * z);
 
                  // Only add spheres near the edge of the outer one
                  // (and only the front half if not animating)
 
                  if (
                    length + rad > 0.99 &&
                      (animateWithWebGL || z > 0)
                  )
                  {
                    // Create the mesh from the geometry
 
                    var sphere =
                      new THREE.Mesh(sphereGeom, materials[level]);
 
                    sphere.position.x = x;
                    sphere.position.y = y;
                    sphere.position.z = z;
                    var scaledRad = rad / rootRad;
                    sphere.scale.x = scaledRad;
                    sphere.scale.y = scaledRad;
                    sphere.scale.z = scaledRad;
 
                    root.add(sphere);
                  }
                }
              );
 
              // Draw!
 
              renderer.render(scene, camera);
            }
          }
        );
      }
 
      function animate()
      {
        // Animation really only looks good with WebGL rendering
 
        if (animateWithWebGL)
        { 
          requestAnimationFrame(animate);
 
          render();
        }
      }
 
      function render()
      {
        var timer = Date.now() * 0.0005;
 
        camera.position.x = Math.cos(timer) * 4;
        camera.position.z = Math.sin(timer) * 4;
        camera.lookAt(scene.position);
 
        renderer.render(scene, camera);
      }      
    </script>
  </body>
</html>

If you want to give it a try, here’s the “canvas” version of the viewer, which I’ve chosen not to have animated. If you’re using Google Chrome or Mozilla Firefox, you may want to try the WebGL version of the viewer, which has some hard-coded rotation. Apparently this can work in other browsers, too, but I haven’t managed to see that, myself.

The only difference between the two HTML files is the value of the animateWithWebGL flag, which obviously causes a slightly different code-path to be followed in a few places.

To see them both in action on my system, here’s a quick video:

To compare how the canvas-based viewer looks on different OS/browser combinations, here are those I’ve tested. The results are mostly pretty decent, although Safari on OS X had something very strange going on (whereas it worked fine in the iOS emulator on the same system).

In the next post, we’re going to make a few enhancements to this HTML5-based viewer: we’ll add support for keyboard events – to enable zoom, rotate and changing levels, in particular – as well as implementing feature detection to use WebGL automatically when available or to default to the use of the canvas renderer, otherwise.

Posted at 06:01 AM in AJAX, ASP.NET, HTML, JSON, Mobile, REST, SaaS, Web/Tech | Permalink | Comments (5)

Through the Interface

Kean Walmsley

June 2013

Post Index

Reverse Index

Autodesk Blogs