BabylonJS scene switching stutters - babylonjs

Live Demo
I want to switch between 2 complex scenes for an intro animation. Both scenes load from .gltf or .babylon files and contain camera motion.
The issue that I'm experiencing is that when I switch from scene1 to 2, there's a freeze/stutter before the next scene animation begins. Once the scene is rendered the switching of scenes continues as normal. It may be hard to spot but there's definitely difference between the first switch and the consequent ones.
I've tried using scene2.render(); right after loading the scene and it helps a little but it also makes the first scene stutter while it's trying to render both scenes. Is there something that I may be missing about this? I couldn't find an example of an intro with scene switching that works well online. Only camera switch but that's not what I want.

this is because the shaders of the second scene need to be compiled (as they could be different from the ones used in the first scene).
Babylon.js v4 will support parallel shader compilation but this will not be available on all browsers.
The best option could be to force that compilation beforehand:
scene1.meshes.forEach(mesh => {
mesh.material.forceCompilation(mesh);
});

Related

How do I make content within a JavaFX Scene transparent?

The program below is an example of what I'm actually trying to achieve.
I'm trying to do is recreate the picture above in JavaFX. However I am having difficulties because when I set the content of my stage to transparent it doesn't actually go transparent it still remains white.
#Override
public void start(Stage stage) {
try {
BorderPane root = new BorderPane();
Scene scene = new Scene(root,400,400);
root.setStyle("-fx-background-color: rgba(0,0,0,0);");
scene.setFill(Color.TRANSPARENT);
stage.setScene(scene);
stage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
The stage is visible from this code. I also set the content to transparent and changed the default style of the root pane to transparent.
I don't understand why this doesn't work, I'm setting the content to transparent but the background is still not transparent.
The result from the code I posted shows this, as you can see it's not transparent.
This question is almost a duplicate of:
how to make transparent scene and stage in javafx?
The difference being that it is also asking to retain native window decorations, which is not possible with StageStyle.TRANSPARENT.
If you look closely at the sample windows provided in the question, the decoration areas differ slightly (e.g. one includes a stage icon in the upper left and the other does not). My guess is that the transparent window pictured in the question isn't actually using the OS window decorations at all, but is instead rendering its own decorations which look much like the OS window decorations (that is just a guess though).
Anyway, to achieve a similar effect with JavaFX, it is necessary that JavaFX be used to render the window decorations rather than the OS window manager. To do that, refer to the following question:
JavaFX entirely customized windows?
In particular take a look at the Undecorator library:
https://github.com/in-sideFX/UndecoratorBis
You will never be able to get the window decorations to exactly match the OS Window manager decorations, but you can create something that looks different and provides similar functionality. If you work at it, you might be able to achieve something that matches the OS window decorations pretty closely, similar to the window screenshot in your question. Though, if it were me, I would just go for a different look which was still clean and easily comprehensible by the user, similar to the default look provided by Undecorator.
Do you think this could be pulled off by creating an ImageView and using some sort of stage listener so when the stage is moved the imageview displays a new image of what's behind the application? Or is that overly complicating it?
The background capture to imageView approach is a reasonable alternate approach.
If you do want to use the imageView capture approach, you can use some of the ideas from the following answer:
JavaFX effect on background
Note that the imageView capture type answer linked above won't completely accomplish what you wish and you still need to do some additional custom work to get exactly the effect you need as you move the stage around or as the desktop or windows under your window change. Possibly you may need to resort to logic outside of JavaFX to fully realize your goal, and discussion of how to do that is outside the scope of what I would be prepared (or able) to discuss here.
It's complicated no matter what you do, I don't really have a recommendation between the undecorator or the imageView capture approach.
Maybe if you mix JavaFX and Swing/AWT you may be able to do this by using a JFXPanel and the AWT PERPIXEL_TRANSPARENT feature. I haven't tried this combo, but per pixel settings for AWT are demonstrated in this oracle sample as discussed in How to Implement Per-Pixel Translucency.

Animation state changes but not actual animation

Been googling this but no luck.
Upgraded to Unity 5, trying to get extremely simple 2d sprite animation working. Have 2 clips, walk and idle, which have transitions triggered by a bool. (Same issue with an integer.) This all works. Changing the bool causes the animator to show its now playing the walk animation, however in the actual scene its still showing the idle animation. I can flip the bool but now in scene is playing the walk animation during both states (though the animator shows its switching to the idle animation when its supposed to.)
Have tried turning it on and off again, building the animator from scratch, swapping in different clips, setting the transition legth to 0, no change. Also did all the static batch/root animation options people suggested for other issues with u5.
The issue was - two animators stacked on top of each other, one in a child object. Sorry for the useless question.

How to use common background node for many scenes in Cocos2d-x

I have a very simple problem, but can't seem to find a definite answer.
I'm making a game that uses the same static background in every single scene.
Currently I simply added the background everywhere, but it sort of seems unnatural, makes some of scene transitions I want really painful to make and eventually I'd like to make an animated background which wouldn't reload with every scene change.
Is there a way to add the same node as a background of all the nodes other than creating a singleton which I'd need to add/remove during every transition?
In other words, can the scenes have transparent background so I can push them over the background scene?
I know that CCScene doesn't have setOpacity and have seen that some guys advice using CCLayer for scenes, but then CCDirector::pushScene accepts CCScene as the argument.
EDIT.
Ok, now I see that I probably misunderstood the CCLayer solution.. does it mean that the only way of doing it is to change scenes to layers and then adding/removing them from the main scene?
If you one animating/static background and want everything else to change, i would suggest having using only 1 cocos2d-x Scene with your fancy background and all other layers (previously scene) and elements to this scene.
So, technically you would never ever have to transition from a screen .
But, if you find another solution somewhere, do post/share.

QtQuick 2.0 scene on top of Direct3D scene

I have been trying to come up with a solution for having a QtQuick 2.0 scene together with a Direct3D scene for quite a while, but wasn’t very successful. My goal is to have a Direct3D engine running at reasonable speed (60 FPS?) together with QML UI on top. Both things run just fine at 150-200 FPS on their own. But when forced to cooperate together within one window, everything just goes bananas. I have investigated several approaches, but none of them seems to be sufficient enough:
Solution A: Rendering Direct3D scene into a texture, visualizing with QImage & QQuickPaintedItem
this solution works quite well and it seems to be the preferred one according to other people on the web. However it is TERRIBLY slow. I wasn’t able to have more than 18-20 FPS in full HD. The bottleneck was clearly in the texture transfer chain from GPU (D3D) to CPU (QImage) and back to GPU (QML renderer) each frame. Especially the CPU->GPU processing on the QML side was way too slow!
Solution B: Rendering QtQuick scene into a FBO, then using Direct3D texture
this is basically the previous solution other way round. The speed is a little bit better when the UI does not require an update. Once it starts animating, everything drops down to 18-20 FPS again. QOpenGLFramebufferObject::toImage() obviously takes its time. Implementing texture/FBO double buffering on both sides to reduce stalls does not really help.
Solution C: QQuickView with enabled transparency on top of QWidget with Direct3D scene
was not lucky with this approach either. It seems like the transparency works only when QQuickView is in its own window. Once I put it on top of my D3D QWidget within the same window, it immediately stopped working and became fully opaque. Someone was trying to do something similar there as well: http://qt-project.org/forums/viewthread/5484, but I had no luck with that solution at all. Maybe keeping two completely separated windows (main D3D window + frameless transparent QML window) on top of each other all time would do the trick, but that just sounds silly.
Solution X: Modify ANGLE library and try to extract & share D3D device context with my Direct3D renderer
haven’t tried this yet, avoiding any library modifications as long as possible. Would that even be a sensible option?
My obvious questions here are: Am I doing something wrong? What is the preferred solution? A, B, C, X or maybe something totally different? Can someone point me to the right direction?
TL;DR: What is the fastest way to render QML scene on top of Direct3D scene?
Sounds like you ideally want a bastard mix of Solution X and writing yourself a DirectX QPA plugin.
http://qt-project.org/wiki/Qt-Platform-Abstraction
I'd wager you'd make a lot of friends if you open sourced such an effort!!

How can I hunt down these OpenGL calls that are distorting objects in my scene?

I'm mixing two libraries that use OpenGL: Qt and OpenSceneGraph. I'm targeting OpenGL ES 2, so everything is done with shaders and ES 2 compatible calls.
I'm specifically using OSG with QtDeclarative by trying to paint OSG onto a QDeclarativeItem. I do this the way suggested in Qt documentation: wrap all OpenGL calls between beginNativePainting()/endNativePainting().
This works fine until I use textures in my OpenSceneGraph scene. When I do this, my QML window gets "messed up" for lack of a better word. To keep it as simple as possible, my OSG scene consists of a plane with a texture applied to it. I recreated the scene using basic OpenGL calls and the problem no longer occurs. Here's the problem summarized as a bunch of pictures:
The QtDeclarative engine uses OpenGL to paint stuff. I set up a simple QML page:
I create a simple scene using OpenGL directly. It's a plane with a texture painted onto it.
Now I try to set up the same scene in OSG... identical shaders, etc.
You can see something odd is going on with the last screenshot. Don't worry about the black background where the original OpenGL scene was transparent, that's just OSG using a black clear color. The problem is that the other items set up with QML (the rectangles) get messed up.
Edit: To clarify what happens: The rectangles I draw with QML are all stretched out to the right edge of the screen. I also noticed if I draw rectangles after the OpenSceneGraph item in QML, they don't show up (I didn't notice this before). I draw the purpley black rectangle after the OSG item in the following screenshots... note that it disappears. There might be more weird stuff happening, but this is all I've observed playing with rectangles.
Before
After
I'm fairly new to OpenGL so I don't know what kind of call/state setting would cause something like this to happen. I think that OpenSceneGraph makes some OpenGL state change that's messing up Qt's paint engine. I also know that this only occurs when OSG uses textures... if I don't apply textures in my OSG scene, this doesn't happen. This is where I'm stuck.
Also, I tried to use BuGLe to get an OpenGL call trace with and without textures enabled in OSG to see if I could figure out the problematic state change(s). I found a few differences, and even some global state that OSG changed (such as glPixelStorei()) between the two, but resetting the changes I found made no difference. It would help a lot if I knew what to look for. If anyone's feeling insane, I also have the stack traces:
OSG with texturing: http://pastie.org/4223182 (osg texture stuff is lines 637~650)
OSG without texturing: http://pastie.org/4223197
Edit 2:
Here's a diff that might be helpful. You'll need to scroll way down before the relevant lines are apparent.
http://www.mergely.com/nUEePufa/
Edit 3:
Woah! Okay, that diff helped me out quite a bit. OSG enables VertexAttribArray 3 but doesn't disable it. Calling glDisableVertexAttribArray(3) after OSG renders its frame seems to partially solve the problem; there's no more stretching of the QML rectangles. However, rectangles drawn after the OSG item still don't show up.
After obsessing over the trace logs, I think I've found two OpenGL things that need to be reset before passing control back to Qt to cause the issues above to go away. I mentioned one in an edit... I'll summarize both in this answer.
Rectangle/QML Item distortion
QPainter uses Vertex Attributes 3, 4, and 5 directly for something that looks like its related to the geometry of those rectangles. This can be seen in the trace:
[INFO] trace.call: glVertexAttrib3fv(3, 0x2d94a14 -> { 0.00195312, 0, 0 })
[INFO] trace.call: glVertexAttrib3fv(4, 0x2d94a20 -> { 0, -0.00333333, 0 })
[INFO] trace.call: glVertexAttrib3fv(5, 0x2d94a2c -> { 0.2, 0.4, 1 })
Disabling the corresponding vertex attribute arrays fixes the stretchy rectangles issue:
glDisableVertexAttribArray(3);
glDisableVertexAttribArray(4);
glDisableVertexAttribArray(5);
Items drawn after the OSG Item don't render
In retrospect, this was one was easy and didn't have anything to do with texturing. I hadn't noticed this before trying to add textures to my scene though, so mixing the two issues was my fault. I also screwed up with the traces and diff I posted; I never updated them to account for the ordering problem after I discovered it (sorry!)
Anyways, QPainter expects depth testing to be turned off. Qt will turn depth testing off when you call beginNativePainting(), and also when it starts to paint its items... but you're expected to turn it back off whenever handing control back:
QPainter paints stuff (DEPTH_TEST = off)
OSG draws stuff (DEPTH_TEST = on)
QPainter paints more stuff [expects DEPTH_TEST = off]
The right trace logs showed that I wasn't doing this... So the fix is
glDisable(GL_DEPTH_TEST)
Maybe you just need to reenable GL_TEXTURE_2D? I notice in your example with textures that OSG enables, and subsequently disables GL_TEXTURE_2D. Thus the difference between your two cases (with texture vs without), is that the one that uses textures finishes with texturing disabled, while the one without texturing leaves GL_TEXTURE_2D in it's initial state.
If Qt needs/expects texturing enabled to draw quads it could cause nothing to show up.

Resources