Mojo HTML5 GL
Monkey Forums/User Modules/Mojo HTML5 GL
| ||
This patch is deprecated! There won’t be no updates, no bugfixes, no compatibility with new Monkey versions. How to add WebGL support for mojo now? I made new implementation of WebGL support for mojo in my Monkey fork - mungo. It’s a better implementation which gives ~10 time better performance than this patch and works in IE11. Here is a small demo. Now you can use these two methods to enable WebGL acceleration for your mojo projects: 1. Download and install mungo The fastest way to use new WebGL implementation for mojo is to download and install mungo. 2. Create custom HTML5 target If you don’t want to use mungo you can add WebGL support for mojo by following this short manual: 1. Create a new HTML5 target based on the standard HTML5 monkey target. 2. Rename directory of the new target. For example: html5_webgl 3. There, replace files in modules/native folder by files from mungo 4. Rename new target in TARGET.MONKEY file. For example: #TARGET_NAME="Html5 WebGL Game" 5. Copy-paste code from mojo.html5.webgl.js file into template/main.js file after //${TRANSCODE_END} line 6. Add #HTML5_WEBGL_ENABLED=True in template/CONFIG.MONKEY file --- An experimental patch for mojo, that replaces the standard 2d-context with WebGL. Features * It does not require code changes * High SetBlend performance for images * High SetColor performance for images * #MOJO_IMAGE_FILTERING_ENABLED support * Chrome Frame support * It works in browsers that do not support WebGL (2d-context used) * Small file size - 12KB only! Usage * Just connect mojo.html5.gl.min.js to a page with the game. * Optional. Enable Chrome Frame support in Internet Explorer. More info. Note * For V65 and V66 versions use version v1.21 * For versions V64 and below use v1.11 Repo on GitHub | Demo | Download |
| ||
Nifty. Thanks for sharing. Are any of the issues without known solutions or is it just a matter of time/effort? |
| ||
Really nice! it's very notorious the difference. I do hope the known issues get fixed as I use SetScissor a lot. Thanks! |
| ||
Nifty. Thanks for sharing. Are any of the issues without known solutions or is it just a matter of time/effort? Just a matter of time. SetScissor will be fixed in the near future. DrawCircle, DrawEllipse, DrawOval and a bug in Opera 12.00 some time later. |
| ||
pretty cool! should be able to blend this and 3d. |
| ||
Update is available! Support of SetScissor, DrawCircle, DrawEllipse and DrawOval methods was added. I connected this patch to the Mode game, you can compare the performance and appearance with the old version now. |
| ||
Wow, really amazing the difference!, I will definitely be using this for my next html5 builds. I also noticed it doesn't blur images like regular 2d context. That's a nice thing too for pixelated games. Thanks! |
| ||
Hmm. I think it was a mistake to place this topic in User Modules. Can someone move it in HTML5, please? |
| ||
holy crap.. the difference for me is crazy, is mark planning to implement this anyone know ? |
| ||
holy crap.. the difference for me is crazy, is mark planning to implement this anyone know ? I'm not sure. But you can use it right now. Just replace the line in MonkeyGame.html: [monkeycode]<script language="javascript" src="main.js">Javascript not supported!</script>[/monkeycode] by: [monkeycode]<script language="javascript" src="mojo.html5.gl.min.js">Javascript not supported!</script> <script language="javascript" src="main.js">Javascript not supported!</script>[/monkeycode] After that, add file mojo.html5.gl.min.js in .build/html5 folder and have fun! :) |
| ||
Hi, Mojo HTML5 GL looks cool :) but unfortunately I have error (Monkey V60): "Monkey Runtime Error : Reference Error: gxtkApp is not defined" >>>Ups, sorry, now it works - recompile ;) |
| ||
Hi! What browser do you use? Did you use mserver or a real web server? Try to swap main.js and mojo.html5.gl.min.js. as follows: [monkeycode] <script language="javascript" src="main.js">Javascript not supported!</script> <script language="javascript" src="mojo.html5.gl.min.js">Javascript not supported!</script> [/monkeycode] |
| ||
Browser: Chrome 20.0.1132.57 m Compile & Run with Monkey(mserver) - works ok Run by clicking MonkeyGame.html (bananas\mak\mojotest) - Monkey Runtime Error : Error: SECURITY_ERR: DOM Exception 18 |
| ||
Thanks for the info. It is a strange bug, I'll try to reproduce it. If someone else faced with "Reference Error: gxtkApp is not defined" please let me know. Run by clicking MonkeyGame.html (bananas\mak\mojotest) - Monkey Runtime Error : Error: SECURITY_ERR: DOM Exception 18 This is normal behavior without a server. |
| ||
This is normal behavior without a server. Ok, thanks. |
| ||
Update is available! P.S. To use Chrome Frame in IE you have to modify MonkeyGame.html and add <meta http-equiv="X-UA-Compatible" content="chrome=1"> to the head block |
| ||
Just a very late stupid question: How can I be sure that the prog is really using the patch ? I just tried it on my wireframe engine (a lot of regulat mojo lines) and I can't see any difference ? Anyway thank you for sharing, I'll give it a real try as it should well fit my needs :) |
| ||
Hi! The most simple way to be sure that it works is to set #MOJO_IMAGE_FILTERING_ENABLED="false" and zoom image. If it works correctly then patch enabled. |
| ||
Hi, OK it works, but in my case it is very much slower ! I have 4 rendering modes for a line: regular mojo drawline, stretched and rotated 3 pixels bitmap and polygone (4 and 6 points) all of them are slower. Almost all lines are in setBlend 1, I will investigate more later... tests only with Chrome yet. |
| ||
By the way, if you are interested I can send you an access to it. |
| ||
Yes, I want to have a look. Send me, please. |
| ||
damn i get an error when i try to run the html5 app as a metro app. mainly its telling me that canvas object does not have getcontext() method. I'm assuming the canvas isn't being passed to that script like it would in a browser. I would love to get this to work in Metro because all the other html5 demo apps are slooooowwww when i port them into windows metro |
| ||
This works well, but it's making my app run in 1/2 resolution (but normal size.) - Odd! Any ideas? |
| ||
Hi Damien, Soon will be available a new version of the script. It’s will be absolutely new and fully rewritten version. Maybe, it will be able to solve your issue. Stay tuned. |
| ||
Update is available! List of changes: * Performance improvement (in some cases five times over improvement). * Rendering system was fully rewritten. Now, the script isn't based on WebGL2D and doesn’t emulate 2d context. It fully overrides all mojo graphics functions. * Now, Opera 12.x uses a 3d context * Script size was reduced |
| ||
Testing now! Thanks! [edit] Nice work! Sadly it is still rendering at 1/2 resolution for me: Take a look here: http://www.sturdygames.co.uk/GravityEd/index.htm Click the links at the top to select between this and normal canvas operation. Yours is fast as hell from tests, but still my graphics are blocky. [edit 2] Could this be related to mipmap/anistropic texturing settings? I just tried on a few other machines and only the 2 with ATI cards have this issue. |
| ||
Cygnus, I'm using Chrome in Windows 7 and didn't notice much of a difference between the two versions. This PC has an NVIDIA GeForce 8400 GS. |
| ||
Nice work! Sadly it is still rendering at 1/2 resolution for me: Take a look here: http://www.sturdygames.co.uk/GravityEd/index.htm ATI radeon 5450 here, works fine for both. |
| ||
@Cygnus It’s strange. I also have ATI card (ATI Radeon HD 5670), but I can't reproduce this issue. And now I don’t understand why it's happening. Can you send me screenshot with this issue, please? I suspect this issue connected with vertex shader initialization. But I’m not sure. Right now I'm working on preparation of the new version of Flixel for Monkey, therefore I can try to fix it only during next week. For now, I suggest to gather more information about this issue. Everyone who have similar issue, please tell me your OS and card model. @c.k. It not always will give performance improvement. It seems that your card is working very well with 2d context. @AdamRedwoods Thank you for information! |
| ||
Howdy! I'm running a HD4570 mobility (with catalist 12.4, newer versions are glitchy with Steam so I refuse to update.) I have tried every setting with the drivers and cannot get rid of this issue. Cheers for looking into it, no rush mind, the game runs flawlessly normally, just want to make use of any speed gains I can get :-) |
| ||
Hi! It seems I understand your issue. Try to do the following: Set #MOJO_IMAGE_FILTERING_ENABLED="false" in Monkey code. If this don't help try the next thing: 1. Download unminified script version here 2. Go to line 653 and replace gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR) by gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR) 3. Go to line 656 and replace gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_NEAREST) by gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST) 4. Go to lines 654 and 657 and comment gl.generateMipmap(gl.TEXTURE_2D); 5. Replace your minified script version with modified version |
| ||
None of that worked, but I found the issue! :-) gl.getParameter(gl.MAX_TEXTURE_SIZE); was returning 511 instead of 512, so my textures are literally loaded as 256x256. I changed line 168 to: gl2d.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE)+1; and now everything works fine :-) Glitch in my driver perhaps? |
| ||
Wow, that's an amazing performance increase for me :) Thank you |
| ||
Glitch in my driver perhaps? It seems to be true. Thanks for research. I've made a quick fix and update. But I think this behavior is incorrect and I'll change it. Wow, that's an amazing performance increase for me :) Thank you You are welcome! :) |
| ||
I finally got to testing this. I was busy looking for a way to disable the MOJO_IMAGE_FILTERING in HTML5, but turns out this is the way to do it :). Even increased the FPS a lil bit too. Exactly what we needed for Flixel :). |
| ||
Incredible work devolonter ! it speeds up everything, and open the possibilities for the rendering I want. Thank you. |
| ||
Update is available. Added compatibility with V65's app config settings system. |
| ||
This is awesome |
| ||
Update is available. Added support of reading/writing pixels. |
| ||
Hey man, nice work! I guess I've just found a little bug: gxtkGraphics.prototype.DrawLine = function(x1, y1, x2, y2) { if (mode !== MODE_NONE) renderPull(); renderPush(gl.LINES, 2); if (this.tformed) { var tx0 = x0, tx1 = x1; x1 = tx0 * this.ix + y1 * this.jx + this.tx; y1 = tx0 * this.iy + y1 * this.jy + this.ty; x2 = tx1 * this.ix + y2 * this.jx + this.tx; y2 = tx1 * this.iy + y2 * this.jy + this.ty; } buffer.vdata[buffer.vpointer] = x1; buffer.vdata[buffer.vpointer + 1] = y1; buffer.vdata[buffer.vpointer + 2] = 0; buffer.vdata[buffer.vpointer + 3] = 0; buffer.vdata[buffer.vpointer + 4] = x2; buffer.vdata[buffer.vpointer + 5] = y2; buffer.vdata[buffer.vpointer + 6] = 0; buffer.vdata[buffer.vpointer + 7] = 0; mode = MODE_NONE; } Monkey Runtime Error : ReferenceError: x0 is not defined |
| ||
Hi. Thanks for report. I've just fixed it. |
| ||
Thanks man! I found another issue, but this is simple, just change: x0 = tx0 * this.ix + y0 * jx + this.tx; y0 = tx0 * this.iy + y0 * jy + this.ty; With: x0 = tx0 * this.ix + y0 * this.jx + this.tx; y0 = tx0 * this.iy + y0 * this.jy + this.ty; |
| ||
Nice! Thank you very much! Script was updated. |
| ||
Update is available! 2x performance improvement for SetColor and SetAlpha. |
| ||
Thank you for making this and maintaining it. We are using it now with an indev project more sensitive to speed. |
| ||
Anyone have graphical problems when using texture atlases? We are using this method of texture atlases: http://www.monkeycoder.co.nz/Community/posts.php?topic=380 |
| ||
Update is available! * Important! This version is only compatible with V67 * Now script preloads all textures. Therefore, there might be a short pause before the game start * Added full support of CreateImage and WritePixels * In debug mode to the console was added notification. Now, if the script was connected successfully, it writes to the console "WebGL enabled" * Shaders loading was simplified * WebGL support detection was improved * IEWebGL support was disabled * Version tags were added to the repository * Updated demo * Fixed some bugs Note * For V65 and V66 versions use version v1.21 * For versions V64 and below use v1.11 Please, try new demo here! |
| ||
Wow, 3x speed increase for me, this is great work! :) I wonder if Mark would consider including it in Monkey, with your permission of course. |
| ||
Thanks! |
| ||
Update is available! * Work with resizable canvas was fixed * Small improvements |
| ||
I've just tried adding this to a working project, but when I change the html to use mojo.html.gl.min.js I get this error:Monkey Runtime Error : TypeError: Cannot call method 'IncLoading' of undefinedI am using v69 of Monkey, any ideas what the problem might be? |
| ||
Did you connect it like in post #10? http://www.monkeycoder.co.nz/Community/post.php?topic=3276&post=34392 |
| ||
I saw this a while ago, but never ended up testing it. I was missing out on a lot. This works great, and it's a lot faster when it comes to drawing a lot of images at once. Thanks for making this, Devolonter, now I don't have to rework how I render everything, just to get decent enough performance with HTML5 and JavaScript. Plus it's OpenGL, so if I want to use lower level commands, it's not as much of a pain to get things running on other platforms. Also rIKmAN, I don't know why it isn't working for you, but I'm using V69, and I'm having no issues. I'm even able to use 'Import' via Monkey to set it up. |
| ||
Yes I have changed the .html file to include the new .js file as per the instructions, and it worked fine before as I posted in this thread when I tried it back then (post #48). The project has grown since since then, though by no means is it a large project, and it compiles and runs fine in HTML5, Flash, GLFW and iOS and when using the standard Monkey generated .html file. It looks like it is trying to load something that isn't there, but if that was the case surely I would get errors when running it in other targets? I'm using a few modules: SpriterImporter, diddy.xml and autofit2, if that could be an issue? |
| ||
rIKmAN, can you send me your main.js file on email? |
| ||
Email sent to the address on your profile devolonter. |
| ||
Update is available! v1.32 * Improved texture loading * Added support of Discard method * Fixed possible bugs which caused crash of the application with an error: "Cannot call method 'IncLoading' of undefined" * Small improvements |
| ||
Where are the links as I would like to test this new version as I had the issues described. The ones in the OP still say 1.11 and 1.21? |
| ||
Versions 1.11 and 1.21 are only for using with old Monkey versions. Link to actual version will always be: https://raw.github.com/devolonter/mojo-html5-gl/master/mojo.html5.gl.min.js |
| ||
OK thanks for the info. Just tested it and I'm still getting the same error as before. Did you test with the project I sent you via email? EDIT: Scratch that it was me being an idiot - works fine - thank you :) |
| ||
works fine - thank you :) Nice! Glad to hear that :) |
| ||
My bad, I broke WritePixels in the previous update. I’ve just released a new version that fixes it: v1.32b |
| ||
This is brilliant! Added it to speed up TimelineFX in html5, and the performance boost is enormous (from laggy with one effect to unbreakable) and it worked right away, smooth. Thanks for the great work with this. |
| ||
Could this be extended to handle DrawPoly with a texture? Anyone know how? |
| ||
Raph, try adding this to your HTML5 GL javascript file below the existing DrawPoly function. I haven't tested it much as I don't use the method at all myself, but it seems to do the job:gxtkGraphics.prototype.DrawPoly2=function( verts,surface,srcx,srcy ){ if (!surface.image.complete) return; if (mode !== MODE_TEXTURED) { renderPull(); mode = MODE_TEXTURED; } var vertexCount = verts.length / 4 if (vertexCount < 3 || vertexCount > MAX_VERTICES ) return; renderPush(gl.TRIANGLE_FAN, vertexCount); var p = buffer.vpointer; for (var i = 0; i < vertexCount; i++) { var index = i*4 var px = verts[index] var py = verts[index+1] if (this.tformed) { var ppx = px px = ppx * this.ix + py * this.jx + this.tx; py = ppx * this.iy + py * this.jy + this.ty; } buffer.vdata[p] = px buffer.vdata[p+1] = py buffer.vdata[p+2] = (srcx+verts[index+2])/surface.image.meta_width; buffer.vdata[p+3] = (srcy+verts[index+3])/surface.image.meta_height; p += 4; } render.last.texture = surface.image.texture; } |
| ||
Strange... I thought it was added in the previous version. Well, it’ll be added in the next release. Temporary you can use muddy_shoes’ solution. It should work. |
| ||
@devolonter Am I missing something or should all these checks: if (mode !== MODE_TEXTURED) ...also include a check to see if the texture has changed? Like this: if (mode !== MODE_TEXTURED || surface.image.texture !== render.last.texture) |
| ||
It works! It does seem to have worse issues with alpha at the edges of polys than Windows, Mac, or Android does. (The pink is the Cls color, to track down that sort of thing). Going to have to overlap my polys more? Or could it be something like float precision? Hurray, my fancy 2d terrain works in a browser :) |
| ||
Another question/suggestion. I use direct gl calls alongside mojo and the current method for overriding getcontext breaks the opengl20 stuff. Replacing it with this seems to do the trick:canvas.getContext = (function(wgl2d) { return function(context) { if( context == "webgl" || context == "experimental-webgl"){ return wgl2d.gl; } return wgl2d.api; }; }(this)); |
| ||
Raph, are you texturing the grid from an atlas or from individual images? Unless you're not sharing vert positions and calculating them oddly it doesn't seem likely that the gaps are polygon seams. Far more likely to be atlas picking error. |
| ||
Yeah, it's an atlas. Bleah. I need to pad all the textures then. Hello, tedium. :) I'm using makeatlas, I don't think it does that automatically yet. Edit: confirmed it's the atlas. |
| ||
@muddy_shoes texture changing check is done in draw call. You can see it in renderPull function. Replacing it with this seems to do the trick Will be added in the next release. Thanks! |
| ||
wow i just switched to this, and all my stuff is still working fine :) |
| ||
Did someone got it working with drawing an image during the OnLoading event? Here it crashes. |
| ||
@MikeHart I'll look at it this weekend and try to make an update with all fixes. |
| ||
What the hell. This is the 3rd time I answer now. Thanks! Let's see if that disapears again, LOL. |
| ||
Sorry for delay. I’ve just released an update. All issues should be fixed. Changelog: v1.35 * Added textured DrawPoly support * Added support of async image loader * Fixed value returned by getContext function for webgl and expreimental-webgl contexts * Fixed issues with App.OnLoading event |
| ||
Thanks man, just tried it and it works like a charm! |
| ||
Hi, thanks for the update, I just tried with the async image loader and it does not work? it stops the image from downloading, any ideas? (Monkey v76a) Import mojo Class MyApp Extends App Implements IOnLoadImageComplete Field image:Image Method OnCreate() LoadImageAsync( "http://www.monkeycoder.co.nz/img/logo/cute/monkey1.png",1,Image.MidHandle,Self ) SetUpdateRate 60 End Method OnUpdate() UpdateAsyncEvents End Method OnRender() Cls DrawText "Hello World!",0,0 If image Then DrawImage image,DeviceWidth()/2,DeviceHeight()/2 End Method OnLoadImageComplete:Void( image:Image,path:String,source:IAsyncEventSource ) If image Then Print "OK!" Else Print "ERR" Self.image=image End End Function Main() New MyApp End |
| ||
@MikeHart glad to hear it! @CopperCircle server with files must have special headers for allowing cross-domain image loading. More info: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing Your code will work in 2d context as well, but it won’t in webgl because it requires more rights for texture binding. Also, script may work not properly with experimental Monkey versions, because I test code only with stable builds |
| ||
Thanks for the tip, didn't realise webgl needed more rights. |
| ||
Hi, can this be made to work with WebGL in IE11? |
| ||
Hi, WebGL support in IE is slightly incomplete, but this issue can be solved. I started to work on it, but currently it is not my priority task. Sorry. |
| ||
Thanks for the info. |
| ||
I also noticed that this module does not work with IE11. I would also like it if IE is supported. In the mean time I use this to disable WebGL for IE11. It checks if the user agent does not have the word "trident" in it. "trident" is only used in the IE11 user agent string. So it is a temporary fix until IE11 is supported.function init(id) { if (window.WebGLRenderingContext !== undefined) { if(navigator.userAgent.toLowerCase().indexOf('trident') === -1) { try { new WebGL2D(document.getElementById(id)); } catch (e) { } } } } |
| ||
Why doesn't Mark include this patch in all monkey releases again? |
| ||
Great work! @marksibly : Please have a look here! |
| ||
This patch is deprecated! There won’t be no updates, no bugfixes, no compatibility with new Monkey versions. How to add WebGL support for mojo now? I made new implementation of WebGL support for mojo in my Monkey fork - mungo. It’s a better implementation which gives ~10 time better performance than this patch and works in IE11. Here is a small demo. Now you can use these two methods to enable WebGL acceleration for your mojo projects: 1. Download and install mungo The fastest way to use new WebGL implementation for mojo is to download and install mungo. 2. Create custom HTML5 target If you don’t want to use mungo you can add WebGL support for mojo by following this short manual: 1. Create a new HTML5 target based on the standard HTML5 monkey target. 2. Rename directory of the new target. For example: html5_webgl 3. There, replace files in modules/native folder by files from mungo 4. Rename new target in TARGET.MONKEY file. For example: #TARGET_NAME="Html5 WebGL Game" 5. Copy-paste code from mojo.html5.webgl.js file into template/main.js file after //${TRANSCODE_END} line 6. Add #HTML5_WEBGL_ENABLED=True in template/CONFIG.MONKEY file |
| ||
Ah excellent - I've been missing this target in newer versions as I always tested using it, and now I can again. Thanks devolunter. |
| ||
Top stuff - Thanks. |
| ||
Was there ever a way to implement this now in the current version of monkey-x? |
| ||
@Neuro: Not sure about this, since I think Develonter abandoned it for normal Monkey (Mungo target may still work). But, if you're interested in WebGL, this module routes calls from Mojo 1 to Mojo 2. So, you'd get Mojo 2's OpenGL (WebGL on HTML5) code backing your game's graphics. And, you could use Mojo 2 features in your game. It's not the most efficient, but it gets the job done. |
| ||
@Neuro: The last time I tried Mungo, I could copy its HTML target simply over to Monkey X and it worked. Btw, I had initial success porting fE to mojo2 (aka fantomX) and the speed increase is awesome rendering wise. You will love it. At least I do! |
| ||
@immutable - thanks! Will have to check it out! @mike - cool, is there a fork for it now that i try out?? |
| ||
@Neuro: Sorry, not at the moment. I still need to convert a few functionalities and all the examples. |