33386 2010-01-08 08:08:30 -0800 WebGL does not blend correctly with other web content 2019-07-22 21:50:14 -0700 1 1 1 Unclassified WebKit WebGL 528+ (Nightly build) Mac OS X 10.5 RESOLVED FIXED InRadar P2 Normal --- 1 simon.fraser dino bfulgham dino gman graouts jonlee kbr simon.fraser webkit-bug-importer zmo oldest_to_newest 178681 0 46137 simon.fraser 2010-01-08 08:08:30 -0800 Created attachment 46137 Testcase WebGL does not blend as expected with the rest of the web content, and Firefox and WebKit show different behavior. See attached testcase. 178709 1 cmarrin 2010-01-08 10:16:08 -0800 I believe WebKit is doing the right thing here. When WebGL composites with the page, the compositor assumes that the pixels in the color buffer are premultiplied. This essentially means that any color value that is greater than the alpha value at that pixel is invalid, or oversaturated. So using a clear color of (1,0,0,0.5) as in the example results in oversaturated red pixels. And this is the result you see. If you use a value of (0.5,0,0,0.5) where you have premultiplied the red value by the alpha value, you get the expected results. If you use this clear value, both WebKit and Firefox have compatible results. When using (1,0,0,0.5) WebKit clamps oversaturated colors to 1, which I believe is the correct behavior. But Firefox seems to replace oversaturated colors with black, which I think is wrong. In OpenGL you setup a blendFunc so you can tell the renderer how to combine a source pixel with the destination. For instance, blendFunc(ALPHA, ONE_MINUS_ALPHA) says that source pixels are multiplied by alpha, then the destination is multiplied by 1-alpha and then the colors are added. In this case the source color is not premultiplied. You can also use blendFunc(ONE, ONE_MINUS_ALPHA), which means the source color is multiplied by 1 (unchanged), then the destination is multiplied by 1-alpha and then the colors are added. So here the source colors are assumed to be premultiplied. The problem is that the clearColor in OpenGL is not subjected to the blendFunc. So the user has to know what the desired result is and choose a clear color accordingly. Incidentally, WebGL has the option of assuming the color buffer DOES NOT have premultiplied alpha when being composited. This is not implemented in WebGL, but when it is, we may well have to do a separate premultiply step before compositing. 1009832 2 webkit-bug-importer 2014-05-16 13:53:28 -0700 <rdar://problem/16945697> 1178992 3 jonlee 2016-03-29 23:54:55 -0700 I see Firefox and us agree. Chrome still renders the left square differently. 1179225 4 kbr 2016-03-30 16:11:27 -0700 Apologies for the longstanding problem and lack of consistency between browsers. Filed http://crbug.com/599285 to investigate this in Chromium. The WebGL conformance suite needs reftests that run on all browsers to enforce consistent behavior in areas like this where the results can not be tested in a pure browser environment. 1179235 5 simon.fraser 2016-03-30 16:41:30 -0700 One question here is whether the blending of WebGL with other page content is specified by CSS or by WebGL. I would suggest the former. Relevant: http://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html 46137 2010-01-08 08:08:30 -0800 2010-01-08 08:08:30 -0800 Testcase webgl-blending.html text/html 6468 simon.fraser PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHNjcmlwdCBpZD0idnNoYWRlciIg dHlwZT0ieC1zaGFkZXIveC12ZXJ0ZXgiPgogICAgICAgIGF0dHJpYnV0ZSB2ZWM0IHZQb3NpdGlv bjsKICAgICAgICB2b2lkIG1haW4oKQogICAgICAgIHsKICAgICAgICAgICAgZ2xfUG9zaXRpb24g PSB2UG9zaXRpb247CiAgICAgICAgfQogICAgPC9zY3JpcHQ+CgogICAgPHNjcmlwdCBpZD0iZnNo YWRlciIgdHlwZT0ieC1zaGFkZXIveC1mcmFnbWVudCI+CiAgICAgICAgdm9pZCBtYWluKCkKICAg ICAgICB7CiAgICAgICAgICAgIGdsX0ZyYWdDb2xvciA9IHZlYzQoMS4wLCAwLjAsIDAuMCwgMC41 KTsKICAgICAgICB9CiAgICA8L3NjcmlwdD4KCiAgICA8c2NyaXB0PgogICAgICAgIGZ1bmN0aW9u IGluaXRXZWJHTChjYW52YXNOYW1lLCB2c2hhZGVyLCBmc2hhZGVyLCBhdHRyaWJzLCBjbGVhckNv bG9yLCBjbGVhckRlcHRoKQogICAgICAgIHsKICAgICAgICAgICAgdmFyIGNhbnZhcyA9IGRvY3Vt ZW50LmdldEVsZW1lbnRCeUlkKGNhbnZhc05hbWUpOwogICAgICAgICAgICB2YXIgZ2wgPSBjYW52 YXMuZ2V0Q29udGV4dCgiZXhwZXJpbWVudGFsLXdlYmdsIik7CiAgICAgICAgICAgIGlmICghZ2wp IHsKICAgICAgICAgICAgICAgIGFsZXJ0KCJObyBXZWJHTCBjb250ZXh0IGZvdW5kIik7CiAgICAg ICAgICAgICAgICByZXR1cm4gbnVsbDsKICAgICAgICAgICAgfQoKICAgICAgICAgICAgLy8gQWRk IGEgY29uc29sZQogICAgICAgICAgICBnbC5jb25zb2xlID0gKCJjb25zb2xlIiBpbiB3aW5kb3cp ID8gd2luZG93LmNvbnNvbGUgOiB7IGxvZzogZnVuY3Rpb24oKSB7IH0gfTsKCiAgICAgICAgICAg IC8vIGNyZWF0ZSBvdXIgc2hhZGVycwogICAgICAgICAgICB2YXIgdmVydGV4U2hhZGVyID0gbG9h ZFNoYWRlcihnbCwgdnNoYWRlcik7CiAgICAgICAgICAgIHZhciBmcmFnbWVudFNoYWRlciA9IGxv YWRTaGFkZXIoZ2wsIGZzaGFkZXIpOwoKICAgICAgICAgICAgaWYgKCF2ZXJ0ZXhTaGFkZXIgfHwg IWZyYWdtZW50U2hhZGVyKQogICAgICAgICAgICAgICAgcmV0dXJuIG51bGw7CgogICAgICAgICAg ICAvLyBDcmVhdGUgdGhlIHByb2dyYW0gb2JqZWN0CiAgICAgICAgICAgIGdsLnByb2dyYW0gPSBn bC5jcmVhdGVQcm9ncmFtKCk7CgogICAgICAgICAgICBpZiAoIWdsLnByb2dyYW0pCiAgICAgICAg ICAgICAgICByZXR1cm4gbnVsbDsKCiAgICAgICAgICAgIC8vIEF0dGFjaCBvdXIgdHdvIHNoYWRl cnMgdG8gdGhlIHByb2dyYW0KICAgICAgICAgICAgZ2wuYXR0YWNoU2hhZGVyIChnbC5wcm9ncmFt LCB2ZXJ0ZXhTaGFkZXIpOwogICAgICAgICAgICBnbC5hdHRhY2hTaGFkZXIgKGdsLnByb2dyYW0s IGZyYWdtZW50U2hhZGVyKTsKCiAgICAgICAgICAgIC8vIEJpbmQgYXR0cmlidXRlcwogICAgICAg ICAgICBmb3IgKHZhciBpIGluIGF0dHJpYnMpCiAgICAgICAgICAgICAgICBnbC5iaW5kQXR0cmli TG9jYXRpb24gKGdsLnByb2dyYW0sIGksIGF0dHJpYnNbaV0pOwoKICAgICAgICAgICAgLy8gTGlu ayB0aGUgcHJvZ3JhbQogICAgICAgICAgICBnbC5saW5rUHJvZ3JhbShnbC5wcm9ncmFtKTsKCiAg ICAgICAgICAgIC8vIENoZWNrIHRoZSBsaW5rIHN0YXR1cwogICAgICAgICAgICB2YXIgbGlua2Vk ID0gZ2wuZ2V0UHJvZ3JhbVBhcmFtZXRlcihnbC5wcm9ncmFtLCBnbC5MSU5LX1NUQVRVUyk7CiAg ICAgICAgICAgIGlmICghbGlua2VkKSB7CiAgICAgICAgICAgICAgICAvLyBzb21ldGhpbmcgd2Vu dCB3cm9uZyB3aXRoIHRoZSBsaW5rCiAgICAgICAgICAgICAgICB2YXIgZXJyb3IgPSBnbC5nZXRQ cm9ncmFtSW5mb0xvZyAoZ2wucHJvZ3JhbSk7CiAgICAgICAgICAgICAgICBnbC5jb25zb2xlLmxv ZygiRXJyb3IgaW4gcHJvZ3JhbSBsaW5raW5nOiIrZXJyb3IpOwoKICAgICAgICAgICAgICAgIGds LmRlbGV0ZVByb2dyYW0oZ2wucHJvZ3JhbSk7CiAgICAgICAgICAgICAgICBnbC5kZWxldGVQcm9n cmFtKGZyYWdtZW50U2hhZGVyKTsKICAgICAgICAgICAgICAgIGdsLmRlbGV0ZVByb2dyYW0odmVy dGV4U2hhZGVyKTsKCiAgICAgICAgICAgICAgICByZXR1cm4gbnVsbDsKICAgICAgICAgICAgfQoK ICAgICAgICAgICAgZ2wudXNlUHJvZ3JhbShnbC5wcm9ncmFtKTsKCiAgICAgICAgICAgIGdsLmNs ZWFyQ29sb3IoY2xlYXJDb2xvclswXSwgY2xlYXJDb2xvclsxXSwgY2xlYXJDb2xvclsyXSwgY2xl YXJDb2xvclszXSk7CiAgICAgICAgICAgIGdsLmNsZWFyRGVwdGgoY2xlYXJEZXB0aCk7CgogICAg ICAgICAgICBnbC5lbmFibGUoZ2wuREVQVEhfVEVTVCk7CiAgICAgICAgICAgIGdsLmVuYWJsZShn bC5CTEVORCk7CiAgICAgICAgICAgIGdsLmJsZW5kRnVuYyhnbC5TUkNfQUxQSEEsIGdsLk9ORSk7 CgogICAgICAgICAgICByZXR1cm4gZ2w7CiAgICAgICAgfQoKICAgICAgICAvLwogICAgICAgIC8v IGxvYWRTaGFkZXIKICAgICAgICAvLwogICAgICAgIC8vICdzaGFkZXJJZCcgaXMgdGhlIGlkIG9m IGEgPHNjcmlwdD4gZWxlbWVudCBjb250YWluaW5nIHRoZSBzaGFkZXIgc291cmNlIHN0cmluZy4K ICAgICAgICAvLyBMb2FkIHRoaXMgc2hhZGVyIGFuZCByZXR1cm4gdGhlIFdlYkdMU2hhZGVyIG9i amVjdCBjb3JyZXNwb25kaW5nIHRvIGl0LgogICAgICAgIC8vCiAgICAgICAgZnVuY3Rpb24gbG9h ZFNoYWRlcihjdHgsIHNoYWRlcklkKQogICAgICAgIHsKICAgICAgICAgICAgdmFyIHNoYWRlclNj cmlwdCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKHNoYWRlcklkKTsKICAgICAgICAgICAgaWYg KCFzaGFkZXJTY3JpcHQpIHsKICAgICAgICAgICAgICAgIGN0eC5jb25zb2xlLmxvZygiKioqIEVy cm9yOiBzaGFkZXIgc2NyaXB0ICciK3NoYWRlcklkKyInIG5vdCBmb3VuZCIpOwogICAgICAgICAg ICAgICAgcmV0dXJuIG51bGw7CiAgICAgICAgICAgIH0KCiAgICAgICAgICAgIGlmIChzaGFkZXJT Y3JpcHQudHlwZSA9PSAieC1zaGFkZXIveC12ZXJ0ZXgiKQogICAgICAgICAgICAgICAgdmFyIHNo YWRlclR5cGUgPSBjdHguVkVSVEVYX1NIQURFUjsKICAgICAgICAgICAgZWxzZSBpZiAoc2hhZGVy U2NyaXB0LnR5cGUgPT0gIngtc2hhZGVyL3gtZnJhZ21lbnQiKQogICAgICAgICAgICAgICAgdmFy IHNoYWRlclR5cGUgPSBjdHguRlJBR01FTlRfU0hBREVSOwogICAgICAgICAgICBlbHNlIHsKICAg ICAgICAgICAgICAgIGN0eC5jb25zb2xlLmxvZygiKioqIEVycm9yOiBzaGFkZXIgc2NyaXB0ICci K3NoYWRlcklkKyInIG9mIHVuZGVmaW5lZCB0eXBlICciK3NoYWRlclNjcmlwdC50eXBlKyInIik7 CiAgICAgICAgICAgICAgICByZXR1cm4gbnVsbDsKICAgICAgICAgICAgfQoKICAgICAgICAgICAg Ly8gQ3JlYXRlIHRoZSBzaGFkZXIgb2JqZWN0CiAgICAgICAgICAgIHZhciBzaGFkZXIgPSBjdHgu Y3JlYXRlU2hhZGVyKHNoYWRlclR5cGUpOwogICAgICAgICAgICBpZiAoc2hhZGVyID09IG51bGwp IHsKICAgICAgICAgICAgICAgIGN0eC5jb25zb2xlLmxvZygiKioqIEVycm9yOiB1bmFibGUgdG8g Y3JlYXRlIHNoYWRlciAnIitzaGFkZXJJZCsiJyIpOyAgICAgICAKICAgICAgICAgICAgICAgIHJl dHVybiBudWxsOwogICAgICAgICAgICB9CgogICAgICAgICAgICAvLyBMb2FkIHRoZSBzaGFkZXIg c291cmNlCiAgICAgICAgICAgIGN0eC5zaGFkZXJTb3VyY2Uoc2hhZGVyLCBzaGFkZXJTY3JpcHQu dGV4dCk7CgogICAgICAgICAgICAvLyBDb21waWxlIHRoZSBzaGFkZXIKICAgICAgICAgICAgY3R4 LmNvbXBpbGVTaGFkZXIoc2hhZGVyKTsKCiAgICAgICAgICAgIC8vIENoZWNrIHRoZSBjb21waWxl IHN0YXR1cwogICAgICAgICAgICB2YXIgY29tcGlsZWQgPSBjdHguZ2V0U2hhZGVyUGFyYW1ldGVy KHNoYWRlciwgY3R4LkNPTVBJTEVfU1RBVFVTKTsKICAgICAgICAgICAgaWYgKCFjb21waWxlZCkg ewogICAgICAgICAgICAgICAgLy8gU29tZXRoaW5nIHdlbnQgd3JvbmcgZHVyaW5nIGNvbXBpbGF0 aW9uOyBnZXQgdGhlIGVycm9yCiAgICAgICAgICAgICAgICB2YXIgZXJyb3IgPSBjdHguZ2V0U2hh ZGVySW5mb0xvZyhzaGFkZXIpOwogICAgICAgICAgICAgICAgY3R4LmNvbnNvbGUubG9nKCIqKiog RXJyb3IgY29tcGlsaW5nIHNoYWRlciAnIitzaGFkZXJJZCsiJzoiK2Vycm9yKTsKICAgICAgICAg ICAgICAgIGN0eC5kZWxldGVTaGFkZXIoc2hhZGVyKTsKICAgICAgICAgICAgICAgIHJldHVybiBu dWxsOwogICAgICAgICAgICB9CgogICAgICAgICAgICByZXR1cm4gc2hhZGVyOwogICAgICAgIH0K ICAgIAogICAgICAgIGZ1bmN0aW9uIGluaXQoKQogICAgICAgIHsKICAgICAgICAgICAgdmFyIGds ID0gaW5pdFdlYkdMKCJjYW52YXMiLCAidnNoYWRlciIsICJmc2hhZGVyIiwgWyAidlBvc2l0aW9u Il0sIFsgMSwgMCwgMCwgMC41IF0sIDEpOwogICAgICAgICAgICBnbC52aWV3cG9ydCgwLCAwLCAy MDAsIDIwMCk7CiAgICAgICAgICAgIGdsLmNsZWFyKGdsLkNPTE9SX0JVRkZFUl9CSVQgfCBnbC5E RVBUSF9CVUZGRVJfQklUKTsKICAgICAgICAgICAgCiAgICAgICAgICAgIC8vIHZhciB2ZXJ0ZXhP YmplY3QgPSBnbC5jcmVhdGVCdWZmZXIoKTsKICAgICAgICAgICAgLy8gZ2wuYmluZEJ1ZmZlcihn bC5BUlJBWV9CVUZGRVIsIHZlcnRleE9iamVjdCk7CiAgICAgICAgICAgIC8vIGdsLmJ1ZmZlckRh dGEoZ2wuQVJSQVlfQlVGRkVSLCBuZXcgV2ViR0xGbG9hdEFycmF5KFsgMCwwLjUsMCwgLTAuNSwt MC41LDAsIDAuNSwtMC41LDAgXSksIGdsLlNUQVRJQ19EUkFXKTsKICAgICAgICAgICAgLy8gZ2wu ZW5hYmxlVmVydGV4QXR0cmliQXJyYXkoMCk7CiAgICAgICAgICAgIC8vIGdsLnZlcnRleEF0dHJp YlBvaW50ZXIoMCwgMywgZ2wuRkxPQVQsIGZhbHNlLCAwLCAwKTsKICAgICAgICAgICAgLy8gCiAg ICAgICAgICAgIC8vIGdsLmNsZWFyKGdsLkNPTE9SX0JVRkZFUl9CSVQgfCBnbC5ERVBUSF9CVUZG RVJfQklUKTsKICAgICAgICAgICAgLy8gZ2wuZHJhd0FycmF5cyhnbC5UUklBTkdMRVMsIDAsIDMp OwoKICAgICAgICAgICAgLy8gZ2wgPSBpbml0V2ViR0woInJpZ2h0IiwgInZzaGFkZXIiLCAiZnNo YWRlciIsIFsgInZQb3NpdGlvbiJdLCBbIDAsIDAsIDEsIDAuNSBdLCAxKTsKICAgICAgICAgICAg Ly8gZ2wudmlld3BvcnQoMCwgMCwgMjAwLCAyMDApOwogICAgICAgICAgICAvLyAKICAgICAgICAg ICAgLy8gdmFyIHZlcnRleE9iamVjdCA9IGdsLmNyZWF0ZUJ1ZmZlcigpOwogICAgICAgICAgICAv LyBnbC5iaW5kQnVmZmVyKGdsLkFSUkFZX0JVRkZFUiwgdmVydGV4T2JqZWN0KTsKICAgICAgICAg ICAgLy8gZ2wuYnVmZmVyRGF0YShnbC5BUlJBWV9CVUZGRVIsIG5ldyBXZWJHTEZsb2F0QXJyYXko WyAwLDAuNSwwLCAtMC41LC0wLjUsMCwgMC41LC0wLjUsMCBdKSwgZ2wuU1RBVElDX0RSQVcpOwog ICAgICAgICAgICAvLyBnbC5lbmFibGVWZXJ0ZXhBdHRyaWJBcnJheSgwKTsKICAgICAgICAgICAg Ly8gZ2wudmVydGV4QXR0cmliUG9pbnRlcigwLCAzLCBnbC5GTE9BVCwgZmFsc2UsIDAsIDApOwog ICAgICAgICAgICAvLyAKICAgICAgICAgICAgLy8gZ2wuY2xlYXIoZ2wuQ09MT1JfQlVGRkVSX0JJ VCB8IGdsLkRFUFRIX0JVRkZFUl9CSVQpOwogICAgICAgICAgICAvLyBnbC5kcmF3QXJyYXlzKGds LlRSSUFOR0xFUywgMCwgMyk7CiAgICAgICB9CiAgICA8L3NjcmlwdD4KICAgIDxzdHlsZSB0eXBl PSJ0ZXh0L2NzcyIgbWVkaWE9InNjcmVlbiI+CiAgICAgIC5ib3ggewogICAgICAgIGRpc3BsYXk6 IGlubGluZS1ibG9jazsKICAgICAgICBtYXJnaW46IDIwcHg7CiAgICAgICAgd2lkdGg6IDIwMHB4 OwogICAgICAgIGhlaWdodDogMjAwcHg7CiAgICAgIH0KCiAgICAgIC5pbmRpY2F0b3IgewogICAg ICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICB6LWluZGV4OiAtMTsKICAgICAgICB3aWR0 aDogMTAwJTsKICAgICAgICBoZWlnaHQ6IDc1cHg7CiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjog Z3JlZW47CiAgICAgICAgYm9yZGVyLXRvcDogNzVweCBzb2xpZCBibHVlOwogICAgICAgIGJvcmRl ci1ib3R0b206IDc1cHggc29saWQgeWVsbG93OwogICAgICB9CiAgICAgIAogICAgICBjYW52YXMg ewogICAgICAgIGJhY2tncm91bmQtY29sb3I6IHJnYmEoMjU1LCAwLCAwLCAwLjUpOwogICAgICB9 CiAgICAgIAogICAgICAuY29tcGFyZSB7CiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgy NTUsIDAsIDAsIDAuNSk7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5IG9u bG9hZD0iaW5pdCgpIj4KICAgCiAgICA8ZGl2IGNsYXNzPSJpbmRpY2F0b3IiPjwvZGl2PgoKICAg IDxjYW52YXMgY2xhc3M9ImJveCIgaWQ9ImNhbnZhcyIgc3R5bGU9ImxlZnQ6IDIwcHgiIHdpZHRo PSIyMDAiIGhlaWdodD0iMjAwIj48L2NhbnZhcz4KICAgIDxkaXYgY2xhc3M9ImJveCBjb21wYXJl Ij48L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4K