Changed design of mesh geometry

examples/src/color-material.js

@@ -23,12 +23,7 @@ app.loader.load(() => {
 
 class ColorMaterial extends PIXI3D.Material {
   constructor() {
-    // When creating a material, it can be initialized with the vertex shader 
-    // attributes. This will make sure the geometry data sent to the shader is
-    // in correct format. If more control is needed about how the geometry data
-    // is structured, the "createGeometry" method can be overridden. Only 
-    // "position" is set because it's the only vertex attribute in the shader.
-    super(["position"])
+    super()
 
     // The default color is white using RGB (0-255).
     this.color = [255, 255, 255]

examples/src/mesh-geometry.js

@@ -7,10 +7,10 @@ app.loader.add("assets/shaders/mesh-geometry/mesh-geometry.vert")
 app.loader.add("assets/shaders/mesh-geometry/mesh-geometry.frag")
 
 app.loader.load(() => {
-  // Create the vertex data needed to render the mesh with the specified 
-  // material. In this case, the vertex data includes position (x,y,z) and 
-  // color (r,g,b). Three vertices is needed to get the triangle shape.
-  let vertexData = {
+  // Create the geometry needed to render the mesh with the specified material. 
+  // In this case, the vertex data includes position (x,y,z) and color (r,g,b). 
+  // Three vertices is needed to get the triangle shape.
+  let geometry = Object.assign(new PIXI3D.MeshGeometry(), {
     positions: {
       buffer: new Float32Array([
         // Vertex 1 (x,y,z)
@@ -31,20 +31,18 @@ app.loader.load(() => {
         1, 0, 0
       ])
     }
-  }
+  })
   app.stage.addChild(
-    new PIXI3D.Mesh3D(vertexData, new MeshGeometryMaterial()))
+    new PIXI3D.Mesh3D(geometry, new MeshGeometryMaterial()))
 })
 
 class MeshGeometryMaterial extends PIXI3D.Material {
-  createGeometry(data) {
-    // Create the geometry used when rendering with the specified shader. This
+  addGeometryAttributes(geometry) {
+    // Add the attributes used when rendering with the specified shader. This
     // geometry has two attributes: position and color. The number of components
     // for the attribute is also specified, both have three (z,y,z and r,g,b).
-    let geometry = new PIXI.Geometry()
-    geometry.addAttribute("a_Position", data.positions.buffer, 3)
-    geometry.addAttribute("a_Color", data.colors.buffer, 3)
-    return geometry
+    geometry.addAttribute("a_Position", geometry.positions.buffer, 3)
+    geometry.addAttribute("a_Color", geometry.colors.buffer, 3)
   }
 
   updateUniforms(mesh, shader) {

src/gltf/animation/parser.ts

@@ -25,8 +25,8 @@ export class glTFAnimationParser {
   }
 
   private createAnimationChannel(sampler: any, path: string, target: Container3D) {
-    let input = this.bufferAccessor.createVertexAttribute(sampler.input).buffer as Float32Array
-    let output = this.bufferAccessor.createVertexAttribute(sampler.output).buffer as Float32Array
+    let input = this.bufferAccessor.createGeometryAttribute(sampler.input).buffer as Float32Array
+    let output = this.bufferAccessor.createGeometryAttribute(sampler.output).buffer as Float32Array
 
     if (path === "rotation") {
       if (sampler.interpolation === "LINEAR") {
@@ -45,7 +45,7 @@ export class glTFAnimationParser {
         this.createInterpolation(sampler.interpolation, input, output, 3))
     }
     if (path === "weights") {
-      let weights = (target.children[0] as Mesh3D).weights
+      let weights = (target.children[0] as Mesh3D).geometry.weights
       if (!weights) {
         return undefined
       }

src/gltf/buffer-accessor.ts

@@ -1,4 +1,4 @@
-import { MeshVertexAttribute } from "../mesh/mesh-vertex"
+import { MeshGeometryAttribute } from "../mesh/mesh-geometry"
 
 const TYPE_SIZES: { [name: string]: number } = {
   SCALAR: 1, VEC2: 2, VEC3: 3, VEC4: 4, MAT2: 4, MAT3: 9, MAT4: 16
@@ -26,7 +26,7 @@ export class glTFBufferAccessor {
     throw new Error(`PIXI3D: Unknown component type "${componentType}".`)
   }
 
-  createVertexAttribute(attribute: number): MeshVertexAttribute {
+  createGeometryAttribute(attribute: number): MeshGeometryAttribute {
     let accessor = this.descriptor.accessors[attribute]
     let bufferView = this.descriptor.bufferViews[accessor.bufferView || 0]
 

src/gltf/parser.ts

@@ -2,7 +2,7 @@ import { Transform3D } from "../transform"
 import { MaterialFactory } from "../material"
 import { Model3D } from "../model"
 import { Container3D } from "../container"
-import { MeshVertexData, MeshVertexMorphTarget } from "../mesh/mesh-vertex"
+import { MeshGeometry } from "../mesh/mesh-geometry"
 import { Mesh3D } from "../mesh/mesh"
 import { glTFMaterialParser } from "./material-parser"
 import { glTFBufferAccessor } from "./buffer-accessor"
@@ -91,55 +91,52 @@ export class glTFParser {
   public createMesh(meshIndex = 0) {
     let mesh = this.descriptor.meshes[meshIndex]
     let sourceMaterial = this.parseMaterial(mesh)
-    let geometryData = this.createMeshVertexData(mesh)
-    let materialFactory = this.materialFactory
-    if (!materialFactory) {
-      materialFactory = PhysicallyBasedMaterial
-    }
+    let geometry = this.createMeshGeometry(mesh)
+    let materialFactory = this.materialFactory || PhysicallyBasedMaterial
     let material = materialFactory.create(sourceMaterial)
-    return new Mesh3D(geometryData, material, geometryData.weights)
+    return new Mesh3D(geometry, material)
   }
 
-  private createMeshVertexData(mesh: any): MeshVertexData {
-    return {
+  private createMeshGeometry(mesh: any): MeshGeometry {
+    return Object.assign(new MeshGeometry(), {
       indices: this.getIndices(mesh),
       positions: this.getPositions(mesh),
-      normals: this.getNormals(mesh),
-      morphTargets: this.getMorphTargets(mesh),
-      weights: this.getWeights(mesh),
       uvs: this.getTextureCoordinates(mesh),
+      normals: this.getNormals(mesh),
       tangents: this.getTangents(mesh),
-    }
+      morphTargets: this.getMorphTargets(mesh),
+      weights: this.getWeights(mesh)
+    })
   }
 
   private getPositions(mesh: any) {
-    return this.bufferAccessor.createVertexAttribute(mesh.primitives[0].attributes["POSITION"])
+    return this.bufferAccessor.createGeometryAttribute(mesh.primitives[0].attributes["POSITION"])
   }
 
   private getNormals(mesh: any) {
     let attribute = mesh.primitives[0].attributes["NORMAL"]
     if (attribute !== undefined) {
-      return this.bufferAccessor.createVertexAttribute(attribute)
+      return this.bufferAccessor.createGeometryAttribute(attribute)
     }
   }
 
   private getTangents(mesh: any) {
     let attribute = mesh.primitives[0].attributes["TANGENT"]
     if (attribute !== undefined) {
-      return this.bufferAccessor.createVertexAttribute(attribute)
+      return this.bufferAccessor.createGeometryAttribute(attribute)
     }
   }
 
   private getIndices(mesh: any) {
     if (mesh.primitives[0].indices !== undefined) {
-      return this.bufferAccessor.createVertexAttribute(mesh.primitives[0].indices)
+      return this.bufferAccessor.createGeometryAttribute(mesh.primitives[0].indices)
     }
   }
 
   private getTextureCoordinates(mesh: any) {
     let attribute = mesh.primitives[0].attributes["TEXCOORD_0"]
     if (attribute !== undefined) {
-      return [this.bufferAccessor.createVertexAttribute(attribute)]
+      return [this.bufferAccessor.createGeometryAttribute(attribute)]
     }
   }
 
@@ -159,9 +156,9 @@ export class glTFParser {
     if (!targets) {
       return undefined
     }
-    let result: MeshVertexMorphTarget[] = []
+    let result = []
     for (let i = 0; i < targets.length; i++) {
-      let target: MeshVertexMorphTarget = {
+      let target = {
         positions: this.getTargetAttribute(mesh.primitives[0].targets[i], "POSITION"),
         normals: this.getTargetAttribute(mesh.primitives[0].targets[i], "NORMAL"),
         tangents: this.getTargetAttribute(mesh.primitives[0].targets[i], "TANGENT")
@@ -174,7 +171,7 @@ export class glTFParser {
   private getTargetAttribute(target: any, name: string) {
     let attribute = target[name]
     if (attribute) {
-      return this.bufferAccessor.createVertexAttribute(attribute)
+      return this.bufferAccessor.createGeometryAttribute(attribute)
     }
   }
 

src/index.ts

@@ -7,6 +7,7 @@ export { Container3D } from "./container"
 export { Camera3D } from "./camera/camera"
 export { OrbitCameraControl } from "./camera/orbit-camera"
 export { Mesh3D } from "./mesh/mesh"
+export { MeshGeometry } from "./mesh/mesh-geometry"
 export { Model3D } from "./model"
 export { LightingEnvironment } from "./lighting/lighting-environment"
 export { Mesh3DRenderer } from "./mesh/mesh-renderer"

src/material.ts

@@ -1,21 +1,7 @@
 import * as PIXI from "pixi.js"
 
-import { MeshVertexData } from "./mesh/mesh-vertex"
 import { Mesh3D } from "./mesh/mesh"
-
-/**
- * Predefined attributes for material shader.
- */
-export enum MaterialShaderAttribute {
-  /** Expects shader attribute to be "attribute vec3 a_Position". */
-  position = "position",
-  /** Expects shader attribute to be "attribute vec2 a_UV1". */
-  uv1 = "uv1",
-  /** Expects shader attribute to be "attribute vec3 a_Normal". */
-  normal = "normal",
-  /** Expects shader attribute to be "attribute vec4 a_Tangent". */
-  tangent = "tangent"
-}
+import { MeshGeometry } from "./mesh/mesh-geometry"
 
 /**
  * Factory for creating materials.
@@ -29,8 +15,6 @@ export interface MaterialFactory {
  * Materials are used to render a single mesh.
  */
 export abstract class Material {
-  protected _geometry?: PIXI.Geometry
-  protected _mesh?: Mesh3D
   protected _shader?: PIXI.Shader
 
   /** State used to render a mesh. */
@@ -49,11 +33,9 @@ export abstract class Material {
   /** Value indicating if the material is transparent. */
   transparent = false
 
-  /**
-   * Creates a new material.
-   * @param attributes Predefined attributes for the shader.
-   */
-  constructor(public attributes: MaterialShaderAttribute[] = []) { }
+  get name() {
+    return "material"
+  }
 
   /**
    * Creates a shader used to render a mesh.
@@ -69,43 +51,28 @@ export abstract class Material {
    */
   abstract updateUniforms?(mesh: Mesh3D, shader: PIXI.Shader): void
 
-  /**
-   * Creates geometry used to render a mesh. Will use the predefined shader 
-   * attributes if those have been set.
-   * @param data Data used for creating the geometry.
-   */
-  createGeometry(data: MeshVertexData): PIXI.Geometry {
-    let geometry = new PIXI.Geometry()
-    if (data.indices) {
+  addGeometryAttributes(geometry: MeshGeometry) {
+    if (geometry.indices) {
       // PIXI seems to have problems using anything other than 
       // gl.UNSIGNED_SHORT or gl.UNSIGNED_INT. Let's convert to UNSIGNED_INT.
-      geometry.addIndex(new PIXI.Buffer(new Uint32Array(data.indices.buffer)))
+      geometry.addIndex(new PIXI.Buffer(new Uint32Array(geometry.indices.buffer)))
     }
-    if (this.attributes.includes(MaterialShaderAttribute.position)) {
-      if (data.positions) {
-        let buffer = new PIXI.Buffer(data.positions.buffer)
-        geometry.addAttribute("a_Position", buffer, 3, false, PIXI.TYPES.FLOAT, data.positions.stride)
-      }
+    if (geometry.positions) {
+      geometry.addAttribute("a_Position", new PIXI.Buffer(geometry.positions.buffer),
+        3, false, PIXI.TYPES.FLOAT, geometry.positions.stride)
     }
-    if (this.attributes.includes(MaterialShaderAttribute.uv1)) {
-      if (data.uvs && data.uvs[0]) {
-        let buffer = new PIXI.Buffer(data.uvs[0].buffer)
-        geometry.addAttribute("a_UV1", buffer, 2, false, PIXI.TYPES.FLOAT, data.uvs[0].stride)
-      }
+    if (geometry.uvs && geometry.uvs[0]) {
+      geometry.addAttribute("a_UV1", new PIXI.Buffer(geometry.uvs[0].buffer),
+        2, false, PIXI.TYPES.FLOAT, geometry.uvs[0].stride)
     }
-    if (this.attributes.includes(MaterialShaderAttribute.normal)) {
-      if (data.normals) {
-        let buffer = new PIXI.Buffer(data.normals.buffer)
-        geometry.addAttribute("a_Normal", buffer, 3, false, PIXI.TYPES.FLOAT, data.normals.stride)
-      }
+    if (geometry.normals) {
+      geometry.addAttribute("a_Normal", new PIXI.Buffer(geometry.normals.buffer),
+        3, false, PIXI.TYPES.FLOAT, geometry.normals.stride)
     }
-    if (this.attributes.includes(MaterialShaderAttribute.tangent)) {
-      if (data.tangents) {
-        let buffer = new PIXI.Buffer(data.tangents.buffer)
-        geometry.addAttribute("a_Tangent", buffer, 4, false, PIXI.TYPES.FLOAT, data.tangents.stride)
-      }
+    if (geometry.tangents) {
+      geometry.addAttribute("a_Tangent", new PIXI.Buffer(geometry.tangents.buffer),
+        4, false, PIXI.TYPES.FLOAT, geometry.tangents.stride)
     }
-    return geometry
   }
 
   /**
@@ -114,26 +81,18 @@ export abstract class Material {
    * @param renderer Renderer to use.
    */
   render(mesh: Mesh3D, renderer: PIXI.Renderer) {
-    if (this._mesh && mesh !== this._mesh) {
-      throw new Error("PIXI3D: Material can't be shared between meshes.")
-    } else {
-      this._mesh = mesh
-    }
     if (!this.valid) {
       return
     }
     if (!this._shader) {
       this._shader = this.createShader(mesh, renderer)
     }
-    if (!this._geometry) {
-      this._geometry = this.createGeometry(mesh.vertexData)
-    }
     if (this.updateUniforms) {
       this.updateUniforms(mesh, this._shader)
     }
     renderer.shader.bind(this._shader, false)
     renderer.state.set(this.state)
-    renderer.geometry.bind(this._geometry, this._shader)
+    renderer.geometry.bind(mesh.geometry, this._shader)
     renderer.geometry.draw(this.drawMode)
   }
 }

src/mesh/mesh-geometry.ts

@@ -0,0 +1,48 @@
+import * as PIXI from "pixi.js"
+
+import { Material } from "../material"
+
+export interface MeshGeometryAttribute {
+  buffer: ArrayBuffer
+  stride: number | undefined
+}
+
+export class MeshGeometry extends PIXI.Geometry {
+  private _materials: string[] = []
+
+  indices?: MeshGeometryAttribute
+  positions?: MeshGeometryAttribute
+  uvs?: MeshGeometryAttribute[]
+  normals?: MeshGeometryAttribute
+  tangents?: MeshGeometryAttribute
+  weights?: number[]
+  morphTargets?: {
+    positions?: MeshGeometryAttribute
+    normals?: MeshGeometryAttribute
+    tangents?: MeshGeometryAttribute
+  }[]
+
+  addAttribute(id: string, buffer?: PIXI.Buffer | number[], size?: number, normalized?: boolean, type?: number, stride?: number, start?: number): MeshGeometry {
+    if (this.getAttribute(id)) {
+      return this
+    }
+    return <MeshGeometry>super.addAttribute(
+      id, buffer, size, normalized, type, stride, start)
+  }
+
+  addIndex(buffer?: PIXI.Buffer | number[]) {
+    if (this.getIndex()) {
+      return this
+    }
+    return <MeshGeometry>super.addIndex(buffer)
+  }
+
+  addMaterialAttributes(material: Material) {
+    material.addGeometryAttributes(this)
+    this._materials.push(material.name)
+  }
+
+  hasMaterialAttributes(material: Material) {
+    return this._materials.indexOf(material.name) >= 0
+  }
+}