Topic: DmoDrawing == JS && (SVG || VML)

I've been lurking around this forum for a little bit and I think its a great place to pick up some new tricks. I thought I'd share some of the things I've been working on lately to return the favor.

Dmo Drawing is basically a javascript object that offers a common framework for dealing with both SVG and VML elements, depending on which browser is viewing it. The solution is very similar to how most ajax libraries use either XMLHttpRequest or the ActiveX equivilant. Its still a work in progress but I wanted to get some community feedback to make sure I'm heading in the right direction.

This object isn't meant to compete with the Canvas element even though some usage scenarios might overlap. Hopefully I dont have to explain the differences between vector and rasterized graphics.

I've only got a handful of demos cleaned up for public consumption but I think its a pretty good start for the first release. I have a few more on the subject of animation and navigation that I'll be putting up soon.

Basic Vector Primitives
http://dmowebstudios.com/drawing.demos.primitives.php

Other demos
Simple Drawings
Complex Drawings / Scaling
Sierpinski Carpet
Mandelbrot Explorer

Let me know what you think, good or bad!

hi,

neat - seems like it should integrate canvas and use it if available too - then your rendering framework can use the best available display engine for the client. I started working with VML some time ago and was working on a 3D engine before I became frustrated with browser differences - it was before canvas was available on both FF and IE.

I would be interested in seeing the two combined for a fun, cross-platform triangle rendering 3D engine. As it stands, it could handle several thousand polygons for slow, single-frame renderings, but can animate with a couple hundred. All you need is a decent triangle renderer that can at least do wire-frame outlines and at best fill with a solid color and you've got everything you need for a 3D renderer - it's just a bunch of math on top of that including lighting/shading. Texture mapping is a different story and requires a level of performance that JS can't handle for animation, but could certainly slow-render for single frames.

I also built in a fall-back compatibility mode line renderer that plotted "."'s as ASCII chars using CSS to position them along the triangle edges for when VML is not available - I thought it made an interesting option that worked with CSS capable browsers at least to show a wireframe environment - something similar might be fun for your engine as well. I used a fixed number of dots for my lines, but a better approach would be to calculate the distance from P1 to P2, divide by the standard distance between dots, then plot-a-dot every step-size down the length of the line. That way more dots are added as the line lengthens and they don't space out which makes them more difficult to track.

Check it out (renders VML in IE, but only dots in FF): http://www.keenkelly.com/demo/vml6/
(also try vml5/4, etc to see previous versions - VML6 will melt your CPU on FF);

Regards,
- SK

Esskay, thats a pretty slick demo. I noticed it uses paths in order to draw the polys and that is the one shape I couldn't get to work right in both SVG and VML. I might give it another whirl in the future but for now there are enough elements to be useful. I really want to get arcs working and it might take a simple path to do that. Arcs, groups, rotation, skew and gradients are next on my list of features.

It will probably have to stay with just vector shapes for a while. I dont want it to get confused with all the canvas projects out there, and I've got my hands full just with just getting this fleshed out.

Speaking of arcs, the next thing I was hoping to add to my render engine was primitive support for cylinders and spheres. I think computationally it should not be too difficult to calculate the proper aspects of an arc that defines the extremities of a cylinder, but would need to be compatible with triangle rendering/sorting in order to construct scenes with both. If cylinders of this sort were possible, one could construct the torus that I made with dozens of triangles with only a single cylinder per ring segment which would dramatically reduce the amount of 3D computation and improve performance. Tricky stuff though.