chorama 0.0.0

package/src/renderer/graph/rendergraph.js

@@ -0,0 +1,182 @@
+import { Graph, kahnTopologySort } from "vifaa"
+import { assert } from "../../utils/index.js"
+
+/**
+ * @typedef RenderGraphNode
+ * @property {(context: RenderGraphContext) => void} execute
+ * @property {() => RenderGraph | undefined} subgraph
+ */
+
+/**
+ * @typedef RenderGraphContext
+ * @property {import("../renderer.js").WebGLRenderer} renderer
+ * @property {import("../../objects/index.js").Object3D[]} objects
+ * @property {import("../../core/index.js").WebGLRenderDevice} renderDevice
+ */
+
+export class RenderGraph {
+  /**
+   * @private
+   * @type {Graph<RenderGraphNode, undefined>}
+   */
+  graph = new Graph(true)
+
+  /**
+   * @private
+   * @type {Map<string, number>}
+   */
+  nodes = new Map()
+
+  /**
+   * @type {[string,string][]}
+   */
+  queuedEdges = []
+
+  /**
+   * @param {string} name
+   * @param {RenderGraphNode} node
+   * @returns {number}
+   */
+  addNode(name, node) {
+    const current = this.nodes.get(name)
+
+    if (current !== undefined) {
+      throw new Error(`Render graph node "${name}" already exists`)
+    }
+
+    const id = this.graph.addNode(node)
+
+    this.nodes.set(name, id)
+    return id
+  }
+
+  /**
+   * @private
+   */
+  addDependencies() {
+    for (let i = this.queuedEdges.length - 1; i >= 0; i--) {
+      const [from, to] = /** @type {[string, string]} */ (this.queuedEdges[i])
+
+      const fromId = this.nodes.get(from)
+      const toId = this.nodes.get(to)
+
+      assert(fromId, `Render graph node "${from}" is missing`)
+      assert(toId, `Render graph node "${to}" is missing`)
+
+      this.graph.addEdge(fromId, toId, undefined)
+    }
+    this.queuedEdges = []
+  }
+
+  /**
+   * @param {string} from
+   * @param {string} to
+   */
+  addDependency(from, to) {
+    this.queuedEdges.push([from, to])
+  }
+
+  /**
+   * @param {RenderGraphContext} context
+   */
+  execute(context) {
+    this.addDependencies()
+    /** @type {number[] | undefined} */
+    const order = kahnTopologySort(this.graph)
+
+    assert(order, "Cycle detected in render graph")
+
+    for (let i = 0; i < order.length; i++) {
+      const nodeId = /** @type {number | undefined} */ (order[i])
+      assert(nodeId, "Invalid render graph topology output")
+      const node = this.graph.getNodeWeight(nodeId)
+
+      assert(node, `Render graph node with id "${nodeId}" is missing`)
+      node.execute(context)
+    }
+  }
+
+  /**
+   * Returns a serializable snapshot of the render graph for tooling/debug UIs.
+   */
+  inspect() {
+    this.addDependencies()
+
+    const typedGraph = /** @type {{ getNodes: () => any[]; getEdges: () => any[] }} */ (
+      /** @type {unknown} */ (this.graph)
+    )
+    const nodes = typedGraph.getNodes()
+    const edges = typedGraph.getEdges()
+    const namesById = new Map()
+
+    for (const [name, id] of this.nodes.entries()) {
+      namesById.set(id, name)
+    }
+
+    /** @type {{ id: number; name: string; node: RenderGraphNode; subgraph: RenderGraph | undefined; incoming: number[]; outgoing: number[] }[]} */
+    const resultNodes = []
+
+    for (let id = 0; id < nodes.length; id++) {
+      const node = nodes[id]
+      if (!node) continue
+
+      /** @type {number[]} */
+      const incoming = []
+      /** @type {number[]} */
+      const outgoing = []
+
+      for (let edgeIndex = 0; edgeIndex < edges.length; edgeIndex++) {
+        const edge = edges[edgeIndex]
+        if (!edge) continue
+
+        if (edge.to === id) incoming.push(edge.from)
+        if (edge.from === id) outgoing.push(edge.to)
+      }
+
+      const subgraph = typeof node.weight.subgraph === "function" ?
+        node.weight.subgraph() :
+        undefined
+
+      resultNodes.push({
+        id,
+        name: namesById.get(id) ?? `Node_${id}`,
+        node: node.weight,
+        subgraph,
+        incoming,
+        outgoing
+      })
+    }
+
+    /** @type {{ from: number; to: number }[]} */
+    const resultEdges = []
+    for (let i = 0; i < edges.length; i++) {
+      const edge = edges[i]
+      if (!edge) continue
+      resultEdges.push({
+        from: edge.from,
+        to: edge.to
+      })
+    }
+
+    /** @type {number[]} */
+    const executionOrderIds = []
+    /** @type {string[]} */
+    const executionOrder = []
+    const sorted = kahnTopologySort(this.graph)
+    if (sorted) {
+      for (let i = 0; i < sorted.length; i++) {
+        const id = sorted[i]
+        if (id === undefined) continue
+        executionOrderIds.push(id)
+        executionOrder.push(namesById.get(id) ?? `Node_${id}`)
+      }
+    }
+
+    return {
+      nodes: resultNodes,
+      edges: resultEdges,
+      executionOrderIds,
+      executionOrder
+    }
+  }
+}

