Overlay spectacles to web based facemesh model - javascript

I'm trying to build a web based app which overlays assets like spectacles onto your face.
While I'm able to use a tfjs model to get a face mesh, how can I position a png file appropriately? Assuming I manually find the location of the centre of the spectacles sample, I can use this point as a reference and add it to the appropriate location in the face mesh. Is there a better way to do this?

Related

Get properties of node inside Forge Autodesk viewer

I work with Forge Autodesk. I display a 3D building in the viewer.
I would like to know if there is a way to get a node properties (in the viewer).
I have the node number of a floor, and now I want to get the floor's position and rotation values inside the viewer. Since it is a plane surface, I suppose it must have some local coordinates saved somewhere. This post seems to confirm it.
By default each nodes (components) have no rotation and a null translation applied to them. What you need is to access each vertices of a specific node in order to determine an accurate extent in 3D space. Alternatively you can also access the bounding box of a node to give you an approximation. Take a look at the following articles:
Accessing mesh information
Getting bounding boxes of each component in the viewer
Thanks.
The following articles helped me a lot :
Get THREE.Mesh elements in Autodesk Forge Viewer
How Autodesk Forge viewer manages multiple scenes to select multiple elements
Getting bounding boxes of each component in the viewer
In the end, I used the fragIds to access the bounding box of a sub-element of the 3D object.

Best way to add skybox to Autodesk Forge Viewer

I am trying to add a skybox to a model in Forge Viewer.
So far I have managed to create and add the skybox to the model via an extension.
The problem is that the skybox needs to be big, and the camera back clip plane will be to short; - eg. the skybox is only partially visible or hidden.
I did not manage to modify the camera settings to change the clip plane and was therefore thinking of another way:
I was wondering if it was better to keep the skybox in a separate ThreeJS Scene, but so far I am not able to figure out how the extra scene should be added to Autodesks Viewer3D, neither how it should be kept in sync with the main cameras rotation.
Any pointers and examples would be appreciated
Loading an extra scene can be an overkill to achieve such feature, the easiest workaround would be load a second model that has a slightly larger extends than your skybox, so the viewer will automatically update its clippings plane.
What I suggest you to do is to translate a model that contains only tiny spheres or cubes defining the desired extends of the skybox scene. Then you will load that model either using its urn or downloading its resources and loading it "Local" even if your other model is loaded from the cloud.
See there for more details about extracting viewable resources and running Local vs cloud based:
https://extract.autodesk.io
Working seamlessly online/offline when developing your Web applications with the Forge Viewer
Hope that helps

Phaser - how to select a Tiled map layer and set it as collision layer

