Threejs Cartoon Outline Effect


From: https://medium.com/@joshmarinacci/cartoon-outline-effect-6c4e95545537

//create a cube
obj = new THREE.Group()
const c1 = new THREE.Mesh(
new THREE.TorusKnotBufferGeometry(0.6,0.1),
new THREE.MeshLambertMaterial({
color:’black’,
}))
const s = 1.03
c1.scale.set(s,s,s)
obj.add(c1)
obj.add(new THREE.Mesh(
new THREE.TorusKnotBufferGeometry(0.6,0.1),
new THREE.MeshPhongMaterial({
color:’yellow’,
})
))
Torus with Z-Fighting

Culling Explained in 15 seconds

obj = new THREE.Group()
const c1 = new THREE.Mesh(
new THREE.TorusKnotBufferGeometry(0.6,0.1),
new THREE.MeshLambertMaterial({
color:’black’,
side: THREE.BackSide
})
)
const s = 1.03
c1.scale.set(s,s,s)
obj.add(c1)
obj.add(new THREE.Mesh(
new THREE.TorusKnotBufferGeometry(0.6,0.1),
new THREE.MeshPhongMaterial({
color:’yellow’,
side: THREE.FrontSide
})
))
Better Outline Effect

Fixing the Normals

//create a cube
const mat = new THREE.MeshLambertMaterial({
color:’black’,
side:THREE.BackSide
})
mat.onBeforeCompile = (shader) => {
const token = ‘#include <begin_vertex>’
const customTransform = `
vec3 transformed = position + objectNormal*0.02;
`
shader.vertexShader =
shader.vertexShader.replace(token,customTransform)
}
Torus with correct outline shader

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.