Make Framebuffer match alpha settings of the parent context

davepagurek · Mar 20, 2022 · 33e64df · 33e64df
1 parent 6d23ca6
commit 33e64df
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html><html lang="en"><head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
     <script src="../../p5.Framebuffer.js" type="text/javascript"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8">

diff --git a/examples/simple/sketch.js b/examples/simple/sketch.js
@@ -9,6 +9,7 @@ function draw() {
   // Draw a sphere to the Framebuffer
   fbo.draw(() => {
     clear()
+    background(255)
     push()
     noStroke()
     fill(255, 0, 0)
@@ -20,6 +21,7 @@ function draw() {
 
   // Do something with fbo.color or dbo.depth
   clear()
+  background(255)
   push()
   noStroke()
 
@@ -36,4 +38,4 @@ function draw() {
   pop()
 
   pop()
-}
+}
diff --git a/p5.Framebuffer.js b/p5.Framebuffer.js
@@ -97,6 +97,7 @@ class Framebuffer {
     const width = this._renderer.width
     const height = this._renderer.height
     const density = this._renderer._pInst._pixelDensity
+    const hasAlpha = this._renderer._pInst._glAttributes.alpha
 
     const colorTexture = gl.createTexture()
     if (!colorTexture) {
@@ -111,11 +112,11 @@ class Framebuffer {
     gl.texImage2D(
       gl.TEXTURE_2D,
       0,
-      gl.RGBA,
+      hasAlpha ? gl.RGBA : gl.RGB,
       width * density,
       height * density,
       0,
-      gl.RGBA,
+      hasAlpha ? gl.RGBA : gl.RGB,
       gl.UNSIGNED_BYTE,
       null,
     )