🪟 Transparency update

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gsots3d",
-  "version": "0.0.5-alpha.10",
+  "version": "0.0.5-alpha.11",
   "description": "Getting S**t On The Screen in 3D. A library for doing 3D graphics in the browser.",
   "author": "Ben Coleman",
   "license": "MIT",
@@ -36,6 +36,7 @@
     "lint-fix": "eslint --ext .ts src --fix && prettier --write src && prettier --write shaders",
     "check": "tsc",
     "build": "tsc && tsup",
+    "build:all": "npm run build && npm run build-single && npm run docs",
     "watch": "tsc && npm run build && run-when-changed --watch 'src/**' --watch 'shaders/**' --exec 'npm run build'",
     "build-single": "tsc && tsup --config tsup.config-single.js",
     "watch-single": "tsc && npm run build-single && run-when-changed --watch 'src/**' --watch 'shaders/**' --exec 'npm run build-single'",

shaders/phong/glsl.frag

@@ -56,6 +56,7 @@ struct Material {
   sampler2D normalTex;
   bool hasNormalTex;
   bool unshaded;
+  float alphaCutoff;
 };
 
 // Inputs from vertex shader
@@ -169,6 +170,12 @@ void main() {
   texCoord = u_flipTextureY ? vec2(v_texCoord.x, 1.0 - v_texCoord.y) : v_texCoord;
   texCoord = u_flipTextureX ? vec2(1.0 - texCoord.x, texCoord.y) : texCoord;
 
+  // So parts of textures can be transparent
+  vec4 texel = texture(u_mat.diffuseTex, texCoord);
+  if (texel.a < u_mat.alphaCutoff) {
+    discard;
+  }
+
   vec3 N = normalize(v_normal);
 
   // Normal mapping, this is expensive so only do it if we have a normal map

src/engine/material.ts

@@ -74,6 +74,12 @@ export class Material {
    */
   public unshaded: boolean
 
+  /**
+   * Transparency threshold, pixels with alpha below this value will be discarded
+   * @default 0.0
+   */
+  public alphaCutoff: number
+
   /**
    * Create a new default material with diffuse white colour, all all default properties
    */
@@ -88,6 +94,7 @@ export class Material {
     this.reflectivity = 0.0
 
     this.unshaded = false
+    this.alphaCutoff = 0.0
 
     // 1 pixel white texture is used for solid colour & flat materials
     // A trick to avoid having multiple shaders for textured & non-textured materials
@@ -257,6 +264,7 @@ export class Material {
       normalTex: this.normalTex ? this.normalTex : null,
       hasNormalTex: this.normalTex ? true : false,
       unshaded: this.unshaded,
+      alphaCutoff: this.alphaCutoff,
     } as UniformSet
   }
 
@@ -275,6 +283,8 @@ export class Material {
     m.diffuseTex = this.diffuseTex
     m.specularTex = this.specularTex
     m.normalTex = this.normalTex
+    m.unshaded = this.unshaded
+    m.alphaCutoff = this.alphaCutoff
 
     return m
   }