Reference or pivot points in SVG? - user-interface

Can I have "reference" or "pivot" points i.e. points, that are not rendered, but whcih I can find in SVG and determine their location?
I would like to draw several SVGs in the same place to animate button state change, like "pressed", "normal", "disabled" etc. But my SVGs don't have the same outer rectangles, because images can be shifted, shadow can appear etc. So I would like to mark one or two points in SVGs as "pivot" at design time to make them coincide in different states.
Is this possible?

Related

Sorting layers having no effect at all

I currently have a scene set up in Unity2D where sorting layers of any kind have no effect at all.
I start with 3 panels on the screen (attached to a canvas). The panels have some images as children. Then I position them such that there is some overlap between them. From there I attach a Sorting Group component to them, and then run my game.
From there I've tried everything I can think of to alter the sorting layers and have one of the back panels appear at the front but to no avail. I've tried altering the Sorting Group layers, the Unity layers, and the Z position.
What am I doing wrong?
I believe Sorting Group is a UI component. It's used for parent game objects of sprite children.
What you want is to add the "Canvas" Component (Not to be confused with the main UI canvas) to each of your panels. Then make sure Override sorting is checked. Then put a number in for the order. Larger numbers are in front of smaller numbers.

Is it possible to select multiple objects with box selection?

I know that with QObjectPicker I can mouse pick a single entity. But how can I select multiple objects by drawing a rectangle on the screen?
I think this is actually pretty complicated. But here are my two cents:
If you only need to be able to select unoccluded objects
(i.e. don't need to select occluded ones) you could add a second frame graph branch to your existing one and draw each object with a unique color but to an offscreen texture. Then retrieve this texture, check which colors lie within the drawn rectangle and retrieve the corresponding objects and select them (compare to this question/answer).
I'm not sure how well this works in Qt3D because I've always had some issues with QRenderCapture. It didn't seem to have an impact where I added it in the frame graph, i.e. always captured the last state so maybe even if you have multiple render targets it might capture the wrong one etc. Qt3D is still in a pretty rough state I'd say.
If you need an example of how to render to an offscreen texture check out my example on GitHub.
If you need to be able to select occluded objects too
then it gets pretty complicated. I'm just providing some ideas here. I don't know if they will work.
If you don't have that many objects maybe you could implement the idea from above for each single object. I.e. for each object you have an offscreen frame graph branch that filters out all other objects. Then you could check each rendered texture for the rectangle drawn with the mouse. But again I'm not sure how well this works with Qt3D and if you have many objects (like in a game) it will probably crash because of the many offscreen textures.
You could also implement something like "inverse" frustum culling. In frustum culling, you omit rendering objects that lie outside the view frustum of the camera. You could compute a frustum using the rectangle coordinates drawn with the mouse. Check out the QFrustumCulling code. You would need to compute the planes differently of course, using a modified view matrix. When the user draws the rectangle, compute the frustum and check all objects. Unfortunately, this also selects objects whose bounding sphere intersects with the frustum, even though you might visible not touch any part of the object. If that bothers you, you could directly select all objects whose sphere is completely within the frustum and for all objects which only partly intersect do the intersection computation on a per-triangle basis and exit computation for the current object as soon as a triangle intersects the frustum. Depending on the number of triangles this could be very costly computational-wise.
I'd definitely stick to being able to select only unoccluded objects especially because picking in OpenGL seems to be realized by drawing the ojbects with colors these days.

Three.js algorithm for marquee selecting in 3D scene

I'm creating a 3D model editor application using THREE.js where you can load a CAD model and have it display on the screen. You can pan, zoom, rotate the camera anywhere around in the scene to view the CAD model from any angle.
I want to add support to be able to draw an arbitrary rectangle on the screen (marquee select box) and anything inside this box I'd like to become selected.
What is a good algorithm to use for this operation?
My first thought was to take every loaded CAD part (that can be selected), and project its bounding box onto the screen. Then test each of these projected bounding boxes to the selection box drawn on the screen for matches. This should work, however I'm worried it would be very slow for large CAD models with 1000's of selectable parts.
Is there a better way to do marquee selections in 3D? Can raycasting somehow be used to speed up the selections?
Without knowing more details about your cad models it'll be a bit hard to give exactly relevant suggestions but I can suggest a few things I might try.
Use Hierarchical Bounding Boxes
If you have a multi-level tree of meshes you can generate bounding boxes for the non-leaf nodes of the tree. This isn't supported directly in THREE but you can manually create and check against these objects before checking if the child objects are within the marquee.
If your tree isn't spatially organized very well or is very flat then you can build an oct-tree and traverse the oct-tree nodes before checking the meshes.
Of course these data structures have to be updated whenever meshes move in your CAD model.
Cache World Bounds
If you cache versions of the bounding boxes on all the meshes in world space then instead of projecting the bounds into screen space you can create a frustum from the marquee in world space and check the all the mesh bounds without having to do any transformation of those boxes.
Asynchronous Checking
Instead of gathering all the intersected bounds on a single frame you could gather them up over multiple frames if it is taking a long time.
Unfortunately I don't think raycasting can do a whole lot for you here.
Hopefully that helps!

Three.js performance with high number of objects

I am working on a project which needs rendering of thousands of unique meshes of building models. My objects need to be selectable and they will have their data (other than geometry) attached to them.
Since number of objects/meshes has a big impact on the rendering performance, I merge my objects into a few huge meshes and create "pseudo meshes" which just hold information about the indexes of the mesh's triangles and the other data attached. I am able to render each mesh with their own color and user is able to pick them separately.
However transparency and render order is making things hard for me. I managed to render my scene with transparent and non-transparent objects by merging them to separate meshes.
My problem is not being able to highlight the picked objects effectively. I want the highlighting to be a non-transparent color. If a transparent object is picked I change the associated triangles' color attribute to match my highlight color with opacity of 1.0. But this does not work as I intend to because, since the merged mesh's material is transparent, the render order for it won't change although I set the opacity of its' triangles as 1.0. Result is poorly ordered objects on the screen.
I know I could use MultiMaterial but then number of drawcalls -may or may not- increase enormously if the user selects high number of objects. So I am looking for a better solution that will keep the same performance whatever happens.
Do you have any suggestions on how to solve this problem?

Outline a set of paths with the same attribute

I'm using D3 to create sets of polygons and I'd like to be able to outline the sets. For instance, if you have a set of path elements, such as all the states of Mexico, Canada, and the United States, and you wanted to procedurally draw a border around the path elements that share the same attribute (such as their ccode) is there an established way to do this?
Obviously, I could overlay a national path, but what I want to do is be able to draw these borders dynamically based on different attributes on-the-fly, and I'm using the geo example because I think it's the most comprehensible.
if you can break up your paths so that each path is a border between exactly two regions then you should be able to simply iterate through your "borders list" to determine when to draw each one: i.e. draw a border that has exactly one match in your list of states-to-highlight. Borders with two matches are interior and borders with no matches do not belong to the regions you are interested in.

Resources