SOAPass - Cannot read properties of undefined (reading 'length')

61 Views Asked by At

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

0

There are 0 best solutions below