chorama 0.0.0

package/src/objects/light/shadow/index.js

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

package/src/objects/light/shadow/shadow.js

@@ -0,0 +1,67 @@
+import { OrthographicProjection } from "../../camera/index.js"
+
+export class PCFShadowFilter {
+  /**
+   * Percentage-closer filtering radius in texels.
+   * @type {number}
+   */
+  radius = 1
+}
+
+export class PCSSShadowFilter {
+  /**
+   * Base filter radius in texels.
+   * @type {number}
+   */
+  radius = 1
+  /**
+   * Blocker search radius in texels.
+   * @type {number}
+   */
+  searchRadius = 2
+  /**
+   * Penumbra scale factor.
+   * @type {number}
+   */
+  penumbra = 1
+}
+
+export class Shadow {
+  /**
+   * @type {number}
+   */
+  bias = 0.001
+  /**
+   * @type {number}
+   */
+  normalBias = 0
+  /**
+   * @type {ShadowFilteringModes}
+   */
+  filterMode = new PCFShadowFilter()
+}
+export class OrthographicShadow extends Shadow {
+  /**
+   * @type {number}
+   */
+  near = 0.1
+  /**
+   * @type {number}
+   */
+  far = 1000
+  /**
+   * @type {OrthographicProjection}
+   */
+  projection = new OrthographicProjection()
+}
+
+export class SpotLightShadow extends Shadow {
+  /**
+   * @type {number}
+   */
+  near = 0.1
+}
+
+/**
+ * @typedef {PCFShadowFilter | PCSSShadowFilter | undefined} ShadowFilteringModes
+ */

package/src/objects/light/spot.js

@@ -0,0 +1,56 @@
+import { Color, Vector3 } from '../../math/index.js'
+import { Object3D } from '../object3d.js'
+import { SpotLightShadow } from './shadow/index.js'
+
+export class SpotLight extends Object3D {
+  /**
+   * @type {number}
+   */
+  intensity = 1.0
+  /**
+   * @type {Color}
+   */
+  color = new Color()
+  /**
+   * @type {number}
+   */
+  range = 1.0
+  /**
+   * @type {number}
+   */
+  decay = 2.0
+  /**
+   * @type {number}
+   */
+  innerAngle = 0
+  /**
+   * @type {number}
+   */
+  outerAngle = Math.PI / 2
+  /**
+   * @type {SpotLightShadow | undefined}
+   */
+  shadow
+
+  pack() {
+    const direction = this.transform.world.transformWithoutTranslation(
+      new Vector3(0, 0, -1)
+    )
+    const halfInnerAngle = this.innerAngle / 2
+    const halfOuterAngle = this.outerAngle / 2
+
+    return [
+      ...this.color,
+      this.transform.world.x,
+      this.transform.world.y,
+      this.transform.world.z,
+      0,
+      ...direction,
+      this.intensity,
+      this.range,
+      this.decay,
+      Math.cos(Math.min(halfInnerAngle, halfOuterAngle)),
+      Math.cos(halfOuterAngle)
+    ]
+  }
+}

package/src/objects/mesh.js

