My source is far too big so I will only paste the relevant part.
const img = new Image();
img.src = "test.svg";
canvas.drawImage(img, 0, 0, widthIncremented, heightIncremented);
Now this runs inside requestAnimationFrame. What the code does is, make the image bigger and bigger, making it appear to become closer.
In firefox and edge it runs really slow on low end devices. Im wondering, how can we optimize this process? Is it slow since it is converting svg to bitmap everytime? Too many pixels?
Instead of draw a bigger image, you can scale canvas
Related
So I'm creating some animations for a client and I've been playing with two.js because I liked its SVG capabilities. Unfortunately I'm having issues with performance.
I'm plotting 100 circles on the screen. Each circle contains 6 further circles for a total of 700 circles being rendered on load.
The circles react to mouse movements on the x-axis and cascade slowly downwards on the y-axis.
Currently in Chrome its only running at around 32FPS. In Firefox it barely even works!
I've also tried two.js's webgl renderer but while there is a slight performance increase, the elements just don't look as good as SVG.
The source is here: https://github.com/ashmore11/verifyle/tree/develop
path to file: src/coffee/elements/dots
Let me know if there's any more info I can provide.
What you've made is very beautiful!
Hmmm, so there are many factors as to why the performance isn't as stellar as you'd like.
The size of the drawable area matters (i.e: the <svg /> or <canvas /> element). The bigger the area the more pixels to render.
The amount of elements added to the DOM. Yes there are 100 dots, but each dot is comprised of many elements.
Of those elements the amount of changes an element has on any given frame.
Finally, of the elements changing how many operations (i.e: opacity, scale, translation, etc.)
These considerations compound in most computer generated imagery to affect real-time rendering. The goal is basically to reduce the load on any one of those dimensions and see if it's enough to give you the performance you're looking for. You're gonna have to get creative, but there are options. Here are a few things off the top of my head that you can do to try to speed things up:
Reducing the amount of shapes will make it run faster ^^
For something like this Two.Types.canvas might be fastest.
Instead of moving each dot split the translation into 2 or 3 groups and move them based on the container groups. Kind of like a foreground and background parallax.
If you're sticking with Two.Types.svg try animating only a handful of dots on any given frame. This way you're not doing entire traversal of the whole scene every frame and each dot isn't animating every frame.
Pseudo code for this might look like:
// ... some array : dots inferred ... //
var now = Date.now();
var index, length = 12;
two.bind('update', function() {
for (var i = index; i < Math.min(index + 12, dots.length); i++) {
var dot = dots[i];
dot.scale = (Math.sin(now / 100) + 1) / 4 + 0.75;
}
index = (index + 12) % dots.length;
});
If none of these are giving you anything substantial you're looking for than I would highly recommend turning in each Dot into a texture and drawing those textures either directly through canvas2d or with WebGL and a library. Three.js will be able to render hundreds of thousands of these: http://threejs.org/examples/#webgl_particles_sprites You'll have to rethink a lot of how the texture itself is generated and how the opacity varies between the lines and of course it'll look slightly different as you described in your question. Bitmap is different from Vector >_<
Hope this helps!
I'm learning graphical programming via wxPython. I have created a set of tile images with the intention to stitch them all together in a way determined by various functions (already done) to create randomly generated maps for future use (effectively creating a tile-engine).
My current method of painting the map to the frame involves iterating through all 50x50 locations and drawing the 16x16bit png to each location inside the EVT_PAINT handler. This takes a few seconds and is inappropriate for what I intend (which is to have the frame act as a camera which can then pan across a much larger-than-displayed map).
My question is, is it possible to create a 'stitched' together image in the background, and simply draw that image with one line instead of drawing over and over again (which is what I suspect is taking up so much time)? Any other method (that works) is fine as well, I must admit I am not very experienced with programming in general and specifically not very experienced with graphical programming. Ideally I want to be able to draw only visible sections of this image, which is wrappable, so being able slice and re-stitch the 'meta-image' as appropriate would be great.
The EVT_PAINT code looks like this at the moment:
def onpaint(self, event = None):
dc = wx.PaintDC(self)
dc.Clear()
pposX = 0 #ppos = Pixel Position
pposY = 0
tposX = 0 #tpos = tile position, essentially the tile co-ordinates independent of pixel position
tposY = 0
while tposY < self.tTotalY: #loops through all y coordinates
tposX = 0
while tposX < self.tTotalX: #loops through all x coordinates
pposX = tposX*self.tsCurrent
pposY = tposY*self.tsCurrent
tiletype = self.getTileType(tposX,tposY,self.tTotalX,self.tTotalY)
img = wx.Image((self.filepath + '\\' +str(tiletype)), wx.BITMAP_TYPE_ANY).ConvertToBitmap()
dc.DrawBitmap(img,pposX,pposY)
img.Destroy()
tposX += 1
tposY += 1
You could save a lot of time by not reloading the image from the file and converting to a bitmap every time you paint. If you just load them once and then reuse them for each paint you may find that it will be fast enough.
Additional optimization approaches to take depends on the nature of what you are drawing, and how much it may change over time. If it can be divided into a fairly static background, with minor things changing in the foreground then a good thing to do is to precreate a bitmap for the background and then in your paint handler you just draw the background bitmap and then draw the current state of the foreground on top of that. To make the big background you can create an empty bitmap of the right size, create a wx.MemoryDC that will target that bitmap, and then draw your tiles to that DC. When that is done the background bitmap can be saved for use in your paint handler.
Im using a canvas that updates every milisecond; with an empty background my application has a good performance, after adding a background based on a tiled image, it seems to work about the same...I´m thinking on adding some new features to my application and was wondering, is it better to use a new static canvas as a background or to use a background based on a tiled image?
I made a test of drawImage performance back in October that tested images versus a canvas: http://jsperf.com/canvas-vs-image
It seems that drawing from an image is faster in firefox and opera, slower in IE9, and about the same in Chrome.
I would think that a tiled image would be better, especially if it were large, but I wouldn't worry much about which one you pick until it is really time to optimize down the road.
I'm making a 2D sidescrolling space shooter-type game, where I need a background that can be scrolled infintely (it is tiled or wrapped repeatedly). I'd also like to implement parallax scrolling, so perhaps have one lowest background nebula texture that barely moves, a higher one containing far-away stars that barely moves and the highest background containing close stars that moves a lot.
I see from google that I'd have each layer move 50% less than the layer above it, but how do I implement this in libgdx? I have a Camera that can be zoomed in and out, and in the physical 800x480 screen could show anything from 128x128 pixels (a ship) to a huge area of space featuring the textures wrapped multiple times on their edges.
How do I continuosly wrap a smaller texture (say 512x512) as if it were infinitely tiled (for when the camera is zoomed right out), and then how do I layer multiple textures like these, keep them together in a suitable structure (is there one in the libgdx api?) and move them as the player's coords change? I've looked at the javadocs and the examples but can't find anything like this problem, apologies if it's obvious!
Hey I am also making a parrallax background and trying to get it to scroll.
There is a ParallaxTest.java in the repository, it can be found here.
this file is a standalone class, so you will need to incorporate it into your game how you want. and you will need to change the control input since its hooked up to use touch screen/mouse.
this worked for me. as for repeated bg, i havent gotten that far yet, but i think you just need to basic logic as in, ok one screen away from the end, change the first few screens pos to line up at the end.
I have not much more to say regarding to the Parallax Scrolling than PFG already did. There is indeed an example in the repository under the test folder and several explanations around the web. I liked this one.
The matter with the background is really easy to solve. This and other related problems can be approached by using modular algebra. I won't go into the details because once shown is very easy to understand.
Imagine that you want to show a compass in your screen. You have a texture 1024x16 representing the cardinal points. Basically all you have is a strip. Letting aside the considerations about the real orientation and such, you have to render it.
Your viewport is 300x400 for example, and you want 200px of the texture on screen (to make it more interesting). You can render it perfectly with a single region until you reach the position (1024-200) = 824. Once you're in this position clearly there is no more texture. But since it is a compass, it's obvious that once you reach the end of it, it has to start again. So this is the answer. Another texture region will do the trick. The range 825-1023 has to be represented by another region. The second region will have a size of (1024-pos) for every value pos>824 && pos<1024
This code is intended to work as real example of a compass. It's very dirty since it works with relative positions all the time due to the conversion between the range (0-3.6) to (0-1024).
spriteBatch.begin();
if (compassorientation<0)
compassorientation = (float) (3.6 - compassorientation%3.6);
else
compassorientation = (float) (compassorientation % 3.6);
if ( compassorientation < ((float)(1024-200)/1024*3.6)){
compass1.setRegion((int)(compassorientation/3.6*1024), 0, 200, 16);
spriteBatch.draw(compass1, 0, (Gdx.graphics.getHeight()/2) -(-250 + compass1.getTexture().getHeight()* (float)1.2), Gdx.graphics.getWidth(), 32 * (float)1.2);
}
else if (compassorientation > ((float)(1024-200)/1024*3.6)) {
compass1.setRegion((int)(compassorientation/3.6*1024), 0, 1024 - (int)(compassorientation/3.6*1024), 16);
spriteBatch.draw(compass1, 0, (Gdx.graphics.getHeight()/2) -(-250 + compass1.getTexture().getHeight()* (float)1.2), compass1.getRegionWidth()/200f * Gdx.graphics.getWidth() , 32 * (float)1.2);
compass2.setRegion(0, 0, 200 - compass1.getRegionWidth(), 16);
spriteBatch.draw(compass2, compass1.getRegionWidth()/200f * Gdx.graphics.getWidth() , (Gdx.graphics.getHeight()/2) -(-250 + compass1.getTexture().getHeight()* (float)1.2), Gdx.graphics.getWidth() - (compass1.getRegionWidth()/200f * Gdx.graphics.getWidth()) , 32 * (float)1.2);
}
spriteBatch.end();
You can use setWrap function like below:
Texture texture = new Texture(Gdx.files.internal("images/background.png"));
texture.setWrap(Texture.TextureWrap.Repeat, Texture.TextureWrap.Repeat);
It will draw background repeatedly! Hope this help!
Beneath where you initialize your Texture for the object. Then beneath that type in this
YourTexture.setWrap(Texture.TextureWrap.Repeat, Texture.TextureWrap.Repeat);
Where YourTexture is your texture that you want to parallax scroll.
In Your render file type in this code.
batch.draw(YourTexture,0, 0, 0 , srcy, Gdx.graphics.getWidth(),
Gdx.graphics.getHeight());
srcy +=10;
It is going to give you an error so make a variable called srcy. It is nothing too fancy.
Int srcy
I am using the HTML canvas tag to draw around 3000, vector lines on a small area (900x500) the target platform is mobile which has inherently lower spec'd hardware. On my desktop I can make the 3000 vector lines render, using moveto and lineto in about 25ms. However on the mobile device it's more like 700ms which is significantly slower. What is the most effective way to render these lines which make up a complex shape using canvas? Would the canvas pixel API be better suited to this task?
My current code looks something like this:
var myArray = []; //contains 3000 objects with X & Y & type
for(var i = 0; i<myArray.length; i++) {
if(myArray.type = "moveTo") {
canvasElement.moveTo(myArray[i].X, myArray[i].Y);
} else {
canvasElement.lineTo(myArray[i].X, myArray[i].Y);
}
}
canvasElement.stroke();
Thanks
Are these lined connected to each other? If so, you could try rendering the shapes they produce using moveto, lineto, lineto, etc. this taking nearly 50% (or less) of the time.
For disconnected lines which are similar, e.g. 3 pixels long, horizontal, you could render small 'sprites' for the commonly occurring ones - it might be quicker to draw them as images then.
Otherwise, if you have a graphic of which only small portions change, you could try clipping to the region of change and redrawing only the lines which fall within it.