chorama 0.0.0

package/src/loader/index.js

@@ -0,0 +1,3 @@
+export * from './texture.js'
+export * from './obj.js'
+export * from './gltf.js'

package/src/loader/loader.js

@@ -0,0 +1,174 @@
+/**
+ * @enum {number}
+ */
+export const OnAssetLoadedStrategy = /**@type {const}*/({
+  Original: 0,
+  Clone: 1
+})
+
+/**
+ * @template {Clonable<Asset> & Copyable<Asset>} Asset
+ * @template {LoadSettings} [Settings = LoadSettings]
+ */
+export class Loader {
+  /**
+   * @readonly
+   * @type {Constructor<Asset>}
+   */
+  asset
+
+  /**
+   * @protected
+   * @type {OnAssetLoadedStrategy}
+   */
+  strategy = OnAssetLoadedStrategy.Clone
+
+  /**
+   * @private
+   * @readonly
+   * @type {Map<string,Asset>}
+   */
+  assets = new Map()
+
+  /**
+   * @private
+   * @readonly
+   * @type {Map<string,[Asset,((asset:Asset)=>void) | undefined][]>}
+   */
+  toLoad = new Map()
+  /**
+   * @param {Constructor<Asset>} asset
+   */
+  constructor(asset) {
+    this.asset = asset
+  }
+
+  /**
+   * @param {Settings & {postprocessor?:(asset:Asset)=>void}} settings
+   */
+  load(settings) {
+    const root = this.default(settings)
+
+    if (this.strategy === OnAssetLoadedStrategy.Clone) {
+      const clone = root.clone()
+      this.addToLoad(settings.paths.join('/'), clone, settings.postprocessor)
+      this.asyncLoad(settings, root)
+      return clone
+    }
+
+    this.asyncLoad(settings, root)
+    return root
+  }
+
+
+  /**
+   * @param {Settings} settings
+   * @param {Asset} [original]
+   */
+  async asyncLoad(settings, original) {
+    const cachedAsset = original || this.default(settings)
+    const response = await this.fetch(settings.paths)
+
+    await this.parse(response, cachedAsset, settings)
+    this.assets.set(settings.paths.join("/"), cachedAsset)
+
+    const loads = this.toLoad.get(settings.paths.join('/'))
+
+    if (loads) {
+      for (let i = 0; i < loads.length; i++) {
+        const [clone, postprocessor] = /**@type {[Asset, ((asset: Asset) => void) | undefined]} */ (loads[i]);
+
+        clone.copy(cachedAsset)
+        if (postprocessor) {
+          postprocessor(clone)
+        }
+      }
+
+      loads.length = 0
+    }
+    return cachedAsset
+  }
+
+  /**
+   * @private
+   * @param {string} url
+   * @param {Asset} asset
+   * @param {((asset: Asset)=> void) | undefined} postprocessor
+   */
+  addToLoad(url, asset, postprocessor) {
+    const assets = this.toLoad.get(url)
+
+    if (assets) {
+      assets.push([asset, postprocessor])
+    } else {
+      this.toLoad.set(url, [[asset, postprocessor]])
+    }
+  }
+  /**
+   * @private
+   * @param {string[]} paths
+   * @returns {Promise<ArrayBuffer[]>}
+   */
+  async fetch(paths) {
+    const data = paths.map(async (path) => {
+      const response = await fetch(path)
+      return response.arrayBuffer()
+    })
+    const buffers = await Promise.all(data)
+
+    return buffers
+  }
+
+  /**
+   * @protected
+   * @param {ArrayBuffer[]} _buffers
+   * @param {Asset} _destination
+   * @param {Settings} _settings 
+   * @returns {Promise<void>}
+   */
+  async parse(_buffers, _destination, _settings) {
+    if (this.constructor === this.constructor) {
+      throw `\`${this.constructor.name}\` cannot be used directly.`
+    }
+    throw `Implement \`${this.constructor.name}.parse()\``
+  }
+  /**
+   * @protected
+   * @param {Settings} _settings 
+   * @returns {Asset}
+   */
+  default(_settings) {
+    if (this.constructor === this.constructor) {
+      throw `\`${this.constructor.name}\` cannot be used directly.`
+    }
+    throw `Implement \`${this.constructor.name}.parse()\``
+  }
+}
+
+/**
+ * @typedef LoadSettings
+ * @property {string[]} paths
+ */
+
+/**
+ * @template T
+ * @typedef Defaultable
+ * @property {()=>T} default
+ */
+
+/**
+ * @template T
+ * @typedef Clonable
+ * @property {()=>T} clone
+ */
+
+/**
+ * @template T
+ * @typedef Copyable
+ * @property {(other:T)=>T} copy
+ */
+
+/**
+ * @template [T = unknown]
+ * @typedef {new (...args:any[])=>T} Constructor
+ */

