🪞 Blending options

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gsots3d",
-  "version": "0.0.5",
+  "version": "0.0.6-alpha.0",
   "description": "Getting S**t On The Screen in 3D. A library for doing 3D graphics in the browser.",
   "author": "Ben Coleman",
   "license": "MIT",

src/core/context.ts

@@ -91,6 +91,12 @@ export class Context {
   /** Backface culling */
   public disableCulling = false
 
+  /**
+   * Blend mode for non-opaque instances
+   * 'NORMAL' is the default, 'ADDITIVE' is useful for particles and glowing effects
+   */
+  public blendMode: 'NORMAL' | 'ADDITIVE' = 'NORMAL'
+
   // ==== Getters =============================================================
 
   /** Get the active camera */
@@ -370,7 +376,12 @@ export class Context {
     })
 
     this.gl.disable(this.gl.CULL_FACE)
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA)
+    // Secret undocumented feature, allows you to set blend mode on a per instance basis
+    if (this.blendMode === 'ADDITIVE') {
+      this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE)
+    }
+
     for (const instance of instancesTransArray) {
       instance.render(this.gl, uniforms, programOverride)
 
@@ -518,14 +529,19 @@ export class Context {
    * Create a new model instance, which should have been previously loaded into the cache
    * @param modelName - Name of the model previously loaded into the cache, don't include the file extension
    */
-  createModelInstance(modelName: string) {
+  createModelInstance(modelName: string, transparent = false) {
     const model = ModelCache.instance.get(modelName)
     if (!model) {
       throw new Error(`💥 Unable to create model instance for ${modelName}`)
     }
 
     const instance = new Instance(model)
-    this.instances.set(instance.id, instance)
+    if (!transparent) {
+      this.instances.set(instance.id, instance)
+    } else {
+      this.instancesTrans.set(instance.id, instance)
+    }
+
     Stats.triangles += model.triangleCount
     Stats.instances++
 

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, getGl } from '../core/gl.ts'
+import { UniformSet, TextureOptions } from '../core/gl.ts'
 import { TextureCache } from '../core/cache.ts'
 
 export class Material {
@@ -245,15 +245,6 @@ 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)
-      }
-    }
   }
 
   /**

src/renderable/builder.ts

@@ -25,11 +25,9 @@ import { XYZ } from '../engine/tuples.ts'
  */
 export class ModelBuilder {
   public readonly parts: Map<string, BuilderPart>
-  // public readonly materials: Map<string, Material>
 
   constructor() {
     this.parts = new Map<string, BuilderPart>()
-    // this.materials = new Map<string, Material>()
   }
 
   /**
@@ -46,7 +44,6 @@ export class ModelBuilder {
     const builderPart = new BuilderPart(name, material)
 
     this.parts.set(name, builderPart)
-    // this.materials.set(name, material)
 
     return builderPart
   }
@@ -121,9 +118,9 @@ export class BuilderPart {
    * Add a triangle to the renderable part
    * Each triangle must be defined by 3 vertices and will get a normal calculated
    * Each triangle will get a unique normal, so no smooth shading
-   * @param v1 Vertex one of the triangle
-   * @param v2 Vertex two of the triangle
-   * @param v3 Vertex three of the triangle
+   * @param v1 Vertex 1 of the triangle
+   * @param v2 Vertex 2 of the triangle
+   * @param v3 Vertex 3 of the triangle
    * @param tc1 Texture coordinate for vertex 1
    * @param tc2 Texture coordinate for vertex 2
    * @param tc3 Texture coordinate for vertex 3
@@ -159,14 +156,18 @@ export class BuilderPart {
     }
   }
 
-  /*
+  /**
    * Add a two triangle quad to the renderable part
    * Each quad must be defined by 4 vertices and will get a normal calculated
    * Each quad will get a unique normal, so no smooth shading
    * @param v1 Vertex 1 of the quad
    * @param v2 Vertex 2 of the quad
    * @param v3 Vertex 3 of the quad
    * @param v4 Vertex 4 of the quad
+   * @param tc1 UV texture coordinate for vertex 1
+   * @param tc2 UV texture coordinate for vertex 2
+   * @param tc3 UV texture coordinate for vertex 3
+   * @param tc4 UV texture coordinate for vertex 4
    */
   addQuad(v1: XYZ, v2: XYZ, v3: XYZ, v4: XYZ, tc1 = [0, 0], tc2 = [0, 0], tc3 = [0, 0], tc4 = [0, 0]) {
     // Anti-clockwise winding order

src/renderable/instance.ts

@@ -78,12 +78,6 @@ 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