Three Manga | Manga shader manager

THREE MANGA

Manga style shader library for ThreeJS

Demo

Docs

Reference

MangaDirectionalLight

MangaShaderManager

This class has the responsibility to update and provide textures to MangaMaterial. And, you can also initiate a new MangaMaterial instance from this class as well.

Parameters (MangaShaderManagerParams)

renderer: THREE.WebGLRenderer

The taget renderer from ThreeJS

scene: THREE.Scene

The renderer from ThreeJS

camera: THREE.Camera

The camera from ThreeJS will be used to calculate depth maps and normal maps. You should pass your main camera here.

lightList: MangaLight[]

All manga lights casting manga-style shadow.

resolution: THREE.Vector2

The resolution of the screen. If your screen is an entire browser screen, you can pass window.innerWidth and window.innerHeight.

shadowDepthTexturepixelsPerUnit: number | undefined

default value: 1024

This value is used to multiply resolution to determine shadow depth map resolution. So, if you want the shadow to be more detailed, you can increase this value.

shadowBias: number | undefined

default value: 0.001

It’s a bias value used in shadow calculation to avoid shadow acne. Learn more here Shadow Mapping.

Methods

update(): void

It should be called every time the scene has any change to update normal and shadow depth textures.

getMangaMaterial(options?: MaterialOptions): MangaMaterial

You can get manga material from this method.

setResolution(value: THREE.Vector2)

When the target renderer size changes, you should update the resolution with this method to keep the rendering result fit with the rendering area.

This is an example of responsive code for screen size renderer.

const onResize = () => {
  mangaShaderManager.renderer.setSize(window.innerWidth, window.innerHeight)
  mangaShaderManager.setResolution(
    new THREE.Vector2(window.innerWidth, window.innerHeight)
  )
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
}

window.addEventListener('resize', onResize)

getResolution(): THREE.Vector2