chorama 0.0.0

package/src/material/material.js

@@ -0,0 +1,106 @@
+/**@import {WebGLRenderPipelineOptions } from '../core/index.js' */
+
+import {
+  CullFace,
+  FrontFaceDirection
+} from "../constants/index.js"
+import { abstractClass, abstractMethod } from "../utils/index.js"
+import { RawMaterial } from "./raw.js"
+
+/**
+ * @abstract
+ */
+export class Material extends RawMaterial {
+  /**
+   * @type {FrontFaceDirection}
+   */
+  frontFace = FrontFaceDirection.CCW
+  /**
+   * @type {CullFace}
+   */
+  cullFace = CullFace.Back
+
+  /**
+   * @type {boolean}
+   */
+  depthWrite = true
+
+  constructor(){
+    super()
+    abstractClass(this, Material)
+  }
+  /**
+   * @override
+   * @returns {string}
+   */
+  vertex() {
+    abstractMethod(this, Material, Material.prototype.vertex.name)
+  }
+
+  /**
+   * @override
+   * @returns {string}
+   */
+  fragment() {
+    abstractMethod(this, Material, Material.prototype.fragment.name)
+  }
+
+  /**
+   * @override
+   * @returns {ArrayBuffer}
+   */
+  getData() {
+    if (this.constructor === RawMaterial) {
+      throw `\`${RawMaterial.name}\` cannot be used directly as a material.`
+    }
+    throw `Implement \`${this.constructor.name}.uploadUniforms()\``
+  }
+
+  /**
+   * @override
+   * @returns {bigint}
+   */
+  getPipelineBits() {
+    let materialKey = MaterialKey.None
+    if (this.cullFace === CullFace.Front) {
+      materialKey |= MaterialKey.CullFaceFront
+    } else if (this.cullFace === CullFace.Back) {
+      materialKey |= MaterialKey.CullFaceBack
+    } else if (this.cullFace === CullFace.FrontAndBack) {
+      materialKey |= MaterialKey.CullFaceBoth
+    }
+    if (this.depthWrite) {
+      materialKey |= MaterialKey.DepthWrite
+    }
+    if (this.frontFace == FrontFaceDirection.CW) {
+      materialKey |= MaterialKey.FrontFaceCW
+    }
+
+    return materialKey
+  }
+
+  /**
+   * @override
+   * @param {WebGLRenderPipelineOptions} descriptor 
+   */
+  specialize(descriptor) {
+    // TODO: Incorporate blending to the pipeline key
+
+    descriptor.cullFace = this.cullFace
+    descriptor.frontFace = this.frontFace
+    descriptor.depthWrite = this.depthWrite
+  }
+}
+
+/**
+ * @enum {bigint}
+ */
+export const MaterialKey = /**@type {const}*/({
+  None: 0n,
+  CullFaceNone: 0n << 0n,
+  CullFaceFront: 1n << 0n,
+  CullFaceBack: 2n << 0n,
+  CullFaceBoth: 3n << 0n,
+  FrontFaceCW: 1n << 2n,
+  DepthWrite: 1n << 3n
+})

package/src/material/normal.js

@@ -0,0 +1,30 @@
+import { Material } from "./material.js"
+import { basicVertex, normalFragment} from "../shader/index.js"
+
+export class NormalMaterial extends Material {
+
+  constructor() {
+    super()
+  }
+
+  /**
+   * @override
+   */
+  vertex() {
+    return basicVertex
+  }
+
+  /**
+   * @override
+   */
+  fragment() {
+    return normalFragment
+  }
+
+  /**
+   * @override
+   */
+  getData() {    
+    return new Float32Array([]).buffer
+  }
+}

package/src/material/phong.js

