When attaching outline pass to an object, I see a large performance drop in Three.js r116
r116_laggy
While r115 I did not have these issues
r115_smoth (online-video-cutter.com) (2)
Any ideas why this may be happening? Here is my setup, it largely follows the example on the three js site.
export function setup(element: HTMLElement, farmId: string, debug=false, shadowsEnabled=false) {
const renderer = setupRenderer()
const scene = new Scene()
const camera = setupCamera()
const [composer, outlinePass] = setupPostProcessing(renderer, camera, scene)
const [mapControls] = setupControls(renderer, camera)
scene.add(dragControls)
scene.add(lights)
setupRenderloop(scene, camera, mapControls, composer, stats)
setupResizeHandler(renderer, camera, composer)
setupActionController(element, farm, camera, outlinePass, dragControls)
element.appendChild(renderer.domElement)
}
function setupRenderer(): WebGLRenderer {
const renderer = new WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.gammaFactor = 2.2
renderer.physicallyCorrectLights = true
renderer.outputEncoding = sRGBEncoding
renderer.toneMapping = ACESFilmicToneMapping
renderer.setClearColor(Colors.SKY, 1)
renderer.shadowMap.enabled = true
renderer.shadowMap.type = PCFShadowMap
return renderer
}
function setupPostProcessing(
renderer: WebGLRenderer, camera: Camera, scene: Scene
): [EffectComposer, OutlinePass] {
const composer = new EffectComposer(renderer)
const renderPass = new RenderPass(scene, camera)
const outlinePass = new OutlinePass(new Vector2(window.innerWidth, window.innerHeight), scene, camera)
outlinePass.edgeThickness = 2
outlinePass.edgeStrength = 10
outlinePass.visibleEdgeColor.set(0xffffff)
outlinePass.hiddenEdgeColor.set(0x190a05)
composer.addPass(renderPass)
composer.addPass(outlinePass)
renderPass.renderToScreen = true
return [composer, outlinePass]
}
function setupRenderloop(
scene: Scene, camera: PerspectiveCamera, mapControls: MapControls, composer: EffectComposer, stats: Stats
) {
const onAnimationFrameHandler = () => {
if (stats) stats.begin()
mapControls.update()
composer.render()
updateTextSprites(scene, camera)
if (stats) stats.end()
window.requestAnimationFrame(onAnimationFrameHandler)
}
window.requestAnimationFrame(onAnimationFrameHandler)
}
Iāve omitted some code that does not pertain to this issue (like setupControls).