@@ -0,0 +1,141 @@
+import { Mesh } from "../mesh/index.js"
+import { Texture } from "../texture/index.js"
+import { Object3D } from "./object3d.js"
+import { Affine3 } from "../math/index.js"
+import { RawMaterial } from "../material/index.js"
+import { Bone3D } from "./bone.js";
+import { TextureFormat, TextureType } from "../constants/index.js"
+
+export class Skin {
+
+  // NOTE: Maybe this should not be here but available globally?
+  /**
+   * @type {Texture}
+   */
+  boneTexture = new Texture({
+    type: TextureType.Texture2D,
+    data: new Uint8Array([0, 0, 0, 0]).buffer,
+    width: 4,
+    height: 0,
+    format: TextureFormat.RGBA32Float,
+    generateMipmaps: false,
+  })
+
+  /**
+   * @type {Affine3}
+   */
+  bindMatrix = Affine3.identity()
+
+  /**
+   * @type {Affine3}
+   */
+  inverseBindMatrix = Affine3.identity()
+
+  /**
+   * @type {Bone3D[]}
+   */
+  bones = []
+
+  /**
+   * @type {Affine3[]}
+   */
+  inverseBindPose = []
+
+  constructor() { }
+
+  clone() {
+    const skin = new Skin()
+    skin.inverseBindPose = this.inverseBindPose
+    skin.bones = this.bones.slice()
+    return skin
+  }
+
+  setBindPose() {
+    for (let i = 0; i < this.bones.length; i++) {
+      const bone = /**@type {Bone3D} */ (this.bones[i])
+      const element = this.inverseBindPose[i] || new Affine3();
+      element.copy(bone.transform.world).invert()
+      this.inverseBindPose[i] = element
+    }
+  }
+
+  updateTexture() {
+    const data = new Float32Array(this.bones.length * 16)
+
+    for (let i = 0; i < this.bones.length; i++) {
+      const offset = i * 16
+      const bone = /**@type {Bone3D} */ (this.bones[i])
+      const pose = /**@type {Affine3} */ (this.inverseBindPose[i])
+      const world = Affine3.multiply(
+        bone.transform.world,
+        pose
+      )/**/
+
+      // PERF: Remove last row as it is always constant
+      data[offset + 0] = world.a
+      data[offset + 1] = world.b
+      data[offset + 2] = world.c
+      data[offset + 3] = 0
+      data[offset + 4] = world.d
+      data[offset + 5] = world.e
+      data[offset + 6] = world.f
+      data[offset + 7] = 0
+      data[offset + 8] = world.g
+      data[offset + 9] = world.h
+      data[offset + 10] = world.i
+      data[offset + 11] = 0
+      data[offset + 12] = world.x
+      data[offset + 13] = world.y
+      data[offset + 14] = world.z
+      data[offset + 15] = 1
+    }
+
+    // TODO: Use the entire dimensions of the texture to pack values
+    this.boneTexture.height = this.bones.length
+    this.boneTexture.data = data.buffer
+  }
+}
+
+/**
+ * @template {RawMaterial} [U = RawMaterial]
+ */
+export class MeshMaterial3D extends Object3D {
+  /**
+   * @type {Mesh}
+   */
+  mesh
+
+  /**
+   * @type {U}
+   */
+  material
+
+  /**
+   * @type {Skin | undefined}
+   */
+  skin
+
+  /**
+   * @param {Mesh} mesh 
+   * @param {U} material 
+   */
+  constructor(mesh, material) {
+    super()
+    this.mesh = mesh
+    this.material = material
+  }
+
+  /**
+   * @override
+   * @param {Map<Object3D, Object3D>} [entityMap]
+   */
+  clone(entityMap) {
+    const newMesh = super.clone(entityMap)
+
+    newMesh.mesh = this.mesh
+    newMesh.material = this.material
+    newMesh.skin = this.skin ? this.skin.clone() : undefined
+
+    return newMesh
+  }
+}

package/src/objects/object3d.js

@@ -0,0 +1,167 @@
+import { Transform3D } from "../math/index.js"
+
+export class Object3D {
+  /**
+   * @type {string}
+   */
+  name = ''
+
+  transform = new Transform3D()
+
+  /**
+   * @type {Object3D | undefined}
+   */
+  parent
+  /**
+   * @type {Object3D[]}
+   */
+  children = []
+
+  renderMask = new RenderMask()
+  update() {
+    this.transform.updateMatrix(this.parent?.transform)
+  }
+
+  /**
+   * @param {Object3D[]} children
+   */
+  add(...children) {
+    this.children.push(...children)
+    children.forEach(child => child.parent = this)
+  }
+
+  /**
+   * @param {Object3D[]} children
+   */
+  remove(...children) {
+    for (let i = 0; i < children.length; i++) {
+      const child = /**@type {Object3D}*/(children[i]);
+
+      const index = this.children.indexOf(child)
+      if (index === -1) continue
+
+      child.parent = undefined
+      this.children.splice(index, 1)
+    }
+  }
+  /**
+   * @param {Traverser} func
+   */
+  traverseBFS(func) {
+    /**@type {Object3D[]} */
+    const queue = [this]
+
+    while (queue.length) {
+      const object = /**@type {Object3D}*/ (queue.shift())
+      const visible = func(object)
+
+      if (!visible) continue
+      queue.push(...object.children)
+    }
+  }
+
+  /**
+   * @param {Traverser} func
+   */
+  traverseDFS(func) {
+    const visible = func(this)
+
+    if (!visible) return
+    for (let i = 0; i < this.children.length; i++) {
+      const child = /**@type {Object3D}*/ (this.children[i])
+
+      child.traverseDFS(func);
+    }
+  }
+
+  /**
+   * @param {this} object
+   * @param {Map<Object3D,Object3D>} [entityMap] 
+   */
+  copy(object, entityMap) {
+    this.transform.copy(object.transform)
+    this.name = object.name
+    this.renderMask.copy(object.renderMask)
+    this.add(...object.children.map(child => {
+      const childClone = child.clone(entityMap)
+
+      if (entityMap) {
+        entityMap.set(child, childClone)
+      }
+
+      return childClone
+    }))
+
+    if (entityMap) {
+      entityMap.set(object, this)
+    }
+    return this
+  }
+
+  /**
+   * @param {Map<Object3D, Object3D>} [entityMap]
+   */
+  clone(entityMap) {
+    return new /**@type {new (...arg:any) => this}*/(this.constructor)().copy(this, entityMap)
+  }
+}
+
+/**
+ * @callback Traverser
+ * @param {Object3D} object
+ * @returns {boolean}
+ */
+
+
+export class RenderMask {
+  inner = -1
+
+  /**
+   * Test against a mask (any overlap).
+   * @param {RenderMask} mask
+   */
+  test(mask) {
+    return (this.inner & mask.inner) !== 0
+  }
+
+  /**
+   * Copy another render mask.
+   * @param {RenderMask} mask
+   */
+  copy(mask) {
+    this.inner = mask.inner
+    return this
+  }
+
+  clear() {
+    this.inner = 0
+    return this
+  }
+
+  /**
+   * Enable a bit by index.
+   * @param {number} index
+   */
+  on(index) {
+    this.inner |= (1 << index)
+    return this
+  }
+
+  /**
+   * Disable a bit by index.
+   * @param {number} index
+   */
+  off(index) {
+    this.inner &= ~(1 << index)
+    return this
+  }
+
+  /**
+   * Toggle a bit by index.
+   * @param {number} index
+   */
+  toggle(index) {
+    this.inner ^= (1 << index)
+    return this
+  }
+}

