How can we make unsharp mask?

Hi I am building website which can be uploaded 3D graphic model with ThreeJS. Now I achieve to apply textures and image filters such as brightness, contrast and saturation etc.

Those options are based on this website, http://evanw.github.io/webgl-filter/. And now I am trying to apply unsharp mask. It looks kind of Sharpness, but I have no idea how to put the code in GUI.

I hope this function be change its values like above link. Please share any idea, how can I apply unsharp mask in ThreeJS and which can be seen in 3D object directly? Thank you in advance your help!

Hello Syonis,

In a 3D world, there are 2 cases (certainly more), one can use the unsharp mask. It can be applied to the:

  • object material texture
  • whole scene

If you want to apply your mask to the material texture: create a canvas object from your image and apply the mask (to the canvas) at runtime. This post should help you do the image to canvas step: http://stackoverflow.com/questions/39059380/drawing-an-image-on-a-canvas-and-returning-as-a-texture

If you want to apply the mask to the whole scene, you will need to create a custom shader and use THREE.js postprocessing pipeline (composer) to apply the mask.

Hope this will help you get started…

1 Like