Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

CocoonJS now capable in 2.0.alpha

JCPalmer

By JCPalmer,
in Questions & Answers

 Share

Recommended Posts

JCPalmer Newbie

JCPalmer

Posted
Posted

I finally got around to taking out the main road block right at the front door, which kept BabylonJS from being used in CocoonJS.  Mind you, the same launch HTML you are using for desktops is probably not going to work.  A good idea would be to move as much javascript as possible out the .html file into a .js library file, if you wish to run on both.

 

A few other notes, before I show you the HTML I have been using:

  • Get the most recent version of the Launcher (a sandbox / tester app from either the iOS Store, Google Playstore, or Amazon store).  It has changed in the last 2 weeks.
  • You need to get an ID from the website in order to run more than just the canned samples, of which there are none with BabylonJS.
  • I got a 7600 vertex Correction: (1636 BJS vertices / 9792 indices, 7600 was Blender Tris) mesh & lamp with a 4096 shadow map to run on my Samsung Galaxy S3.  It briefly got 15 frames / sec, but settled to 10-11.  Turned off CPU powersaver, but no change.  Must be GPU bound.  I did not even know it had a proper GPU.  So stuff of meaningful size will actually run on 2.5 year old phones.  Did get a little yellow warning sign inside the FPS thing.  Do not know the specific reason, probably "Stop beating the shit out of your phone!"
  • I got a .babylon file to load as well, but have not tested that recently.
  • CSS based things in BabylonJS, e.g. VirtualJoystickCamera. are unlikely to work

Some useful links of capabilities are:

http://support.ludei.com/hc/en-us/articles/200807787-HTML5-feature-list

http://doc.ludei.com/3.0.0/Cocoon.html

 

The html used, below, basically uses a <meta> tag set the viewport to the fully size of the display, and force the hardware scaling level to be 1.  The script creates the canvas, assigns it the size of the display, and preemptively creates a throw away webgl context, which fixes the size before BabylonJS is started.  After the engine is instanced, the new size() method is called to undo the problems made by the resize() method , called in the constructor.

 

One final note,  notice my attempts to exercise any of the Cocoon API failed, and they are commented out below.  Have no idea what is wrong.  Even Cocoon.version does not work.  Enjoy!

<html><head>    <meta charset="UTF-8">    <title>mesh_parent</title>    <!-- edit path - name of babylon & morph libraries as required -->    <script src="./lib/babylon.js"></script>    <script src="./lib/morph.js"></script>    <script src="./TOB-out/mesh_parent.js"></script>    <script src="./lib/mesh_parent_common.js"></script>    <meta name="viewport"           content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"></head><body><canvas id="renderCanvas"></canvas><script>        var canvas = document.getElementById("renderCanvas");        canvas.screencanvas = true;        var width  = window.devicePixelRatio * window.innerWidth;        var height = window.devicePixelRatio * window.innerHeight;        canvas.width = width;        canvas.height = height;        canvas.getContext("webgl"); // preemptively create a device sized, webgl context; only 1 is ever created         var engine = new BABYLON.Engine(canvas, true);        console.log("Babylon version:  " + BABYLON.Engine.Version);        if (typeof(MORPH) !== "undefined") console.log("Morph version:  " + MORPH.Mesh.Version);        engine.setSize(width, height);//        console.log("Cocoon version:  " + Cocoon.version);        var scene = new BABYLON.Scene(engine);        materialsRootDir = "./TOB-out"; // edit when texture files in a different dir than html        mesh_parent.initScene(scene, materialsRootDir);        scene.activeCamera.attachControl(canvas);        engine.runRenderLoop(function () {            animate(scene);            scene.render();        });        //app activation/*        Cocoon.App.on("activated", function(){            if (typeof(MORPH) !== "undefined")  MORPH.Mesh.resumeSystem();        });        //app Resume        Cocoon.App.on("suspending", function () {            if (typeof(MORPH) !== "undefined")  MORPH.Mesh.pauseSystem();        });*/</script></body></html>
Link to comment
Share on other sites
JCPalmer Newbie

JCPalmer

Posted
  • Author
Posted

Well, I knew I just had to be doing something wrong, when none of my cocoon specific code would run.  It seems these are called plug-ins.  A link for the repository for them is https://github.com/ludei/CocoonJS-Plugins/.  Guess I'll have to include the .js here.

 