package/src/objects/skybox.js

@@ -0,0 +1,38 @@
+import { Texture } from "../texture/index.js"
+import { Object3D } from "./object3d.js"
+
+
+export class SkyBox extends Object3D {
+  /**
+   * @type {number}
+   */
+  lerp
+
+  /**
+   * @type {Texture | undefined}
+   */
+  day
+
+  /**
+   * @type {Texture | undefined}
+   */
+  night
+
+  /**
+   * 
+   * @param {SkyboxOptions} options 
+   */
+  constructor(options = {}) {
+    super()
+    this.lerp = options.lerp || 0
+    this.day = options.day
+    this.night = options.night
+  }
+}
+
+/**
+ * @typedef SkyboxOptions
+ * @property {Texture} [day]
+ * @property {Texture} [night]
+ * @property {number} [lerp]
+ */

package/src/plugins/camera/camera.js

@@ -0,0 +1,19 @@
+import { Plugin, SortViewsNode, WebGLRenderer } from "../../renderer/index.js";
+import { CameraOpaquePassNode, CameraViewNode } from "./nodes/index.js";
+
+export class CameraPlugin extends Plugin {
+  /**
+   * @override
+   * @param {WebGLRenderer} renderer
+   */
+  init(renderer){
+    renderer.renderGraph.addNode(CameraViewNode.name, new CameraViewNode())
+    renderer.renderGraph.addNode(CameraOpaquePassNode.name, new CameraOpaquePassNode())
+    renderer.renderGraph.addDependency(CameraViewNode.name, SortViewsNode.name)
+    renderer.renderGraph.addDependency(SortViewsNode.name, CameraOpaquePassNode.name)
+  }
+  /**
+   * @override
+   */
+  preprocess() {}
+}

package/src/plugins/camera/index.js

@@ -0,0 +1,2 @@
+export * from './camera.js'
+export * from './nodes/index.js'

package/src/plugins/camera/nodes/cameraview.js

@@ -0,0 +1,46 @@
+import { Camera, Object3D } from "../../../objects/index.js"
+import { View, Views } from "../../../renderer/index.js"
+import { Vector3 } from "../../../math/index.js"
+import { assert } from "../../../utils/index.js"
+
+export class CameraViewNode {
+  subgraph() {
+    return undefined
+  }
+
+  /**
+   * @param {import("../../../renderer/graph/index.js").RenderGraphContext} context
+   */
+  execute(context) {
+    const { objects, renderer } = context
+    const views = renderer.getResource(Views)
+
+    assert(views, "Views resource missing")
+    for (let i = 0; i < objects.length; i++) {
+      const camera = /**@type {Object3D} */(objects[i])
+
+      if (!(camera instanceof Camera)) {
+        continue
+      }
+
+      const position = new Vector3(
+        camera.transform.world.x,
+        camera.transform.world.y,
+        camera.transform.world.z
+      )
+      const cameraView = new View({
+        renderTarget: camera.target,
+        near: camera.near,
+        far: camera.far,
+        projection: camera.projection.asProjectionMatrix(camera.near, camera.far),
+        view: camera.view,
+        position,
+        tag: Camera.name,
+        object: camera,
+        renderMask: camera.renderMask
+      })
+
+      views.push(cameraView)
+    }
+  }
+}

