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