Also, I have been concentrating mostly on getting BJS to run, and until it did I never approached their website from a "Everything is going to work, what do I do?".  Mostly searches .  

 

But there is a higher level link in the support area than one I listed in the first post.  It is the root of the website as far as I am concerned.  http://support.ludei.com/hc/en-us/ .  I think you could round and round the all day with the site, and not link to here.  Seems like just endless marketing BS.  The How to Use page, does not even have a link to this.

 

Anyway, found it now.  Even BJS has that marketing site.  Have not gone to it since the first day, but I am pretty sure it points to GitHub.

Link to comment
Share on other sites
Ludei Newbie

Ludei

Posted
Posted

Hello, 

 

Sorry for the late response. In fact, if you want to use our plugins, you just need to include this file: https://github.com/ludei/cocoonjs-plugins/blob/master/build/cocoon.js . It includes all the library. 

Here it is the full documentation of the plugins in case you want to have a look at it: http://doc.ludei.com/3.0.4/

 

Regards. 

Link to comment
Share on other sites
  • 5 months later...
Temechon Newbie

Temechon

Posted
Posted

Update for version 2.1-beta : 

 

window.devicePixelRatio is already taken into account in engine.setSize : 

var canvas          = document.getElementById(canvasId);canvas.screencanvas = true;var engine         = new BABYLON.Engine(canvas, true);engine.setSize(window.innerWidth, window.innerHeight);
Link to comment
Share on other sites
JCPalmer Newbie

JCPalmer

Posted
  • Author
Posted

I was just looking into this.  Am having problems picking when hardware level is not 1.  Fortunately I have a retina iPad Air 2 where the hardware level gets set to 0.5 so I can test this.  I have overridden this with a line in html:

engine._hardwareScalingLevel = 1;

My cocoon html version of my dialog test scene now works in Safari and in Cocoon launcher Webview & Webview+, but not canvas+.  Then it only sizes correctly for single camera.  When using the 2nd, orthogonal camera, the form is way too large.  So it looks like I have 2 problems.

 

I do not see the method setSize() did anything different in 2.1.  Also please post the entire html template.

 

Thanks,

 

Jeff

Link to comment
Share on other sites
Temechon Newbie

Temechon

Posted
Posted

Yes, something changed from babylon side, but I don't know where... To work with two cameras, I had to update this line in Scene.createPickingRay, and now it works with all pixelRatio : 

return BABYLON.Ray.CreateNew(x / window.devicePixelRatio, y / window.devicePixelRatio, viewport.width, viewport.height, world ? world : BABYLON.Matrix.Identity(), camera.getViewMatrix(), camera.getProjectionMatrix());
Link to comment
Share on other sites
JCPalmer Newbie

JCPalmer

Posted
  • Author
Posted

Well, Had to do a spreadsheet of things.  All tests were done with 2.1-beta.  Upshot is:

  • Canvas+ never works picking.
  • Webview now works with 2.1-beta using html intended for a browser.  Pretty sure this was not always the case.
  • Things are always grainy using the cocoon html with the viewport setting in the html header, at least on a retina display.
  • setting _hardwareScalingLevel = 1 is needed for picking when setting viewport in html.
  • Temechon's html change also sizes the scene correctly using the 2nd camera.

post-8492-0-32580200-1429210409.png

 

Think I am going to try 2 routes:

  • same set of changes taking the scaling out of the viewport settings in header.  See how it works & affect grainyness.
  • Changing Engine to work with Canvas+ & browser based html, with no explicit viewport setting / context sizing.  This first attempt at integration, was just to get something to work.  Looks like more is required.
Link to comment
Share on other sites
JCPalmer Newbie

JCPalmer

Posted
  • Author
Posted

Ok, well I just put in a PR to change Engine.  Here is the comment on the commit:

 

Allow Engine to run for CocoonJS with standard html, including devices where the hardware scaling != 1.

By standard, no viewport meta setting in header, making a presized,throw away webgl context, or calling setSize().

 

So all the html shown at the top of this post is no-longer necessary!  I still have a problem with picking in canvas+, but it is no-longer a Blank screen when running html meant for a browser, & resolution is rgeat.

 

