{"action":"created","issue":{"url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/issues/18","labels_url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/issues/18/labels{/name}","comments_url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/issues/18/comments","events_url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/issues/18/events","html_url":"https://github.com/ProjectSeptemberInc/gl-react/issues/18","id":108703386,"number":18,"title":"Need to find a solution for the alpha issue; not using blending","user":{"login":"gre","id":211411,"avatar_url":"https://avatars.githubusercontent.com/u/211411?v=3","gravatar_id":"","url":"https://api.github.com/users/gre","html_url":"https://github.com/gre","followers_url":"https://api.github.com/users/gre/followers","following_url":"https://api.github.com/users/gre/following{/other_user}","gists_url":"https://api.github.com/users/gre/gists{/gist_id}","starred_url":"https://api.github.com/users/gre/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gre/subscriptions","organizations_url":"https://api.github.com/users/gre/orgs","repos_url":"https://api.github.com/users/gre/repos","events_url":"https://api.github.com/users/gre/events{/privacy}","received_events_url":"https://api.github.com/users/gre/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/labels/enhancement","name":"enhancement","color":"84b6eb"},{"url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/labels/help%20wanted","name":"help wanted","color":"159818"},{"url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/labels/priority:high","name":"priority:high","color":"f7c6c7"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/milestones/2","html_url":"https://github.com/ProjectSeptemberInc/gl-react/milestones/1.1.0","labels_url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/milestones/2/labels","id":1318137,"number":2,"title":"1.1.0","description":"","creator":{"login":"gre","id":211411,"avatar_url":"https://avatars.githubusercontent.com/u/211411?v=3","gravatar_id":"","url":"https://api.github.com/users/gre","html_url":"https://github.com/gre","followers_url":"https://api.github.com/users/gre/followers","following_url":"https://api.github.com/users/gre/following{/other_user}","gists_url":"https://api.github.com/users/gre/gists{/gist_id}","starred_url":"https://api.github.com/users/gre/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gre/subscriptions","organizations_url":"https://api.github.com/users/gre/orgs","repos_url":"https://api.github.com/users/gre/repos","events_url":"https://api.github.com/users/gre/events{/privacy}","received_events_url":"https://api.github.com/users/gre/received_events","type":"User","site_admin":false},"open_issues":2,"closed_issues":5,"state":"open","created_at":"2015-09-22T10:42:10Z","updated_at":"2015-09-28T17:13:52Z","due_on":null,"closed_at":null},"comments":1,"created_at":"2015-09-28T17:13:49Z","updated_at":"2015-09-29T07:56:44Z","closed_at":null,"body":"(issue to follow https://github.com/ProjectSeptemberInc/gl-react-native/issues/12 )\r\n\r\n## Problem\r\n\r\nThe problem we are facing is trying to solve this:\r\n\r\n![](https://pbs.twimg.com/media/CPu7qiDWsAA4i4i.png)\r\n\r\nthis is the result of a pipeline a chain of N \"Copy\" shader framebuffers (that just copy a texture). And we do this on an [image](http://i.imgur.com/mp79p5T.png) with a gradient of opacity values on top of [another image](http://i.imgur.com/S22HNaU.png). Fact is we observe a reduction of the alpha values (like if alpha is multiplying itself. `80% x 80% = 64%` , ...).\r\n\r\nThis result occurs when doing a classical:\r\n\r\n`gl.clearFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)`\r\n\r\n## First solution attempted\r\n\r\nA solution is explained here: http://stackoverflow.com/a/18497511/343892 (answering this same problem).\r\nIt involves doing `gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);` with premultiplied texture.\r\n\r\nand i've tried to implement it. **It works**, but now there is two big downside:\r\n\r\n### 1. it is not reliable at all in WebGL world...\r\nBecause to make it possible, I need to create the WebGL context with `{ premultipliedAlpha: false }` option (which is not the default), and it does not work everywhere... [As mentioned here](http://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html), premultiplied alpha is enabled by default in WebGL and [as mentioned here](https://github.com/brianchirls/Seriously.js/commit/95e4eec0e54628c97f85dd927ca4344379635d5b), the premultipliedAlpha WebGL option is not stable across browser implementation since \"this option is optional and it is not feature-detectable\".\r\n\r\n### 2. shaders have to be premultiplied\r\n\r\nThis method only relies on using premultiplied alpha textures which means textures that have **their RGB components multiplied by the A component**.\r\nThis is also true for \"fbo textures\" that have been rendered by a shader.\r\n\r\nusing this \"non standard\" blending method, any \"generic\" shader will have to adapt to make itself \"premultiplied\". (if using transparency)\r\n\r\nNow a solution I've found is to not change it on the shader side, but introducing a new props (option) to make a specific pipeline effect using the classical `gl.SRC_ALPHA` instead.\r\n\r\nThis makes everything more complicated now...\r\n\r\n## Help wanted\r\n\r\nSo we are back at the beginning for this problem. I like to keep as few variation as possible from a default WebGL settings, so I wish to find a solution for this initial problem without involving esoteric blending modes.\r\n\r\n\r\nPS: the solution introduced here \"works\" in the react-native iOS implementation but i'm not so sure it works across all devices (since blending is generally a more advanced feature of OpenGL) and not sure it will also work in a future Android version. So I wish to move it to more standard approach too."},"comment":{"url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/issues/comments/143977363","html_url":"https://github.com/ProjectSeptemberInc/gl-react/issues/18#issuecomment-143977363","issue_url":"https://api.github.com/repos/ProjectSeptemberInc/gl-react/issues/18","id":143977363,"user":{"login":"gre","id":211411,"avatar_url":"https://avatars.githubusercontent.com/u/211411?v=3","gravatar_id":"","url":"https://api.github.com/users/gre","html_url":"https://github.com/gre","followers_url":"https://api.github.com/users/gre/followers","following_url":"https://api.github.com/users/gre/following{/other_user}","gists_url":"https://api.github.com/users/gre/gists{/gist_id}","starred_url":"https://api.github.com/users/gre/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gre/subscriptions","organizations_url":"https://api.github.com/users/gre/orgs","repos_url":"https://api.github.com/users/gre/repos","events_url":"https://api.github.com/users/gre/events{/privacy}","received_events_url":"https://api.github.com/users/gre/received_events","type":"User","site_admin":false},"created_at":"2015-09-29T07:56:44Z","updated_at":"2015-09-29T07:56:44Z","body":"no one seems to have an answer for this. We will probably go with current solution + a feature-detection (I think we can feature detect it by drawing in a 1 x 1 canvas) and fallback on classic method that won't properly support stack of effects using alpha."}}