🧱 Builder changes

src/core/cache.ts

@@ -5,7 +5,9 @@
 
 import log from 'loglevel'
 import { Model } from '../renderable/model.ts'
-import { ProgramInfo, TextureOptions, createTexture } from 'twgl.js'
+import { ProgramInfo, TextureOptions, createTexture, createProgramInfo } from 'twgl.js'
+import { getGl } from './gl.ts'
+import { fetchShaders } from './files.ts'
 
 /** @ignore */
 export const PROG_DEFAULT = 'phong'
@@ -273,6 +275,30 @@ export class ProgramCache {
     ProgramCache.initialized = true
   }
 
+  /**
+   * Compile a custom shader and add it to the cache
+   * @param name Assign a name to the shader
+   * @param vert URL path to vertex shader
+   * @param frag URL path to fragment shader
+   */
+  async compileShader(name: string, vert: string, frag: string) {
+    const gl = getGl()
+    if (!gl) {
+      throw new Error('💥 WebGL context not found')
+    }
+
+    const { vertex: vsText, fragment: fsText } = await fetchShaders(vert, frag)
+    const progInfo = createProgramInfo(gl, [vsText, fsText])
+
+    console.log('🧰 Adding custom shader to cache', name, progInfo)
+
+    this.add(name, progInfo)
+  }
+
+  setDefaultProgram(name: string) {
+    this._default = this.cache.get(name) || this._default
+  }
+
   /**
    * Return the singleton instance of the program cache
    */

src/renderable/builder.ts

@@ -52,8 +52,12 @@ export class ModelBuilder {
   }
 }
 
+type extraAttributes = {
+  [key: string]: { numComponents: number; data: number[] }
+}
+
 /**
- * Class to manage parts or sections
+ * Class to manage parts or sections to be built into a model
  */
 export class BuilderPart {
   private vertexData: number[] = []
@@ -64,6 +68,12 @@ export class BuilderPart {
   private texcoordData: number[] = []
   private _boundingBox: number[]
 
+  /**
+   * 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
+   */
+  public extraAttributes?: extraAttributes
+
   public get boundingBox(): number[] {
     return this._boundingBox
   }
@@ -108,6 +118,9 @@ export class BuilderPart {
    * @param v1 Vertex one of the triangle
    * @param v2 Vertex two of the triangle
    * @param v3 Vertex three of the triangle
+   * @param tc1 Texture coordinate for vertex 1
+   * @param tc2 Texture coordinate for vertex 2
+   * @param tc3 Texture coordinate for vertex 3
    */
   addTriangle(v1: XYZ, v2: XYZ, v3: XYZ, tc1 = [0, 0], tc2 = [0, 0], tc3 = [0, 0]) {
     this._triCount++
@@ -145,10 +158,10 @@ 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 one of the quad
-   * @param v2 Vertex two of the quad
-   * @param v3 Vertex three of the quad
-   * @param v4 Vertex four of the quad
+   * @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
    */
   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
@@ -166,7 +179,7 @@ export class BuilderPart {
   }
 
   /**
-   * Build the renderable from the data added
+   * Build the part from the data added and turn into a twgl.BufferInfo
    * @param gl A WebGL2 rendering context
    * @returns BufferInfo used by twgl
    */
@@ -189,6 +202,7 @@ export class BuilderPart {
         indices: this.indexData,
         normal: this.normalData,
         texcoord: this.texcoordData,
+        ...this.extraAttributes,
       })
     }
 

src/renderable/instance.ts

@@ -10,6 +10,7 @@ import { Material } from '../engine/material.ts'
 import { XYZ } from '../engine/tuples.ts'
 import { ProgramInfo } from 'twgl.js'
 import { Node } from '../engine/node.ts'
+import { ProgramCache } from '../index.ts'
 
 /**
  * An instance of thing in the world to be rendered, with position, rotation, scale etc
@@ -31,6 +32,10 @@ export class Instance extends Node {
   /** Override just some material properties, warning advanced feature! */
   public uniformOverrides?: UniformSet
 
+  /** Advanced feature, set this to plugin a custom shader program
+   * Use ProgramCache.compileShader to create a named program */
+  public customProgramName?: string
+
   /**
    * Create a new instace of a renderable thing
    * @param {Renderable} renderable - Renderable to use for this instance
@@ -63,10 +68,14 @@ export class Instance extends Node {
 
     // HACK: As programOverride is CURRENTLY only used for shadow map rendering
     // We need a better way to to know if we are rendering a shadow map!!
-    if (programOverride && !this.castShadow) {
+    if (!this.customProgramName && programOverride && !this.castShadow) {
       return
     }
 
+    if (this.customProgramName) {
+      programOverride = ProgramCache.instance.get(this.customProgramName)
+    }
+
     const world = this.modelMatrix
 
     // Populate u_world - used for normals & shading