I also see another problem: no alpha.  When the snap below is shown on Canvas+, the olive (.3 alpha black, over yellow) shows as solid black.  Do not think this should be a BabylonJS problem.  Probably should open an issue on their site.  Could be a problem as I do not have a place to host other than Google Drive.  The picking might be us still.  Anybody got an idea of a test I can put into html?  Want to get any fixes into 2.1, if possible.

 

post-8492-0-64741800-1429219795.png

 

 

Link to comment
Share on other sites
JCPalmer Newbie

JCPalmer

Posted
  • Author
Posted

Ok, on the pick front:

 

CocoonJS says they supports adding these listeners on the canvas:

addEventListener
  'mousedown'
  'mousemove'
  'mouseup'
  'mouseout'
  'touchstart'
  'touchend'
  'touchmove'
  'touchcancel'

 

BUT, mousedown listeners never actually get called, but touches do.  I put this into the html.  I only get console messages for touches:

var canvas = document.getElementById("renderCanvas");        var touchDown = function (evt) {    var touchobj = evt.changedTouches[0] // reference first touch point (ie: first finger)    console.log("touch down: x- " + touchobj.clientX + " , y- " + touchobj.clientY);};canvas.addEventListener("touchstart", touchDown, false);        var mouseDown = function (evt) {    console.log("mouse down: x- " + evt.clientX + " , y- " + evt.clientY);};canvas.addEventListener("mousedown", mouseDown, false);

If I run under Safari, or webview in CocoonJS appLauncher, picking works.  This seems to point the issue as being with canvas+.  Simply adding hand.js is not a possibility, since it errors in line 419 of hand-1.3.8.js, referencing an HTMLBodyElement.  This does not exist in canvas+.

 

I think I will try to put a modified version of the TouchCamera into the dialog extension, which will be the system camera.  This would mean that on canvas+ that you would be forced to use the 2nd camera.

Link to comment
Share on other sites
Temechon Newbie

Temechon

Posted
Posted

Just found today how to include a custom font in cocoon. Just include this in your 'head' tag in the HTML page : 

<style>   @font-face { font-family: 'digitalism'; src: url('fonts/digitalism.ttf'); }</style>

The font should be in a folder 'fonts' at the project root. All fonts are loaded at the app start by cocoon, so they can be used in a dynamicTexture for example.

 

(Sorry to hijack your thread JC, but maybe it can be useful for you or somebody else).

Link to comment
Share on other sites
JCPalmer Newbie

JCPalmer

Posted
  • Author
Posted

Temechon, the hand customization worked right out of the box!  Something still seems wrong when a "universal" tool has to customized, but I'll try not to think about it.  As far as re-using this thread, no problem.  The main first post is now obsolete with the changes in 2.1 though.  Was thinking about what to do about it:  change title (if possible), delete the custom .html of first post, etc.

 

The whole mobile BabylonJS application area is in a very raw state.  CocoonJS seems clearly the development tool of choice.  I pasted the url of your hand.js in an added script tag, then picked up the tablet and ran it (will not publish like this).  The alternative BabylonHx porting approach seems long and requires SDKs.  Using Safari / Chrome for development first seems like a big risk that it might not work once ported.  If you are using features not on a desktop like a device orientation camera or cordova you could be in deep trouble.

 

CocoonJS does not have support for Web Audio API in Canvas+, nor web workers (hack https://github.com/Ezelia/CocoonJS-WebWorker), so no clear winner yet.

Link to comment
Share on other sites
  • 2 weeks later...
JCPalmer Newbie

JCPalmer

Posted
  • Author
Posted

Your wish is my command.  I really do not have time to build an account and figure out how to do all the submission stuff @codeplex.  Here is what Temechon commented out converted into if (!navigator.isCocoonJS){bad stuff for canvas+} blocks.

 

I used Netbeans to do the editing, since there are also unrelated blocks commented out too, & Netbeans is good a diffing any 2 unrelated files.  The reason I mention this is the .js editor also gave 18 warnings about deficient equality test, e.g. != vs !==, and missing ';'

 

I did not want to make the changes, so just an FYI.  The lines in error:

 

bad equality: 19, 21, 151, 318, 374, 398, 492, 502, 515, 723

missing ';': 44, 254, 491, 581, 599, 640, 692, 707

 

hand-1.3.9.txt

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...