I'm playing around with the Autodesk forge viewer and adding custom elements, like it is done in the Autodesk's scene builder example.
I am looking for a possibility to set the "visibility" of one of the new objects - e.g. when moving around the camera, the green cube should remain on it's 3D-position but should not be occluded by any other object (like it is somehow in blue with outline when it is selected). Or maybe even better: if it is covered by another object, it should shine through (with configurable opacity).
Unfortunately after discussing with Engineering it's not yet possible - will continue the conversation to see if we could come up with a workaround for the upcoming releases ...
Like I suggested in the comments try append your geometry to Viewer3DImpl.sceneAfter for the time being (which will be publicly documented and exposed as Viewer3D.sceneAfter in a couple of weeks) or an overlay. Then setting depthTest to false should do what you want...
The choice of sceneAfter or an overlay depends on how you want the objects to be drawn during progressive rendering. sceneAfter is only drawn once at the end of everything else. Overlays are redrawn for each progressive frame...
Related
I would like to be able to draw a transparent object and a completely hidden object at the same time in Forge Viewer.
To do this, I tried to use the following method,
https://forge.autodesk.com/en/docs/viewer/v7/reference/Viewing/GuiViewer3D/#isolate-node-model
It was possible to make objects in the hidden state transparent or invisible, however it was impossible to make the two states coexist.
Is there a way to have an object in two states at the same time?
Yes, it's quite possible.
Activate Ghosting as normal (see settings).
Change some objects to ghosting by setting their dbid with viewer.hide(dbid)
Completely hide other objects using viewer.impl.visibilityManager.setNodeOff(dbid,true) where dbid is the object's id.
This will allow you to have fully visible objects, ghosted objects, and completely invisible objects.
I have a situation where two construction models are loaded in the viewer.
The stair model is moved (whith placement transform) in the building model.
The stair model is now obscured by the building model also behind glass elements
see this gif
Depending on the camera position the stair is visible again.
Viewer is 7.38.1
Typically, when a model is loaded, the opaque objects are rendered first and the transparent objects are rendered last. If you are loading the first model which contains the transparent objects and then the stair model, the transparent objects might be rendering before the stair model. This might be causing this issue.
I would suggest trying the following: load the stair model first and then the model with the transparent objects. If the above statement is correct, this might fix the issue.
In any case, It would be useful to get the repro steps for this and maybe the model assets.
Last, are you using AggregatedView or are you loading the models using Viewer3D#loadModel?
We logged the issue as LMV-5962
Is there anyway to set opacity of some nodes of the model?
For instance, create a override material and use it in renderer for some nodes rather than whole scene.
When loading a model, the viewer builds its internal spatial indexing structures (BVHs), and one of the factors it takes into account is the transparency of the different fragments. This is in order to ensure that semi-transparent objects are rendered after the opaque ones.
However, when changing the material of a fragment on-the-fly (after initial load of your model), the order is not updated because the viewer doesn't have a way to rebuild the BVHs on demand, and you can end up with something like opaque objects hidden by transparent ones ... We have a pending change request in order to add an API that would allow developers to rebuild BVHs, unfortunately it has not yet been added yet.
You may take a look at the following resources for example of modifying materials in the viewer:
Autodesk.ADN.Viewing.Extension.Material
Forge Viewer Custom Shaders - Part 1
Forge Viewer Custom Shaders - Part 2
Custom transparent meshes with View & Data API
Hope that helps
Yes, sure.
The ForgeFader app creates and sets override materials on certain nodes in the viewer:
Check it out in:
src/client/viewer.components/Viewing.Extension.Fader/Viewing.Extension.Fader.Core.js.
Im looking for an easy to use method of assigning drag behavior to multiple objects (images, shapes etc) in canvas. Does anyone have a good way or know of any libraries for dragging objects around? Thanks
Creating your own mouse events takes a little work - ideally you should either create or use some kind of mini-library. I'm thinking of creating something like this in the near future. Anyway, I created a drag and drop demo on jsFiddle showing how to drag images - you can view it here.
You can create draggable images like this:
var myImage = new DragImage(sourcePath, x, y);
Let me know if you have any questions about this. Hope it helps.
EDIT
There was a bug when dragging multiple images. Here is a new version.
Another thing you might want to check out is easeljs it sort of in the style of AS3... mouseEvents dragging etc...
The HTML Canvas—unlike SVG or HTML—uses a non-retained (or immediate) graphics API. This means that when you draw something (like an image) to the canvas no knowledge of that thing remains. The only thing left is pixels on the canvas, blended with all the previous pixels. You can't really drag a subset of pixels; for one thing, the pixels that were 'under' them are gone. What you would have to do is:
Track the mousedown event and see if it's in the 'right' location for dragging. (You'll have to keep track of what images/objects are where and perform mouse hit detection.)
As the user drags the mouse, redraw the entire canvas from scratch, drawing the image in a new location each time based on the offset between the current mouse location and the initial mousedown location.
Some alternatives that I might suggest:
SVG
Pure HTML
Multiple layered canvases, and drag one transparent canvas over another.
The HTML Canvas is good for a lot of things. User interaction with "elements" that appear to be distinct (but are not) is not one of those things.
Update: Here are some examples showing dragging on the canvas:
http://developer.yahoo.com/yui/examples/dragdrop/dd-region.html
http://www.redsquirrel.com/dave/work/interactivecanvas/
http://langexplr.blogspot.com/2008/11/using-canvas-html-element.html
None of these have created a separate library for tracking your shapes for you, however.
KineticJS is one such Javascript Library that u can use exclusively for animations
Heres the Link html5canvastutorials
Canvas and jCanvas
You're definitely gonna want to check out jCanvas. It's a super clean wrapper for Canvas, which kicks open a lot of doors without adding code complexity. It makes things like this a breeze.
For example, here's a little sandbox of something close to what you're after, with dragging and redrawing built right in:
Drawing an Arrow Between Two Elements.
I ventured down the road of doing everything with DIVs and jQuery but it always fell short on interactivity and quality.
Hope that helps others, like me.
JP
As you create new objects whether they are windows, cards, shapes or images to be draggable, you can store them in an array of "objects currently not selected". When you click on them or select them or start dragging them you can remove them from the array of "objects not selected". This way you can control what can move in the event of a particular mousedown event or mousemove event by checking if it isn't selected. If it is selected it will not be in the "not selected" array and you can move the mouse pointer over other shapes while dragging shapes without them becoming dragged.
Creating arrays of objects you would like to drag also helps with hierarchy. Canvas draws the pixels belonging to the foremost object last. So if the objects are in an array you simply switch their instance as in element in the array say from objectArray[20] to objectArray[4] as you iterate through the array and draw the objects stored in the array elements you can change whether other objects are seen on top or behind other objects.
Today I wanted to add mouse-driven zoom and pan functionality to a pure AS3 project - something like the Google Maps interface. I was surprised that I couldn't find a good package or library to do this already - I'm using FlashDevelop rather than Flash CS3, so the nice VCam tool available as an FLA is no use.
There's nothing very complicated involved in implementing zoom/pan, although it can be fiddly and time-consuming to get right, but since zooming and panning are pretty common things to want to do I wondered if anyone could suggest a 'correct' way to do this in the Flash world, or a good library available that I haven't been able to find.
I found exactly what I was looking for in the flare library's PanZoomControl:
Interactive control for panning and
zooming a "camera". Any sprite can be
treated as a camera onto its drawing
content and display list children. To pan and zoom
over a collection of objects, simply
add a PanZoomControl for the sprite
holding the collection.
var s:Sprite; // a sprite holding a collection of items
new PanZoomControl().attach(s); // attach pan and zoom controls to the sprite
The mouse controls are also implemented as you'd expect:
Once a PanZoomControl has been
created, panning is performed by
clicking and dragging. Zooming is
performed either by scrolling the
mouse wheel or by clicking and
dragging vertically while the control
key is pressed.
You could use a 3D library such as Papervision3D or FIVe3D. Then just move your camera based on different mouse events/gestures. Or use the built in z-axis in FlashPlayer 10 to get the zoom effect.