trsh Posted June 30, 2016 Share Posted June 30, 2016 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> Quote Link to comment Share on other sites More sharing options...
catafest Posted June 30, 2016 Share Posted June 30, 2016 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 ? Quote Link to comment Share on other sites More sharing options...
trsh Posted July 1, 2016 Author Share Posted July 1, 2016 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 1, 2016 Share Posted July 1, 2016 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 Quote Link to comment Share on other sites More sharing options...
trsh Posted July 1, 2016 Author Share Posted July 1, 2016 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted July 1, 2016 Share Posted July 1, 2016 Can you make a screenshot or video there? I dont understand what are you talking about. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.