Z-Buffer made (Almost production ready!)

extensions/obviousAlexC/penPlus.js

@@ -27,6 +27,7 @@
 
   //?Make a function for updating the depth canvas to fit the scratch stage
   const depthFrameBuffer = gl.createFramebuffer();
+  const depthColorBuffer = gl.createRenderbuffer();
   const depthDepthBuffer = gl.createRenderbuffer();
 
   let lastFB = gl.getParameter(gl.FRAMEBUFFER_BINDING);
@@ -55,12 +56,19 @@
     gl.activeTexture(gl.TEXTURE0);
 
     gl.bindFramebuffer(gl.FRAMEBUFFER, depthFrameBuffer);
-    gl.framebufferTexture2D(
+
+    gl.bindRenderbuffer(gl.RENDERBUFFER, depthColorBuffer);
+    gl.renderbufferStorage(
+      gl.RENDERBUFFER,
+      gl.RGBA8 || gl.RGBA4,
+      nativeSize[0],
+      nativeSize[1]
+    );
+    gl.framebufferRenderbuffer(
       gl.FRAMEBUFFER,
       gl.COLOR_ATTACHMENT0,
-      gl.TEXTURE_2D,
-      depthBufferTexture,
-      0
+      gl.RENDERBUFFER,
+      depthColorBuffer
     );
 
     gl.bindRenderbuffer(gl.RENDERBUFFER, depthDepthBuffer);
@@ -77,6 +85,14 @@
       depthDepthBuffer
     );
 
+    gl.framebufferTexture2D(
+      gl.FRAMEBUFFER,
+      gl.COLOR_ATTACHMENT0,
+      gl.TEXTURE_2D,
+      depthBufferTexture,
+      0
+    );
+
     gl.enable(gl.DEPTH_TEST);
 
     gl.bindFramebuffer(gl.FRAMEBUFFER, lastFB);
@@ -89,6 +105,15 @@
       lastFB = gl.getParameter(gl.FRAMEBUFFER_BINDING);
 
       gl.bindFramebuffer(gl.FRAMEBUFFER, depthFrameBuffer);
+
+      gl.bindRenderbuffer(gl.RENDERBUFFER, depthColorBuffer);
+      gl.renderbufferStorage(
+        gl.RENDERBUFFER,
+        gl.RGBA8 || gl.RGBA4,
+        nativeSize[0],
+        nativeSize[1]
+      );
+
       gl.bindRenderbuffer(gl.RENDERBUFFER, depthDepthBuffer);
       gl.renderbufferStorage(
         gl.RENDERBUFFER,
@@ -97,17 +122,48 @@
         nativeSize[1]
       );
 
+      gl.activeTexture(gl.TEXTURE1);
+
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        gl.RGBA,
+        nativeSize[0],
+        nativeSize[1],
+        0,
+        gl.RGBA,
+        gl.UNSIGNED_BYTE,
+        null
+      );
+
+      console.log(nativeSize)
+
+      gl.activeTexture(gl.TEXTURE0);
+
       gl.bindFramebuffer(gl.FRAMEBUFFER, lastFB);
     };
 
     //?Call it to have it consistant
     updateCanvasSize();
 
     //?Call every frame because I don't know of a way to detect when the stage is resized
-    vm.runtime.on("BEFORE_EXECUTE", () => {
+
+    window.addEventListener("resize", updateCanvasSize);
+    vm.runtime.on("STAGE_SIZE_CHANGED", () => {
       updateCanvasSize();
     });
 
+    let lastURL = window.location.href;
+    let lastHQPen = renderer.useHighQualityRender;
+
+    vm.runtime.on("BEFORE_EXECUTE", () => {
+      if (lastURL != window.location.href || lastHQPen != renderer.useHighQualityRender) {
+        lastURL = window.location.href;
+        lastHQPen = renderer.useHighQualityRender;
+        updateCanvasSize();
+      }
+    });
+
     gl.enable(gl.DEPTH_TEST);
     gl.depthFunc(gl.LEQUAL);
 
@@ -191,7 +247,7 @@
                   gl_FragColor = v_color;
                   highp vec4 v_depthPart = texture2D(u_depthTexture,gl_FragCoord.xy/u_res);
                   highp float v_depthcalc = (v_depthPart.r+v_depthPart.g+v_depthPart.b)/3.0;
-                  if (v_depth > v_depthcalc){
+                  if (v_depth >= v_depthcalc - 0.075){
                     gl_FragColor.a = 0.0;
                   }
                   gl_FragColor.rgb *= gl_FragColor.a;
@@ -236,7 +292,7 @@
                     gl_FragColor = texture2D(u_texture, v_texCoord) * v_color;
                     highp vec4 v_depthPart = texture2D(u_depthTexture,gl_FragCoord.xy/u_res);
                     highp float v_depthcalc = (v_depthPart.r+v_depthPart.g+v_depthPart.b)/3.0;
-                    if (v_depth > v_depthcalc){
+                    if (v_depth >= v_depthcalc - 0.075){
                       gl_FragColor.a = 0.0;
                     }
                     gl_FragColor.rgb *= gl_FragColor.a;