@@ -0,0 +1,86 @@
+import { Material } from "./material.js"
+import { Color } from "../math/index.js"
+import { basicVertex, phongFragment } from "../shader/index.js"
+import { Sampler, Texture } from "../texture/index.js"
+
+export class PhongMaterial extends Material {
+  /**
+   * @type {Color}
+   */
+  color
+
+  /**
+   * @type {Texture | undefined}
+   */
+  mainTexture
+
+  /**
+   * @type {Sampler | undefined}
+   */
+  mainSampler
+  /**
+   * @param {PhongMaterialOptions} param0 
+   */
+  constructor({
+    color = new Color(1, 1, 1),
+    mainTexture = undefined,
+    mainSampler = undefined,
+    specularStrength = 0.5,
+    specularShininess = 32,
+  } = {}) {
+    super()
+    this.color = color
+    this.mainTexture = mainTexture
+    this.mainSampler = mainSampler
+    this.specularStrength = specularStrength
+    this.specularShininess = specularShininess
+  }
+
+  /**
+   * @override
+   */
+  vertex() {
+    return basicVertex
+  }
+
+  /**
+   * @override
+   */
+  fragment() {
+    return phongFragment
+  }
+
+  /**
+   * @override
+   */
+  getData() {
+    const {
+      color,
+      specularShininess,
+      specularStrength
+    } = this
+    
+    return new Float32Array([
+      ...color,
+      specularShininess,
+      specularStrength
+    ]).buffer
+  }
+
+  /**
+   * @returns {[string, number, Texture | undefined, Sampler | undefined][]}
+   * @override
+   */
+  getTextures() {
+    return [['mainTexture', 0, this.mainTexture, this.mainSampler]]
+  }
+}
+
+/**
+ * @typedef PhongMaterialOptions
+ * @property {Color} [color]
+ * @property {Texture} [mainTexture]
+ * @property {Sampler} [mainSampler]
+ * @property {number} [specularShininess]
+ * @property {number} [specularStrength]
+ */

package/src/material/raw.js

@@ -0,0 +1,52 @@
+/**@import { WebGLRenderPipelineOptions } from '../core/index.js' */
+import { Sampler, Texture } from "../texture/index.js"
+import { abstractClass, abstractMethod } from "../utils/index.js"
+
+/**
+ * @abstract
+ */
+export class RawMaterial {
+
+  constructor(){
+    abstractClass(this, RawMaterial)
+  }
+  /**
+   * @returns {string}
+   */
+  vertex() {
+    abstractMethod(this, RawMaterial, RawMaterial.prototype.vertex.name)
+  }
+
+  /**
+   * @returns {string}
+   */
+  fragment() {
+    abstractMethod(this, RawMaterial, RawMaterial.prototype.fragment.name)
+  }
+
+  /**
+   * @returns {ArrayBuffer}
+   */
+  getData() {
+    abstractMethod(this, RawMaterial, RawMaterial.prototype.getData.name)
+  }
+
+  /**
+   * @returns {[string, number, Texture | undefined, Sampler | undefined][]}
+   */
+  getTextures(){
+    return []
+  }
+
+  /**
+   * @returns {bigint}
+   */
+  getPipelineBits() {
+    return 0n
+  }
+
+  /**
+   * @param {WebGLRenderPipelineOptions} _descriptor 
+   */
+  specialize(_descriptor) { }
+}

package/src/material/standard.js