package/src/renderer/index.js

@@ -0,0 +1,5 @@
+export * from './core/index.js'
+export * from './graph/index.js'
+export * from './views.js'
+export * from './renderer.js'
+export * from './plugin.js'

package/src/renderer/plugin.js

@@ -0,0 +1,36 @@
+/** @import { WebGLRenderer } from "./renderer.js" */
+import { WebGLRenderDevice } from "../core/index.js";
+import { Object3D } from "../objects/object3d.js";
+import { abstractClass } from "../utils/index.js";
+import { RenderItem } from "./core/index.js";
+
+/**
+ * @abstract
+ */
+export class Plugin {
+  constructor() {
+    abstractClass(this, Plugin)
+  }
+
+  /**
+   * @param {WebGLRenderer} _renderer
+   */
+  init( _renderer){}
+
+  /**
+   * @param {Object3D[]} _objects
+   * @param {WebGLRenderDevice} _device
+   * @param {WebGLRenderer} _renderer
+   */
+  preprocess(_objects, _device, _renderer) {}
+
+  /**
+   * @param {Object3D} _object
+   * @param {WebGLRenderDevice} _device
+   * @param {WebGLRenderer} _renderer
+   * @returns {RenderItem | undefined}
+   */
+  getRenderItem(_object, _device, _renderer){
+    return
+  }
+}

package/src/renderer/renderer.js

@@ -0,0 +1,179 @@
+/** @import { UniformBinder } from "./core/index.js" */
+import { WebGLDeviceLimits, WebGLRenderDevice } from "../core/index.js"
+import { Object3D } from "../objects/index.js"
+import { colorShaderLib, commonShaderLib, lightShaderLib, mathShaderLib } from "../shader/index.js"
+import { Sampler, Texture } from "../texture/index.js"
+import { assert } from '../utils/index.js'
+import { Caches } from "../caches/index.js"
+import { Attribute } from "../mesh/index.js"
+import { Plugin } from "./plugin.js"
+import { RenderGraph, SortViewsNode } from "./graph/index.js"
+import { Views } from "./views.js"
+
+export class WebGLRenderer {
+
+  /**
+   * @type {Map<string, unknown>}
+   */
+  resources = new Map()
+
+  /**
+   * @readonly
+   * @type {WebGLDeviceLimits}
+   */
+  limits
+
+  /**
+   * @readonly
+   * @type {Caches}
+   */
+  caches = new Caches()
+
+  /**
+   * @readonly
+   */
+  defaults = new Defaults()
+
+  /**
+   * @readonly
+   * @type {ReadonlyMap<string,Attribute>}
+   */
+  attributes
+
+  /**
+   * @readonly
+   * @type {Map<string, string>}
+   */
+  includes = new Map()
+
+  /**
+   * @readonly
+   * @type {Map<string, string>}
+   */
+  defines = new Map()
+
+  /**
+   * @readonly
+   * @type {readonly Plugin[]} 
+   */
+  plugins
+
+  /**
+   * @type {Map<string, UniformBinder>}
+   */
+  uniformBinders = new Map()
+
+  /**
+   * @readonly
+   * @type {RenderGraph}
+   */
+  renderGraph
+
+  /**
+   * @param {WebGLRendererOptions} options 
+   */
+  constructor({ plugins = [] } = {}) {
+    const dummy = new OffscreenCanvas(100, 100)
+    const context = dummy.getContext('webgl2')
+
+    assert(context, "Webgl context creation failed")
+    this.plugins = plugins
+    this.limits = new WebGLDeviceLimits(context)
+    this.attributes = new Map()
+      .set(Attribute.Position.name, Attribute.Position)
+      .set(Attribute.UV.name, Attribute.UV)
+      .set(Attribute.UVB.name, Attribute.UVB)
+      .set(Attribute.Normal.name, Attribute.Normal)
+      .set(Attribute.Tangent.name, Attribute.Tangent)
+      .set(Attribute.Color.name, Attribute.Color)
+      .set(Attribute.JointIndex.name, Attribute.JointIndex)
+      .set(Attribute.JointWeight.name, Attribute.JointWeight)
+    this.setResource(new Views())
+
+    this.renderGraph = new RenderGraph()
+    this.renderGraph.addNode(SortViewsNode.name, new SortViewsNode())
+
+    for (let i = 0; i < plugins.length; i++) {
+      const plugin = /**@type {Plugin} */ (plugins[i]);
+
+      plugin.init(this)
+    }
+
+    this.includes
+      .set("common", commonShaderLib)
+      .set("color", colorShaderLib)
+      .set("light", lightShaderLib)
+      .set("math", mathShaderLib)
+  }
+
+  /**
+   * @template {object} T
+   * @param {T} item
+   */
+  setResource(item) {
+    this.resources.set(item.constructor.name, item)
+  }
+
+  /**
+   * @template T
+   * @param {import("../loader/loader.js").Constructor<T>} item
+   * @returns {T | undefined}
+   */
+  getResource(item) {
+    return /**@type {T} */ (this.resources.get(item.name))
+  }
+
+  /**
+   * @param {{name: any;data: any;}} dataForm
+   * @param {WebGL2RenderingContext} context
+   */
+  updateUBO(context, dataForm) {
+    const { data, name } = dataForm
+    const ubo = this.caches.uniformBuffers.get(name)
+
+    if (!ubo) return
+
+    ubo.update(context, data)
+  }
+
+  /**
+   * @param {Object3D[]} objects
+   * @param {WebGLRenderDevice} renderDevice
+   */
+  render(objects, renderDevice) {
+    const views = this.getResource(Views)
+
+    assert(views, "Views resource missing")
+    views.clear()
+
+    for (let i = 0; i < objects.length; i++) {
+      const object = /**@type {Object3D} */ (objects[i])
+
+      object.traverseDFS((object) => {
+        object.update()
+        return true
+      })
+    }
+
+    for (let i = 0; i < this.plugins.length; i++) {
+      const plugin = /**@type {Plugin} */ (this.plugins[i]);
+
+      plugin.preprocess(objects, renderDevice, this)
+    }
+    this.renderGraph.execute({
+      renderer: this,
+      objects,
+      renderDevice
+    })
+  }
+}
+
+/**
+ * @typedef WebGLRendererOptions
+ * @property {Plugin[]} [plugins]
+ */
+
+export class Defaults {
+  texture2D = Texture.default()
+  textureSampler = Sampler.default()
+}

