make Two.js work with cocoon.js about two.js

[jonobr1]

Thanks for posting! I'm on the road today, but will take a look at this tonight. Just curious what does this have to do with cocoon.js? It sounds like these are issues independent of cocoon, right?

[BenjaminHorn]

The texts on the screenshot are maybe missleading. Android means running the code on Android through cocoonjs, and browser means running the very same code on desktop / latest chrome.

To the second issue: if i use mouse events:

    var vmousedown = false;
    var mouseX, mouseY;
    var deltaX_old = 0;
    var deltaY_old = 0;
    var deltaX,deltaY;

    elem.addEventListener("mousedown", function(ev)
    {
        vmousedown = true;
        mouseX = ev.pageX;
        mouseY = ev.pageY;

    });

    elem.addEventListener("mousemove", function(ev)
    {
        if (vmousedown === false)
            return;
        deltaX = ev.pageX - mouseX - deltaX_old;
        deltaY = ev.pageY - mouseY - deltaY_old;

        pan(deltaX,deltaY);

        deltaX_old = ev.pageX - mouseX; 
        deltaY_old = ev.pageY - mouseY;
    }); 

    elem.addEventListener("mouseup", function(ev)
    {
        vmousedown = false;
        deltaX_old = 0;
        deltaY_old = 0;

    });

on the desktop browser is everything ok, but running it on cocoonjs / android with the touch events causes that weird result.

One could think maybe it cocoonsjs's fault, but if i draw this primitives for instanse with pixi.js (2D webgl framework), then it works fine.

[jonobr1]

Interesting, thanks for further context. I won't have access to Android until tomorrow, but I will definitely try to run your example with the cocoon.js adk debug build. Until then, I added a fix so that you'll be probably able to request antialias. Try this and let me know if this fixes the first problem:

var two = new Two({ type: Two.Types.webgl, antialias: true });
// Run code as usual

My guess is that when you're dragging or possibly at all times the gl context is getting confused on what to keep on screen and what if anything to clear. Keep you posted.

[BenjaminHorn]

Thanks for the fix.

var two = new Two({ type: Two.Types.webgl, antialias: true });
console.log(two.antialias);

gave me false with the old build, with the patch its true, as expected. Unfortuneatly the cricle is still edgy on droid.

[jonobr1]

Cool thanks for the update. I'm digging into the ADK of cocoon.js today so hopefully I can help out with some answers or fixes!

[jonobr1]

Download the latest build of two.js — this should fix both your problems 👍

To note, the aliased effect was actually due to the buffer not being cleared. So, by default you shouldn't have to set antialias to true in order to get smooth edges. Don't hesitate to let me know if there's anything else that comes up.

I also put up a test that I've been running to debug here: canvas • webgl

[BenjaminHorn]

thank you!! That was quick;). The dragging works excellent, but unfortunetly i still have same aliased circle. Could you please post an android screenshot from the antialiased circle? What device do you use?

[jonobr1]

Ah, I see you're right. Here's a screenshot from my Nexus 7. Unfortunately this has to do with devicePixelRatio. Two.js automatically tries to upsample your canvas for you based on hdpi, but it looks like Cocoon doesn't have those variables available for reading so it always defaults to 1 instead of what could be a higher ratio like 2.

You can set the ratio yourself in two.js. I tried that and it doesn't seem to help as Cocoon doesn't resolve as expected. Typically when upsampling you would do something like this with your canvas:

// Where ratio can be equal to or larger than 1
canvas.width = x * ratio;
canvas.height = y * ratio;
canvas.style.width = x + 'px';
canvas.style.height = y + 'px';

This effectively stuffs more pixels per "pixel". When setting canvas.width and canvas.height Cocoon just makes the whole canvas that size...

[BenjaminHorn]

According this : http://wiki.ludei.com/cocoonjs:releases they Added “window.devicePixelRatio” and “screenDensity” in version 1.4 Tomorrow im gonna continue to investigate this.