@@ -0,0 +1,221 @@
+import { Color } from "../math/index.js";
+import { basicVertex, standardFragment } from "../shader/index.js";
+import { Sampler, Texture } from "../texture/index.js";
+import { Material } from "./material.js";
+
+export class StandardMaterial extends Material {
+  /**
+   * @type {Color}
+   */
+  color
+
+  /**
+   * @type {Texture | undefined}
+   */
+  mainTexture
+
+  /**
+   * @type {Sampler | undefined}
+   */
+  mainSampler
+
+  /**
+   * @type {Texture | undefined}
+   */
+  normalTexture
+
+  /**
+   * @type {Sampler | undefined}
+   */
+  normalSampler
+
+  /**
+   * @type {number}
+   */
+  metallic
+
+  /**
+   * @type {Texture | undefined}
+   */
+  metallicTexture
+  /**
+   * @type {Sampler | undefined}
+   */
+  metallicSampler
+
+  /**
+   * @type {number}
+   */
+  roughness
+
+  /**
+   * @type {Texture | undefined}
+   */
+  roughnessTexture
+
+  /**
+   * @type {Sampler | undefined}
+   */
+  roughnessSampler
+
+  /**
+   * @type {number}
+   */
+  occlusionStrength
+  /**
+   * @type {Texture | undefined}
+   */
+  occlusionTexture
+
+  /**
+   * @type {Sampler | undefined}
+   */
+  occlusionSampler
+
+  /**
+   * @type {Color}
+   */
+  emissiveColor
+
+  /**
+   * @type {number}
+   */
+  emissiveIntensity
+
+  /**
+   * @type {Texture | undefined}
+   */
+  emissiveTexture
+
+  /**
+   * @type {Sampler | undefined}
+   */
+  emissiveSampler
+
+  /**
+   * @param {StandardMaterialOptions} param0 
+   */
+  constructor({
+    color = new Color(1, 1, 1),
+    mainTexture,
+    mainSampler,
+    normalTexture,
+    normalSampler,
+    metallic = 1,
+    metallicTexture,
+    metallicSampler,
+    roughness = 0,
+    roughnessTexture,
+    roughnessSampler,
+    occlusionStrength = 1,
+    occlusionTexture,
+    occlusionSampler,
+    emissiveColor = new Color(0, 0, 0),
+    emissiveIntensity = 1,
+    emissiveTexture,
+    emissiveSampler
+  } = {}) {
+    super()
+    this.color = color;
+    this.mainTexture = mainTexture;
+    this.mainSampler = mainSampler;
+
+    this.normalTexture = normalTexture;
+    this.normalSampler = normalSampler;
+
+    this.metallic = metallic;
+    this.metallicTexture = metallicTexture;
+    this.metallicSampler = metallicSampler;
+
+    this.roughness = roughness;
+    this.roughnessTexture = roughnessTexture;
+    this.roughnessSampler = roughnessSampler;
+
+    this.occlusionStrength = occlusionStrength
+    this.occlusionTexture = occlusionTexture;
+    this.occlusionSampler = occlusionSampler;
+
+    this.emissiveColor = emissiveColor;
+    this.emissiveIntensity = emissiveIntensity;
+    this.emissiveTexture = emissiveTexture;
+    this.emissiveSampler = emissiveSampler;
+  }
+
+  /**
+   * @override
+   */
+  vertex() {
+    return basicVertex
+  }
+
+  /**
+   * @override
+   */
+  fragment() {
+    return standardFragment
+  }
+
+  /**
+   * @override
+   */
+  getData() {
+    const {
+      color,
+      metallic,
+      roughness,
+      occlusionStrength,
+      emissiveColor,
+      emissiveIntensity
+    } = this
+
+    return new Float32Array([
+      ...color,
+      metallic,
+      roughness,
+      occlusionStrength,
+      0,
+      emissiveColor.r,
+      emissiveColor.g,
+      emissiveColor.b,
+      emissiveIntensity
+    ]).buffer
+  }
+
+  /**
+   * @override
+   * @returns {[string, number, Texture | undefined, Sampler | undefined][]}
+   */
+  getTextures() {
+    return [
+      ['mainTexture', 0, this.mainTexture, this.mainSampler],
+      ['normal_texture', 0, this.normalTexture, this.normalSampler],
+      ['metallic_texture', 0, this.metallicTexture, this.metallicSampler],
+      ['roughness_texture', 0, this.roughnessTexture, this.roughnessSampler],
+      ['occlusion_texture', 0, this.occlusionTexture, this.occlusionSampler],
+      ['emissive_texture', 0, this.emissiveTexture, this.emissiveSampler]
+    ]
+  }
+}
+
+
+/**
+ * @typedef StandardMaterialOptions
+ * @property {Color} [color] The base color of the material.
+ * @property {Texture} [mainTexture] The color texture applied to the material.
+ * @property {Sampler} [mainSampler] The sampler for the color texture.
+ * @property {Texture} [normalTexture] The texture used for normal mapping to simulate surface detail.
+ * @property {Sampler} [normalSampler] The sampler for the normal map.
+ * @property {number} [metallic] The metallic value of the material, typically between 0 and 1.
+ * @property {Texture} [metallicTexture] A texture representing metallic values, typically a grayscale image.
+ * @property {Sampler} [metallicSampler] The sampler for the metallic texture.
+ * @property {number} [roughness] The roughness value of the material, typically between 0 and 1.
+ * @property {Texture} [roughnessTexture] A texture representing the roughness values, typically a grayscale image.
+ * @property {Sampler} [roughnessSampler] The sampler for the roughness texture.
+ * @property {number} [occlusionStrength]  The strength of the ambient occlusion. 
+ * @property {Texture} [occlusionTexture] A texture used for ambient occlusion to simulate shadowing of surfaces.
+ * @property {Sampler} [occlusionSampler] The sampler for the ambient occlusion texture.
+ * @property {Color} [emissiveColor] The color of emissive light emitted by the material.
+ * @property {number} [emissiveIntensity] The intensity of the emissive color.
+ * @property {Texture} [emissiveTexture] A texture representing the emissive map.
+ * @property {Sampler} [emissiveSampler] The sampler for the emissive texture.
+ */

