Posted by
james – January 23, 2010
A few changes since my last post.
All of the activity is now on SVG Web Project
I’ve updated the Flex and Flash components to work similar to the old SVGViewer components.
They also include bug work around for cacheAsBitmap.
1
2
3
4
5
6
7
8
9
10
| var svgViewerFlash:SVGViewerFlash = new SVGViewerFlash();
svgViewerFlash.source = '<svg...</svg>';
svgViewerFlash.source = XML('<svg...</svg>');
svgViewerFlash.source = "assets/somefile.svg";
//Encodes images as an inline base 64 image node
svgViewerFlash.source = "http://example.com/image.jpg";
svgViewerFlash.source = Bitmap;
svgViewerFlash.source = BitmapData; |
Currently they are only available on a branch:
http://code.google.com/p/svgweb/source/browse/branches/james-branch/src/
Posted by
james – June 2, 2009
Hello All,
I apologize for taking so long to give you an update on the status of the SVG library. I’ve been busy working on a last minute project 2,500 miles away from home and hearth for the previous three months.
The new library provides a major code cleanup and a slew of new features. Rick Masters and Brad Neuberg have made some huge leaps since I dropped off the face of the earth. Their work can be found in the sgweb Google project.
In a few weeks I will have time to start contributing to the project again. My main focus will be on providing a clean Flex and Flash interface to the new library.
Future updates will be made to the sgweb Google project.
Posted by
james – February 9, 2009
A few people have been asking about the status of the SVG Viewer project so I thought I would write a brief update.
I am in the process of merging my project with two sister projects by Richard R. Masters and Brad Neuberg. The new library will supply three component types: Flex, Flash, and Web.
The Web component will be a Flash and JavaScript application that integrates directly into the browser’s DOM. It will allow browsers without SVG support, like IE, to render SVG files. Eventually, we would like the Web component to support an SVG feature set similar to Firefox.
There have been a huge number of bug fixes, optimizations, and features added to the new library. Once the merge is complete I will make the new code base available. It should be no later then the end of February.
Some features on the horizon (possibly far horizon):
- SMIL Animation Support
- SVG Embedded Fonts
- JavaScript Scripting
- Filter Effects
- Text Along A Path
- Internal CSS Support
-
- Cursor Support
Posted by
james – January 24, 2009
This movie requires Flash Player 9
The engine uses an SVG file to generate 3D objects on the fly.
I am using Papervision3D and APE for 3D and physics.
The environment builder looks for three layers/groups in the root of the SVG. Each of the children of the layers is used to render different types of objects.
- The ‘ground’ layer is used to render the ground.
- The ‘items’ layer is used to render two dimensional objects on a plane.
- The ‘items3D’ layer is used to render three dimensional objects on two plane rotated 90 degrees from each other.
Items are rotated 90 degrees from the ground along their bottom edge.
This is the SVG used in the above example:
Posted by
james – January 1, 2009
[Subversion Repo]
I have created a code repository for the ThreeDee Papervision3D extension.
svn co https://iciifs.com/svn/ThreeDee
Graphics3D now supports profile rotation around the z-axis.
Simply draw a curve using the normal Graphics commands.
Then call endFillSpin(degrees:Number = 360, steps:uint = 20) to create on object based on the rotated curve.
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| var light:PointLight3D = new PointLight3D();
light.x = 100;
light.y = 100;
light.z = 2000;
this.scene.addChild(light);
var redColor:FlatShadeMaterial = new FlatShadeMaterial(light, 0xff0000, 0xfdfdfd);
redColor.doubleSided = true;
redColor.fillAlpha = 0.5;
var greyColor:FlatShadeMaterial = new FlatShadeMaterial(light, 0xdddddd, 0xfdfdfd);
greyColor.doubleSided = true;
greyColor.fillAlpha = 0.5;
var greenColor:FlatShadeMaterial = new FlatShadeMaterial(light, 0x28913f, 0xfdfdfd);
greenColor.doubleSided = true;
greenColor.fillAlpha = 0.5;
var surface3D:Surface3D = new Surface3D();
//Draw profile to be rotated around z-axis
surface3D.graphics3D.beginFill(greyColor);
surface3D.graphics3D.moveTo(20, 10, -197);
surface3D.graphics3D.lineTo(20, 10, -200);
surface3D.graphics3D.lineTo(10, 20, -200);
surface3D.graphics3D.lineTo(20, 10, -150);
surface3D.graphics3D.lineTo(20, 20, -100);
surface3D.graphics3D.lineTo(4, 0, -70);
surface3D.graphics3D.lineTo(4, 0, -0);
surface3D.graphics3D.lineTo(30, 20, 10);
//Rotate profile
surface3D.graphics3D.endFillSpin();
surface3D.z = -(-200 + 10) / 2;
this.holder.addChild(surface3D);
surface3D = Surface3D(surface3D.clone());
surface3D.material = redColor;
surface3D.x = 80;
this.holder.addChild(surface3D);
surface3D = Surface3D(surface3D.clone());
surface3D.material = greenColor;
surface3D.x = -80;
this.holder.addChild(surface3D); |
Posted by
james – December 31, 2008
[View Source Code]
I have implemented surface extrusion along the z-axis for Graphics3D.
Graphics3D.depth defines the size and direction of the extrusion.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var yellowColor:FlatShadeMaterial = new FlatShadeMaterial(light, 0xfffc00);
yellowColor.doubleSided = true;
surface3D.graphics3D.depth = 10; //Set depth of surface extrusion
surface3D.z = -surface3D.graphics3D.depth / 2;
surface3D.graphics3D.linesPerCurve = 6; //Set curve quality
surface3D.graphics3D.beginFill(yellowColor);
//Main body of smiley face
surface3D.graphics3D.drawCircle(0, 0, 0, 50);
//Now we draw inside the main body to create holes
//Draw eyes
surface3D.graphics3D.drawCircle(-18, 18, 5, 10);
surface3D.graphics3D.drawCircle(18, 18, 5, 10);
//Draw mouth
surface3D.graphics3D.drawRect(-20, -25, -5, 40, 8);
surface3D.graphics3D.endFill(); |
Posted by
james – December 30, 2008
[View Source Code]
Delaunay triangulation breaks a shape consisting of a set of points into triangles. We can then use those triangles to create a mesh in Papervision3D.
Hole detection is implemented by creating polygons that define each set of edges. Each triangle’s mid point is then check to see if it falls inside or outside of a shape. If it is in a shape, we also check that it is not in a hole represented by a sub polygon.
Graphics3D currently supports:
- beginFill
- moveTo
- lineTo
- curveTo
- drawRect
- endFill
The curveTo command breaks up the curve into a number of line segments defined by Graphics3D.linesPerCurve.
Example code for drawing the two blue bars above:
1
2
3
4
5
6
7
8
9
| var blueColor:FlatShadeMaterial = new FlatShadeMaterial(light, 0x0000ff);
blueColor.doubleSided = true;
var textHolder:Surface3D = new Surface3D();
textHolder.graphics3D.beginFill(blueColor);
textHolder.graphics3D.drawRect(0,35, 0, len, 4);
textHolder.graphics3D.drawRect(0,25, 0, len, 4);
textHolder.graphics3D.endFill(); |
This is most definitely a work in progress. Hole detection, when it works, is slow. Triangles outside of the draw area are not always caught. Sometimes it just doesn’t work.
Posted by
james – December 28, 2008
[View Source Code]
Papervisoin3D’s 3D text is nice, but the font choices are limited unless you want to take the time to implement your own Font3D files. I’ve been working with font parsing for the last month for another project and thought why not create a font parser for Papervision3D?
The TrueType font parsing library came from Alessandro Crugnola. It is part of an ActionScript port of the Java applications typecast. I’m in the process of writing a much leaner font parser that will have support for both TrueType and OpenType fonts.
I did make a small change to the Papervision3D library. Some of the font files do not have a complete character set. This can cause VectorLetter3D to choke.
In org.papervision3d.typography.VectorLetter3D, around line 40 I added:
40
41
42
| if (_font.motifs.hasOwnProperty(_char)) {
createVertices(_font.motifs[_char]);
} |
To load a TrueType font simply pass the font data as a ByteArray to the static class Font3DLoader and you get a Font3D object back.
1
| var font3D:Font3D = Font3DLoader.load(trueTypeByteArray); |
If the font file contains more than one font, the first font is loaded.
Posted by
james – December 22, 2008
There have been a number of requests to post the SvgViewer project on Google code.
So, here it is: http://code.google.com/p/svg-viewer/
My goal is to keep the repo at Google as stable as possible. Day to day changes will still be made in the old repository.
I have started to merge some of the changes Richard R. Masters has made in his sgweb project back into the source tree. Richard is creating a Flash SVG browser component with JavaScript support. He has made a slew of commits over the last two months. It will take me a while to work through all of his changes. I’m looking forward to seeing how his project evolves!
Hope everyone is having a good Christmas!
Posted by
james – December 15, 2008
Update: Text in Flash 10 seems to be disappearing. Will need to investigate…
Update #2: Text with individual character placement was not being handled. This was causing it to be pushed off screen. Text should now display properly. I don’t know why it worked in Flash 9.
I was curious how hard it would be to render an existing PDF file inside of Flash. Turns out it’s a pain in the ass.
I’ve been working on this off and on over the last couple of months. Best results are achieved with older version PDF files. It is no where near being close to rendering the newest PDF feature set.
Some Features:
- The pages load individually. So, the first pages can be displayed while the remaining pages are still loading.
- Unless text is rotated, the viewer tries to display text in a TextField.