I'm quite new to using Phaser and the Tiled map editor and I'm currently making a platformer game using a Tiled map I made. I haven't been able to find any information in the Tiled or Phaser documentation, or in tutorials or forums on how to select a layer in my Tiled map to be a collision layer. In some tutorials I've seen people set a Tiled layer property to collision:true but I think they were using a different Tiled version and I can't see any information on this in the Tiled documentation.
I have 3 layers plus one layer for objects. I've put all the collision tiles in one layer that includes things like the ground and platforms. I've read answers saying that you need to include the index of the collision tiles but I don't want to include individual tiles as there a lot of tiles used. I've included a screenshot of my Tiled map JSON file, the layer I want to make a collision layer is called "Tile Layer 2". I'm not sure if I need to mention this layer name in my Phaser code to make it a collision layer or if I need to set the layer to collision: true in Tiled. I'd really appreciate any suggestions on how to make this a collision layer either using Tiled or Phaser. Thanks.
Tiled map JSON file
I commented but thought id give a bit more of a complete answer. I use P2 physics, if your using Arcade this may not apply must most of the examples on Phaser's site assume the use of Arcade.
So once you've created your tilemap in Tiled you load in your JSON and the tileset image in the preload method:
game.load.tilemap('levelOneData', 'assets/levels/levelOne.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('levelOneImage', 'assets/pics/levelOne.png');
Then in your create method load your tileset image and set up your collisions with the layers.
levelMap = game.add.tilemap('levelOneData');
slowLayerBodies = game.physics.p2.convertCollisionObjects(levelMap, "collide", true);
//add background image and set world size
background = game.add.tileSprite(0, 0, 4040, 2880, 'levelOneImage');
I'm not an expert with Phaser, still learning it myself however this works. There most likely (as with most JavaScript built things) different way of doing it.
Another possibility is to use this Phaser plugin: https://www.npmjs.com/package/phaser-tilemap-plus
You can set up an object layer with polygonal and recyangular shapes and use that as a collision layer. The polygons can be any shape, allowing you to use sloped and curved tiles. You can also have one way shapes for jump through platforms or one way doors. It is also possible to set a rebound value for bouncy surfaces or springs a la Sonic.
Aside from advanced tile collision, you also get tile animations that you define in the Tiled map editor, collision and region event handling and access to meta data in the form of custom properties.

THREE.JS : How do I dynamically change a specific face for a JSON loaded model?

I have a JSON loaded mirror that I would like to hook up to a webcam. The mirror's reflection will be updated with video coming from a canvas. I was able to follow this source http://threejs.org/examples/#canvas_materials_video
to display a video on a canvas.
However, I need the video texture to run on the specific face of the object. I've tried targeting the object via geometry.faces[i]materialIndex to no avail. The animation is moving, so having a plane to emulate that the the texture is on the model is also not optimal. Is there any advice on what to do?

How to create a clickable grid layer on top of a map using OpenLayers

I'm somehow new in making web services using Openlayers and Javascript. I would like to create a clickable grid layer on top of a map (e.g. OSM) which first has a defined spatial resolution (e.g. 200 m) and of course when user zooms the grid size adapts to the new zoom level of the map. Also I want to show every cell of a grid with a specific colour, and when the user clicks on each cell some information can be shown. So, I guess each cell is like a feature in this layer (e.g. polygon). I was wondering if Openlayers has existing function to do such a thing that I can use, or do I have to code all of it? any help and suggestions on how I can manage to do this would be highly appreciated. Below is a link to a service that has created such a service, I would like to do the same... Thanx.
Link to sample:
http://koenigstuhl.geog.uni-heidelberg.de/osmatrix/#timestamp/allotments_area/8/12/-0.2142333984375/51.578776399817066
Having developed the application you mention in your example, I can give you some hints on your question. The solution is pretty straightforward.
The grid you see, i.e. the coloured hexagons, is simply map tiles, that are served by a custom back-end following the Tile Map Service schema (I used NodeJS) that, in turn, uses Mapnik (any other engine should work as well, e.g. GeoServer or MapServer) for rendering the images. The data is stored in a Postgres data base with PostGIS added on.
Use a client-side library to create the map and add the tiled layer. OpenLayers and Leaflet both do the job well. (Leaflet, though, is a bit easier to grasp if your new to the topic).
On client side you register a click-event handler on the Map, that you can use to get the coordinates of the mouse click. Use these coordinates, send them to your back-end and perform a spatial query on the data base to get the polygons adjacent to the coordinates. The server's response should then provide the geometries of the polygons (encoded in GeoJSON in this case, GML, KML should work fine as well) and whatever information you want to display.
Use these polygons and add them to a vector layer using whatever colour scheme you want.
Have a look at the code to see how it works. The important files are osmatrix.js (connects to the back-end), control.js (main module, keeps track of everything) and map.js (surprisingly enough, everything map-related).
Openlayers has facilities for creating an interactive vector later. In order to create something like in the example, you would have to 1) add a vector layer, 2) write a loop that adds vector features to the appropriate locations on the map, 3) style the features as hexagons, and 4) create a stylemap that dynamically sets the feature color based on the appropriate parameters. Each step is facilitated by Openlayers.
A good start is to use the leaflet library because it use the map projection and to read this tutorial: http://build-failed.blogspot.de/2013/07/dynamically-creating-hexagons-from-real.html?m=1.

Categories

Resources