chorama 0.0.0

package/examples/addons/rendergraph_gui.js

@@ -0,0 +1,580 @@
+
+// This entire thing was generated by ChatGPT 5.3 Codex
+// SAFETY: Dont want to consume tokens fixing this mess
+// @ts-nocheck
+/**
+ * @typedef RenderGraphAddonOptions
+ * @property {import("dat.gui").GUI} gui
+ * @property {import("chorama").WebGLRenderer} renderer
+ * @property {string} [title]
+ * @property {{x:number;y:number}} [position]
+ * @property {number} [width]
+ */
+
+/**
+ * Adds a draggable render graph panel next to dat.gui.
+ * @param {RenderGraphAddonOptions} options
+ */
+export function addRenderGraphGuiAddon({
+  gui,
+  renderer,
+  title = "Render Graph",
+  position = { x: 24, y: 24 },
+  width = 320
+}) {
+  const container = document.createElement("div")
+  const header = document.createElement("div")
+  const body = document.createElement("div")
+  const graphHeader = document.createElement("div")
+  const backButton = document.createElement("button")
+  const graphTitle = document.createElement("div")
+  const graphSvg = createSvgElement("svg")
+  const orderList = document.createElement("ol")
+  const markerId = `rg-arrow-${Math.random().toString(36).slice(2)}`
+  /** @type {{
+   * scale: number
+   * panX: number
+   * panY: number
+   * minScale: number
+   * maxScale: number
+   * markerId: string
+   * }} */
+  const graphViewState = {
+    scale: 1,
+    panX: 0,
+    panY: 0,
+    minScale: 0.35,
+    maxScale: 2.5,
+    markerId
+  }
+  /** 
+   * @type {{
+   * nodes:{id:number;name:string;hasSubgraph:boolean;subgraph:any}[];
+   * edges:{from:number;to:number}[];
+   * executionOrderIds:number[];
+   * executionOrder:string[];
+   * }} */
+  let graphData = {
+    nodes: [],
+    edges: [],
+    executionOrderIds: [],
+    executionOrder: []
+  }
+  const panelState = {
+    visible: true,
+    refresh: () => renderSnapshot(),
+    back: () => {
+      if (graphStack.length <= 1) return
+      graphStack.pop()
+      graphViewState.scale = 1
+      graphViewState.panX = 0
+      graphViewState.panY = 0
+      renderSnapshot()
+    },
+    resetView: () => {
+      graphViewState.scale = 1
+      graphViewState.panX = 0
+      graphViewState.panY = 0
+      drawGraph(graphSvg, graphData, graphViewState, {
+        onSubgraphNodeClick: openSubgraph
+      })
+    }
+  }
+  /** @type {{name:string;graph:any}[]} */
+  const graphStack = [{
+    name: "Root",
+    graph: renderer.renderGraph
+  }]
+
+  container.style.position = "fixed"
+  container.style.left = `${position.x}px`
+  container.style.top = `${position.y}px`
+  container.style.width = `${width}px`
+  container.style.zIndex = "10000"
+  container.style.background = "#1a1a1a"
+  container.style.color = "#ddd"
+  container.style.font = "11px/1.4 Menlo, Monaco, Consolas, monospace"
+  container.style.border = "1px solid #2c2c2c"
+  container.style.boxShadow = "0 8px 24px rgba(0,0,0,0.35)"
+  container.style.userSelect = "none"
+
+  header.style.padding = "8px 10px"
+  header.style.cursor = "move"
+  header.style.background = "#111"
+  header.style.borderBottom = "1px solid #2c2c2c"
+  header.style.fontWeight = "bold"
+  header.textContent = title
+
+  body.style.padding = "8px 10px"
+  body.style.maxHeight = "40vh"
+  body.style.overflow = "auto"
+  body.style.display = "grid"
+  body.style.gap = "8px"
+
+  graphHeader.style.display = "flex"
+  graphHeader.style.alignItems = "center"
+  graphHeader.style.gap = "8px"
+
+  backButton.type = "button"
+  backButton.textContent = "Back"
+  backButton.style.font = "11px Menlo, Monaco, Consolas, monospace"
+  backButton.style.background = "#252525"
+  backButton.style.color = "#ddd"
+  backButton.style.border = "1px solid #3a3a3a"
+  backButton.style.padding = "2px 8px"
+  backButton.style.borderRadius = "4px"
+  backButton.style.cursor = "pointer"
+
+  graphTitle.style.opacity = "0.85"
+  graphTitle.textContent = "Graph (hover/click green nodes to open subgraph)"
+  graphSvg.style.width = "100%"
+  graphSvg.style.height = "240px"
+  graphSvg.style.background = "#101010"
+  graphSvg.style.border = "1px solid #2c2c2c"
+  graphSvg.style.borderRadius = "4px"
+
+  const orderTitle = document.createElement("div")
+  orderTitle.style.opacity = "0.85"
+  orderTitle.textContent = "Execution order"
+  orderList.style.margin = "0 0 0 20px"
+  orderList.style.padding = "0"
+  graphHeader.append(backButton, graphTitle)
+  body.append(graphHeader, graphSvg, orderTitle, orderList)
+  container.append(header, body)
+  document.body.append(container)
+
+  const folder = gui.addFolder("Render Graph")
+  folder.add(panelState, "visible").name("Show Panel").onChange((value) => {
+    container.style.display = value ? "block" : "none"
+  })
+  folder.add(panelState, "refresh").name("Refresh")
+  folder.add(panelState, "back").name("Back")
+  folder.add(panelState, "resetView").name("Reset View")
+
+  enableDrag(container, header)
+  backButton.addEventListener("click", panelState.back)
+  const disableGraphNavigation = enableGraphNavigation(graphSvg, graphViewState, () => {
+    drawGraph(graphSvg, graphData, graphViewState, {
+      onSubgraphNodeClick: openSubgraph
+    })
+  })
+  renderSnapshot()
+
+  return {
+    refresh: renderSnapshot,
+    dispose() {
+      disableGraphNavigation()
+      container.remove()
+      gui.removeFolder(folder)
+    }
+  }
+
+  function renderSnapshot() {
+    const current = graphStack[graphStack.length - 1]
+    const graph = readGraph(current.graph)
+    graphData = graph
+    graphTitle.textContent = `Graph: ${graphStack.map((entry) => entry.name).join(" / ")}`
+    const canGoBack = graphStack.length > 1
+    backButton.disabled = !canGoBack
+    backButton.style.opacity = canGoBack ? "1" : "0.5"
+    backButton.style.cursor = canGoBack ? "pointer" : "default"
+    orderList.innerHTML = ""
+    drawGraph(graphSvg, graphData, graphViewState, {
+      onSubgraphNodeClick: openSubgraph
+    })
+
+    for (let i = 0; i < graph.executionOrder.length; i++) {
+      const name = graph.executionOrder[i]
+      if (name === undefined) continue
+      const item = document.createElement("li")
+      item.textContent = name
+      orderList.append(item)
+    }
+  }
+
+  /**
+   * @param {{id:number;name:string;hasSubgraph:boolean;subgraph:any}} node
+   */
+  function openSubgraph(node) {
+    if (!node.hasSubgraph || !node.subgraph) return
+    graphStack.push({
+      name: node.name,
+      graph: node.subgraph
+    })
+    graphViewState.scale = 1
+    graphViewState.panX = 0
+    graphViewState.panY = 0
+    renderSnapshot()
+  }
+}
+
+/**
+ * @param {any} graph
+ */
+function readGraph(graph) {
+  if (typeof graph.inspect === "function") {
+    const snapshot = graph.inspect()
+    const nodes = snapshot.nodes.map((node) => ({
+      id: node.id,
+      name: node.name,
+      subgraph: node.subgraph,
+      hasSubgraph: node.subgraph !== undefined
+    }))
+
+    return {
+      nodes,
+      executionOrderIds: snapshot.executionOrderIds ?? [],
+      executionOrder: snapshot.executionOrder,
+      edges: snapshot.edges
+    }
+  }
+
+  return {
+    nodes: [],
+    executionOrderIds: [],
+    executionOrder: [],
+    edges: []
+  }
+}
+
+/**
+ * @param {SVGSVGElement} svg
+ * @param {{
+ *   nodes:{id:number;name:string;hasSubgraph:boolean;subgraph:any}[];
+ *   edges:{from:number;to:number}[];
+ *   executionOrderIds:number[];
+ * }} graph
+ * @param {{
+ *   scale:number;
+ *   panX:number;
+ *   panY:number;
+ *   markerId:string;
+ * }} view
+ * @param {{
+ *   onSubgraphNodeClick: (node:{id:number;name:string;hasSubgraph:boolean;subgraph:any}) => void
+ * }} callbacks
+ */
+function drawGraph(svg, graph, view, callbacks) {
+  while (svg.firstChild) {
+    svg.removeChild(svg.firstChild)
+  }
+
+  if (graph.nodes.length === 0) {
+    svg.setAttribute("viewBox", "0 0 320 80")
+    const empty = createSvgElement("text")
+    empty.setAttribute("x", "12")
+    empty.setAttribute("y", "42")
+    empty.setAttribute("fill", "#777")
+    empty.textContent = "No render graph nodes found"
+    svg.append(empty)
+    return
+  }
+
+  const nodeWidth = 130
+  const nodeHeight = 26
+  const levelGap = 46
+  const rowGap = 12
+  const padX = 14
+  const padY = 14
+  const nodeIds = graph.nodes.map((node) => node.id)
+  const incoming = new Map(nodeIds.map((id) => [id, []]))
+  const outgoing = new Map(nodeIds.map((id) => [id, []]))
+
+  for (let i = 0; i < graph.edges.length; i++) {
+    const edge = graph.edges[i]
+    if (!edge) continue
+    incoming.get(edge.to)?.push(edge.from)
+    outgoing.get(edge.from)?.push(edge.to)
+  }
+
+  const orderedIds = graph.executionOrderIds.length > 0 ? graph.executionOrderIds : nodeIds
+  const levelById = new Map(nodeIds.map((id) => [id, 0]))
+  for (let i = 0; i < orderedIds.length; i++) {
+    const id = orderedIds[i]
+    if (id === undefined) continue
+    const deps = incoming.get(id) ?? []
+    let level = 0
+    for (let j = 0; j < deps.length; j++) {
+      const dep = deps[j]
+      level = Math.max(level, (levelById.get(dep) ?? 0) + 1)
+    }
+    levelById.set(id, level)
+  }
+
+  const columns = new Map()
+  for (let i = 0; i < orderedIds.length; i++) {
+    const id = orderedIds[i]
+    if (id === undefined) continue
+    const level = levelById.get(id) ?? 0
+    if (!columns.has(level)) columns.set(level, [])
+    columns.get(level).push(id)
+  }
+
+  const levels = [...columns.keys()].sort((a, b) => a - b)
+  const maxRows = levels.reduce((count, level) => Math.max(count, columns.get(level)?.length ?? 0), 1)
+  const totalWidth = padX * 2 + levels.length * nodeWidth + Math.max(0, levels.length - 1) * levelGap
+  const totalHeight = padY * 2 + maxRows * nodeHeight + Math.max(0, maxRows - 1) * rowGap
+  svg.setAttribute("viewBox", `0 0 ${totalWidth} ${totalHeight}`)
+  svg.setAttribute("preserveAspectRatio", "xMidYMid meet")
+
+  const defs = createSvgElement("defs")
+  const marker = createSvgElement("marker")
+  marker.setAttribute("id", view.markerId)
+  marker.setAttribute("viewBox", "0 0 10 10")
+  marker.setAttribute("refX", "10")
+  marker.setAttribute("refY", "5")
+  marker.setAttribute("markerWidth", "6")
+  marker.setAttribute("markerHeight", "6")
+  marker.setAttribute("orient", "auto-start-reverse")
+  const arrowPath = createSvgElement("path")
+  arrowPath.setAttribute("d", "M 0 0 L 10 5 L 0 10 z")
+  arrowPath.setAttribute("fill", "#6aa4ff")
+  marker.append(arrowPath)
+  defs.append(marker)
+  svg.append(defs)
+  const scene = createSvgElement("g")
+  scene.setAttribute("transform", `translate(${view.panX} ${view.panY}) scale(${view.scale})`)
+  svg.append(scene)
+
+  const positionById = new Map()
+  for (let levelIndex = 0; levelIndex < levels.length; levelIndex++) {
+    const level = levels[levelIndex]
+    const ids = columns.get(level) ?? []
+    for (let row = 0; row < ids.length; row++) {
+      const id = ids[row]
+      const x = padX + levelIndex * (nodeWidth + levelGap)
+      const y = padY + row * (nodeHeight + rowGap)
+      positionById.set(id, {
+        x,
+        y,
+        cx: x + nodeWidth / 2,
+        cy: y + nodeHeight / 2
+      })
+    }
+  }
+
+  for (let i = 0; i < graph.edges.length; i++) {
+    const edge = graph.edges[i]
+    if (!edge) continue
+    const from = positionById.get(edge.from)
+    const to = positionById.get(edge.to)
+    if (!from || !to) continue
+
+    const path = createSvgElement("path")
+    const x1 = from.x + nodeWidth
+    const y1 = from.cy
+    const x2 = to.x
+    const y2 = to.cy
+    const bend = Math.max(18, (x2 - x1) * 0.45)
+    path.setAttribute("d", `M ${x1} ${y1} C ${x1 + bend} ${y1}, ${x2 - bend} ${y2}, ${x2} ${y2}`)
+    path.setAttribute("stroke", "#6aa4ff")
+    path.setAttribute("stroke-width", "1.4")
+    path.setAttribute("fill", "none")
+    path.setAttribute("opacity", "0.85")
+    path.setAttribute("marker-end", `url(#${view.markerId})`)
+    scene.append(path)
+  }
+
+  for (let i = 0; i < graph.nodes.length; i++) {
+    const node = graph.nodes[i]
+    const pos = positionById.get(node.id)
+    if (!pos) continue
+
+    const nodeGroup = createSvgElement("g")
+    const box = createSvgElement("rect")
+    box.setAttribute("x", `${pos.x}`)
+    box.setAttribute("y", `${pos.y}`)
+    box.setAttribute("width", `${nodeWidth}`)
+    box.setAttribute("height", `${nodeHeight}`)
+    box.setAttribute("rx", "4")
+    const baseFill = node.hasSubgraph ? "#243022" : "#222"
+    const baseStroke = node.hasSubgraph ? "#88c26f" : "#4b7ecc"
+    box.setAttribute("fill", baseFill)
+    box.setAttribute("stroke", baseStroke)
+    box.setAttribute("stroke-width", "1")
+    nodeGroup.append(box)
+
+    const label = createSvgElement("text")
+    label.setAttribute("x", `${pos.x + 8}`)
+    label.setAttribute("y", `${pos.y + 17}`)
+    label.setAttribute("fill", "#f1f1f1")
+    label.setAttribute("font-size", "11")
+    label.setAttribute("font-family", "Menlo, Monaco, Consolas, monospace")
+    label.textContent = node.hasSubgraph ? `${truncate(node.name, 18)} >` : truncate(node.name, 20)
+    nodeGroup.append(label)
+
+    if (node.hasSubgraph) {
+      nodeGroup.style.cursor = "pointer"
+      nodeGroup.addEventListener("mouseenter", () => {
+        box.setAttribute("fill", "#2e3c2b")
+        box.setAttribute("stroke", "#b7e391")
+      })
+      nodeGroup.addEventListener("mouseleave", () => {
+        box.setAttribute("fill", baseFill)
+        box.setAttribute("stroke", baseStroke)
+      })
+      nodeGroup.addEventListener("mousedown", (event) => {
+        event.stopPropagation()
+      })
+      nodeGroup.addEventListener("click", (event) => {
+        event.stopPropagation()
+        callbacks.onSubgraphNodeClick(node)
+      })
+    }
+
+    scene.append(nodeGroup)
+  }
+}
+
+/**
+ * @param {string} value
+ * @param {number} max
+ */
+function truncate(value, max) {
+  if (value.length <= max) return value
+  return `${value.slice(0, max - 3)}...`
+}
+
+/**
+ * @param {keyof SVGElementTagNameMap} tag
+ */
+function createSvgElement(tag) {
+  return document.createElementNS("http://www.w3.org/2000/svg", tag)
+}
+
+/**
+ * @param {SVGSVGElement} svg
+ * @param {{
+ *   scale: number
+ *   panX: number
+ *   panY: number
+ *   minScale: number
+ *   maxScale: number
+ * }} view
+ * @param {() => void} redraw
+ */
+function enableGraphNavigation(svg, view, redraw) {
+  let panning = false
+  let startClientX = 0
+  let startClientY = 0
+  let startPanX = 0
+  let startPanY = 0
+
+  svg.style.cursor = "grab"
+
+  /** @param {WheelEvent} event */
+  const onWheel = (event) => {
+    event.preventDefault()
+    const point = toSvgCoordinates(svg, event.clientX, event.clientY)
+    if (!point) return
+    const px = point.x
+    const py = point.y
+    const worldX = (px - view.panX) / view.scale
+    const worldY = (py - view.panY) / view.scale
+    const zoom = Math.exp(-event.deltaY * 0.0015)
+    const nextScale = clamp(view.scale * zoom, view.minScale, view.maxScale)
+
+    view.scale = nextScale
+    view.panX = px - worldX * nextScale
+    view.panY = py - worldY * nextScale
+    redraw()
+  }
+
+  /** @param {MouseEvent} event */
+  const onDown = (event) => {
+    if (event.button !== 0) return
+    panning = true
+    startClientX = event.clientX
+    startClientY = event.clientY
+    startPanX = view.panX
+    startPanY = view.panY
+    svg.style.cursor = "grabbing"
+  }
+
+  /** @param {MouseEvent} event */
+  const onMove = (event) => {
+    if (!panning) return
+    const start = toSvgCoordinates(svg, startClientX, startClientY)
+    const current = toSvgCoordinates(svg, event.clientX, event.clientY)
+    if (!start || !current) return
+
+    const dx = current.x - start.x
+    const dy = current.y - start.y
+    view.panX = startPanX + dx
+    view.panY = startPanY + dy
+    redraw()
+  }
+
+  const onUp = () => {
+    panning = false
+    svg.style.cursor = "grab"
+  }
+
+  svg.addEventListener("wheel", onWheel, { passive: false })
+  svg.addEventListener("mousedown", onDown)
+  window.addEventListener("mousemove", onMove)
+  window.addEventListener("mouseup", onUp)
+
+  return () => {
+    svg.removeEventListener("wheel", onWheel)
+    svg.removeEventListener("mousedown", onDown)
+    window.removeEventListener("mousemove", onMove)
+    window.removeEventListener("mouseup", onUp)
+  }
+}
+
+/**
+ * @param {SVGSVGElement} svg
+ * @param {number} clientX
+ * @param {number} clientY
+ */
+function toSvgCoordinates(svg, clientX, clientY) {
+  const matrix = svg.getScreenCTM()
+  if (!matrix) return null
+
+  const point = svg.createSVGPoint()
+  point.x = clientX
+  point.y = clientY
+  return point.matrixTransform(matrix.inverse())
+}
+
+/**
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ */
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value))
+}
+
+/**
+ * @param {HTMLDivElement} element
+ * @param {HTMLDivElement} handle
+ */
+function enableDrag(element, handle) {
+  let dragging = false
+  let offsetX = 0
+  let offsetY = 0
+
+  /** @param {MouseEvent} event */
+  const onMove = (event) => {
+    if (!dragging) return
+    element.style.left = `${event.clientX - offsetX}px`
+    element.style.top = `${event.clientY - offsetY}px`
+  }
+
+  const onUp = () => {
+    dragging = false
+    document.removeEventListener("mousemove", onMove)
+    document.removeEventListener("mouseup", onUp)
+  }
+
+  handle.addEventListener("mousedown", /** @param {MouseEvent} event */ (event) => {
+    dragging = true
+    const rect = element.getBoundingClientRect()
+    offsetX = event.clientX - rect.left
+    offsetY = event.clientY - rect.top
+    document.addEventListener("mousemove", onMove)
+    document.addEventListener("mouseup", onUp)
+  })
+}