package/src/plugins/camera/nodes/index.js

@@ -0,0 +1,2 @@
+export * from "./cameraview.js"
+export * from "./opaquepass.js"

package/src/plugins/camera/nodes/opaquepass.js

@@ -0,0 +1,79 @@
+import { Camera } from "../../../objects/index.js"
+import { RenderItem, Views } from "../../../renderer/index.js"
+import { assert } from "../../../utils/index.js"
+import { Affine3 } from "../../../math/index.js"
+
+/**
+ * @param {import("../../../renderer/index.js").View} view
+ * @param {import("../../../core/index.js").WebGLRenderDevice} device
+ * @param {import("../../../renderer/renderer.js").WebGLRenderer} renderer
+ */
+function renderItems(view, device, renderer) {
+  const { renderStage, renderTarget } = view
+  const opaquePhase = renderStage.opaque
+
+  const context = device.context
+  const caches = renderer.caches
+  const uniformBinders = renderer.uniformBinders
+  const { clearColor, clearDepth, clearStencil, viewport, scissor } = renderTarget
+
+  const framebuffer = caches.getFrameBuffer(device, renderTarget)
+  framebuffer.setViewport(context, viewport, scissor || viewport)
+  framebuffer.clear(context, clearColor, clearDepth, clearStencil)
+
+  if (!opaquePhase) {
+    return
+  }
+
+  const pass = device.beginRenderPass()
+  for (let i = 0; i < opaquePhase.length; i++) {
+    // SAFETY: List is dense
+    const { pipelineId, tag, mesh, uniforms, transform } = /**@type {RenderItem}*/(opaquePhase[i])
+    const pipeline = caches.getRenderPipeline(pipelineId)
+
+    if (!pipeline) {
+      continue
+    }
+
+    const uniformBinder = uniformBinders.get(tag)
+    const modelInfo = pipeline.uniforms.get("model")
+    const transformMatrix = Affine3.toMatrix4(transform)
+
+    pass.setPipeline(pipeline)
+
+    if (modelInfo) {
+      context.uniformMatrix4fv(modelInfo.location, false, new Float32Array(transformMatrix))
+    }
+
+    if (uniformBinder) {
+      uniformBinder(device, renderer, pipeline, uniforms, transformMatrix)
+    }
+    pass.draw(mesh)
+  }
+  pass.end()
+}
+
+export class CameraOpaquePassNode {
+  subgraph() {
+    return undefined
+  }
+
+  /**
+   * @param {import("../../../renderer/graph/index.js").RenderGraphContext} context
+   */
+  execute(context) {
+    const { renderer, renderDevice } = context
+    const views = renderer.getResource(Views)
+
+    assert(views, "Views resource missing")
+
+    for (const view of views.items()) {
+      if (view.tag !== Camera.name) {
+        continue
+      }
+
+      renderer.updateUBO(renderDevice.context, view.getData())
+      renderItems(view, renderDevice, renderer)
+    }
+  }
+}

package/src/plugins/index.js

@@ -0,0 +1,6 @@
+export * from './camera/index.js'
+export * from './meshmaterial/index.js'
+export * from './skeletonhelper/index.js'
+export * from './light/index.js'
+export * from './shadow/index.js'
+export * from './skybox/index.js'

package/src/plugins/light/index.js

@@ -0,0 +1,2 @@
+export * from './light.js'
+export * from './nodes/index.js'

package/src/plugins/light/light.js

@@ -0,0 +1,23 @@
+import { Plugin, WebGLRenderer } from "../../renderer/index.js";
+import { SortViewsNode } from "../../renderer/graph/index.js";
+import { LightNode } from "./nodes/index.js";
+
+export class LightPlugin extends Plugin {
+  /**
+   * @override
+   * @param {WebGLRenderer} renderer
+   */
+  init(renderer) {
+    renderer.defines
+      .set("MAX_DIRECTIONAL_LIGHTS", "10")
+      .set("MAX_POINT_LIGHTS", "10")
+      .set("MAX_SPOT_LIGHTS", "10")
+
+    renderer.renderGraph.addNode(LightNode.name, new LightNode())
+    renderer.renderGraph.addDependency(LightNode.name, SortViewsNode.name)
+  }
+  /**
+   * @override
+   */
+  preprocess() {}
+}

package/src/plugins/light/nodes/index.js

@@ -0,0 +1 @@
+export * from "./light.js"