🩲 Multi-part models in custom builder

examples/builder/main.mjs

@@ -6,17 +6,21 @@ ctx.start()
 // Create a pyramid using RenderableBuilder
 const builder = new RenderableBuilder()
 
+const brick = Material.createBasicTexture('../_textures/brickwall.jpg', true)
+const crate = Material.createBasicTexture('../_textures/crate.png', true)
+const base = builder.newPart('pyramid-base', crate)
+const sides = builder.newPart('pyramid-side', brick)
+
 // Base on x z plane, anti-clockwise, reversed
-builder.addQuad([-1, 0, -1], [1, 0, -1], [1, 0, 1], [-1, 0, 1], [0, 0], [1, 0], [1, 1], [0, 1])
+base.addQuad([-1, 0, -1], [1, 0, -1], [1, 0, 1], [-1, 0, 1], [0, 0], [1, 0], [1, 1], [0, 1])
 
 // Four triangles as sides
-builder.addTriangle([-1, 0, 1], [1, 0, 1], [0, 2, 0], [0, 0], [1, 0], [0.5, 1])
-builder.addTriangle([1, 0, 1], [1, 0, -1], [0, 2, 0], [0, 0], [1, 0], [0.5, 1])
-builder.addTriangle([1, 0, -1], [-1, 0, -1], [0, 2, 0], [0, 0], [1, 0], [0.5, 1])
-builder.addTriangle([-1, 0, -1], [-1, 0, 1], [0, 2, 0], [0, 0], [1, 0], [0.5, 1])
+sides.addTriangle([-1, 0, 1], [1, 0, 1], [0, 2, 0], [0, 0], [1, 0], [0.5, 1])
+sides.addTriangle([1, 0, 1], [1, 0, -1], [0, 2, 0], [0, 0], [1, 0], [0.5, 1])
+sides.addTriangle([1, 0, -1], [-1, 0, -1], [0, 2, 0], [0, 0], [1, 0], [0.5, 1])
+sides.addTriangle([-1, 0, -1], [-1, 0, 1], [0, 2, 0], [0, 0], [1, 0], [0.5, 1])
 
-const m = Material.createBasicTexture('../_textures/brickwall.jpg', true)
-const pyramid = ctx.createCustomInstance(builder, m)
+const pyramid = ctx.createCustomInstance(builder)
 
 ctx.camera.position = [0, 0, 6]
 ctx.globalLight.setAsPosition(20, 70, 500)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gsots3d",
-  "version": "0.0.5-alpha.7",
+  "version": "0.0.5-alpha.8",
   "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

@@ -42,7 +42,7 @@ const MAX_LIGHTS = 16
 export class Context {
   private gl: WebGL2RenderingContext
   private started: boolean
-  private instances: Map<string, Instance>
+  private instances: Map<string, Instance> // Keyed on instance id
   private instancesTrans: Map<string, Instance>
   private instancesParticles: Map<string, Instance>
   private cameras: Map<string, Camera>
@@ -798,13 +798,11 @@ export class Context {
   /**
    *
    */
-  createCustomInstance(builder: RenderableBuilder, material: Material) {
-    const renderable = builder.build(this.gl)
-
-    renderable.material = material
+  createCustomInstance(builder: RenderableBuilder) {
+    const renderable = builder.buildAllParts(this.gl)
     const instance = new Instance(renderable)
 
-    this.addInstance(instance, material)
+    this.instances.set(instance.id, instance)
     Stats.triangles += renderable.triangleCount
     Stats.instances++