Manipulate Facial Details on Canvas - javascript

I kinda got lost on this,
I'm trying to do some (aging booth) app using JavaScript that needs to do the following:
Take photo using webcam
Detect face and facial details and overlay a PNG on them (some wrinkles etc..)
Morph/manipulate the face to make it look old (drag the nose a bit down, drag the chin etc..)
Maybe create a 3D model of the taken photo and try to animate the lips and make the eyes Blink etc.
Now, I could achieve the face detection and I'm getting the Points and Vertices for all the facial details using BRF, and I succeeded in overlaying a PNG over that
anyway what I'm lost about now currently is, what is the right way to achieve Facial Details manipulation, or maybe facial details animation, any advice to put me on the right path is greatly appreciated!

If you are simply working off a photo, I would use the vertices from BRF to build a geometry and map the face image as a texture on top of it. Then you could build a tool to move the vertices around and the face would stretch with them, since the face texture is already mapped to the geometry surface.

Related

Is there a way to make a capsule/ovoid shape with cannon using three JS with React?

The player of my 3d game using threeJS with react (R3F) cannon, fiber is currently a sphere. This is because i want it to slide with no friction, and the geometric shapes that has sides/vertexes dont.
The thing i wanted to achieve is to have the same no-friction movement but making the useSphere object (or any that i can use with cannon) taller. But as it is a sphere is completely rounded so that i can only increase radious and i only want to make it taller not wider.
Any solution to this problem is welcome as my game is first person camera so i dont even show the player just want the correct physics with cannon library.
Ive seen that three js includes geometries like capsules: https://threejs.org/docs/#api/en/geometries/CapsuleGeometry
That i feel might work if i had the chance to use it with cannon but i dont know how to. I simply want a no edge shape that is taller than a ball, like a ball but larger. I think there might be a way to make a custom shape but i sincerely havent found anything.
Thanks in advance for your help, would be really nice to me.

How can I convert a 2D image into sketch matrix like autocad image using JS

I am working on some project basically for the real estate and kind of stuck in some feature where I need some help.
I have a 3D scene ready using three JS and rendered on screen, but sometimes the user wants to see in 2D and sometimes in wireframe.
see images below
one way to do is to keep the camera at top of the 3D view and make model wireframe true.
but I am looking for the alternate way to convert a 2D image of top view into the structure like above. Is there any library or method that can help in solving this.
Thanks

3D cube creation and handling events on that cube

I have created multiple 3D Cubes in a HTML5 Canvas .
I was trying to handle a click event on the 3D cube so that i can know which cube got clicked.
To create the cube I used processingJS.
It worked well but was not able to get the Click position.
I read about Paper JS which creates a shape and stores it in a object.
Is it possible to create 3D things with Paper JS.
Or Is there anyway i can get which cube got clicked through ProcessingJS.
please share whether there are any other ways to do this.
Thanks in advance.
Paper.js deals with 2D vector graphics.
While in theory you can represent a cube if you want to, using skewed squares for example, it will take a lot of effort and a lot of time to just create 1 cube.
You are much better of using a 3D library, e.g - Three.js.
Here is an already cooked up example using raycasting to detect the clicks on a side of the cube: http://mrdoob.github.io/three.js/examples/canvas_interactive_cubes.html

Including an image with Three.js

I'm actually trying to include a .jpg image into my 3D scene. All solutions i have found consisted in apply those images on meshes as texture : but then the scene does not look like well. Indeed, we can see the mesh border whether it be a plane or sphere... I just want to see the image. Does exist it another solution ?
On my application, i want to rotate an airplane around the earth, and the problem is about including this airplane.
Thanks for your help :)
Perhaps the class THREE.Sprite will accomplish the effect you want. THREE.Sprite can display an image, and can use either screen coordinates (e.g. canvas coordinates) or it can be part of your 3D scene, but a sprite image is always facing the camera. If you want the image to rotate, you do need to use it as a texture on a mesh. Whatever you decide to do in the end, I've posted a bunch of tutorial-style examples at http://stemkoski.github.io/Three.js/ that may help. Good luck!

Background with three.js

Can anybody help me with three.js?
I need to draw background, something, like a THREE.Sprite, but it neet to be UNDER any 3d object, that will draw later. I have a camera, that can be move only on Z axis.
I tryed to use:
cube mapping shader - PROBLEM: artefacts with shadow planes, it's unstable draw
THREE.Sprite that dublicate camera moving - PROBLEM: artefacts with shadow plane - it have a edge highlighting OR drawing only other spirtes without objects.
HTML DOM Background - PROBLEM: big and ugly aliasing in models.
What can I try more? Thanks!
You could maybe try drawing in several passes, i.e. making a first render of the background scene to a buffer, and then a second one over the first "buffer". Maybe using the buffer as background (painting it in 2D with an orthographic projection, and disabling depth buffer writes in that pass).
I haven't tried it myself with three.js, but that's how I'd do that with "traditional" OpenGL.
If you want a "3d" background i.e. something that will follow the rotation of your camera, but not react to the movement (be infinitely far), then the only way to do it is with a cubemap.
The other solution is a environment dome - a fully 3d object.
If you want a static background, then you should be able todo just a html background, i'm not sure why this would fail and what 'aliasing in models' you are talking about.

Categories