HTML5 buffering...?

Monkey Targets Forums/HTML5/HTML5 buffering...?

SLotman

(Posted 2013) [#1]

I don't know if Monkey already do this, but this article uses an off-screen rendering, and make it sound as something too good to be true!

Any thoughts? Would this be good for html5-monkey? To speed things up? or not?

computercoder

(Posted 2013) [#2]

Thats nothing more than double-buffering. This is very useful for canvases that only have a single buffer. You create one background buffer and always paint to that as things are progressing in the frame, then at the beginning or end of the frame, you flip the image to the visible buffer.

In GDI, this was absolutely neccessary, as the smoothness of the game was choppy without double-buffering. Anymore, even with GDI+, the canvases are double-buffered by default, and you no longer need to make it happen manually.

I have no idea how its done in Monkey, but it seems to me that its already incorporated with how fast animation is using it. I could be wrong :P

I say to try out testing with a single canvas and then the same code using two canvases and test it out for yourself. If there is an improvement in speed, then you know its not double-buffering. If you don't notice a speed increase, then its already handled.

SLotman

(Posted 2013) [#3]

Just confirmed: Monkey does NOT use a secondary canvas to render stuff.

So it can be faster! (And believe: any speed improvement on HTML5 will always be welcome)

Edit: just got the HTML5 generated by monkey for my "Escape from Alcatraz" game, applied that thing on it, and got a speed boost. Don't know how much, but it is visible that the game is running faster.

SLotman

(Posted 2013) [#4]

Ok, so I just made it a target... "Fast html5". Could you guys please test it out?

Just download, extract it on /targets, restart TED and you'll have it as a new target available.

http://www.icongames.com.br/temp/fasthtml5.zip

rIKmAN

(Posted 2013) [#5]

This is awesome! :)

My game was showing quite a bit of slowdown during testing/debug using HTML5 (it's an iOS game but HTML5 is faster to test with) and I can also confirm that there is quite a noticeable speed boost using this.

It runs faster than the HTML5-GL code by devolonter, which gave a speed boost over standard HTML5 but still had slowdown.

Not sure if also using that with this double buffering would speed it up even more, but even if not - this is great work, thanks! :)

therevills

(Posted 2013) [#6]

Cool! Well done Slotman!

(BTW maybe submit it as a change to Github rather than a new target, since its only a few lines of code different from the original HTML Target).

SLotman

(Posted 2013) [#7]

I never used Github, so I have no idea where to start... but I think this should be tested further, to see if it's stable enough - if no problems arise from it.

(Specially since the visible canvas is called visCanvas, so for example routines that hide the mouse by finding "GameCanvas" have to be changed!)

rIKmAN: This is double buffering: not 'native' on HTML5 (I don't even think it has native double buffering), but everything now gets drawn into an invisible canvas, and in the end of the render loop, it gets copied to the visible one.

computercoder

(Posted 2013) [#8]

@SLotman
Good job getting it to work (and researching it)!

@rIKmAN
This technique can also be applied to HTML-GL as you asked about. if the code doesn't already have double buffering applied its fairly simple to incorporate. It will give a nice improvemnt like SLotman noticed with just HTML :)

SLotman

(Posted 2013) [#9]

Has anyone else tried this target? Should I post it on the 'user targets' forum?

MikeHart

(Posted 2013) [#10]

I tried it. In firefox on the desktop it runs more smooth.
On mobile, it didn't help so far.

SLotman

(Posted 2013) [#11]

I'm a bit skeptical... I took this code from another thread and did a small benchmark:

#OPENGL_DEPTH_BUFFER_ENABLED=False
#MOJO_AUTO_SUSPEND_ENABLED=False
#MOJO_IMAGE_FILTERING_ENABLED=False

' Sterne (monkey)

' defs
Import mojo

Const scr_x:Float = 1440.0, scr_y:Float = 900.0
Const scr_xo:Float = scr_x*0.5, scr_yo:Float = scr_y*0.5
Const sterne_anz:Int = 2*1024, sterne_z_max:Float = 256.0
Const stern_width:Int = 64, stern_height:Int = 64

Global scr_cls:c_rgb = New c_rgb
Global tex_stern:Image

' main
Function Main()
	New demo
End

' demo
Class demo Extends App
   Global render:Int, timer: Int, total:Int, conta:int
	Field stern:c_stern = New c_stern
	Field sterne_lis:List <c_stern>
		
	Method OnCreate()
		'tex_stern = LoadImage("gfx/img_stern_c.png",1,Image.MidHandle)
		Local j:Int = 0
		For Local i:Int = 0 Until str_stern.Length Step 6
			dat_stern[j] = hexstr_to_int("FF"+str_stern[i..i+6])
			j += 1
		Next
		'PlayMusic "sfx/mus_choice.ogg",1
		HideMouse
		scr_cls.r = 0; scr_cls.g = 8; scr_cls.b = 32
		Seed = Millisecs
		sterne_lis = New List <c_stern>
		For Local i:Int = 0 Until sterne_anz
			Local stern:c_stern = New c_stern
			sterne_lis.AddLast stern
		Next
		SetUpdateRate 120
		render = 0
	End

	Method OnUpdate()
		If KeyDown(KEY_ESCAPE)
			ShowMouse
			EndApp
		End
		For stern=Eachin sterne_lis
			stern.Update()
		Next
	End

	Method OnRender()
		If Not tex_stern
			tex_stern = CreateImage(stern_width,stern_height,1,Image.MidHandle)
			tex_stern.WritePixels(dat_stern,0,0,stern_width,stern_height,0,0)
			timer = Millisecs()
		End
		Cls scr_cls.r,scr_cls.g,scr_cls.b
		SetBlend AdditiveBlend
		'PushMatrix
		Translate scr_xo, scr_yo
		Rotate 157.08*Sin(Float(Millisecs)*0.0081416)
		Translate -scr_xo, -scr_yo
		For stern=Eachin sterne_lis
			stern.Draw()
		Next
		'PopMatrix
		
		render = render + 1
		If Millisecs() - timer > 1000 Then 
		   total = total + render
		   conta = conta + 1
		   Print "FPS:" + render + " average:" + (total / conta)
		   render = 0
		   timer = Millisecs()
		End If
	End
End

' classes
Class c_rgb
	Field r:Float, g:Float, b:Float
End

Class c_stern Extends c_rgb
	Field x:Float,y:Float,z:Float
	Field spd:Float,siz:Float
	
	Method New()
		Generate()
		z = Rnd() * sterne_z_max
	End

	Method Update()
		z = z - spd
		If z <= 0.0 Then Generate()
	End

	Method Generate()
		x = Rnd()*scr_x-scr_xo
		y = Rnd()*scr_y-scr_yo
		z = sterne_z_max
		r = Rnd()*0.75+0.25
		g = Rnd()*0.5+0.5
		b = Rnd()*0.25+0.75
		spd = Rnd()*0.1+0.26416
		siz = Rnd()*0.6+0.7
	End

	Method Draw()
		Local fak_z:Float = sterne_z_max / z
		Local xp:Float = x * fak_z + scr_xo
		Local yp:Float = y * fak_z + scr_yo
		Local fak_s:Float = (1.0 - z / sterne_z_max) * 256.0
		
		'SetColor Min(255.0,r*fak_s+scr_cls.r), Min(255.0,g*fak_s+scr_cls.g), Min(255.0,b*fak_s+scr_cls.b)
		fak_s = fak_s * 0.00390625 * 0.6 * siz
		PushMatrix
		Translate xp,yp
		Scale fak_s,fak_s
		Translate -xp,-yp
		DrawImage tex_stern,xp,yp
		PopMatrix
	End
End

' functions
Function hexstr_to_int:Int(hexstr:String)
	Local num:Int = 0
	For Local i:Int = 0 Until hexstr.Length
		Local cha:Int = hexstr[i]
		If cha >= 48 And cha <= 57 Then
			num = num*16+cha-48
		Else
			num = num*16+cha-55
		End
	Next
	Return num
End

' data
Global dat_stern:Int[stern_width*stern_height]
Global str_stern:String ="0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010101010101010101010101010202020101010202020101010101010101010101010101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010101010202020202020202020202020202020202020303030202020303030202020202020202020202020202020202020101010101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010202020202020202020303030303030303030303030404040303030404040404040404040404040303030303030303030303030303030202020202020202020101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010202020202020303030303030303030404040404040404040404040505050404040505050505050505050505050404040404040404040404040303030303030303030303030202020202020101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010202020202020303030303030404040404040404040505050505050505050505050606060606060707070606060707070606060505050606060606060606060505050404040404040404040303030202020202020202020101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010202020303030303030404040404040505050505050505050606060707070707070606060707070707070808080707070808080707070606060707070707070707070606060505050606060505050404040404040404040303030202020101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010202020303030303030303030404040505050505050505050606060606060707070808080808080707070808080808080909090909090909090808080707070808080808080707070707070606060707070606060505050505050505050303030303030202020202020101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010202020303030303030404040404040505050606060606060606060707070808080808080909090A0A0A0808080909090A0A0A0A0A0A0A0A0A0B0B0B0A0A0A0909090A0A0A0A0A0A0909090808080808080808080707070606060606060505050404040404040303030303030202020101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010202020303030404040404040505050505050606060707070808080808080808080909090909090B0B0B0B0B0B0A0A0A0A0A0A0B0B0B0C0C0C0C0C0C0C0C0C0B0B0B0A0A0A0B0B0B0B0B0B0A0A0A0909090A0A0A0909090808080808080707070606060505050505050404040303030303030202020101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010202020202020303030404040505050505050606060707070808080909090909090909090B0B0B0B0B0B0B0B0B0D0D0D0C0C0C0B0B0B0D0D0D0D0D0D0D0D0D0E0E0E0C0C0C0C0C0C0D0D0D0C0C0C0B0B0B0B0B0B0C0C0C0A0A0A0909090A0A0A0808080707070606060606060505050404040404040303030202020101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010202020303030303030404040404040606060707070707070808080909090A0A0A0B0B0B0A0A0A0C0C0C0C0C0C0D0D0D0F0F0F0E0E0E0D0D0D0E0E0E0F0F0F0F0F0F1010100E0E0E0E0E0E0F0F0F0E0E0E0D0D0D0D0D0D0D0D0D0B0B0B0B0B0B0A0A0A0909090808080808080707070505050505050404040404040303030202020101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010202020303030404040404040505050505050606060808080909090909090A0A0A0B0B0B0C0C0C0D0D0D0C0C0C0E0E0E0E0E0E1010101010100F0F0F1010101111111111111111110F0F0F1010101111110F0F0F0E0E0E0F0F0F0E0E0E0C0C0C0D0D0D0B0B0B0A0A0A0909090909090707070707070606060606060505050404040303030202020101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010202020303030404040404040505050606060606060707070808080A0A0A0A0A0A0B0B0B0C0C0C0D0D0D0F0F0F0E0E0E0F0F0F1010101111111313131111111212121313131313131313131111111212121313131111111010101111110F0F0F0F0F0F0E0E0E0C0C0C0B0B0B0B0B0B0909090808080808080707070606060606060505050303030303030202020101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010202020303030505050606060606060707070808080808080808080A0A0A0C0C0C0C0C0C0E0E0E0E0E0E1010101111111111111212121313131515151313131414141515151616161616161414141515151414141313131313131212121010101111110E0E0E0D0D0D0D0D0D0B0B0B0A0A0A0A0A0A0909090808080707070606060505050505050303030202020202020101010000000000000000000000000000000000000000000000000000000000000000000000000000000101010202020303030404040404040606060808080808080909090A0A0A0A0A0A0A0A0A0C0C0C0E0E0E0F0F0F1010101111111313131212121414141515151818181616161616161818181919191818181616161818181717171515151616161313131414141212120F0F0F0F0F0F0E0E0E0C0C0C0C0C0C0B0B0B0A0A0A0909090808080707070707070505050404040303030202020101010000000000000000000000000000000000000000000000000000000000000000000000000101010202020202020303030404040505050606060808080A0A0A0A0A0A0B0B0B0C0C0C0C0C0C0C0C0C0F0F0F1111111212121313131515151616161616161818181A1A1A1A1A1A1919191B1B1B1C1C1C1B1B1B1919191B1B1B1919191818181818181616161616161212121212121111110F0F0F0E0E0E0E0E0E0C0C0C0B0B0B0A0A0A0909090808080606060505050505050404040303030202020101010000000000000000000000000000000000000000000000000000000000000000000101010202020303030404040505050606060606060707070909090C0C0C0C0C0C0D0D0D0E0E0E0E0E0E0F0F0F1212121313131515151717171919191919191B1B1B1D1D1D1E1E1E1D1D1D1F1F1F2020201F1F1F1D1D1D1F1F1F1C1C1C1C1C1C1A1A1A1919191717171515151414141212121111111010100F0F0F0E0E0E0C0C0C0B0B0B0A0A0A0808080707070707070505050404040303030202020101010000000000000000000000000000000000000000000000000000000000000101010202020303030404040505050606060707070707070808080909090B0B0B0E0E0E0F0F0F1010101111111111111212121616161717171919191C1C1C1D1D1D1E1E1E2020202323232121212323232525252323232222222222222020202020201D1D1D1C1C1C1919191818181515151414141313131212121010100E0E0E0E0E0E0B0B0B0A0A0A0A0A0A0909090707070606060505050303030303030202020101010000000000000000000000000000000000000000000000000000000101010202020303030404040505050707070808080909090A0A0A0A0A0A0B0B0B0D0D0D1010101212121313131414141414141616161A1A1A1C1C1C1E1E1E2222222222222424242828282727272929292B2B2B2929292828282727272525252323232222221E1E1E1C1C1C1A1A1A1717171717171515151313131111111010100D0D0D0D0D0D0C0C0C0A0A0A0909090808080606060505050404040303030202020101010000000000000000000000000000000000000000000000000101010202020303030404040505050505050606060808080A0A0A0B0B0B0C0C0C0D0D0D0E0E0E0F0F0F1212121515151717171818181818181B1B1B1F1F1F2222222626262828282A2A2A2E2E2E2F2F2F3030303232323030303030302D2D2D2C2C2C2929292626262222221F1F1F1C1C1C1B1B1B1919191717171515151212121010101010100E0E0E0C0C0C0B0B0B0909090808080707070606060505050404040303030202020101010000000000000000000000000000000000000000000101010202020303030404040606060707070808080808080909090B0B0B0E0E0E0F0F0F1010101010101212121515151919191B1B1B1D1D1D1E1E1E2222222626262A2A2A2F2F2F3131313535353838383939393B3C3B3939393939393535353333332F2F2F2A2A2A2727272222222020201E1E1E1B1B1B1919191616161414141313131010100E0E0E0C0C0C0B0B0B0A0A0A0909090808080707070505050404040303030202020101010000000000000000000000000000000000000000000101010202020404040505050505050707070909090A0A0A0B0B0B0C0C0C0D0D0D0F0F0F1212121313131414141616161818181D1D1D2121212323232525252B2B2B3030303636363B3B3B3F3F3F4444444545454949494646464444444040403C3C3C3636363030302B2B2B2828282424242121211D1D1D1A1A1A1818181616161313131010100F0F0F0D0D0D0C0C0C0B0B0B0A0A0A0808080707070505050404040303030202020101010000000000000000000000000000000000000000000101010202020303030505050606060707070808080A0A0A0C0C0C0E0E0E0F0F0F1010101111111414141717171919191A1A1A1D1D1D2323232828282C2C2C2F2F2F3737373F3F3F4747474D4D4D5555555757575B5B5B5858585555554F4F4F4747473F3F3F3838383232322D2D2D2828282323231F1F1F1D1D1D1919191616161313131212121010100F0F0F0D0D0D0B0B0B0909090808080707070606060404040303030202020202020101010000000000000000000000000000000101010202020303030404040505050606060707070808080A0A0A0C0C0C0D0D0D0F0F0F1212121414141515151717171A1A1A1E1E1E2121212424242A2A2A3232323939393F3F3F4A4A4A5656566161616C6C6C7272727676767373736C6C6C6262625656564B4B4B4141413A3A3A3232322C2C2C2626262222221D1D1D1A1A1A1717171515151313131111110F0F0F0D0D0D0B0B0B0A0A0A0808080707070606060505050404040303030202020101010000000000000000000000000000000101010202020303030404040505050606060808080909090A0A0A0B0B0B0D0D0D0F0F0F1212121414141717171A1A1A1C1C1C1F1F1F2424242929292E2E2E3535354141414C4C4C5858586A6A6A7D7D7D8F8F8F9D9D9DA4A4A49E9E9E9090907E7E7E6A6A6A5A5A5A4D4D4D4141413737373030302929292323231F1F1F1C1C1C1919191616161313131111110F0F0F0D0D0D0C0C0C0B0B0B0909090808080707070505050404040303030202020101010000000000000000000000000000000101010202020303030404040505050606060707070909090A0A0A0C0C0C0D0D0D0F0F0F1111111313131616161A1A1A1E1E1E2222222727272C2C2C3434343C3C3C4747475959596D6D6D858585A7A7A7CBCBCBE3E3E3EBEBEBE4E4E4CCCCCCA7A7A78787876E6E6E5959594A4A4A3D3D3D3333332C2C2C2727272121211D1D1D1919191616161414141212121010100E0E0E0D0D0D0B0B0B0A0A0A0808080707070606060505050303030202020101010000000000000000000000000000000101010202020404040505050606060707070808080A0A0A0B0B0B0C0C0C0D0D0D0F0F0F1111111414141616161919191D1D1D2222222828282F2F2F383838434343525252656565828282ACACACE1E1E1FEFEFEFFFFFFFFFFFFFFFFFFFEFEFEE2E3E2AEAEAE8484846767675252524343433838382E2E2E2727272222221E1E1E1B1B1B1818181515151313131111110F0F0F0D0D0D0C0C0C0A0A0A0909090707070606060505050303030202020101010000000000000000000000000000000101010202020303030404040606060707070808080A0A0A0B0B0B0D0D0D0F0F0F1111111313131515151818181B1B1B1E1E1E2323232828283030303A3A3A4848485A5A5A7575759C9C9CD9D9D9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFDBDBDB9C9C9C7474745A5A5A4747473B3B3B3131312A2A2A2424242020201C1C1C1919191616161313131111110F0F0F0D0D0D0B0B0B0909090808080606060505050404040303030202020101010000000000000000000000000000000202020303030404040505050606060707070909090A0A0A0B0B0B0C0C0C0E0E0E1010101212121515151818181C1C1C2020202424242A2A2A3232323D3D3D4B4B4B5F5F5F7F7F7FB4B4B4F6F6F6FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF6F6F6B4B4B48080806161614C4C4C3E3E3E3333332A2A2A2424241F1F1F1B1B1B1717171414141212121010100E0E0E0C0C0C0B0B0B0909090808080707070606060505050404040303030101010000000000000000000000000000000202020303030404040505050606060808080909090B0B0B0C0C0C0E0E0E1010101212121414141616161919191D1D1D2020202525252C2C2C3434343F3F3F4E4E4E646464868686C3C3C3FDFDFDFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFEFEC3C3C38686866363634D4D4D3D3D3D3232322A2A2A2424241F1F1F1C1C1C1818181616161313131111110F0F0F0D0D0D0B0B0B0A0A0A0909090707070606060505050404040303030101010000000000000000000000000000000101010202020303030505050606060707070808080A0A0A0B0B0B0D0D0D0F0F0F1111111313131616161919191C1C1C2121212626262C2C2C3434343F3F3F4F4F4F656565878787C5C5C5FEFEFEFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFEFEC5C5C58787876565654F4F4F4040403535352C2C2C2626262121211D1D1D1919191616161414141111110F0F0F0E0E0E0C0C0C0A0A0A0909090808080606060505050404040303030202020000000000000000000000000000000202020303030404040505050707070808080909090B0B0B0C0C0C0E0E0E1010101212121313131616161919191C1C1C2020202525252B2B2B3333333D3D3D4C4C4C616161808080B6B6B6F7F7F7FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF7F7F7B6B6B68080806060604B4B4B3D3D3D3333332B2B2B2525252020201C1C1C1919191616161414141212121010100E0E0E0C0C0C0B0B0B0909090808080606060505050404040303030202020000000000000000000000000000000101010202020404040505050606060707070909090A0A0A0B0B0B0D0D0D0F0F0F1010101212121515151818181B1B1B1F1F1F2424242929293131313B3B3B4848485A5A5A7575759D9D9DDEDEDEFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFDFDFDF9F9F9F7575755A5A5A4747473A3A3A3131312A2A2A2424241F1F1F1B1B1B1717171414141212121010100E0E0E0D0D0D0B0B0B0A0A0A0909090808080606060505050404040303030202020000000000000000000000000000000101010202020303030505050606060707070808080909090B0B0B0D0D0D0F0F0F1010101212121515151717171A1A1A1E1E1E2222222828282F2F2F383838434343515151666666858585B2B2B2E9E9E9FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFE9E9E9B1B1B18686866969695353534343433737372E2E2E2727272222221E1E1E1A1B1B1818181515151313131010100E0E0E0C0C0C0A0A0A0909090808080606060505050404040303030202020101010000000000000000000000000000000101010202020303030505050606060707070808080A0A0A0B0B0B0C0C0C0E0E0E0F0F0F1111111414141616161919191D1D1D2121212626262C2C2C3232323B3B3B4848485A5A5A7070708A8A8AAEAEAED3D3D3EAEAEAF1F1F1EBEBEBD3D3D3AEAEAE8C8C8C6F6F6F5959594A4A4A3E3E3E3434342C2C2C2525252020201C1C1C1919191616161414141111111010100E0E0E0D0D0D0B0B0B0A0A0A0808080707070606060404040303030202020101010000000000000000000000000000000101010202020303030404040505050606060707070909090A0A0A0C0C0C0D0D0D0F0F0F1111111313131616161919191B1B1B1F1F1F2323232727272E2E2E3737374242424D4D4D5C5C5C6E6E6E828282939393A3A3A3AAAAAAA5A5A59595958181816F6F6F5D5D5D4D4D4D4040403838383030302929292424242020201B1B1B1818181515151313131111110F0F0F0D0D0D0B0B0B0A0A0A0909090808080707070606060404040303030202020101010000000000000000000000000000000101010202020303030404040505050606060707070909090A0A0A0B0B0B0D0D0D0F0F0F1111111313131414141717171919191C1C1C2020202525252B2B2B3333333939394242424C4C4C5959596363636D6D6D7575757979797878787070706363635959594E4E4E4343433939393030302B2B2B2727272222221E1E1E1B1B1B1818181515151212121010100E0E0E0D0D0D0B0B0B0A0A0A0808080707070606060505050404040303030202020101010000000000000000000000000000000101010202020202020404040505050606060707070808080A0A0A0B0B0B0D0D0D0E0E0E0F0F0F1111111313131515151717171B1B1B1F1F1F2323232929292C2C2C3232323939394141414848484F4F4F5454545959595C5C5C5C5C5C5656565050504747474141413A3A3A3333332C2C2C2626262323232020201C1C1C1919191616161414141212121010100E0E0E0C0C0C0B0B0B0909090808080707070606060505050303030202020101010000000000000000000000000000000000000000000101010202020303030404040606060707070808080909090B0B0B0B0B0B0D0D0D0F0F0F1010101111111414141717171919191E1E1E2121212323232727272C2C2C3131313838383B3B3B4040404343434747474848484949494545454242423A3A3A3737373232322D2D2D2929292424241F1F1F1C1C1C1A1A1A1818181515151313131111110F0F0F0E0E0E0C0C0C0A0A0A0909090808080606060505050404040303030202020101010000000000000000000000000000000000000000000101010202020303030404040505050707070707070808080909090B0B0B0C0C0C0D0D0D0F0F0F1111111313131515151919191C1C1C1C1C1C2020202424242626262C2C2C2F2F2F3232323535353737373939393A3A3A3C3C3C3838383737373232322D2D2D2C2C2C2828282525252121211D1D1D1919191717171616161414141212121010100E0E0E0D0D0D0C0C0C0A0A0A0909090707070606060505050404040303030202020101010000000000000000000000000000000000000000000101010202020303030404040404040505050606060808080909090909090B0B0B0D0D0D0F0F0F1010101212121616161717171717171A1A1A1E1E1E1F1F1F2323232626262727272A2A2A2C2C2C2E2E2E3030303030303232322F2F2F2E2E2E2D2D2D2626262525252424242121211E1E1E1B1B1B1919191515151313131212121111110F0F0F0E0E0E0C0C0C0B0B0B0909090808080707070606060505050303030202020202020101010000000000000000000000000000000000000000000000000101010202020303030404040505050606060606060808080909090B0B0B0C0C0C0D0D0D0F0F0F1313131313131313131515151919191A1A1A1C1C1C2020202121212222222424242525252727272828282929292A2A2A2929292727272727272323232020201F1F1F1D1D1D1B1B1B1919191717171515151212121010100F0F0F0E0E0E0D0D0D0C0C0C0A0A0A0909090707070606060505050404040404040202020101010000000000000000000000000000000000000000000000000000000101010202020303030404040404040505050606060808080909090A0A0A0B0B0B0D0D0D1010101010101010101212121515151616161717171B1B1B1C1C1C1C1C1C1F1F1F1F1F1F2020202222222222222323232424242424242121212222222020201B1B1B1B1B1B1B1B1B1818181717171515151313131212120F0F0F0D0D0D0C0C0C0C0C0C0B0B0B0909090808080707070606060505050404040303030202020101010000000000000000000000000000000000000000000000000000000000000101010202020303030404040505050606060707070808080909090C0C0C0D0D0D0D0D0D0E0E0E0F0F0F1111111212121313131616161818181818181919191B1B1B1B1B1B1C1C1C1E1E1E1E1E1E1F1F1F1F1F1F2020201D1D1D1D1D1D1D1D1D1919191717171717171616161515151313131212121010100F0F0F0C0C0C0B0B0B0A0A0A0909090909090707070606060606060404040303030202020101010000000000000000000000000000000000000000000000000000000000000000000101010202020202020404040404040505050606060808080A0A0A0B0B0B0A0A0A0B0B0B0D0D0D0F0F0F1010101010101212121414141515151414141717171818181818181919191A1A1A1A1A1A1B1B1B1B1B1B1C1C1C1919191A1A1A1919191818181414141414141414141313131212121010100F0F0F0E0E0E0D0D0D0A0A0A0A0A0A0808080707070707070606060505050404040303030202020101010000000000000000000000000000000000000000000000000000000000000000000000000101010202020303030404040505050606060808080808080808080909090A0A0A0C0C0C0D0D0D0E0E0E0F0F0F1111111212121212121212121515151515151515151616161717171717171818181818181919191616161616161616161616161212121212121111111111111010100F0F0F0E0E0E0C0C0C0B0B0B0A0A0A0808080808080606060505050505050404040303030202020101010000000000000000000000000000000000000000000000000000000000000000000000000000000101010202020202020303030505050606060606060707070707070808080A0A0A0B0B0B0B0B0B0C0C0C0E0E0E0F0F0F1010101010101111111212121212121313131414141414141414141515151515151717171414141313131414141414141212120F0F0F0F0F0F0F0F0F0E0E0E0D0D0D0C0C0C0C0C0C0A0A0A0909090808080606060606060505050404040303030202020202020101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010202020303030404040505050505050606060707070808080909090909090A0A0A0B0B0B0D0D0D0E0E0E0E0E0E0D0D0D1010101010101010101010101212121212121212121212121313131414141212121111111212121111111111110D0D0D0D0D0D0D0D0D0E0E0E0C0C0C0B0B0B0A0A0A0909090808080707070707070505050404040303030202020202020101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010202020303030404040404040505050606060707070808080808080909090B0B0B0C0C0C0C0C0C0C0C0C0D0D0D0E0E0E0E0E0E0E0E0E0F0F0F1010101010101010101010101010101212121111110F0F0F1010100F0F0F1010100D0D0D0B0B0B0C0C0C0B0B0B0B0B0B0A0A0A0909090808080707070606060606060505050303030303030202020101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010202020303030303030505050505050606060606060808080808080A0A0A0A0A0A0B0B0B0A0A0A0C0C0C0C0C0C0D0D0D0D0D0D0D0D0D0E0E0E0E0E0E0E0E0E0E0E0E0F0F0F1010100F0F0F0D0D0D0D0D0D0E0E0E0D0D0D0D0D0D0A0A0A0A0A0A0909090A0A0A0909090808080707070707070505050404040404040303030202020101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010202020303030303030505050505050606060606060808080808080909090808080909090B0B0B0B0B0B0B0B0B0B0B0B0B0B0B0C0C0C0C0C0C0C0C0C0D0D0D0D0D0D0E0E0E0E0E0E0C0C0C0C0C0C0C0C0C0B0B0B0C0C0C0909090808080808080808080808080707070606060505050505050404040303030202020202020101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010202020303030303030404040505050606060606060707070707070707070909090909090909090909090A0A0A0A0A0A0B0B0B0B0B0B0B0B0B0B0B0B0B0B0B0C0C0C0C0C0C0B0B0B0A0A0A0A0A0A0A0A0A0A0A0A0909090707070707070606060707070606060505050404040404040303030202020101010101010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000101010101010202020202020303030404040505050505050606060606060606060808080707070808080808080808080909090909090909090A0A0A0A0A0A0A0A0A0A0A0A0B0B0B090909080808090909090909080808080808060606060606060606050505050505040404040404030303020202010101010101000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010101010101020202020202030303040404040404050505050505060606060606060606070707070707070707080808080808080808080808080808080808080808090909080808070707070707080808070707070707060606040404040404040404040404040404020202020202010101010101000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010101020202020202030303030303030303040404050505050505060606050505060606060606070707070707070707070707070707070707070707080808070707060606060606060606060606060606050505040404030303030303030303020202020202010101000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010101010101020202020202020202030303040404040404040404040404050505050505050505050505060606060606060606060606060606070707060606050505050505050505050505040404040404030303020202020202020202010101010101000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010101010101020202020202030303030303030303030303040404040404040404040404050505050505050505050505050505050505050505040404040404040404040404030303030303020202020202010101010101000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010101010101010101020202020202030303030303030303030303030303030303030303040404040404030303040404040404030303030303030303030303020202020202010101010101000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010101010101010101020202020202020202020202020202020202020202020202030303020202030303020202020202020202020202010101010101010101000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000"

And the results I've got were very strange:

         HTML5  / Fast HTML5 (120 update rate)
firefox    50         48
chrome     60         65
IE         32         32

IE as expected had the worst FPS possible on both cases, and chrome the best. I set the update rate to 120 fps, so it wouldn't be stuck at 60fps on chrome.

On chrome, the fast html5 wins hands down - and also it seems to be marginally faster on IE (higher FPS spikes, but on average, same speed). Only on Firefox it lost more speed, I don't know why.

Those tests were done on Win8, 64 bits, latest versions of all browsers.

nikoniko

(Posted 2014) [#12]

In Safari for Windows HTML5 is faster and smooth than Fast_HTML5

slenkar

(Posted 2014) [#13]

--nvm

nikoniko

(Posted 2014) [#14]

SLotman wrote:

I'm a bit skeptical... I took this code from another thread and did a small benchmark:

May be this example is not correct for test. A lot float digits when HTML5/JS likes integer values yet.
I read several topics about DB where speed is up when many sprites are drawn on the hidden canvas.

slenkar wrote:

-nvm

It works for Firefox browser and may be useful for Firefox OS target.

nikoniko

(Posted 2014) [#15]

I found that with command

SetBlend AdditiveBlend

Firefox gens 3-4 fps only

without it or with

SetBlend AlphaBlend

60-70 fps

GuShh

(Posted 2014) [#16]

Must be the browsers slowing down are those implementing doble buffering behind the scenes.

nikoniko

(Posted 2014) [#17]

GuShh wrote:

Must be the browsers slowing down are those implementing doble buffering behind the scenes

Many developers say of browser already uses DB for canvas drawing therefore we have triple buffering with fasthtml.

Modern browsers has requestAnimationFrame() method to call internal canvas updating procedure instead settimeout()

rIKmAN

(Posted 2014) [#18]

I updated Monkey last week and this target seems to have stopped working, or is it just me?

I copied over all the files from the older (working) version, but I'm getting the following error when I try to compile anything..

Monkey Runtime Error : TypeError: Cannot read property 'call' of undefined

Any ideas?

nikoniko

(Posted 2014) [#19]

rIKmAN wrote:

Any ideas?

Needs some changes to new html5 target templates

FelipeA

(Posted 2014) [#20]

If you are developing html5 for mobile I wouldn't recommend using double buffering.

nikoniko

(Posted 2014) [#21]

ilovepixel wrote:

If you are developing html5 for mobile I wouldn't recommend using double buffering.

Pre-render content or part-of-scene rendering may help for speed up mobile html5 app.

FelipeA

(Posted 2014) [#22]

From my experience, pre-rendering things like text and static things is good for speed, but having an off-screen canvas and rendering everything there, and then rendering to the on-screen one is not. On some browsers it could look as an improvement on performance, but not for mobile browsers. I've been working a lot on mobile html5 development and doing this would decrease performance up to 40%. Right now I don't have an answer for why this happens, but from a lot of testing that's what our team got as conclusion.