trsh

Canvas vs WebGL on webos2

Recommended Posts

Im doing pixi tests for WEBOS2. It's applications are besed on webkit, so basically it runs anything chrome can run.

I experience some strange issues with my app and PIXI:

1) When I force WebGLRenderer my fps goes to 52, but the rotating box Jitters/overdraws at corners and overall looks bad. Smoothie does not help

2) When I fore CanvasRenderer, the corners do not jitter and animate smooth, and the FPS is 43 (but looks better overall). 

How that can be?

Code :

 

<html>
<head>
  <meta name="viewport" content="user-scalable=no, initial-scale=1, minimal-ui, maximum-scale=1, minimum-scale=1">
	<title></title>
	<script type="text/javascript" src="js/pixi.min.js"></script>
  <script type="text/javascript" src="js/smoothie.js"></script>
  <script type="text/javascript" src="js/stats.min.js"></script>

	<style type="text/css">
		body, html {
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body>
  <script>

    var stats = new Stats();
    stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
    document.body.appendChild( stats.dom );

    //var interactive = true;
    var stage = new PIXI.Stage();

    var w = window.innerWidth;
    var h = window.innerHeight;

    var renderer = new PIXI.CanvasRenderer(w, h, {antialias:false});
    renderer.backgroundColor = 0x1099bb;
    document.body.appendChild(renderer.view);

    /*var smoothie = new Smoothie({
      engine: PIXI,
      renderer: renderer,
      root: stage,
      update: update,
      fps: 1,
      interpolate: true
    });*/


    var textureButton = PIXI.Texture.fromImage("http://pixijs.github.io/examples/_assets/BGrotate.jpg");
    var plane = new PIXI.Sprite(textureButton);

    plane.anchor.x = 0.5;
    plane.anchor.y = 0.5;

    plane.width = h - 100;
    plane.height = plane.width;

    plane.x = w / 2;
    plane.y = h / 2;

    stage.addChild(plane);
    var alphaDir = -1;
    //var start = 0;

    //update();

    //smoothie.start();
    requestAnimationFrame( update );

    // var button1 =
    function update() {
        //var progress = timestamp - start;
        //start = timestamp;
        //var deltaTime = progress/1000;
        stats.begin();
        plane.rotation += 0.03;
        plane.alpha = plane.alpha + 0.01 * alphaDir;
        if(plane.alpha < 0.01 || plane.alpha > 0.99) alphaDir *= -1;
        renderer.render(stage);
        requestAnimationFrame( update );
        stats.end();
    }

    </script>
</body>
</html>

 

Share this post


Link to post
Share on other sites
7 hours ago, catafest said:

sorry about my replay , but if you used some new javascript libs, why not try to be used with https://jsfiddle.net/. maybe something like online development.

this allow us to parse and give a good answer to you.

what do you think about that ?

Ok:

1) https://jsfiddle.net/x5amtvbw/ - here we go, simplified and ready.

2) I was more hopping for and theoretical advice, because, unless you own WebOS 2 hardware, you wont be able to experience the jitters etc. On my 2 PC's (high and low end) stuff runs smooth.

Theoretical advice is like: "That kas old web-kit, weblgl sucks there" or "Week gpu machines, tend to work better in cpu mode". But this is blah blah, I dont know those things.

Share this post


Link to post
Share on other sites

Hello, @trsh! 

CanvasRenderer isnt that good for big images on week devices, that's for sure. I just put them in separated canvas in background and it works just fine.

As for WebGL, I see you tried antialias:true; option but it didnt work for you. The thing is, in PIXIv3 by default that kind of texture have wrapMode=REPEAT , which may be the problem in your case. Try pixi-v4: https://github.com/pixijs/pixi.js/tree/dev/bin

Share this post


Link to post
Share on other sites
17 minutes ago, ivan.popelyshev said:

Hello, @trsh! 

CanvasRenderer isnt that good for big images on week devices, that's for sure. I just put them in separated canvas in background and it works just fine.

As for WebGL, I see you tried antialias:true; option but it didnt work for you. The thing is, in PIXIv3 by default that kind of texture have wrapMode=REPEAT , which may be the problem in your case. Try pixi-v4: https://github.com/pixijs/pixi.js/tree/dev/bin

" I just put them in separated canvas in background and it works just fine"

Can you explain a little bit more? What did you do/or suggest?

"Try pixi-v4: https://github.com/pixijs/pixi.js/tree/dev/bin"

Actually the results, in terms of jittering, are the same with antialias true and false. Antialias=true just makes sides smoother, not the transformation. I set it to false, because, I just tough that it would save some computing.

And same thing with pixi 4 and 3 (in terms of jittering) :/

Maybe WebOS2 has some older webkit, that hans't very good support for webgl.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.