package/src/loader/obj.js

@@ -0,0 +1,188 @@
+import { Mesh, Attribute } from '../mesh/index.js';
+import { BasicMaterial } from '../material/index.js';
+import { MeshMaterial3D, Object3D } from '../objects/index.js';
+import { Loader } from './loader.js';
+import { arrayBufferToText } from './utils.js';
+import { SeparateAttributeData } from '../mesh/attributedata/separate.js';
+
+/**
+ * @extends {Loader<Object3D, ObjLoadSettings>}
+ */
+export class OBJLoader extends Loader {
+
+  constructor() {
+    super(Object3D)
+  }
+
+  /**
+   * @override
+   * @param {ArrayBuffer[]} buffers
+   * @param {Object3D} destination
+   * @param {ObjLoadSettings} _settings
+   */
+  async parse(buffers, destination, _settings) {
+    const buffer = buffers[0]
+    if (!buffer) {
+      return
+    }
+    const raw = arrayBufferToText(buffer)
+    const obj = await loadOBJ(raw)
+    const attributes = new SeparateAttributeData()
+    const position = obj.attributes.get(Attribute.Position.name)
+    const normals = obj.attributes.get(Attribute.Normal.name)
+    const uvs = obj.attributes.get(Attribute.UV.name)
+
+    if (position) {
+      attributes.set(Attribute.Position.name, position)
+    }
+
+    if (normals) {
+      attributes.set(Attribute.Normal.name, normals)
+    }
+
+    if (uvs) {
+      attributes.set(Attribute.UV.name, uvs)
+    }
+    const mesh = new Mesh(attributes)
+    const root = new MeshMaterial3D(mesh, new BasicMaterial())
+
+    destination.add(root)
+  }
+
+  /**
+   * @override
+   */
+  default() {
+    return new Object3D()
+  }
+}
+
+/**
+ * @param {string} data 
+ */
+async function loadOBJ(data) {
+  const positions = []
+  const uvs = []
+  const normals = []
+  const faces = []
+  let includeUVs = true
+  let includeNormals = true
+
+  const lines = data.split("\n")
+
+  for (let line of lines) {
+    line = line.trim();
+
+    // skip empty & comments
+    if (line === "" || line.startsWith("#")) continue;
+
+    const parts = line.split(/\s+/);
+    const keyword = parts[0];
+    const data = parts.slice(1);
+
+    switch (keyword) {
+      case "v": // vertex position
+        positions.push(data.map(Number));
+        break;
+      case "vt": // uv
+        uvs.push(data.map(Number));
+        break;
+      case "vn": // normal
+        normals.push(data.map(Number));
+        break;
+      case "f": { // face
+        const face = data.map(ref => {
+          const [v, vt, vn] = ref
+            .split("/")
+            .map(x => x ? parseInt(x) : undefined);
+
+          if (v === undefined) {
+            throw new Error("OBJ faces must always reference a position index.")
+          }
+
+          return {
+            v: v !== undefined ? v - 1 : undefined,   // OBJ is 1-based → shift to 0-based
+            vt: vt !== undefined ? vt - 1 : undefined,
+            vn: vn !== undefined ? vn - 1 : undefined
+          };
+        });
+        includeUVs &&= face.every(vertex => vertex.vt !== undefined)
+        includeNormals &&= face.every(vertex => vertex.vn !== undefined)
+        faces.push(face);
+        break;
+      }
+    }
+  }
+
+  return buildBuffers({
+    positions,
+    uvs,
+    normals,
+    triangles: faces,
+    includeUVs,
+    includeNormals
+  })
+}
+
+/**
+ * @param {{ positions: any; uvs: any; normals: any; triangles: any; includeUVs: boolean; includeNormals: boolean; }} data
+ */
+function buildBuffers(data) {
+  const positions = [];
+  const uvs = [];
+  const normals = [];
+
+  for (const triangle of data.triangles) {
+    for (let i = 1; i < triangle.length - 1; i++) {
+      const vertex1 = triangle[0]
+      const vertex2 = triangle[i]
+      const vertex3 = triangle[i + 1]
+
+      positions.push(...data.positions[vertex1.v])
+      if (data.includeNormals && vertex1.vn !== undefined) {
+        normals.push(...data.normals[vertex1.vn])
+      }
+      if (data.includeUVs && vertex1.vt !== undefined) {
+        uvs.push(...data.uvs[vertex1.vt])
+      }
+
+      positions.push(...data.positions[vertex2.v])
+      if (data.includeNormals && vertex2.vn !== undefined) {
+        normals.push(...data.normals[vertex2.vn])
+      }
+      if (data.includeUVs && vertex2.vt !== undefined) {
+        uvs.push(...data.uvs[vertex2.vt])
+      }
+
+      positions.push(...data.positions[vertex3.v])
+      if (data.includeNormals && vertex3.vn !== undefined) {
+        normals.push(...data.normals[vertex3.vn])
+      }
+      if (data.includeUVs && vertex3.vt !== undefined) {
+        uvs.push(...data.uvs[vertex3.vt])
+      }
+    }
+  }
+
+  const attributes = new Map([
+    [Attribute.Position.name, new DataView(new Float32Array(positions).buffer)]
+  ])
+
+  if (data.includeUVs && uvs.length > 0) {
+    attributes.set(Attribute.UV.name, new DataView(new Float32Array(uvs).buffer))
+  }
+
+  if (data.includeNormals && normals.length > 0) {
+    attributes.set(Attribute.Normal.name, new DataView(new Float32Array(normals).buffer))
+  }
+
+  return {
+    attributes,
+    count: positions.length / 3
+  };
+}
+
+
+/**
+ * @typedef {import('./loader.js').LoadSettings} ObjLoadSettings
+ */

