Is it possible to render svg from pixie composition?
I'm working on a project where I'll draw generative graphics and then I'll have to have them in some vector format because this will go to print.
I would be happy to get svg or some other vector format.
The reason I'm doing this with pixie is that I will later use that compositions as animations on a company website.
Well, you can draw and render SVG data using the pixi-svg-graphics module, but I am pretty sure that you can't export any vector format. That's because pixi.js uses rasterized textures internally, not vector data.
That's not gonna happen pixi is raster based, even above plugin as noted above will only draw vectors on top of raster images.
If you want I can redraw any raster images into vector images, it's not that much work :P
Related
how can I save a dom as svg file using html2canvas ?
For downlading as png , I've done something like below :
html2canvas(document.querySelector('#demo')).then(function(canvas) {
saveAs(canvas.toDataURL(), 'image.png');
});
How can I achieve similar result to save it as svg file ?
You don't.
The reason you can export to png/jpg/etc is that the canvas is a pixel graphic presentation layer, so for convenience it knows how to generate the browser-supported image types that use embedded bitmaps.
If you want vector graphics instead, then you'll need to actually draw vectors, and that means not relying on the canvas APIs. You either roll your own vector drawing instruction set (directly generating SVG yourself, or rasterizing objects to the canvas purely as presentation layer), which I would recommend against, or you use one of several vector graphics packages already out there like Paper.js, Three.js, Rafael, and so forth.
I'm building a game in HTML5. I have hundreds of images that look similar to this:
And at certain points in the game I want to draw an outline around them. Like this:
I want to do different tracing colors at different times and don't want to end up with [number of sprites] * [number of colors] of additional images for memory and bandwidth reasons so I'm looking at vector drawings.
What I need to come to a solution on are really two separate things:
Calculate a vector path for each frame in a spritesheet. This can be either dynamically or ahead of time and stored.
Draw the vector path
The engine I'm using for the game is ImpactJS. It doesn't have any support for vector operations. The author of the game engine I'm using did his own vector drawing manually by exporting the vectors from Illustrator for a particular image, then using an online converter tool to change them to HTML5 syntax. This isn't the best method for hundreds of images so I thought I'd see what information others of you have.
I would like to still draw the images using ImpactJS since this game is already pretty far along, and just do a second-pass drawing of the outline of the image when necessary.
Thank you for any help!
I'm actually trying to include a .jpg image into my 3D scene. All solutions i have found consisted in apply those images on meshes as texture : but then the scene does not look like well. Indeed, we can see the mesh border whether it be a plane or sphere... I just want to see the image. Does exist it another solution ?
On my application, i want to rotate an airplane around the earth, and the problem is about including this airplane.
Thanks for your help :)
Perhaps the class THREE.Sprite will accomplish the effect you want. THREE.Sprite can display an image, and can use either screen coordinates (e.g. canvas coordinates) or it can be part of your 3D scene, but a sprite image is always facing the camera. If you want the image to rotate, you do need to use it as a texture on a mesh. Whatever you decide to do in the end, I've posted a bunch of tutorial-style examples at http://stemkoski.github.io/Three.js/ that may help. Good luck!
Using EaselJS (HTML Canvas framework, from CreateJS)
I have a tileset, and I need to draw a tilemap.
So I assigned my tileset bitmap to each tile.
But of course, each tile has to draw only a part of the tileset.
I figured out how to draw a part of a Bitmap (Bitmap.sourceRect), but it means I have to clone the tileset for each tile !
Coming from a Flash AS3 background, I chose this library because it is supposed to be similar, however it seems to be different for image handling (where this problem is adressed by using many Bitmap with one BitmapData).
Thanks.
Look into using a SpriteSheet and BitmapAnimation instead. There are examples in GitHub that can help.
https://github.com/CreateJS/EaselJS/blob/master/examples/SpriteSheet.html
http://www.createjs.com/#!/EaselJS/demos/spritesheet
Can anybody help me with three.js?
I need to draw background, something, like a THREE.Sprite, but it neet to be UNDER any 3d object, that will draw later. I have a camera, that can be move only on Z axis.
I tryed to use:
cube mapping shader - PROBLEM: artefacts with shadow planes, it's unstable draw
THREE.Sprite that dublicate camera moving - PROBLEM: artefacts with shadow plane - it have a edge highlighting OR drawing only other spirtes without objects.
HTML DOM Background - PROBLEM: big and ugly aliasing in models.
What can I try more? Thanks!
You could maybe try drawing in several passes, i.e. making a first render of the background scene to a buffer, and then a second one over the first "buffer". Maybe using the buffer as background (painting it in 2D with an orthographic projection, and disabling depth buffer writes in that pass).
I haven't tried it myself with three.js, but that's how I'd do that with "traditional" OpenGL.
If you want a "3d" background i.e. something that will follow the rotation of your camera, but not react to the movement (be infinitely far), then the only way to do it is with a cubemap.
The other solution is a environment dome - a fully 3d object.
If you want a static background, then you should be able todo just a html background, i'm not sure why this would fail and what 'aliasing in models' you are talking about.