Fix #57: Add an alpha pass to render non-opaque items (#60)

* Add an alpha pass to render non-opaque items

* Fix formatting

examples/Bin.re

@@ -8,9 +8,9 @@ let init = app => {
 
   let ui = UI.create(w);
 
-  let textHeaderStyle = Style.make(~backgroundColor=Colors.black, ~color=Colors.white, ~fontFamily="Roboto-Regular.ttf", ~fontSize=24, ());
+  let textHeaderStyle = Style.make(~backgroundColor=Colors.red, ~color=Colors.white, ~fontFamily="Roboto-Regular.ttf", ~fontSize=24, ());
 
-  let smallerTextStyle = Style.make(~backgroundColor=Colors.black, ~color=Colors.white, ~fontFamily="Roboto-Regular.ttf", ~fontSize=12, ());
+  let smallerTextStyle = Style.make(~backgroundColor=Colors.red, ~color=Colors.white, ~fontFamily="Roboto-Regular.ttf", ~fontSize=12, ());
 
   Window.setRenderCallback(w, () => {
     UI.render(ui,

src/UI/FontShader.re

@@ -28,7 +28,7 @@ let vsShader = SolidShader.vsShader ++ "\n" ++ {|
 
 let fsShader = {|
     vec4 t = texture2D(uSampler, vTexCoord);
-    gl_FragColor = vec4(vColor * t.a, t.a);
+    gl_FragColor = vec4(vColor.r, vColor.g, vColor.b, t.a);
 |};
 
 let create = () => {

src/UI/ImageNode.re

@@ -24,11 +24,9 @@ class imageNode (name: string, imagePath: string) = {
         _super#draw(pass, layer, world);
 
         switch (pass) {
-        | SolidPass(m) => {
+        | AlphaPass(m) => {
             Shaders.CompiledShader.use(textureShader);
 
-            glEnable(GL_BLEND);
-            glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
             Shaders.CompiledShader.setUniformMatrix4fv(textureShader, "uWorld", world);
             Shaders.CompiledShader.setUniformMatrix4fv(textureShader, "uProjection", m);
 
@@ -46,9 +44,8 @@ class imageNode (name: string, imagePath: string) = {
             );
 
             Geometry.draw(_quad, textureShader);
-            glDisable(GL_BLEND);
-
         }
+        | _  => ()
         };
 
     };

src/UI/RenderPass.re

@@ -1,5 +1,6 @@
 open Reglm;
 
 type renderPass =
-| SolidPass(Mat4.t);
+| SolidPass(Mat4.t)
+| AlphaPass(Mat4.t);
 

src/UI/Revery_UI.re

@@ -1,5 +1,7 @@
 open Reglm;
 
+open Reglfw.Glfw;
+
 module Shaders = Revery_Shaders;
 module Geometry = Revery_Geometry;
 module Window = Revery_Core.Window;
@@ -98,8 +100,19 @@ let render = (container: uiContainer, component: UiReact.component) => {
     -0.01,
     -100.0,
   );
-  let renderPass = SolidPass(_projection);
-
   let m = Mat4.create();
-  Performance.bench("draw", () => rootNode#draw(renderPass, 0, m));
+
+  Performance.bench("draw", () => {
+    /* Do a first pass for all 'opaque' geometry */
+    /* This helps reduce the overhead for the more expensive alpha pass, next */
+    let solidPass = SolidPass(_projection);
+    rootNode#draw(solidPass, 0, m);
+
+    /* Render all geometry that requires an alpha */
+    let alphaPass = AlphaPass(_projection);
+    glEnable(GL_BLEND);
+    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
+    rootNode#draw(alphaPass, 0, m);
+    glDisable(GL_BLEND);
+  });
 };

src/UI/TextNode.re

@@ -21,7 +21,7 @@ class textNode (name: string, text: string) = {
     _super#draw(pass, layer, world);
 
     switch (pass) {
-    | SolidPass(m) =>
+    | AlphaPass(m) =>
       Shaders.CompiledShader.use(textureShader);
 
       Shaders.CompiledShader.setUniformMatrix4fv(
@@ -77,6 +77,7 @@ class textNode (name: string, text: string) = {
         },
         shapedText,
       );
+    | _ => ();
     };
   };
   pub setText = t => text = t;

src/UI/ViewNode.re

@@ -52,6 +52,7 @@ class viewNode (name: string) = {
         float_of_int(dimensions.height),
       );
       Geometry.draw(_quad, solidShader);
+    | _ => ()
     };
 
     _super#draw(pass, layer, world);