I am currently trying to find a way to have images bouncing around the page while rotating. So far, I have succeeded in the bouncing part: The code in action. However, I am still struggling with the rotating part: The source code. I believe the problem has something to do with rotating the image data. I have have heavily researched rotating canvas data, yet the however the bug still eludes me. Could anyone shed light on this mystery.
By the way, I know that the lag could be greatly improved by preloading each image before the image is inserted onto the canvas, but I don't want to over-complicate the code until I can get the basic lay-man version to work. So now that I have examined this, please don't post about it because it's not exactly on topic.
My 2nd smaller question is this: I have observed that, in Google Chrome, when I modify the frame rate to anything other than 60 fps, then there is a MASSIVE decrease in performance: 59 fps or 60-Math.pow(2,-16) fps appears a lot slower than 60 fps. I know that it can't be because on my monitors display rate because my monitor's display rate is 59 fps, not 60 fps. So, is it because Google Chrome recognizes and optimizes 1000/60, or what? Please include a link to the documentation if possible.
EDIT
The links have been moved to the final product displayed here.
There is no native way to rotate a Uint8ClampedArray
To rotate an image once it has loaded.
// ctx is the 2D context. Image is drawn at its center point.
function drawRotated(image,x,y,scale,rot){
ctx.setTransform(scale,0,0,scale,x,y); // set scale and origin
ctx.rotate(rot);
ctx.drawImage(image, -image.width /2, -image.height / 2);
ctx.setTransform(1,0,0,1,0,0); // restore default transformation
}
I am not at all sure what you are saying about the frame rate. A monitor with a frame rate of 59 is very unusual. As you have not shown what you are doing I will assume you are not using requestAnimationFrame
The following will sync to the browser refresh rate.
function mainLoop(){
// code to render the frame
requestAnimationFrame(mainLoop);
}
requestAnimationFrame(mainLoop);
Related
I have applied some post processing effects to my camera. They looked fine in the free aspect minimized game view but when I maximize it or change the aspect ratio the effects look different. And also how can I make my UI elements change as the screen size changes.
Images:
This is a bug in post processing stack and is still not fixed by them. But I found a fix here.
Fix:
open the DepthOfFieldComponent.cs, remove const from before k_FilmHeight, then have it update somewhere such as in Prepare, above CalculateFocalLength, add something like: k_FilmHeight = 0.024f * (Screen.height / 720.0f);
720 can be changed to whatever number you want to use as your default screen height.
I have a video clip and a camera animation in fbx, both with 25 fps. I need them perfectly in sync, so I switched off Resample Curves and Animation Compression in import settings, and additionally I cloned the animation so I could edit it in Animation window and I selected all the keyframes and set it to Broken, Both Tangents constant.
I use the new Video Player for displaying the video. I saw that animation pipeline changed from version 5.5 to 5.6 and I got weird object movement when I imported fbx to Unity 5.6, and also Animation window kept freezing when I tried to edit keyframes, so I set up everything mentioned above in 5.5 version and opened it in 5.6 just to add Video Player.
They were still not in sync, so I wrote a script to set animation time according to video time inside Update() function:
if (cameraMovement.IsPlaying("cameraMovementFromFBX") && vPlayer.isPlaying) {
cameraMovement ["cameraMovementFromFBX"].time = (float)vPlayer.time;
}
And even if the time seems in sync, visually they still don't look right, there is a slight jitter and the difference increases with time.
I'm totally new to Unity, so I have no idea if what I'm trying to do is even possible, because of the various frame rate Unity uses. Any hint would be great.
I have a window displaying a video stream with a twitter feed as an overlay.
When a new tweet is displayed, the current tweet animates out using a rotate animation and the next tweet is rotated into view. The animations are performed using a RotateTransition.
The app also switches between different cameras to display different streams. To give an indication of when the app switches to the next camera, I have a progressbar that fills using a Timeline object.
This works well, until I resize the window. The rotate animations start to flicker, along with the progressbars as they gradually fill.
As a test, I disabled the video stream, to see what's happening. The 'artifact' doesn't occur then and I can resize as much as I want. If I play the stream and don't resize, everything works well.
The video player is based on VLCJ, but the actual pixels are drawn on a WritableImage in an Imageview.
See the following images that illustrate the problem.
At the bottom right you can see 2 different progress bars (a ProgresBar and a ProgressIndicator).
A part of the flickering result is still visible below the second image. It somehow stays visible, probably because the area doesn't get redrawn.
Any idea what makes the flickering happen? Is there anything I can do to fix or avoid this?
I tried some VM options in IntelliJ: -Dsun.java2d.d3d=true -Dprism.forceGPU=true to somehow enable hardware acceleration, but that doesn't seem to help.
Disabling the progressbar fill animation doesn't help either.
I had a similar problem with some arcs and shapes that would flicker when its attributes / sizes were changed.
The solution to my problem was to make sure that the methods used to change the shapes were called from inside the JavaFX thread.
Platform.runLater(() -> {
arc.setStartAngle(30);
arc.setLength(45);
}
Please see this thread for details.
To summarize, given the following circumstances:
gl = canvas.getContext('experimental-webgl');
gl.clearColor(0, 0, 0, 1);
gl.colorMask(1, 1, 1, 0);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.enable(gl.BLEND);
...and a standard render loop:
function doRender() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// render stuff, and request another frame
requestAnimationFrame(doRender);
}
...then I would like to know what the expected output should theoretically be.
In actuality, I'm seeing that the first frame renders as if there were no color mask, and the second (and subsequent) frames render the entire canvas opaque white.
Note that it doesn't matter what the alpha level is set to: the second frame is always immediately, completely white (including areas that were not rendered to), even if the rendered alpha values are extremely low.
The Question: what is the expected result of the above operations on the first, second, and subsequent frames? Also, is what I am experiencing the expected result, or due to some bug in the GL driver or WebGL implementation? And finally, if it is the expected result, why? What is actually happening on the video card to produce this result?
System details: Chrome / Firefox (both) on a MacBook Pro / GeForce 320M / Snow Leopard.
WebGL automatically clears the drawing buffer on each frame unless you tell it not to
try
gl = canvas.getContext('experimental-webgl', {
preserveDrawingBuffer: true
});
That's potentially slower than letting it clear though since it might have to make a copy of the drawing buffer each frame to preserve it so it has a copy to composite with the rest of the page while you draw new stuff into it. So, it's probably better to call gl.clear inside your render loop. Of course if the effect you were going for was to continually blend stuff into the drawing buffer then you either need to tell it to be preserved like the example above or you need to draw into a texture or renderbuffer using a framebuffer and then render that to the drawing buffer.
I'm having issues with all the animations on the page lagging when I choose to display this picture. I have tried displaying it with fadeIn, visibility, animate:opacity, display:block, and no matter which way I reveal it still causes the browser to choke. There has to be a way around this. (I've also tried preloading the image and it makes no difference!)
Is it just the size of the image?
http://jsfiddle.net/ZJpmT/2/
I suspect it is the image size. Doing a quick test showed that a fadeIn with a duration of 5 seconds, could be shown, but using a duration of 1 second wouldn't show any fade effect at all, but just show the the image at once.
Animating an image which is 1MB in size isn't what you want to do. If you really need this image to be that large, try to add a background to each frame, which matches the pages background and save it as JPG. That could reduce the size a bit, but it's not guaranteed that it will stop the browser from choking.