package/src/loader/texture.js

@@ -0,0 +1,85 @@
+/** @import { TextureSettings } from '../texture/index.js' */
+
+import { TextureFormat, TextureType, getTextureFormatSize } from '../constants/index.js';
+import { Texture } from '../texture/index.js';
+import { assert } from '../utils/index.js';
+import { Loader, OnAssetLoadedStrategy } from './loader.js';
+
+/**
+ * @extends {Loader<Texture,TextureLoadSettings>}
+ */
+export class TextureLoader extends Loader {
+
+  constructor() {
+    super(Texture)
+    this.strategy = OnAssetLoadedStrategy.Original
+  }
+
+  /**
+   * @override
+   * @param {ArrayBuffer[]} buffers
+   * @param {Texture} destination
+   */
+  async parse(buffers, destination) {
+    let width = 0, height = 0
+    const data = buffers.map(async (buffer) => {
+      const blob = await new Blob([buffer])
+      const bitmap = await createImageBitmap(blob)
+      const canvas = new OffscreenCanvas(bitmap.width, bitmap.height)
+      const ctx = canvas.getContext('2d')
+
+      assert(ctx, "Could not sreate context to load image.")
+      ctx.drawImage(bitmap, 0, 0)
+      width = bitmap.width
+      height = bitmap.height
+
+      return ctx.getImageData(0, 0, bitmap.width, bitmap.height, {
+        colorSpace: "srgb"
+      }).data.buffer
+    })
+    const textureFormat = TextureFormat.RGBA8Unorm
+    const images = await Promise.all(data)
+    const depth = images.length
+    const sliceSize = getTextureFormatSize(textureFormat) * width * height
+    const buffer = new ArrayBuffer(
+      sliceSize * depth
+    )
+    images.forEach((image, i) => {
+      const sourceView = new Uint8Array(image)
+      const destView = new Uint8Array(buffer, sliceSize * i, sliceSize)
+      destView.set(sourceView)
+    })
+    destination.data = buffer
+    destination.format = textureFormat,
+    destination.width = width
+    destination.height = height
+    destination.depth = depth
+  }
+
+  /**
+   * @override
+   * @param {TextureLoadSettings} settings
+   */
+  default(settings) {
+    const pixel = new Uint8Array(
+      settings.paths.flatMap(()=>[255, 0, 255, 255])
+    )
+    const texture = new Texture({
+      ...(settings.textureSettings || {}),
+      data: pixel.buffer,
+      type: settings.type || TextureType.Texture2D,
+      width: 1,
+      height: 1,
+      depth: settings.paths.length
+    })
+
+    return texture
+  }
+}
+
+/**
+ * @typedef TextureLoadSettings
+ * @property {string[]} paths
+ * @property {TextureType} [type]
+ * @property {TextureSettings} [textureSettings]
+ */

