I tried to used SAO Postprocessing however I get this error at composer.render() execution.
My code:
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(divWidth, divHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap
const camera = new THREE.PerspectiveCamera(10, divWidth / divHeight, 0.005, 1000);
var ratio = 10.2
camera.position.set(-0.02 * ratio, 0.12 * ratio, 0.08 * ratio);
camera.updateProjectionMatrix();
var composer = new EffectComposer(renderer);
var renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
var saoPass = new SAOPass(scene, camera, false, true, new THREE.Vector2(divWidth, divHeight));
saoPass['params']['output'] = SAOPass.OUTPUT.Beauty
saoPass['params']['saoBias'] = .5
saoPass['params']['saoIntensity'] = .18
saoPass['params']['saoScale'] = 1
saoPass['params']['saoKernelRadius'] = 100
saoPass['params']['saoMinResolution'] = 0
saoPass['params']['saoBlur'] = false
saoPass['params']['saoBlurRadius'] = 8
saoPass['params']['saoBlurStdDev'] = 4
saoPass['params']['saoBlurDepthCutoff'] = .01
composer.addPass(saoPass);
composer.setSize(divWidth, divHeight);
/* load GLB then => { composer.render() }; */
Stack trace:
three.module.js:28331 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at setProgram (three.module.js:28331:32)
at WebGLRenderer.renderBufferDirect (three.module.js:27254:19)
at renderObject (three.module.js:27862:10)
at renderObjects (three.module.js:27831:5)
at renderScene (three.module.js:27755:40)
at WebGLRenderer.render (three.module.js:27573:4)
at FullScreenQuad.render (Pass.js:62:12)
at SAOPass.renderPass (SAOPass.js:343:15)
at SAOPass.render (SAOPass.js:197:9)
at EffectComposer.render (EffectComposer.js:141:9)
Error happen on this line in threejs lib:
// UBOs
if ( material.isShaderMaterial || material.isRawShaderMaterial ) {
const groups = material.uniformsGroups;
for ( let i = 0, l = groups.length; i < l; i ++ ) {
if ( capabilities.isWebGL2 ) {
Is something would be wrong in my glb scene ?
If I render without postprocessing, it works well.
Thank you for your help