I have this codepen that I made into a website. My problem is that it performs really slowly on the Chrome browser on my Nexus 5X phone, but when I rotate the screen to horizontal view or when I view the CodePen it runs smoothly again.
I've tried reversing the width and height to see if it was a screen / window height problem, and I've tried decreasing the height by a lot but it still is the same.
Will someone who is more experienced in webgl or three please explain this to me?
function init() {
scene = new THREE.Scene();
height = window.innerHeight;
width = window.innerWidth;
aspectRatio = width / height;
// ...
}
You may need to include some resizing logic in your render loop since the initial window size may change after loading (i.e. when rotated).. and if the window size changes but the renderer is not resized, then the renderer will be rendering to a nonintuitive framebuffer size and may cause problems when trying to scale the output to the actual display.
Edit:
I'm just throwing out guesses. :D And you make good points...
I do see that TODO line 36 Of your index.js.. which could cause problems.. Aside from that everything else in there looks legit to me.
Resizing logic can be tricky, because depending on CSS etc. setting the renderer size, can cause a pathological cascading resize since setting the renderer size, changes the camera size, which can cause a layout change.. and in some strange circumstances can cause small resizes to happen constantly.
Another way to check if this is the problem, is just make your renderer a fixed size square in your init... like 256x256 or something.. and comment out the window.resize listener.. .run that on your phone and see if performance stays consistent on rotations... fwiw, I think i see the issue on my Galaxy S5.. in horizontal mode its super liquid but vertical mode.. seems a little pokey.
Hey are you using PMREMGenerator at all in the code?
I've noticed that using this to generate environment maps really chuggs on the phones in portrait mode
Related
I'm using Swiffy to render onto a hidden canvas so that I can take the result and use it elsewhere. The problem I'm running into is that when I resize the container div for Swiffy it won't make the actual canvas any bigger than the available viewport size. If I set the dimensions of the Swiffy div larger than the viewport then the canvas will only get as big as the viewport - it doesn't want to put any part of the canvas offscreen.
I'm sure this is for efficiency, there's no reason to render something if it's offscreen normally, but I need to have Swiffy render it all the time, at whatever size I want.
Additionally, Swiffy just plain refuses to do anything if the Swiffy container div isn't attached to the DOM. (Forces the canvas to have a width and height of 0).
Is there a way around this without having to dig into the (obfuscated) Swiffy client runtime and modify it? How can I trick Swiffy into rendering larger than the viewport size?
Edit: I was actually able to trick swiffy into rendering larger than the viewport by changing window.innerWidth to whatever I want. That's a really ugly hack though and I hate to overwrite that as it causes a lot of issues.
If your swiffy runtime version is 7.3, you can hack the js directly.
Just remove or comment "b.xj(c);" in g.Tp() function. I don't care any advantage of offscreen rendering. At least, it works now.
I think it's a serious bug.
Note that it's good in iframe, no need to hack.
The only way I could figure out how to do it is to edit the Swiffy runtime and replace all instances of window.innerWidth and window.innerHeight with whatever size I wanted.
No ill side affects that I could see, though this is obliviously less than ideal.
If someone comes up with a better solution I'll absolutely accept it.
If i get the problem correctly, for rendering larger than the original swiffy you can put swiffy in a div and scale it
To have swiffy restrict to its original output scale as from flash, you can place it in an iframe
I am using JVectorMap to create a map Page on my Website. However I found that the scrolling zoom speed is much to slow. How do I adjust the scroll speed? There is no documentation for this issue. I found this:
zoomStep: 1.6,
This is however to specify the zoom step for the buttons, not the scrolling.
Another issue that I have found is that I cannot set the height of the Map Container to:
window.innerHeight;
But i can however set the width to:
window.innerWidth;
How can I specify to Height of the Map container to be in relation to the Window size? I've also tried using a % value.
Thank you
this might be quite late answer, even might have been already answered somewhere.
But i got the same problem with mouse scroll speed and found the solution.
It can be fixed in js file in line 2382
zoomStep = Math.pow(1.003, event.deltaY);
You can easily change speed by changing that "1.003" value. More you make it - faster the scroll is.
I didnt fully understand the second problem of yours. But if it is about container height, I just use % values for the height. Make sure your parent has some height value as well.
Re. the scroll speed I agree that it is far too slow in 2.0.1.
I had a look into the js file and found some comments on line 234 - " If this is an older event and the delta is divisable by 120, then we are assuming that the browser is treating this as an older mouse wheel event and that we should divide the deltas by 40 to try and get a more usable deltaFactor. Side note, this actually impacts the reported scroll distance in older browsers and can cause scrolling to be slower than native. Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
On line 113 you will find the adjustOldDeltas set as true. I have set it as false but no change in the scroll speed.
Hopefully this works for you or gives you enough to explore the issue further.
W.
I got problem on Android Tablet (Galaxy Tab 2). When having a big image, and using paper.js to draw paths on it, everything is fine, but when I zoom the image (only if it is big enough), paper.js stops drawing paths on a certain width and height... the image on canvas is still being displayed (background-image with width and height set to 100%), but it seems that paper.js is unable to draw farther than some width and height. Any idea what is going on or how to fix it?
If something isn't well explained, please give me feedback. I really need to get it working. Today.
I got my KineticJS game working inside CocoonJS quite nicely, except scaling the canvas. I have 1024x768 canvas, which is great for iPad 2. But for iPad 4, due to retina screen, the game takes only 1/4th of the screen.
CocoonJS says this about the scaling:
CocoonJS automatically scales your main canvas to fill the whole screen while you still
continue working on your application coordinates. There are 3 different ways to specify how
the scaling should be done:
idtkScale
'ScaleToFill' // Default
'ScaleAspectFit'
'ScaleAspectFill'
canvas.style.cssText="idtkscale:SCALE_TYPE;"; // The SCALE_TYPE can be any of
the ones listed above.
I have tried this adding this:
layer.getCanvas()._canvas.style.cssText='idtkScale:ScaleAspectFit;';
But it is not working. Any idea how to get KineticJS created Canvases to scale in CocoonJS?
When dealing with making a canvas object full screen if on mobile. In CocoonJS this feature is out of the box. So we patched the code to set
document.body.style.width
and
document.body.style.height
These are DOM related and not supported (nor needed on full screen mode). Also code related to canvas style and position was patched, since it isn’t needed.
For now on, the correct way of getting screen size is
window.innerWidth
and
window.innerHeight
To make your Canvas objects full screen, set
canvas.width= window.innerWidth; canvas.height= window.innerHeight
One thing you must know about CocoonJS is that you don’t have to change your canvas size to make it run fullscreen. CocoonJS will up/down scale your canvas and have correct touch coordinates sent. You could choose how you’d like your canvas to be scaled, either keeping aspect ratio or not, and also if you want to have no blurring filter applied to the scaling operation, which comes handy for games relying on pixel art. Refer to the official CocoonJS Wiki pages to know how to control scale operations.
REFERENCE
http://blog.ludei.com/cocoonjs-a-survival-guide/
Okay, I found an answer to this question myself and since there are so many up votes, I want to share the solution.
The solution was to comment some code within KineticJS and then add the CocoonJS scaling to the canvas creation.
Comment these lines (not all at one place):
inside _resizeDOM:
this.content.style.width = width + PX;
this.content.style.height = height + PX;
inside setWidth of Canvas:
this._canvas.style.width = width + 'px';
inside setHeight of Canvas:
this._canvas.style.height = height + 'px';
Add this inside Canvas prototype init:
this._canvas.style.idtkscale = "ScaleAspectFill";
This does the trick for me. Now what I do is I calculate the correct aspect ratio for the canvas and let CocoonJS scale it for me. Hope this is as useful for others as it has been for me!
jsfiddle: http://jsfiddle.net/UenFN/. Notice the slight, brief pixelation after the animation. This error only happens in WebKit browsers.
Using jQuery, I have an image resize into a smaller one. The new dimensions are precisely half of the old ones. Right after resizing, however, the image appears slightly pixelated, then about 2 seconds later it looks better.
How can I fix this problem?
EDIT: Still no progress. Any idea is appreciated.
The solution is to enable the Hardware Acceleration in Webkit.
img {
-webkit-transform: translate3d(0, 0, 0);
}
I have a small library which resize image and HTML to always fit the parent div. Safari bugged me with its own unique way to do a quick and dirty pass before doing the bicubic one. Forcing the hardware acceleration solved the issue, In my case as I do a lot of resizing I do notice some performance degradation yet in the end the overhaul result is more appealing.
You can test this fix here: http://www.visualfox.me/app/nanjing-2014
Under Safari the image used as a mask is never pixelated, regardless of the resizing, upscale or downscale (just resize the browser to test it). You can compare that with this other demo which doesn't use the fix: http://www.visualfox.me/app/bold
Notice how the logo is temporally pixelated when you resize the browser.
my! enjoy!
I discovered that the only time it does not do it is when the size upon completion is the native image size.
from 150 to 300 pixels, no pixelation...
http://jsfiddle.net/UenFN/1/
and from 450 to 300 pixels, still no pixelation...
http://jsfiddle.net/UenFN/2/
So the fix, or workaround, would be to make sure your final size is the native image size wherever possible.
You could use an image appropriate to the dimensions you are going for.
If you can't do that then you could use a callback method to replace the resized image with an image that is the size of the new dimensions. What you are doing is no different than stretching an image (in fact thats exactly what you're doing) so there is going to be pixelation.
In order to fix this, I inserted the same image a second time, but with the dimensions I want to use. At the millisecond after the animation, I replace the main image with the previously hidden image.
jsfiddle: http://jsfiddle.net/wLwrc/1/
Solved in 2013. https://bugs.webkit.org/show_bug.cgi?id=74600
image-rendering: optimizeQuality;
I had the exact same problem. I changed the *.jpg that I was animating the size of, to a *.svg and the pixelation went away.