I am working on an animation using GSAP and it is working perfectly on both Chrome and IE, Firefox however has the following glitches:
When the cup fill color fills up the color disappears as opposed to staying there. What looks as if the animation reverts to its original state.
While the big gear rotates around its center the other two seem to rotate around 0,0.
The animation can be found at:
http://codepen.io/anon/pen/WxJQQr
<code>
Any help or leads would be greatly appreciated, thanks!
Related
I got a small problem and I can’t really find the source of it. I just created a Canvas and put a Panel in the top right corner. I got it to the right scale at 3: for the Hololens and loaded it up in the Holoemulator. The problem is that even though the panel is supposed to be in the corner, it is placed almost in the middle of the screen in the end.
Is there anything I can do to fix this or is there something I am missing?
If I need to provide more information then please tell me.
Could you double-check the [Render mode] of your Canvas? Is it set as World Space? In this render mode, the Canvas will behave as any other 3D object and will render in front of or behind other objects in the scene based on 3D placement in the scene. You need to adjust the position of the canvas from the perspective of the camera.
However, according to your post, it seems that you want to place UI elements on the screen rendered on top of the scene. If so, You should turn the [Render mode] to [Screen Space - Camera]. More information please see: Canvas
Hi I'm new to unity and playing around to get used to everything.
I have been doing some tests and so far everthing is going ok but I stumbled on something I could not find a descent solution for.
When building the game I have black borders on the side. how can I get rid of them so the game is really full screen?
I disabled the display resolutiong box and hard coded in that the window goes 'Windows fullscreen' but now I have these anoying black borders.
Can anybody push me in the right direction?
Thanks.
This is what i tried as code. but no success.
Debug.Log(Screen.currentResolution); // check if i find the native screen resolution. test passed
Screen.SetResolution(Screen.currentResolution.width, Screen.currentResolution.height, true); //getting black borders. set test failed
What is your main camera setup like?
Could also be related to aspect ratio. If you're on a widescreen and it is set to 4:3 then you'll have black borders.
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);
}
I am facing a problem where a THREE.SpotLight is casting a Shadow without an object beeing in its frustum.
I have setup a simple scene containing a THREE.SpotLight and a plane-mesh. The SpotLight is set to cast Shadows and the plane to receive Shadows. There is a square Shadow visible on the ground plane, which is the size of the SpotLights shadowCamera. This scene is the right hand side of the image below.
A cube-mesh is now added and positioned outside the initial camera viewspace. By zooming out, a bit before the cube-mesh becomes visible to the camera, the Spotlight Shadow disappears. This is pictured in the left hand side of the image.
http://jsfiddle.net/L0rdzbej/157/
This happens in Firefox, from what I heared it is not the case in Chrome. What is happening here and how to avoid it?
The shadow does not show up anymore, so im marking this as solved.
Edit: In case anyone comes a long who is facing the same problem, here is a link to the reported issue on github: https://github.com/mrdoob/three.js/issues/7750. It hasnt got much attention because it couldnt be reproduced by the maintainers.
I have been working on getting this seat mapping chart for a while and have created a few iterations, and the problem I keep finding is when I get to IE8 the panning for this is way to slow and delayed.
What I have at this point to cut down on load time is created a png to replace my "strokes" since I assume ie8 wanted to re-render each time I dragged the map.
I also added controls hoping to force IE8 users this option, but still there is a delay in the pan, and if I can have users with IE8 (and ie7 if possible) still drag/pan without the controls and the respond time a little faster that would be great.
Here is my current JSFiddle
I am still a little green with JS so if you have any suggestions it would be much appreciated. (PS Chrome frame is awesome but is not a option for me)
Update
I have removed the original dragging function and replaced the code using jqueryui's draggable function. Martin had suggested to just drag the div, and not the Raphael elements. Doing so lets this thing fly in ie6-8 which is great, but then came my concern about scaling. What I was seeing before on zoom my paper element WxH would stay the same ratio, cutting off my drawing when it zoomed in. After digging through the Raphael documentation I came across paper.setSize. setSize was exactly what I needed to allow this project to move and groove in ie6-8 and pretty much conquer all browsers in its path.
So in short, using jqueryui's draggable and paper.setSize has cured my cross browser zoom n' pan blues.
From what can be seen in the Fiddle, you are triggering a new rendering of the image by calling .translate() inside of a mousemove event handler:
mapContainer.translate(currentMapPosX, currentMapPosY);
rsrGroupies.translate(currentMapPosX, currentMapPosY);
This approach is toxic for performance in all browsers, let alone IE8. When dealing with VML in IE8 you should consider that each and every DOM change inside the image will result in the image being rendered again. Doing that while panning will always be painfully slow.
I see that you are already using jQuery in your Fiddle. If you want to increase performance of your panning, you should consider doing the following:
Render the image in Raphaël exactly once for the current zoom level. Do not attempt to change transformations in your VML/SVG image at any point in time while panning.
With the mousemove implementation of panning you already have, move or scroll the HTML container that holds your VML/SVG image instead. Imagine a <div> with overflow: hidden and simply move the image inside relatively, or scroll to the appropriate position.
This will require some adjustment of your coordinate calculations, but it will improve your performance in all browsers.