package/src/renderer/views.js

@@ -0,0 +1,28 @@
+/** @import { View } from "./core/index.js" */
+
+export class Views {
+  /**
+   * @private
+   * @type {View[]}
+   */
+  inner = []
+
+  clear() {
+    this.inner.length = 0
+  }
+
+  /**
+   * @param {...View} views
+   */
+  push(...views) {
+    this.inner.push(...views)
+  }
+
+  /**
+   * @returns {View[]}
+   */
+  items() {
+    return this.inner
+  }
+}
+

package/src/rendertarget/canvastarget.js

@@ -0,0 +1,30 @@
+import { RenderTarget } from "./rendertarget.js";
+
+export class CanvasTarget extends RenderTarget {
+  /**
+   * @readonly
+   * @type {HTMLCanvasElement}
+   */
+  canvas
+  /**
+   * @param {HTMLCanvasElement} canvas
+   */
+  constructor(canvas) {
+    super(canvas.width, canvas.height, 1)
+    this.canvas = canvas
+  }
+
+  /**
+   * @override
+   */
+  changed() {
+    const resized = this.canvas.width !== this.width ||
+      this.canvas.height !== this.height
+
+    if (resized) {
+      this.width = this.canvas.width
+      this.height = this.canvas.height
+    }
+    return super.changed()
+  }
+}

package/src/rendertarget/image.js

