🕸️ Some blending features

shaders/phong/glsl.frag

@@ -55,7 +55,6 @@ struct Material {
   sampler2D specularTex;
   sampler2D normalTex;
   bool hasNormalTex;
-  bool unshaded;
   float alphaCutoff;
 };
 
@@ -195,18 +194,13 @@ void main() {
   }
 
   vec4 outColorPart;
-  if (u_mat.unshaded) {
-    // Skip lighting/shading and just use the texture if unshaded
-    vec3 diffuseTexCol = vec3(texture(u_mat.diffuseTex, texCoord)) * u_mat.diffuse;
-    outColorPart = vec4(diffuseTexCol, 1.0);
-  } else {
-    // Handle the main directional light, only one of these
-    outColorPart = shadeDirLight(u_lightDirGlobal, u_mat, N, V);
-
-    // Add positional lights
-    for (int i = 0; i < u_lightsPosCount; i++) {
-      outColorPart += shadePosLight(u_lightsPos[i], u_mat, N, V);
-    }
+
+  // Handle the main directional light, only one of these
+  outColorPart = shadeDirLight(u_lightDirGlobal, u_mat, N, V);
+
+  // Add positional lights
+  for (int i = 0; i < u_lightsPosCount; i++) {
+    outColorPart += shadePosLight(u_lightsPos[i], u_mat, N, V);
   }
 
   // Add emissive component

src/engine/material.ts

@@ -6,7 +6,7 @@
 import * as twgl from 'twgl.js'
 import { RGB } from './tuples.ts'
 import { MtlMaterial } from '../parsers/mtl-parser.ts'
-import { UniformSet, TextureOptions } from '../core/gl.ts'
+import { UniformSet, TextureOptions, getGl } from '../core/gl.ts'
 import { TextureCache } from '../core/cache.ts'
 
 export class Material {
@@ -68,18 +68,14 @@ export class Material {
    */
   public normalTex?: WebGLTexture
 
-  /**
-   * Don't apply any lighting or shading to this material
-   * @default false
-   */
-  public unshaded: boolean
-
   /**
    * Transparency threshold, pixels with alpha below this value will be discarded
    * @default 0.0
    */
   public alphaCutoff: number
 
+  public additiveBlend = false
+
   /**
    * Create a new default material with diffuse white colour, all all default properties
    */
@@ -93,7 +89,6 @@ export class Material {
     this.opacity = 1.0
     this.reflectivity = 0.0
 
-    this.unshaded = false
     this.alphaCutoff = 0.0
 
     // 1 pixel white texture is used for solid colour & flat materials
@@ -250,6 +245,15 @@ export class Material {
     }
 
     twgl.setUniforms(programInfo, uni)
+
+    const gl = getGl()
+
+    if (gl) {
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+      if (this.additiveBlend) {
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE)
+      }
+    }
   }
 
   /**
@@ -269,7 +273,6 @@ export class Material {
       specularTex: this.specularTex ? this.specularTex : null,
       normalTex: this.normalTex ? this.normalTex : null,
       hasNormalTex: this.normalTex ? true : false,
-      unshaded: this.unshaded,
       alphaCutoff: this.alphaCutoff,
     } as UniformSet
   }
@@ -289,8 +292,8 @@ export class Material {
     m.diffuseTex = this.diffuseTex
     m.specularTex = this.specularTex
     m.normalTex = this.normalTex
-    m.unshaded = this.unshaded
     m.alphaCutoff = this.alphaCutoff
+    m.additiveBlend = this.additiveBlend
 
     return m
   }

src/renderable/builder.ts

@@ -25,11 +25,11 @@ import { XYZ } from '../engine/tuples.ts'
  */
 export class ModelBuilder {
   public readonly parts: Map<string, BuilderPart>
-  public readonly materials: Map<string, Material>
+  // public readonly materials: Map<string, Material>
 
   constructor() {
     this.parts = new Map<string, BuilderPart>()
-    this.materials = new Map<string, Material>()
+    // this.materials = new Map<string, Material>()
   }
 
   /**
@@ -43,10 +43,10 @@ export class ModelBuilder {
       throw new Error('Builder part name exists!')
     }
 
-    const builderPart = new BuilderPart()
+    const builderPart = new BuilderPart(name, material)
 
     this.parts.set(name, builderPart)
-    this.materials.set(name, material)
+    // this.materials.set(name, material)
 
     return builderPart
   }
@@ -68,6 +68,9 @@ export class BuilderPart {
   private texcoordData: number[] = []
   private _boundingBox: number[]
 
+  public material: Material
+  public readonly name: string
+
   /**
    * This is an *extremely* advanced feature, and allows you to add custom attributes to the part
    * You will need to understand how to use twgl.js to use this feature at the createBufferInfoFromArrays function
@@ -86,7 +89,10 @@ export class BuilderPart {
 
   private _customArrayData: twgl.Arrays | undefined
 
-  constructor() {
+  constructor(name: string, mat: Material) {
+    this.name = name
+    this.material = mat
+
     this._boundingBox = [
       Number.MAX_VALUE,
       Number.MAX_VALUE,

src/renderable/instance.ts

@@ -78,6 +78,12 @@ export class Instance extends Node {
       programOverride = ProgramCache.instance.get(this.customProgramName)
     }
 
+    if (this.metadata.additiveBlend) {
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE)
+    } else {
+      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+    }
+
     const world = this.modelMatrix
 
     // Populate u_world - used for normals & shading

src/renderable/model.ts

@@ -212,7 +212,7 @@ export class Model implements Renderable {
 
       model.triCount += builderPart.triangleCount
       model.parts.push(new ModelPart(partBuffers, partName))
-      model.materials[partName] = builder.materials.get(partName) ?? model.materials.__default
+      model.materials[partName] = builder.parts.get(partName)?.material ?? model.materials.__default
     }
 
     log.debug(`♟️ Model '${name}' built with ${model.parts.length} parts & ${model.triCount} triangles`)