Mojo HTML5 GL

Monkey Programming Forums/User Modules/Mojo HTML5 GL

devolonter(Posted 2012) [#1]
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


muddy_shoes(Posted 2012) [#2]
Nifty. Thanks for sharing. Are any of the issues without known solutions or is it just a matter of time/effort?


FelipeA(Posted 2012) [#3]
Really nice! it's very notorious the difference. I do hope the known issues get fixed as I use SetScissor a lot.
Thanks!


devolonter(Posted 2012) [#4]
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.


AdamRedwoods(Posted 2012) [#5]
pretty cool! should be able to blend this and 3d.


devolonter(Posted 2012) [#6]
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.


FelipeA(Posted 2012) [#7]
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!


devolonter(Posted 2012) [#8]
Hmm. I think it was a mistake to place this topic in User Modules. Can someone move it in HTML5, please?


Paul - Taiphoz(Posted 2012) [#9]
holy crap.. the difference for me is crazy, is mark planning to implement this anyone know ?


devolonter(Posted 2012) [#10]
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! :)


outsider(Posted 2012) [#11]
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 ;)


devolonter(Posted 2012) [#12]
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]


outsider(Posted 2012) [#13]
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


devolonter(Posted 2012) [#14]
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.


outsider(Posted 2012) [#15]
This is normal behavior without a server.

Ok, thanks.


devolonter(Posted 2012) [#16]
Update is available!

* All known issues were resolved
* IEWebGL and Chrome Frame support added
* Bug fixes

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


Fred(Posted 2012) [#17]
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 :)


devolonter(Posted 2012) [#18]
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.


Fred(Posted 2012) [#19]
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.


Fred(Posted 2012) [#20]
By the way, if you are interested I can send you an access to it.


devolonter(Posted 2012) [#21]
Yes, I want to have a look. Send me, please.


Landon(Posted 2012) [#22]
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


Cygnus(Posted 2012) [#23]
This works well, but it's making my app run in 1/2 resolution (but normal size.) - Odd! Any ideas?


devolonter(Posted 2012) [#24]
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.


devolonter(Posted 2012) [#25]
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



Cygnus(Posted 2012) [#26]
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.


c.k.(Posted 2012) [#27]
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.


AdamRedwoods(Posted 2012) [#28]
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.


devolonter(Posted 2012) [#29]
@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!


Cygnus(Posted 2012) [#30]
Howdy!

I'm running a HD4570 mobility (with catalist 12.4, newer versions are glitchy with Steam so I refuse to update.)

<-NORMAL MODE

<-USING YOUR LIB.

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 :-)


devolonter(Posted 2012) [#31]
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



Cygnus(Posted 2012) [#32]
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?


Raz(Posted 2012) [#33]
Wow, that's an amazing performance increase for me :) Thank you


devolonter(Posted 2012) [#34]
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! :)


Neuro(Posted 2012) [#35]
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 :).


Fred(Posted 2012) [#36]
Incredible work devolonter ! it speeds up everything, and open the possibilities for the rendering I want. Thank you.


devolonter(Posted 2012) [#37]
Update is available. Added compatibility with V65's app config settings system.


Risc(Posted 2012) [#38]
This is awesome


devolonter(Posted 2012) [#39]
Update is available. Added support of reading/writing pixels.


rickomax(Posted 2012) [#40]
Hey man, nice work!

I guess I've just found a little bug:

format_code('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


devolonter(Posted 2012) [#41]
Hi. Thanks for report. I've just fixed it.


rickomax(Posted 2012) [#42]
Thanks man!

I found another issue, but this is simple, just change:
format_code(' x0 = tx0 * this.ix + y0 * jx + this.tx;
y0 = tx0 * this.iy + y0 * jy + this.ty;')

With:
format_code(' x0 = tx0 * this.ix + y0 * this.jx + this.tx;
y0 = tx0 * this.iy + y0 * this.jy + this.ty;')


devolonter(Posted 2012) [#43]
Nice! Thank you very much! Script was updated.


devolonter(Posted 2012) [#44]
Update is available!

2x performance improvement for SetColor and SetAlpha.


Soap(Posted 2012) [#45]
Thank you for making this and maintaining it. We are using it now with an indev project more sensitive to speed.


Soap(Posted 2013) [#46]
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


devolonter(Posted 2013) [#47]
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!


rIKmAN(Posted 2013) [#48]
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.


MikeHart(Posted 2013) [#49]
Thanks!


devolonter(Posted 2013) [#50]
Update is available!

* Work with resizable canvas was fixed
* Small improvements



rIKmAN(Posted 2013) [#51]
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:
format_code('Monkey Runtime Error : TypeError: Cannot call method 'IncLoading' of undefined')I am using v69 of Monkey, any ideas what the problem might be?


MikeHart(Posted 2013) [#52]
Did you connect it like in post #10?

http://www.monkeycoder.co.nz/Community/post.php?topic=3276&post=34392


ImmutableOctet(SKNG)(Posted 2013) [#53]
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.


rIKmAN(Posted 2013) [#54]
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?


devolonter(Posted 2013) [#55]
rIKmAN, can you send me your main.js file on email?


rIKmAN(Posted 2013) [#56]
Email sent to the address on your profile devolonter.


devolonter(Posted 2013) [#57]
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



rIKmAN(Posted 2013) [#58]
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?


devolonter(Posted 2013) [#59]
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


rIKmAN(Posted 2013) [#60]
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 :)


devolonter(Posted 2013) [#61]
works fine - thank you :)

Nice! Glad to hear that :)


devolonter(Posted 2013) [#62]
My bad, I broke WritePixels in the previous update. I’ve just released a new version that fixes it: v1.32b


Tibit(Posted 2013) [#63]
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.


Raph(Posted 2013) [#64]
Could this be extended to handle DrawPoly with a texture? Anyone know how?


muddy_shoes(Posted 2013) [#65]
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:

format_code('
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;
}
')


devolonter(Posted 2013) [#66]
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.


muddy_shoes(Posted 2013) [#67]
@devolonter

Am I missing something or should all these checks:

format_code('if (mode !== MODE_TEXTURED)')

...also include a check to see if the texture has changed? Like this:

format_code('if (mode !== MODE_TEXTURED || surface.image.texture !== render.last.texture)')


Raph(Posted 2013) [#68]
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 :)


muddy_shoes(Posted 2013) [#69]
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:

format_code('
canvas.getContext = (function(wgl2d) {
return function(context) {
if( context == "webgl" || context == "experimental-webgl"){
return wgl2d.gl;
}
return wgl2d.api;
};
}(this));
')


muddy_shoes(Posted 2013) [#70]
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.


Raph(Posted 2013) [#71]
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.


devolonter(Posted 2013) [#72]
@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!


Salmakis(Posted 2013) [#73]
wow i just switched to this, and all my stuff is still working fine :)


MikeHart(Posted 2013) [#74]
Did someone got it working with drawing an image during the OnLoading event?

Here it crashes.


devolonter(Posted 2013) [#75]
@MikeHart I'll look at it this weekend and try to make an update with all fixes.


MikeHart(Posted 2013) [#76]
What the hell. This is the 3rd time I answer now.

Thanks!

Let's see if that disapears again, LOL.


devolonter(Posted 2013) [#77]
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



MikeHart(Posted 2013) [#78]
Thanks man, just tried it and it works like a charm!


CopperCircle(Posted 2013) [#79]
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)

format_code('
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
')


devolonter(Posted 2013) [#80]
@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


CopperCircle(Posted 2013) [#81]
Thanks for the tip, didn't realise webgl needed more rights.


CopperCircle(Posted 2013) [#82]
Hi, can this be made to work with WebGL in IE11?


devolonter(Posted 2013) [#83]
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.


CopperCircle(Posted 2013) [#84]
Thanks for the info.


Shockblast(Posted 2013) [#85]
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.

format_code('
function init(id) {
if (window.WebGLRenderingContext !== undefined) {
if(navigator.userAgent.toLowerCase().indexOf('trident') === -1) {
try {
new WebGL2D(document.getElementById(id));
} catch (e) { }
}
}
}
')


StoneFaceEXE(Posted 2014) [#86]
Why doesn't Mark include this patch in all monkey releases again?


Sphinx(Posted 2014) [#87]
Great work!

@marksibly : Please have a look here!


devolonter(Posted 2014) [#88]
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



rIKmAN(Posted 2014) [#89]
Ah excellent - I've been missing this target in newer versions as I always tested using it, and now I can again.

Thanks devolunter.


Whiteball(Posted 2014) [#90]
Top stuff - Thanks.


Neuro(Posted 2015) [#91]
Was there ever a way to implement this now in the current version of monkey-x?


ImmutableOctet(SKNG)(Posted 2015) [#92]
@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.


MikeHart(Posted 2015) [#93]
@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!


Neuro(Posted 2015) [#94]
@immutable - thanks! Will have to check it out!

@mike - cool, is there a fork for it now that i try out??


MikeHart(Posted 2015) [#95]
@Neuro: Sorry, not at the moment. I still need to convert a few functionalities and all the examples.