package/src/loader/utils.js

@@ -0,0 +1,16 @@
+/**
+ * @param {AllowSharedBufferSource} buffer
+ */
+export function arrayBufferToJSON(buffer) {
+  const decoder = new TextDecoder('utf-8');
+  const jsonString = decoder.decode(buffer);
+  return JSON.parse(jsonString);
+}
+
+/**
+ * @param {AllowSharedBufferSource} buffer
+ */
+export function arrayBufferToText(buffer) {
+  const decoder = new TextDecoder('utf-8')
+  return decoder.decode(buffer);
+}

package/src/material/basic.js

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

package/src/material/depth.js

@@ -0,0 +1,73 @@
+import { Material } from "./material.js"
+import { basicVertex, depthFragment } from "../shader/index.js"
+import { Texture } from "../texture/index.js"
+import { Sampler } from "../texture/sampler.js"
+import { TextureFilter } from "../constants/texture.js"
+
+// This should be a post processing effect as it renders the entire scene.
+export class DepthMaterial extends Material {
+
+  /**
+   * @type {Texture | undefined}
+   */
+  depth
+
+  near = 0.1
+
+  far = 1000
+  /**
+   * @type {Sampler | undefined}
+   */
+  mainSampler
+
+  /**
+   * @param {DepthMaterialOptions} options 
+   */
+  constructor({
+    depth
+  }) {
+    super()
+    this.depth = depth
+    this.mainSampler = new Sampler({
+      minificationFilter: TextureFilter.Nearest,
+      magnificationFilter: TextureFilter.Nearest
+    })
+  }
+
+  /**
+   * @override
+   */
+  vertex() {
+    return basicVertex
+  }
+
+  /**
+   * @override
+   */
+  fragment() {
+    return depthFragment
+  }
+
+  /**
+   * @override
+   */
+  getData() {
+    return new Float32Array([
+      this.near,
+      this.far
+    ]).buffer
+  }
+
+  /**
+   * @override
+   * @returns {[string, number, Texture | undefined, Sampler | undefined][]}
+   */
+  getTextures() {
+    return [['depth_texture', 0, this.depth, this.mainSampler]]
+  }
+}
+
+/**
+ * @typedef DepthMaterialOptions
+ * @property {Texture} depth
+ */

package/src/material/index.js

@@ -0,0 +1,8 @@
+export * from "./material.js"
+export * from "./basic.js"
+export * from "./normal.js"
+export * from "./lambert.js"
+export * from "./phong.js"
+export * from "./standard.js"
+export * from "./depth.js"
+export * from "./raw.js"

package/src/material/lambert.js

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