chorama 0.0.0

package/src/plugins/skeletonhelper/skeletonhelper.js

@@ -0,0 +1,160 @@
+/**@import { WebGLRenderPipelineDescriptor } from '../../core/index.js' */
+import { CompareFunction, MeshVertexLayout, Shader, WebGLRenderDevice } from "../../core/index.js";
+import { Affine3 } from "../../math/index.js";
+import { PrimitiveTopology, TextureFormat } from "../../constants/index.js";
+import { Bone3D, Object3D, SkeletonHelper } from "../../objects/index.js";
+import { Plugin, WebGLRenderer } from "../../renderer/index.js";
+import { skeletonFragment, skeletonVertex } from "../../shader/index.js";
+import { Texture } from "../../texture/index.js";
+
+export class SkeletonHelperPlugin extends Plugin {
+
+  /**
+   * @override
+   */
+  preprocess() { }
+
+  /**
+   * @type {number | undefined}
+   */
+  pipelineId
+  /**
+   * @param {Object3D} object
+   * @param {WebGLRenderDevice} device
+   * @param {WebGLRenderer} renderer
+   */
+  renderObject3D(object, device, renderer) {
+    if (!(object instanceof SkeletonHelper) || !object.skinnedMesh.skin) {
+      return
+    }
+    const { caches } = renderer
+    const { bones, boneTexture } = object.skinnedMesh.skin
+    const pipeline = this.getRenderPipeline(device, renderer)
+    const transformsInfo = pipeline.uniforms.get("transforms")
+    const modelInfo = pipeline.uniforms.get("model")
+    const parentInfo = pipeline.uniforms.get("parent_index")
+    const childInfo = pipeline.uniforms.get("child_index")
+    const pass = device.beginRenderPass()
+    pass.setPipeline(pipeline)
+
+    if (
+      !transformsInfo || transformsInfo.texture_unit === undefined ||
+      !modelInfo || !parentInfo || !childInfo) {
+      console.warn("uniforms are not set up correctly in shader")
+      return
+    }
+
+    updateDataTexture(boneTexture, bones.map((bone) => bone.transform.world))
+
+    const transformsTexture = caches.getTexture(device, boneTexture)
+
+
+    device.context.activeTexture(WebGL2RenderingContext.TEXTURE0 + transformsInfo.texture_unit)
+    device.context.bindTexture(boneTexture.type, transformsTexture.inner)
+
+    device.context.uniformMatrix4fv(modelInfo.location, false, [...Affine3.toMatrix4(object.skinnedMesh.transform.world)])
+    device.context.bindVertexArray(null)
+
+    object.rootBone.traverseBFS((parent) => {
+      if (parent instanceof Bone3D) {
+        for (let i = 0; i < parent.children.length; i++) {
+          const child = parent.children[i]
+          if (child instanceof Bone3D) {
+            const childIndex = child.index
+            const parentIndex = parent.index
+            device.context.uniform1ui(parentInfo.location, parentIndex)
+            device.context.uniform1ui(childInfo.location, childIndex)
+            device.context.drawArrays(PrimitiveTopology.Lines, 0, 2)
+          }
+        }
+      }
+      return true
+    })
+    pass.end()
+  }
+
+  /**
+ * @param {WebGLRenderDevice} device
+ * @param {WebGLRenderer} renderer
+ */
+  getRenderPipeline(device, renderer) {
+    const { caches, includes, defines: globalDefines } = renderer
+    if (this.pipelineId) {
+      const pipeline = caches.getRenderPipeline(this.pipelineId)
+
+      if (pipeline) {
+        return pipeline
+      }
+    }
+
+    /**
+     * @type {WebGLRenderPipelineDescriptor}
+     */
+    const descriptor = {
+      depthWrite: false,
+      depthCompare: CompareFunction.Always,
+      topology: PrimitiveTopology.Lines,
+      vertexLayout: new MeshVertexLayout([]),
+      vertex: new Shader({
+        source: skeletonVertex
+      }),
+      fragment: {
+        source: new Shader({
+          source: skeletonFragment
+        }),
+        targets: [{
+          format: TextureFormat.RGBA8Unorm
+        }]
+      }
+    }
+
+    for (const [name, value] of globalDefines) {
+      descriptor.vertex.defines.set(name, value)
+      descriptor.fragment?.source?.defines?.set(name, value)
+    }
+    for (const [name, value] of includes) {
+      descriptor.vertex.includes.set(name, value)
+      descriptor.fragment?.source?.includes?.set(name, value)
+    }
+    const [newRenderPipeline, newId] = caches.createRenderPipeline(device, descriptor)
+
+    this.pipelineId = newId
+    return newRenderPipeline
+  }
+}
+
+// NOTE: This could be expanded to pack numbers, vectors, matrices and affines
+/**
+ * @param {Texture} texture
+ * @param {Affine3[]} items
+ */
+function updateDataTexture(texture, items) {
+  const data = new Float32Array(items.length * 16)
+
+  for (let i = 0; i < items.length; i++) {
+    const offset = i * 16
+    const world = /**@type {Affine3} */(items[i])
+
+    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
+  texture.width = 4
+  texture.height = items.length
+  texture.data = data.buffer
+}

package/src/plugins/skybox/index.js

@@ -0,0 +1,3 @@
+export * from './skybox.js'
+export * from './nodes/index.js'
+export * from './resources/index.js'

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

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

package/src/plugins/skybox/nodes/skybox.js

@@ -0,0 +1,143 @@
+/**@import { GPUTexture, WebGLRenderPipelineDescriptor } from '../../../core/index.js' */
+import { CompareFunction, MeshVertexLayout, Shader } from "../../../core/index.js"
+import { CullFace, PrimitiveTopology, TextureFormat } from "../../../constants/index.js"
+import { Camera, Object3D, SkyBox } from "../../../objects/index.js"
+import { RenderItem, Views } from "../../../renderer/index.js"
+import { skyboxFragment, skyboxVertex } from "../../../shader/index.js"
+import { assert } from "../../../utils/index.js"
+import { SkyboxPipeline, SkyBoxMesh } from "../resources/index.js"
+
+export class SkyBoxNode {
+  subgraph() {
+    return undefined
+  }
+
+  /**
+   * @param {import("../../../renderer/graph/index.js").RenderGraphContext} context
+   */
+  execute(context) {
+    const { renderer, renderDevice, objects } = context
+    const views = renderer.getResource(Views)
+
+    assert(views, "Views resource missing")
+
+    for (const view of views.items()) {
+      if (view.tag !== Camera.name) {
+        continue
+      }
+
+      const opaqueStage = view.renderStage.opaque || []
+      view.renderStage.opaque = opaqueStage
+
+      for (let i = 0; i < objects.length; i++) {
+        // SAFETY: Asssume the list is dense
+        const object = /**@type {Object3D}*/(objects[i])
+
+        object.traverseDFS((child) => {
+          if (!child.renderMask.test(view.renderMask)) {
+            return true
+          }
+
+          if (!(child instanceof SkyBox)) {
+            return true
+          }
+          const item = createSkyboxRenderItem(child, renderDevice, renderer)
+
+          opaqueStage.push(item)
+
+          return true
+        })
+      }
+    }
+  }
+}
+
+/**
+ * @param {SkyBox} object
+ * @param {import("../../../core/index.js").WebGLRenderDevice} device
+ * @param {import("../../../renderer/index.js").WebGLRenderer} renderer
+ * @returns {RenderItem}
+ */
+function createSkyboxRenderItem(object, device, renderer) {
+  const skyboxMesh = renderer.getResource(SkyBoxMesh)
+
+  assert(skyboxMesh, "SkyBoxMesh resource missing")
+  const mesh = renderer.caches.getMesh(device, skyboxMesh.cube, renderer.attributes)
+  /** @type {{ lerp: number, day: GPUTexture | undefined, night: GPUTexture | undefined }} */
+  const uniforms = {
+    lerp: object.lerp,
+    day: undefined,
+    night: undefined
+  }
+
+  if (object.day) {
+    const dayTex = renderer.caches.getTexture(device, object.day)
+
+    uniforms.day = dayTex
+  }
+  if (object.night) {
+    const nightTex = renderer.caches.getTexture(device, object.night)
+
+    uniforms.night = nightTex
+  }
+  const item = new RenderItem({
+    pipelineId: getSkyboxRenderPipeline(device, renderer),
+    uniforms,
+    tag: SkyBox.name,
+    transform: object.transform.world,
+    mesh
+  })
+
+  return item
+}
+
+/**
+ * @param {import("../../../core/index.js").WebGLRenderDevice} device
+ * @param {import("../../../renderer/index.js").WebGLRenderer} renderer
+ */
+function getSkyboxRenderPipeline(device, renderer) {
+  const skyboxPipeline = renderer.getResource(SkyboxPipeline)
+  const { caches, includes, defines: globalDefines } = renderer
+
+  assert(skyboxPipeline, "SkyboxPipeline resource missing")
+
+  if (skyboxPipeline.pipelineId !== undefined) {
+    return skyboxPipeline.pipelineId
+  }
+  /**
+   * @type {WebGLRenderPipelineDescriptor}
+   */
+  const descriptor = {
+    depthWrite: false,
+    depthCompare: CompareFunction.Lequal,
+    cullFace: CullFace.Front,
+    topology: PrimitiveTopology.Triangles,
+    vertexLayout: new MeshVertexLayout([]),
+    vertex: new Shader({
+      source: skyboxVertex
+    }),
+    fragment: {
+      source: new Shader({
+        source: skyboxFragment
+      }),
+      targets: [{
+        format: TextureFormat.RGBA8Unorm
+      }]
+    }
+  }
+
+  for (const [name, value] of globalDefines) {
+    descriptor.vertex.defines.set(name, value)
+    descriptor.fragment?.source?.defines?.set(name, value)
+  }
+  for (const [name, value] of includes) {
+    descriptor.vertex.includes.set(name, value)
+    descriptor.fragment?.source?.includes?.set(name, value)
+  }
+
+  const [_, newId] = caches.createRenderPipeline(device, descriptor)
+
+  skyboxPipeline.pipelineId = newId
+
+  return newId
+}

package/src/plugins/skybox/resources/index.js

@@ -0,0 +1,2 @@
+export * from "./skyboxpipeline.js"
+export * from "./skyboxmesh.js"

package/src/plugins/skybox/resources/skyboxmesh.js

@@ -0,0 +1,14 @@
+import { CuboidMeshBuilder } from "../../../mesh/index.js";
+
+export class SkyBoxMesh {
+  cube
+
+  constructor() {
+    const cuboid = new CuboidMeshBuilder()
+    cuboid.width = 1
+    cuboid.height = 1
+    cuboid.depth = 1
+
+    this.cube = cuboid.build()
+  }
+}

package/src/plugins/skybox/resources/skyboxpipeline.js

@@ -0,0 +1,6 @@
+export class SkyboxPipeline {
+  /**
+   * @type {number | undefined}
+   */
+  pipelineId
+}

package/src/plugins/skybox/skybox.js

@@ -0,0 +1,137 @@
+/**@import { GPUTexture, WebGLRenderDevice, WebGLRenderPipeline } from '../../core/index.js' */
+import { Matrix4 } from "../../math/index.js";
+import { TextureFilter } from "../../constants/index.js";
+import { SkyBox } from "../../objects/index.js";
+import { Plugin, SortViewsNode, WebGLRenderer } from "../../renderer/index.js";
+import { Sampler } from "../../texture/index.js";
+import { SkyboxPipeline, SkyBoxMesh } from "./resources/index.js";
+import { SkyBoxNode } from "./nodes/index.js";
+import { CameraViewNode } from "../camera/index.js";
+
+export class SkyboxPlugin extends Plugin {
+  /**
+   * @override
+   * @param {WebGLRenderer} renderer
+   */
+  init(renderer) {
+    renderer.setResource(new SkyboxPipeline())
+    renderer.setResource(new SkyBoxMesh())
+    renderer.uniformBinders.set(SkyBox.name, uploadUniforms)
+    renderer.renderGraph.addNode(SkyBoxNode.name, new SkyBoxNode())
+    renderer.renderGraph.addDependency(CameraViewNode.name, SkyBoxNode.name)
+    renderer.renderGraph.addDependency(SkyBoxNode.name, SortViewsNode.name)
+  }
+}
+
+export class SkyBoxGroup {
+  /**
+   * @type {GPUTexture | undefined}
+   */
+  day
+  /**
+   * @type {GPUTexture | undefined}
+   */
+  night
+  /**
+   * @type {number}
+   */
+  lerp = 0
+
+  /**
+   * @param {number} lerp
+   * @param {GPUTexture} [day]
+   * @param {GPUTexture} [night]
+   */
+  constructor(lerp, day, night) {
+    this.day = day
+    this.night = night
+    this.lerp = lerp
+  }
+}
+
+/**
+ * @param {WebGLRenderDevice} device
+ * @param {WebGLRenderer} renderer
+ * @param {WebGLRenderPipeline} pipeline
+ * @param {SkyBoxGroup} bindGroup
+ * @param {Matrix4} transform
+ */
+function uploadUniforms(device, renderer, pipeline, bindGroup, transform) {
+  const { day, night, lerp } = bindGroup
+  const modelInfo = pipeline.uniforms.get("model")
+  const dayInfo = pipeline.uniforms.get("day")
+  const nightInfo = pipeline.uniforms.get("night")
+  const lerpInfo = pipeline.uniforms.get("lerp")
+
+  if (modelInfo) {
+    device.context.uniformMatrix4fv(modelInfo.location, false, new Float32Array([...transform]))
+  }
+
+  if (day && dayInfo && dayInfo.texture_unit !== undefined) {
+    device.context.activeTexture(WebGL2RenderingContext.TEXTURE0 + dayInfo.texture_unit)
+    device.context.bindTexture(day.type, day.inner)
+    updateTextureSampler(device.context, day, renderer.defaults.textureSampler)
+  }
+
+  if (night && nightInfo && nightInfo.texture_unit !== undefined) {
+    device.context.activeTexture(WebGL2RenderingContext.TEXTURE0 + nightInfo.texture_unit)
+    device.context.bindTexture(night.type, night.inner)
+    updateTextureSampler(device.context, night, renderer.defaults.textureSampler)
+  }
+
+  if (lerpInfo) {
+    device.context.uniform1f(lerpInfo.location, lerp)
+  }
+}
+
+/**
+ * @param {WebGL2RenderingContext} context
+ * @param {GPUTexture} texture
+ * @param {Sampler} sampler
+ */
+function updateTextureSampler(context, texture, sampler) {
+  const lod = sampler.lod
+  const anisotropyExtenstion = context.getExtension("EXT_texture_filter_anisotropic")
+
+  context.texParameteri(texture.type, context.TEXTURE_MAG_FILTER, sampler.magnificationFilter)
+  context.texParameteri(texture.type, context.TEXTURE_WRAP_S, sampler.wrapS)
+  context.texParameteri(texture.type, context.TEXTURE_WRAP_T, sampler.wrapT)
+  context.texParameteri(texture.type, context.TEXTURE_WRAP_R, sampler.wrapR)
+
+  if (lod) {
+    context.texParameteri(texture.type, context.TEXTURE_MIN_LOD, lod.min)
+    context.texParameteri(texture.type, context.TEXTURE_MAX_LOD, lod.max)
+  }
+
+  if (sampler.mipmapFilter !== undefined) {
+    if (sampler.minificationFilter === TextureFilter.Linear) {
+      if (sampler.mipmapFilter === TextureFilter.Linear) {
+        context.texParameteri(texture.type, context.TEXTURE_MIN_FILTER, context.LINEAR_MIPMAP_LINEAR);
+      } else if (sampler.mipmapFilter === TextureFilter.Nearest) {
+        context.texParameteri(texture.type, context.TEXTURE_MIN_FILTER, context.LINEAR_MIPMAP_NEAREST);
+      }
+    } else if (sampler.minificationFilter === TextureFilter.Nearest) {
+      if (sampler.mipmapFilter === TextureFilter.Linear) {
+        context.texParameteri(texture.type, context.TEXTURE_MIN_FILTER, context.NEAREST_MIPMAP_LINEAR);
+      } else if (sampler.mipmapFilter === TextureFilter.Nearest) {
+        context.texParameteri(texture.type, context.TEXTURE_MIN_FILTER, context.NEAREST_MIPMAP_NEAREST);
+      }
+    }
+  } else {
+    if (sampler.minificationFilter === TextureFilter.Nearest) {
+      context.texParameteri(texture.type, context.TEXTURE_MIN_FILTER, context.NEAREST)
+    } else if (sampler.minificationFilter === TextureFilter.Linear) {
+      context.texParameteri(texture.type, context.TEXTURE_MIN_FILTER, context.LINEAR)
+    }
+  }
+  if (anisotropyExtenstion) {
+    context.texParameterf(texture.type, anisotropyExtenstion.TEXTURE_MAX_ANISOTROPY_EXT, sampler.anisotropy)
+  }
+
+  if (sampler.compare !== undefined) {
+    context.texParameteri(texture.type, context.TEXTURE_COMPARE_MODE, context.COMPARE_REF_TO_TEXTURE);
+    context.texParameteri(texture.type, context.TEXTURE_COMPARE_FUNC, sampler.compare)
+  } else {
+    context.texParameteri(texture.type, context.TEXTURE_COMPARE_MODE, context.NONE);
+  }
+}

package/src/renderer/core/index.js

@@ -0,0 +1,179 @@
+import { GPUMesh } from "../../core/index.js"
+import { Affine3, Matrix4, Vector3 } from "../../math/index.js"
+import { Object3D, RenderMask } from "../../objects/index.js"
+import { RenderTarget } from "../../rendertarget/index.js"
+
+export class View {
+  /**
+   * @type {RenderStages}
+   */
+  renderStage = new RenderStages()
+  /**
+   * @type {number}
+   */
+  order = 0
+  /**
+   * @type {RenderTarget}
+   */
+  renderTarget
+
+  /**
+   * @type {Matrix4}
+   */
+  projectionMatrix
+
+  /**
+   * @type {Matrix4}
+   */
+  viewMatrix
+
+  /**
+   * @type {Vector3}
+   */
+  viewPosition
+
+  /**
+   * @type {number}
+   */
+  near
+
+  /**
+   * @type {number}
+   */
+  far
+
+  /**
+   * @type {string}
+   */
+  tag
+  /**
+   * Render mask used to filter visible objects for this view.
+   * @type {RenderMask}
+   */
+  renderMask = new RenderMask()
+  /**
+   * Source object that created this view.
+   * @type {Object3D | undefined}
+   */
+  object
+
+  /**
+   * @param {ViewOptions} options
+   */
+  constructor({
+    renderTarget,
+    position,
+    projection,
+    view,
+    near,
+    far,
+    tag,
+    object,
+    renderMask = new RenderMask()
+  }) {
+    this.renderTarget = renderTarget
+    this.near = near
+    this.far = far
+    this.tag = tag
+    this.projectionMatrix = projection
+    this.viewMatrix = view
+    this.viewPosition = position
+    this.object = object
+    this.renderMask.copy(renderMask)
+  }
+
+  getData() {
+    return {
+      name: "CameraBlock",
+      data: new Float32Array([
+        ...this.viewMatrix,
+        ...this.projectionMatrix,
+        ...this.viewPosition,
+        this.near,
+        this.far
+      ]).buffer
+    }
+  }
+}
+
+export class RenderStages {
+  /**
+   * @type {RenderItem[] | undefined}
+   */
+  opaque
+}
+export class RenderItem {
+
+  /**
+   * @type {number}
+   */
+  pipelineId
+
+  /**
+   * @type {GPUMesh}
+   */
+  mesh
+
+  /**
+   * @type {Record<string, any>}
+   */
+  uniforms
+
+  /**
+   * @type {string}
+   */
+  tag
+
+  /**
+   * @type {Affine3}
+   */
+  transform
+
+  /**
+   * @param {RenderItemOptions} options 
+   */
+  constructor({
+    pipelineId,
+    mesh,
+    tag,
+    uniforms,
+    transform
+  }) {
+    this.pipelineId = pipelineId
+    this.transform = transform
+    this.mesh = mesh
+    this.tag = tag
+    this.uniforms = uniforms
+  }
+}
+
+/**
+ * @typedef ViewOptions
+ * @property {RenderTarget} renderTarget
+ * @property {Vector3} position
+ * @property {Matrix4} projection
+ * @property {Matrix4} view
+ * @property {number} near
+ * @property {number} far
+ * @property {string} tag
+ * @property {Object3D} [object]
+ * @property {RenderMask} [renderMask]
+ */
+
+/**
+ * @typedef RenderItemOptions
+ * @property {Affine3} transform
+ * @property {GPUMesh} mesh
+ * @property {number} pipelineId
+ * @property {Record<string, any>} uniforms
+ * @property {string} tag
+ */
+
+/**
+ * @callback UniformBinder
+ * @param {WebGLRenderDevice} device
+ * @param {WebGLRenderer} renderer
+ * @param {WebGLRenderPipeline} pipeline
+ * @param {any} bindGroup
+ * @param {Matrix4} transform
+ */

package/src/renderer/graph/index.js

@@ -0,0 +1,3 @@
+export * from "./rendergraph.js"
+export * from "./nodes.js"
+

package/src/renderer/graph/nodes.js

@@ -0,0 +1,34 @@
+/** @import { RenderGraphContext } from "./rendergraph.js" */
+import { assert } from "../../utils/index.js"
+import { Views } from "../views.js"
+
+export class SortViewsNode {
+  subgraph() {
+    return undefined
+  }
+
+  /**
+   * @param {RenderGraphContext} context
+   */
+  execute(context) {
+    const views = context.renderer.getResource(Views)
+
+    assert(views, "Views resource missing")
+
+    const sorted = views.items()
+      .map((view, index) => ({ view, index }))
+      .sort((a, b) => {
+        const order = a.view.order - b.view.order
+
+        if (order !== 0) {
+          return order
+        }
+
+        return a.index - b.index
+      })
+      .map((entry) => entry.view)
+
+    views.clear()
+    views.push(...sorted)
+  }
+}