On Sat, 5 Sep 2009, Marius Gundersen wrote: > > I've been playing around with the canvas element, making a 3D engine. It > works, but is incredibly slow. Part of the reason is probably that the > browser renders the canvas everytime I draw something to it. In a 3D > engine, as well as a game engine, the entire canvas is erased and > redrawn several times a second, and only at the end of each frame does > it need to be rendered to the screen. > > This could be solved with a double buffer, and an explicit redraw() > function called at the end of each frame. for example: > > function render(){ > ctx.clearRect(0, 0, width, height); > drawSpaceShip(ctx); > for(var i=0; i<spaceInvaders.length; i++){ > drawSpaceInvader(spaceInvaders[i], ctx); > } > ctx.repaint(); > } > > Of course this is not always desirable. The context2D could therefore > have a flag which turns on and off double buffering. Set to true, the > canvas is only redrawn when the repaint function is called, set to > false, it will repaint every time the user calls a function that draws > to the canvas (drawImage, fillRect, stroke... etc). > > So, to sum up, this is what should be added to the context2D object: > > attribute boolean doubleBuffer; //(default false) > void repaint(); //repaints the entire canvas. Only used if doubleBuffer is > true
On Sat, 5 Sep 2009, Robert O'Callahan wrote: > > I assume you have a setTimeout handler (or similar) which renders a > complete frame before returning. If so, then in Gecko and I think also > in Webkit the canvas will not be drawn to the screen while your script > is running, only between frames. So I suspect your performance problem > has some other cause. Based on roc's comments, I haven't added the feature here. It should be noted that long-term, the right solution for 3D is a 3D API, not a library on top of the 2D API. -- Ian Hickson U+1047E )\._.,--....,'``. fL http://ln.hixie.ch/ U+263A /, _.. \ _\ ;`._ ,. Things that are impossible just take longer. `._.-(,_..'--(,_..'`-.;.'