kandi background
Explore Kits

Build Face Filter in Three.js

by kandikits Updated: Oct 20, 2022


AR Face Filter is very popular in recent years, especially with the rise of social media apps, such as Instagram and Snapchat. The use of AR Face Filters can be used to create an augmented reality experience by overlaying virtual objects on top of real images and videos.


The technology is similar to the one used by Facebook camera effects OR Snapchat selfie lens to add filters to their photos and videos but has its own unique style and capabilities.


kandi kit provides you with a fully deployable Face Filter for Insta & Snapchat. The source code included so that you can customize it for your requirement.

Deployment Information

The jeelizFaceFilter library added in this section is primarily used to create Face Filter using threejs project. The entire solution is available as a package to download from the source code repository.

Follow the below instructions to deploy and run the solution.

  1. Download, extract and double-click the kit installer file to install the kit.
  2. After the successful installation of the kit, press 'Y' to run the kit.
  3. To run the kit manually, press 'N' and locate the zip file 'jeelizFaceFilter-master'.
  4. Open the folder in Visual Studio Code.
  5. Run the command npm install and npm run dev.
  6. Once server starts, navigate to the respective localhost port. 7. Now, you will experience Augmented Reality in your own Environment.


Click on the button below to download the solution and follow the deployment instructions to begin set-up. This 1-click kit has all the required dependencies and resources you may need to build your Face Filter App.

Troubleshooting

  1. While running batch file, if you encounter a Windows protection alert, select More info --> Run anyway
  2. During kit installer, if you encounter a Windows security alert, click Allow

For a detailed tutorial on installing & executing the solution as well as learning resources including training & certification opportunities, please visit the OpenWeaver Community

Development Environment

Visual studio code IDE is used for this development. It becomes easy and simple to develop an interactive UI with Visual studio code.

vscodeby microsoft

TypeScript star image 142184 Version:1.75.0

License: Permissive (MIT)

Visual Studio Code

Support
Quality
Security
License
Reuse

vscodeby microsoft

TypeScript star image 142184 Version:1.75.0 License: Permissive (MIT)

Visual Studio Code
Support
Quality
Security
License
Reuse

AR Libraries

Three.js is the open-source web framework used to develop augmented reality (AR) projects.


Web-based augmented reality (WebAR) is the most advanced technology that allows users to access AR experiences directly from their smartphones.

aframeby aframevr

JavaScript star image 15024 Version:0.7.0

License: Permissive (MIT)

:a: Web framework for building virtual reality experiences.

Support
Quality
Security
License
Reuse

aframeby aframevr

JavaScript star image 15024 Version:0.7.0 License: Permissive (MIT)

:a: Web framework for building virtual reality experiences.
Support
Quality
Security
License
Reuse

three.jsby mrdoob

JavaScript star image 88728 Version:r149

License: Permissive (MIT)

JavaScript 3D Library.

Support
Quality
Security
License
Reuse

three.jsby mrdoob

JavaScript star image 88728 Version:r149 License: Permissive (MIT)

JavaScript 3D Library.
Support
Quality
Security
License
Reuse

AR.jsby AR-js-org

JavaScript star image 4265 Version:3.4.3

License: Permissive (MIT)

Image tracking, Location Based AR, Marker tracking. All on the Web.

Support
Quality
Security
License
Reuse

AR.jsby AR-js-org

JavaScript star image 4265 Version:3.4.3 License: Permissive (MIT)

Image tracking, Location Based AR, Marker tracking. All on the Web.
Support
Quality
Security
License
Reuse

Kit Solution Source

jeelizFaceFilterby jeeliz

JavaScript star image 2331 Version:3.0

License: Permissive (Apache-2.0)

Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).

Support
Quality
Security
License
Reuse

jeelizFaceFilterby jeeliz

JavaScript star image 2331 Version:3.0 License: Permissive (Apache-2.0)

Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).
Support
Quality
Security
License
Reuse

Support

If you need help using this kit, you may reach us at the OpenWeaver Community.