package/examples/camera/orthographic.js

@@ -0,0 +1,120 @@
+import { GUI } from "dat.gui"
+import { addRenderGraphGuiAddon } from "@examples/rendergraph_gui"
+import {
+  MeshMaterial3D,
+  WebGLRenderer,
+  TextureLoader,
+  Camera,
+  WebGLRenderDevice,
+  PlaneMeshBuilder,
+  OrbitCameraControls,
+  MeshMaterialPlugin,
+  UVSphereMeshBuilder,
+  CanvasTarget,
+  BasicMaterial,
+  OrthographicProjection,
+  CameraPlugin
+} from "chorama"
+
+const canvas = document.createElement('canvas')
+const renderTarget = new CanvasTarget(canvas)
+const renderDevice = new WebGLRenderDevice(canvas,{
+  depth:true
+})
+
+const renderer = new WebGLRenderer({
+  plugins: [
+    new CameraPlugin(),
+    new MeshMaterialPlugin(),
+  ]
+})
+const projection = new OrthographicProjection()
+const camera = new Camera(renderTarget)
+const cameraControls = new OrbitCameraControls(camera, canvas)
+
+// loaders
+const textureLoader = new TextureLoader()
+const texture = textureLoader.load({
+  paths: ["/images/uv.jpg"],
+})
+
+//create objects
+const material = new BasicMaterial({
+  mainTexture: texture
+})
+const meshBuilder = new PlaneMeshBuilder()
+meshBuilder.width = 10
+meshBuilder.height = 10
+
+const ground = new MeshMaterial3D(meshBuilder.build(), material)
+const objects = createObjects()
+
+ground.transform.orientation.rotateX(-Math.PI / 2)
+
+//set up the camera
+cameraControls.distance = 5
+camera.projection = projection
+
+document.body.append(canvas)
+addEventListener("resize", updateView)
+updateView()
+requestAnimationFrame(update)
+
+function createObjects() {
+  const results = []
+  const meshBuilder2 = new UVSphereMeshBuilder()
+  meshBuilder2.radius = 0.25
+  const sphereMesh = meshBuilder2.build()
+
+  for (let x = -5; x < 5; x++) {
+    for (let y = -5; y < 5; y++) {
+      const object = new MeshMaterial3D(sphereMesh, material)
+
+      object.transform.position.x = x
+      object.transform.position.y = 0.5
+      object.transform.position.z = y
+      results.push(object)
+    }
+  }
+
+  return results
+}
+
+function update() {
+  cameraControls.update()
+  renderer.render([ground, ...objects, camera], renderDevice)
+  requestAnimationFrame(update)
+}
+
+function updateView() {
+  canvas.style.width = innerWidth + "px"
+  canvas.style.height = innerHeight + "px"
+  canvas.width = innerWidth * devicePixelRatio
+  canvas.height = innerHeight * devicePixelRatio
+}
+
+const controls = new GUI()
+const cameraFolder = controls.addFolder("Camera")
+
+cameraFolder
+  .add(projection, 'left', -10, -1)
+  .name('Left')
+cameraFolder
+  .add(projection, 'right', 1, 10)
+  .name('Right')
+cameraFolder
+  .add(projection, 'top', 1, 10)
+  .name('Top')
+cameraFolder
+  .add(projection, 'bottom', -10, -1)
+  .name('Bottom')
+cameraFolder
+  .add(camera, 'near', 0.1, 10)
+  .name('Near Plane')
+cameraFolder
+  .add(camera, 'far', 5, 20)
+cameraFolder.open()
+addRenderGraphGuiAddon({
+  gui: controls,
+  renderer
+})