package/src/math/index.js

@@ -0,0 +1,3 @@
+export * from 'marangi'
+export * from 'hisabati'
+export * from './transform.js'

package/src/math/transform.js

@@ -0,0 +1,38 @@
+import { Vector3, Quaternion, Affine3 } from "hisabati"
+
+export class Transform3D {
+  constructor() {
+    this.world = new Affine3()
+    this.position = new Vector3()
+    this.orientation = new Quaternion()
+    this.scale = new Vector3(1, 1, 1)
+  }
+  /**
+   * @param {Transform3D} [parent]
+   */
+  updateMatrix(parent) {
+    this.world.compose(
+      this.position,
+      this.orientation,
+      this.scale
+    )
+    if(parent){
+      Affine3.multiply(parent.world,this.world,this.world)
+    }
+  }
+
+  /**
+   * @param {Transform3D} other
+   */
+  copy(other){
+    this.position.copy(other.position)
+    this.orientation.copy(other.orientation)
+    this.scale.copy(other.scale)
+    this.world.copy(other.world)
+
+    return this
+  }
+  clone(){
+    return new Transform3D().copy(this)
+  }
+}

package/src/mesh/attribute/attribute.js

@@ -0,0 +1,79 @@
+import { VertexFormat } from '../../constants/index.js'
+
+export class Attribute {
+
+  /**
+   * @readonly
+   * @type {string}
+   */
+  name = ''
+
+  /**
+   * @readonly
+   * @type {number}
+   */
+  id = 0
+
+  /**
+   * @readonly
+   * @type {VertexFormat}
+   */
+  format
+
+  /**
+   * @param {string} name
+   * @param {number} location
+   * @param {VertexFormat} format
+   */
+  constructor(name, location, format) {
+    this.name = name
+    this.id = location
+    this.format = format
+  }
+
+  static Position = new Attribute(
+    'position',
+    0,
+    VertexFormat.Float32x3
+  )
+
+  static UV = new Attribute(
+    'uv',
+    1,
+    VertexFormat.Float32x2
+  )
+
+  static UVB = new Attribute(
+    'uvb',
+    2,
+    VertexFormat.Float32x2
+  )
+
+  static Normal = new Attribute(
+    'normal',
+    3,
+    VertexFormat.Float32x3
+  )
+
+  static Tangent = new Attribute(
+    'tangent',
+    4,
+    VertexFormat.Float32x3
+  )
+
+  static Color = new Attribute(
+    'color',
+    5,
+    VertexFormat.Float32x4
+  )
+  static JointWeight = new Attribute(
+    'joint_weight',
+    6,
+    VertexFormat.Float32x4
+  )
+  static JointIndex = new Attribute(
+    'joint_index',
+    7,
+    VertexFormat.Uint16x4
+  )
+}

package/src/mesh/attribute/index.js

@@ -0,0 +1 @@
+export * from './attribute.js'

package/src/mesh/attributedata/index.js

@@ -0,0 +1 @@
+export * from './separate.js'