MangaMaterial
This class will be used as a ThreeJS material. You can make a mesh being a manga-like style by using
MangaMaterial as its material
Parameters (MaterialOptions)
outlinePixelStep: number | undefined
default value: 2
This value specifies how far around pixels will be compared with the current pixel in the outline depth map.
if the pixels’s depth difference is more than
outlineThreshold
, the pixel will be treated as a line pixel and be painted black.
outlineThreshold: number | undefined
default value: 0.01
As I said in
outlinePixelStep
, this value will be used to determine if a pixel is outside the line or not.
This value will be compared with the difference in pixel depth. So, the less value is the more outside edge detection sensitive is.
inlinePixelStep: number | undefined
default value: 2
This value specifies how far around pixels will be compared with the current pixel in the normal map.
if the pixels’s normal angle is more than
inlineThreshold
, the pixel will be treated as a line pixel and be painted black.
inlineThreshold: number | undefined
default value: 0.5
As I said in
inlinePixelStep
, this value will be used to determine if a pixel is inside the line or not.
The value unit isn’t directly the degree of angle between pixel normals. It’s passed through the cosine function. So, its range is between -1 and 1.
The more value is the more inside edge detection sensitive is.
shadowPattern: SHADOW_PATTERN | undefined
default value: SHADOW_PATTERN.BASIC
This value determine if shadow will be render with which pattern.
There are 2 pattern
BASIC
and
HATCHING
hatchingVoronoiBaseCellSize: number | undefined
default value: 100
This value will be use when render shadow. It’s used to determine how big hatching group size will be.
hatchingVoronoiCellWallPadding: number | undefined
default value: 10
This value will be use when render shadow. It’s used to determine how big gap between hatching group will be.
Properties
Because the MangaMaterial extends from
THREE.ShaderMaterial
. So, all of properties are the same.
But, there are also additional properties which is from Parameters
For example, you can update material.outlinePixelStep
const mangaShaderManager = new ThreeManga.MangaShaderManager({
renderer: renderer,
scene: scene,
camera: camera,
lightList: [],
resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
})
const material = mangaShaderManager.getMangaMaterial()
material.outlinePixelStep = 10
You can update the property while calling render method because it will effect imediately