3 comments

• 

  Mike Broadbear

  2 年 ago

  This is an interesting post. When I tried to research JavaScript 3D graphics capeabilites, all I found were some attempts to draw using div elements.
  
  I will have to read through your post again (since it has a too much information for a quick scan!), but do you have any links to simple examples? I clicked on the 'here is a copy' link and found something that I did not know how to use. :)
  
  How is the performance? (the 3D using div elements was unusable beyond a non-filled cube)
  
  How is the cross browser support?
  
  Thanks for your blog post about OperLazlo on my blog. If you get a chance, take a look at my survey of Ajax/Web Application technologies. There are several JavaScript libraries listed, and I would welcome informed input.
  
  ...Mike
  http://bear-webtech.blogspot.com/
  reply
• 

  James Urquhart

  2 年 ago

  Hey mike,
  
  Performance is interesting. Obviously it starts to choke when you have a lot of objects in the scene. I actually bumped into this early on, and changed the code so that it only redraws when an input event has been dispatched. Still, even then it can get quite chuggy. I'd imagine if i re-did it all in Flash it would be *much* faster.
  
  Cross browser support isn't bad, as every browser which supports the WhatWG canvas supports it well (with the exception of issues with Apple's Safari). Sadly Internet Explorer is a bit of a lost cause at the moment, though i have seen a few promising workarounds which use Flash as a replacement (which sadly defeats the whole point).
  
  Onto the mini howto...
  
  Both versions of the JavaScript draw tool i posted follow the same control scheme - you basically select objects in the canvas (which has a dashed border to let you see where it is) and drag them about.
  
  If you want to edit the points on an object, you select it and then click on the "Point Mode" (or "PM") button. You can then move the points around, etc. You can then re-enter the normal mode by pressing the "Object Mode" (or "OM") button.
  
  If you want to make a new object, there are a few links in the first version of the JSDT to create things such as line's, which work on a click & drag principle. The latter version of the JSDT has none of these functions (yet), except for the "TEST" button which adds a square polygon in the top left hand corner.
  
  Objects in both versions can be selected and dragged using the mouse. Multi-selection works by holding SHIFT down when selecting (though this doesn't work in all browsers since the key doesn't seem to be exposed).
  
  Objects in the latter version can also be rotated an scaled, using the "ROT" and "SCL" buttons. For the rotate, select your object and then drag to the left or right. For the scale, select your object then drag the little blue box which appears. Press the arrow button to go back into selection mode again.
  
  Another feature is the ability to group objects. The best implementation of this is in the latter version. To group objects, select them and press the "Group Objects" (or "GRP") button. To un-group object's, just click on the "Destroy Object" (or "DEL") button.
  Finally, when you have grouped objects, you can enter the group by double clicking on it. This will cause all interaction (including the addition of objects) to occur within the objects list of the group, rather than the global objects list. To go back to the main object list, just double click on an empty space. You can pretty much create an infinite hierarchy of groups-within-groups by exploiting this feature.
  
  Thanks for the feedback.
  reply
• 

  Michel Hegeraat

  2 年 ago

  I'm trying to show a layer2 map of connected devices.
  
  I figured out a way to do this creating a div for each line and device basically allowing me to update these individually using a ajax poll of a page that can reports any changes.
  
  I found that when you have many div's it seems to be more and more time consuming to access the div. e.g. if we have 10 device then moving a device while redrawing the lines takes half a second. If we have 200 devices then moving a device while redrawing the same 2 lines takes 10 seconds.
  
  I guess this shows that the browser has to search the div in the current document. I already started using an array to hold the reference to a div but this doesn't change anything. It' is like if the browser has to sequentially go through the source to find the right div.
  
  I guess I need something like SVG to get the performance right.
  
  Would there be any performance gain in using an object oriented style of javascript? I guess not as there is no way to associate the contents of a dom object with the property of a line or device object.
  
  I wonder what the canvas approach would add and how easy or difficult it would be to trap events like drag drop and click.
  
  Is line drawing faster when no div's are used?
  
  Would it be possible to see you source? The files in the example are not very readable and I guess I like source especially when there comments hinting me what each part is doing ;-)
  
  If you are interested is my sources feel free.
  
  Cheers,
  
  Michel
  reply