@@ -0,0 +1,132 @@
+import { TextureFormat } from "../constants/index.js";
+import { Texture } from "../texture/index.js"
+import { RenderTarget } from "./rendertarget.js";
+
+export class ImageRenderTarget extends RenderTarget {
+  /**
+   * @type {Texture[]}
+   */
+  color
+
+  /**
+   * @type {Texture | undefined}
+   */
+  depthTexture
+
+  /**
+   * @type {TextureFormat | undefined}
+   */
+  internalDepthStencil
+
+  /**
+   * @type {number}
+   */
+  layer
+
+  /**
+   * @param {ImageRenderTargetOptions} options
+   */
+  constructor({
+    color = [],
+    depthTexture,
+    width,
+    height,
+    depth = 1,
+    layer = 0,
+    internalDepthStencil
+  }) {
+    super(width, height, depth)
+    this.layer = layer
+    this.color = color
+    this.depthTexture = depthTexture
+    this.internalDepthStencil = internalDepthStencil
+
+    for (const color of this.color) {
+      color.data = undefined
+      color.width = width
+      color.height = height
+      color.depth = depth
+    }
+
+    if (this.depthTexture) {
+      this.depthTexture.data = undefined
+      this.depthTexture.width = width
+      this.depthTexture.height = height
+      this.depthTexture.depth = depth
+    }
+  }
+
+  /**
+   * @override
+   */
+  get width() {
+    return super.width
+  }
+
+  /**
+   * @override
+   * @param {number} value
+   */
+  set width(value) {
+    super.width = value
+    this.color.forEach((attachment) => {
+      attachment.width = value
+    })
+    if (this.depthTexture) {
+      this.depthTexture.width = value
+    }
+  }
+
+  /**
+   * @override
+   */
+  get height() {
+    return super.height
+  }
+
+  /**
+   * @override
+   * @param {number} value
+   */
+  set height(value) {
+    super.height = value
+    this.color.forEach((attachment) => {
+      attachment.height = value
+    })
+    if (this.depthTexture) {
+      this.depthTexture.height = value
+    }
+  }
+
+  /**
+   * @override
+   */
+  get depth() {
+    return super.depth
+  }
+
+  /**
+   * @override
+   * @param {number} value
+   */
+  set depth(value) {
+    super.depth = value
+    this.color.forEach((attachment) => {
+      attachment.depth = value
+    })
+    if (this.depthTexture) {
+      this.depthTexture.depth = value
+    }
+  }
+}
+
+/**
+ * @typedef ImageRenderTargetOptions
+ * @property {Texture[]} [color]
+ * @property {Texture} [depthTexture]
+ * @property {TextureFormat} [internalDepthStencil]
+ * @property {number} width
+ * @property {number} height
+ * @property {number} [depth]
+ * @property {number} [layer]
+ */

package/src/rendertarget/index.js

@@ -0,0 +1,3 @@
+export * from "./canvastarget.js"
+export * from "./rendertarget.js"
+export * from "./image.js"

package/src/rendertarget/rendertarget.js

@@ -0,0 +1,89 @@
+import { Color } from "../math/index.js";
+import { ViewRectangle, Range } from "../utils/index.js";
+
+/**
+ * @abstract
+ */
+export class RenderTarget {
+  /**
+   * @protected
+   * @type {boolean}
+   */
+  _change = false
+  /**
+   * @type {number}
+   */
+  #width = 0
+  /**
+  * @type {number}
+  */
+  #height = 0
+  /**
+  * @type {number}
+  */
+  #depth = 0
+  /**
+   * @type {Color | undefined}
+   */
+  clearColor = new Color(0, 0, 0, 1)
+  /**
+   * @type {number | undefined}
+   */
+  clearDepth = 1
+  /**
+   * @type {number | undefined}
+   */
+  clearStencil = 0
+  /**
+   * @type {ViewRectangle}
+   */
+  viewport = new ViewRectangle()
+  /**
+   * @type {ViewRectangle | undefined}
+   */
+  scissor
+  /**
+   * @type {Range | undefined}
+   */
+  depthRange
+
+  /**
+   * @param {number} width
+   * @param {number} height
+   * @param {number} depth
+   */
+  constructor(width, height, depth) {
+    this.#width = width
+    this.#height = height
+    this.#depth = depth
+  }
+  get width() {
+    return this.#width
+  }
+  set width(value) {
+    this.#width = value
+    this._change = true
+  }
+  get height() {
+    return this.#height
+  }
+  set height(value) {
+    this.#height = value
+    this._change = true
+  }
+
+  get depth() {
+    return this.#depth
+  }
+  set depth(value) {
+    this.#depth = value
+    this._change = true
+  }
+
+  changed() {
+    const prev = this._change
+    this._change = false
+
+    return prev
+  }
+}

package/src/shader/basicFragment.glsl

@@ -0,0 +1,30 @@
+precision mediump float;
+precision mediump sampler2DArray;
+
+#include <common>
+
+struct BasicMaterial {
+  vec4 color;
+};
+
+#ifdef VERTEX_UVS
+  in vec2 v_uv;
+#endif
+
+out vec4 fragment_color;
+
+uniform MaterialBlock {
+  BasicMaterial material;
+};
+uniform sampler2D mainTexture;
+
+void main(){
+  vec3 base_color = material.color.rgb.rgb;
+  float opacity = material.color.a;
+  
+  #ifdef VERTEX_UVS
+    vec4 sample_color = texture(mainTexture, v_uv);
+    base_color *= sample_color.rgb;
+  #endif
+  fragment_color = vec4(base_color, opacity);
+}