{"action":"created","issue":{"url":"https://api.github.com/repos/mrdoob/three.js/issues/13222","repository_url":"https://api.github.com/repos/mrdoob/three.js","labels_url":"https://api.github.com/repos/mrdoob/three.js/issues/13222/labels{/name}","comments_url":"https://api.github.com/repos/mrdoob/three.js/issues/13222/comments","events_url":"https://api.github.com/repos/mrdoob/three.js/issues/13222/events","html_url":"https://github.com/mrdoob/three.js/issues/13222","id":293482904,"number":13222,"title":"SAOPass: Change blending mode when rendering to screen","user":{"login":"cnspaha","id":22448974,"avatar_url":"https://avatars2.githubusercontent.com/u/22448974?v=4","gravatar_id":"","url":"https://api.github.com/users/cnspaha","html_url":"https://github.com/cnspaha","followers_url":"https://api.github.com/users/cnspaha/followers","following_url":"https://api.github.com/users/cnspaha/following{/other_user}","gists_url":"https://api.github.com/users/cnspaha/gists{/gist_id}","starred_url":"https://api.github.com/users/cnspaha/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cnspaha/subscriptions","organizations_url":"https://api.github.com/users/cnspaha/orgs","repos_url":"https://api.github.com/users/cnspaha/repos","events_url":"https://api.github.com/users/cnspaha/events{/privacy}","received_events_url":"https://api.github.com/users/cnspaha/received_events","type":"User","site_admin":false},"labels":[{"id":175827,"url":"https://api.github.com/repos/mrdoob/three.js/labels/Suggestion","name":"Suggestion","color":"ffffcf","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2018-02-01T10:45:33Z","updated_at":"2018-02-05T06:19:28Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"##### Description of the problem\r\n\r\nFollowing case:\r\n1. Render some stuff on the canvas\r\n2. Use SAOPass with ```renderToScreen=true``` for postprocessing\r\n3. Expected behaviour => SAO is being put/rendered over the current canvas\r\n    Actual behaviour     => Canvas is being 'cleaned' with the (probably empty) readBuffer \r\n\r\nThe actual behaviour happens because the SAOPass renders the readBuffer (which can be empty) with no blending (```THREE.NoBlending```) on the canvas. Because there is no blending, the canvas gets 'cleaned/overwritten' with this readBuffer.\r\n\r\n```javascript\r\nTHREE.SAOPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {\r\n\tconstructor: THREE.SAOPass,\r\n\r\n\trender: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {\r\n\r\n\t\t// Rendering readBuffer first when rendering to screen\r\n\t\tif ( this.renderToScreen ) {\r\n\r\n\t\t\tthis.materialCopy.blending = THREE.NoBlending; // <-- HERE!!!!!!!\r\n\t\t\tthis.materialCopy.uniforms[ 'tDiffuse' ].value = readBuffer.texture;\r\n\t\t\tthis.materialCopy.needsUpdate = true;\r\n\t\t\tthis.renderPass( renderer, this.materialCopy, null );\r\n\r\n\t\t}\r\n```\r\n\r\nPossible Fix:\r\nInstead of ```THREE.NoBlending``` we could use ```THREE.NormalBlending``` so the readBuffer doesn't 'clean/overwrite' the canvas with its content.\r\n\r\n```javascript\r\nTHREE.SAOPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {\r\n\tconstructor: THREE.SAOPass,\r\n\r\n\trender: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {\r\n\r\n\t\t// Rendering readBuffer first when rendering to screen\r\n\t\tif ( this.renderToScreen ) {\r\n\r\n\t\t\tthis.materialCopy.blending = THREE.NormalBlending; // <-- HERE!!!!!!!\r\n\t\t\tthis.materialCopy.uniforms[ 'tDiffuse' ].value = readBuffer.texture;\r\n\t\t\tthis.materialCopy.needsUpdate = true;\r\n\t\t\tthis.renderPass( renderer, this.materialCopy, null );\r\n\r\n\t\t}\r\n```\r\n\r\n\r\n/ping @Mugen87  @mrdoob \r\n\r\n\r\nI don't mind providing a PR if my suggestion is fine with you.\r\n\r\n##### Three.js version\r\n\r\n- [x ] Dev\r\n\r\n\r\n##### Browser\r\n\r\n- [x] All of them\r\n- [ ] Chrome\r\n- [ ] Firefox\r\n- [ ] Internet Explorer\r\n\r\n##### OS\r\n\r\n- [x] All of them\r\n- [ ] Windows\r\n- [ ] macOS\r\n- [ ] Linux\r\n- [ ] Android\r\n- [ ] iOS\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/mrdoob/three.js/issues/comments/362991955","html_url":"https://github.com/mrdoob/three.js/issues/13222#issuecomment-362991955","issue_url":"https://api.github.com/repos/mrdoob/three.js/issues/13222","id":362991955,"user":{"login":"cnspaha","id":22448974,"avatar_url":"https://avatars2.githubusercontent.com/u/22448974?v=4","gravatar_id":"","url":"https://api.github.com/users/cnspaha","html_url":"https://github.com/cnspaha","followers_url":"https://api.github.com/users/cnspaha/followers","following_url":"https://api.github.com/users/cnspaha/following{/other_user}","gists_url":"https://api.github.com/users/cnspaha/gists{/gist_id}","starred_url":"https://api.github.com/users/cnspaha/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cnspaha/subscriptions","organizations_url":"https://api.github.com/users/cnspaha/orgs","repos_url":"https://api.github.com/users/cnspaha/repos","events_url":"https://api.github.com/users/cnspaha/events{/privacy}","received_events_url":"https://api.github.com/users/cnspaha/received_events","type":"User","site_admin":false},"created_at":"2018-02-05T06:19:28Z","updated_at":"2018-02-05T06:19:28Z","author_association":"CONTRIBUTOR","body":"@WestLangley \r\nyeah, just prepared a little example\r\nhttps://jsfiddle.net/s3rjfcc3/12/\r\nas you can see, you only see the green cube+SAO but the red cube is also rendered but overwritten/cleared by the SAOPass, see images below.\r\n\r\nIn this example the readbuffer isn't empty, it's the green cube. But if it would be empty (no ```THREE.RenderPass```) you would only see black.\r\n\r\n```javascript\r\n    function animate() {\r\n      requestAnimationFrame(animate);\r\n      renderer.render(scene2, camera); // rendering of red cube to screen/canvas\r\n\r\n      composer.render(scene, camera); // rendering of green cube + SAO to screen/canvas\r\n    }\r\n```\r\n\r\nWhat I expect:\r\n![1](https://user-images.githubusercontent.com/22448974/35790714-142ae670-0a44-11e8-9541-e81832c6dc72.PNG)\r\nWhat I get:\r\n![2](https://user-images.githubusercontent.com/22448974/35790715-144b309c-0a44-11e8-92a3-813ff79c0ca2.PNG)\r\n\r\nSpector.js:\r\nleft side is with my changes, right side without my changes:\r\n![3](https://user-images.githubusercontent.com/22448974/35790713-141067e6-0a44-11e8-9ffe-3cce0cf2b675.PNG)\r\nyou can see, on the left side the SAOPass is being blended with the previous rendered red cube => ```THREE.NormalBlending```, on the right side its ```THREE.NoBlending```\r\n\r\n\r\n\r\n"}}
{"actor":{"display_login":"cnspaha"}}