disable depth buffer write only for planes and billboards

xem · Jan 31, 2022 · d275000 · d275000
1 parent 1d677d1
commit d275000
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/demos/7.html b/demos/7.html
@@ -27,6 +27,7 @@
 X = -1.5;
 Z = 18;
 RY = 0;
+W.clearColor("8af");
 for(i = 0; i < 10; i++)
   for(j = 0; j < 10; j++)
     W.billboard({size:3,x:(i-5)*5,z:(j-5)*5,t:tree,ns:1});

diff --git a/demos/castle.html b/demos/castle.html
@@ -1,8 +1,8 @@
 <!doctype html>
 <canvas id=canvas width=850 height=500 style='border:1px solid'></canvas>
 <img src='tree.png' id=tree hidden>
-<img src='obj2js/mario.png' id=mario hidden>
-<img src='obj2js/yoshi.png' id=yoshi hidden>
+<img src='mario.png' id=mario hidden>
+<img src='yoshi.png' id=yoshi hidden>
 <script src='../w.js'></script>
 <script src='mario.js'></script>
 <script src='yoshi.js'></script>
@@ -41,7 +41,7 @@
       W.cube({g:'g1',x,z,h,y:h/2,b:['0df','ed7','0a0','da4','cdd','cdd','cdd','cdd'][map[z][x]]});
       if(map[z][x] == 2 & !(i % 7)){
         console.log(x,z);
-        W.billboard({g:'g1',x:x,y:2.5,z,w:1.5,h:1.5,b:tree});
+        W.billboard({g:'g1',x:x,y:2.5,z,w:1.5,h:1.5,t:tree});
       }
       i++;
     }
@@ -53,14 +53,13 @@
     W.pyramid({g:'g1',x:[30,30,30.5,8,52,58,3][i]/4+1,z:[0,0,0,12,12,-6,-6][i]/4+2,y:[25,37,47,25,25,25,25][i]/4+2,w:[13,5,3,2,2,3,3][i],d:[8,4,3,2,2,3,3][i],h:2,b:'b31'});
   }
 
-  W.mario({g:'g1',x:8,z:10,w:2,h:2,d:2,y:3,rx:-90,ry:180,b:mario});
-  W.yoshi({g:'g1',x:5,z:4,w:2,h:2,d:2,y:8,rx:0,ry:180,b:yoshi});
+  W.mario({g:'g1',x:8,z:10,w:2,h:2,d:2,y:3,rx:-90,ry:180,t:mario});
+  W.yoshi({g:'g1',x:5,z:4,w:2,h:2,d:2,y:8,rx:0,ry:180,t:yoshi});
 
   t = 0;
   setInterval(()=>{
     t+=.1;
-    W.move({n:'g1',ry:Math.cos(t/5)*25});
-    W.setPerspective(.5 + Math.sin(t/5)/10);
+    W.move({n:'g1',ry:Math.cos(t/5)*25, fov: (.5 + Math.sin(t/5)/10)*50});
   },16);
 }
 

diff --git a/w.js b/w.js
@@ -145,14 +145,14 @@ W = {
       W.textures[state.t.id] = texture;
     }
 
-    // Recompute the projection matrix if fov is set (near: 0, far: 1000, ratio: canvas ratio)
+    // Recompute the projection matrix if fov is set (near: 1, far: 1000, ratio: canvas ratio)
     if(state.fov){
       W.projection =     
         new DOMMatrix([
           (1 / Math.tan(state.fov * Math.PI / 180)) / (W.canvas.width / W.canvas.height), 0, 0, 0, 
           0, (1 / Math.tan(state.fov * Math.PI / 180)), 0, 0, 
-          0, 0, -1, -1,
-          0, 0, -2, 0
+          0, 0, -1001 / 999, -1,
+          0, 0, -2002 / 999, 0
         ]);
     }
 
@@ -237,16 +237,18 @@ W = {
     // Enable alpha blending
     W.gl.enable(3042 /* BLEND */);
 
-    // Disable depth buffer writes
-    W.gl.depthMask(0)
-
     // Render all transparent objects
-    for(i in transparent){
-      W.render(transparent[i], dt);
+    for(i of transparent){
+
+      // Disable depth buffer write if it's a plane or a billboard to allow transparent objects to intersect planes more easily
+      if(["plane","billboard"].includes(i.type)) W.gl.depthMask(0);
+
+      W.render(i, dt);
+
+      W.gl.depthMask(1);
     }
 
-    // Revert to normal state for the next frame
-    W.gl.depthMask(1);
+    // Disable alpha blending for the next frame
     W.gl.disable(3042 /* BLEND */);
 
     // Create a matrix called v containing the current camera transformation