chorama 0.0.0

package/src/core/resources/blendparams.js

@@ -0,0 +1,89 @@
+import { BlendEquation, BlendMode } from "../../constants/index.js"
+
+export class BlendParams {
+  /**
+   * @type {BlendEquation}
+   */
+  operation
+  /**
+   * @type {BlendMode}
+   */
+  source
+  /**
+   * @type {BlendMode}
+   */
+  destination
+
+  /**
+   * @param {BlendEquation} operation
+   * @param {BlendMode} source
+   * @param {BlendMode} destination
+   */
+  constructor(operation, source, destination) {
+    this.operation = operation
+    this.source = source
+    this.destination = destination
+  }
+
+  clone() {
+    return new BlendParams(
+      this.operation,
+      this.source,
+      this.destination,
+    )
+  }
+
+  static Opaque = Object.freeze(new BlendParams(
+    BlendEquation.Add,
+    BlendMode.One,
+    BlendMode.Zero
+  ))
+
+  static AlphaBlend = Object.freeze(new BlendParams(
+    BlendEquation.Add,
+    BlendMode.SrcAlpha,
+    BlendMode.OneMinusSrcAlpha,
+  ))
+
+  static PremultiplyAlpha = Object.freeze(new BlendParams(
+    BlendEquation.Add,
+    BlendMode.One,
+    BlendMode.OneMinusSrcAlpha,
+  ))
+
+  static AdditiveAlpha = Object.freeze(new BlendParams(
+    BlendEquation.Add,
+    BlendMode.SrcAlpha,
+    BlendMode.One,
+  ))
+
+  static AdditiveColor = Object.freeze(new BlendParams(
+    BlendEquation.Add,
+    BlendMode.One,
+    BlendMode.One,
+  ))
+
+  static Multiply = Object.freeze(new BlendParams(
+    BlendEquation.Add,
+    BlendMode.DstColor,
+    BlendMode.Zero,
+  ))
+
+  static Screen = Object.freeze(new BlendParams(
+    BlendEquation.Add,
+    BlendMode.OneMinusDstColor,
+    BlendMode.One,
+  ))
+
+  static Min = Object.freeze(new BlendParams(
+    BlendEquation.Min,
+    BlendMode.One,
+    BlendMode.One,
+  ))
+
+  static Max = Object.freeze(new BlendParams(
+    BlendEquation.Max,
+    BlendMode.One,
+    BlendMode.One,
+  ))
+}

package/src/core/resources/framebuffer.js

@@ -0,0 +1,127 @@
+import { hasDepthComponent, hasStencilComponent } from "../../constants/texture.js"
+import { Color } from "../../math/index.js"
+import { ViewRectangle } from "../../utils/index.js"
+import { GPUTexture } from "./gputexture.js"
+
+export class FrameBuffer {
+  /**
+   * @type {number}
+   */
+  width
+  /**
+   * @type {number}
+   */
+  height
+  /**
+   * @type {WebGLFramebuffer | null}
+   */
+  buffer
+
+  /**
+   * @type {GPUTexture[]}
+   */
+  colorAttachments
+
+  /**
+   * @type {GLenum[]}
+   */
+  drawBuffers
+
+  /**
+   * @type {GPUTexture | undefined}
+   */
+  depthBuffer
+
+  /**
+   * @param {WebGLFramebuffer | null} frameBuffer
+   * @param {GPUTexture[]} colorAttachments
+   * @param {GLenum[]} drawBuffers
+   * @param {GPUTexture | undefined} depthBuffer
+   * @param {number} width
+   * @param {number} height
+   */
+  constructor(frameBuffer, colorAttachments, drawBuffers, depthBuffer, width, height) {
+    this.buffer = frameBuffer
+    this.colorAttachments = colorAttachments
+    this.depthBuffer = depthBuffer
+    this.drawBuffers = drawBuffers
+    this.width = width
+    this.height = height
+  }
+
+  /**
+   * @param {WebGL2RenderingContext} context
+   * @param {Color | undefined} clearColor
+   * @param {number | undefined} clearDepth
+   * @param {number | undefined} clearStencil
+   */
+  clear(context, clearColor, clearDepth, clearStencil) {
+    let bit = 0
+    context.stencilMask(0xFF);
+
+    if (clearColor) {
+      const { r, g, b, a } = clearColor
+      bit |= context.COLOR_BUFFER_BIT
+      context.colorMask(true, true, true, true)
+      context.clearColor(r, g, b, a)
+    }
+    if (clearDepth !== undefined) {
+      bit |= context.DEPTH_BUFFER_BIT
+      context.depthRange(0, 1)
+      context.depthMask(true)
+      context.clearDepth(clearDepth)
+    }
+    if (clearStencil !== undefined) {
+      bit |= context.STENCIL_BUFFER_BIT
+      context.stencilMask(0xFF)
+      context.clearStencil(clearStencil)
+    }
+    context.clear(bit)
+  }
+
+  /**
+   * @param {WebGL2RenderingContext} context
+   * @param {ViewRectangle} viewport
+   * @param {ViewRectangle} scissors
+   */
+  setViewport(context, viewport, scissors) {
+    const { width, height } = this
+
+    context.bindFramebuffer(context.FRAMEBUFFER, this.buffer)
+    context.drawBuffers(this.drawBuffers)
+    context.enable(context.SCISSOR_TEST)
+    context.scissor(
+      scissors.offset.x * width,
+      scissors.offset.y * height,
+      scissors.size.x * width,
+      scissors.size.y * height
+    )
+    context.viewport(
+      viewport.offset.x * width,
+      viewport.offset.y * height,
+      viewport.size.x * width,
+      viewport.size.y * height
+    )
+
+    if(this.buffer){
+      if(this.depthBuffer){
+        if(hasDepthComponent(this.depthBuffer.actualFormat)){
+          context.enable(WebGL2RenderingContext.DEPTH_TEST)
+        } else {
+          context.disable(WebGL2RenderingContext.DEPTH_TEST)
+        }
+        if(hasStencilComponent(this.depthBuffer.actualFormat)){
+          context.enable(WebGL2RenderingContext.STENCIL_TEST)
+        }else {
+          context.disable(WebGL2RenderingContext.STENCIL_TEST)
+        }
+      } else {
+        context.disable(WebGL2RenderingContext.DEPTH_TEST)
+        context.disable(WebGL2RenderingContext.STENCIL_TEST)
+      }
+    } else {
+      context.enable(WebGL2RenderingContext.DEPTH_TEST)
+      context.enable(WebGL2RenderingContext.STENCIL_TEST)
+    }
+  }
+}

package/src/core/resources/gpubuffer.js

@@ -0,0 +1,32 @@
+import { BufferType } from "../../constants/index.js"
+
+export class GPUBuffer {
+  /**
+   * @readonly
+   * @type {WebGLBuffer}
+   */
+  inner
+
+  /**
+   * @readonly
+   * @type {BufferType}
+   */
+  type
+
+  /**
+   * @readonly
+   * @type {number}
+   */
+  size
+
+  /**
+   * @param {WebGLBuffer} buffer
+   * @param {number} type
+   * @param {number} size
+   */
+  constructor(buffer, type, size) {
+    this.inner = buffer
+    this.type = type
+    this.size = size
+  }
+}

package/src/core/resources/gpumesh.js

@@ -0,0 +1,43 @@
+export class GPUMesh {
+  /**
+   * @readonly
+   * @type {WebGLVertexArrayObject}
+   */
+  inner
+
+  /**
+   * @type {WebGLBuffer[]}
+   */
+  attributeBuffers = []
+
+  /**
+   * @type {WebGLBuffer | undefined}
+   */
+  indexBuffer
+
+  /**
+   * @type {GLenum | undefined}
+   */
+  indexType
+
+  /**
+   * @type {number}
+   */
+  count
+
+  /**
+   * @type {number}
+   */
+  layoutHash
+
+  /**
+   * @param {WebGLVertexArrayObject} vao
+   * @param {number} count
+   * @param {number} layoutHash
+   */
+  constructor(vao, count, layoutHash) {
+    this.inner = vao
+    this.count = count
+    this.layoutHash = layoutHash
+  }
+}

package/src/core/resources/gputexture.js

@@ -0,0 +1,73 @@
+import { TextureFormat, TextureType } from "../../constants/index.js"
+import { WebGLTextureFormat } from "../../function.js"
+
+export class GPUTexture {
+  /**
+   * @readonly
+   * @type {WebGLTexture}
+   */
+  inner
+
+  /**
+   * @readonly
+   * @type {TextureType}
+   */
+  type
+
+  /**
+   * @readonly
+   * @type {number}
+   */
+  width
+
+  /**
+   * @readonly
+   * @type {number}
+   */
+  height
+
+  /**
+   * @readonly
+   * @type {number}
+   */
+  depth
+
+  /**
+   * @readonly
+   * @type {WebGLTextureFormat}
+   */
+  format
+
+  /**
+   * @readonly
+   * @type {TextureFormat}
+   */
+  actualFormat
+
+  /**
+   * @readonly
+   * @type {number}
+   */
+  pixelSize
+
+  /**
+   * @param {WebGLTexture} texture
+   * @param {TextureType} type
+   * @param {WebGLTextureFormat} format
+   * @param {TextureFormat} actualFormat
+   * @param {number} width
+   * @param {number} height
+   * @param {number} depth
+   * @param {number} pixelSize
+   */
+  constructor(texture, type, format, actualFormat, width, height, depth, pixelSize){
+    this.inner = texture
+    this.type = type
+    this.format = format
+    this.width = width
+    this.height = height
+    this.depth = depth
+    this.pixelSize = pixelSize
+    this.actualFormat = actualFormat
+  }
+}

package/src/core/resources/index.js

@@ -0,0 +1,5 @@
+export * from './gpubuffer.js'
+export * from './gputexture.js'
+export * from './gpumesh.js'
+export * from './framebuffer.js'
+export * from './blendparams.js'

package/src/core/shader.js

@@ -0,0 +1,62 @@
+export class Shader {
+
+  /**
+   * @readonly
+   * @type {string}
+   */
+  source
+
+  /**
+   * @type {Map<string,string>}
+   */
+  includes = new Map()
+
+  /**
+   * @type {Map<string,string>}
+   */
+  defines = new Map()
+  /**
+   * @param {ShaderModuleDescriptor} descriptor 
+   */
+  constructor({ source }) {
+    this.source = source
+    this.defines = new Map()
+  }
+
+  /**
+   * @returns {string}
+   */
+  compile() {
+    const { source, defines, includes } = this
+    return preprocessShader(source, includes, defines)
+  }
+}
+
+/**
+ * @typedef ShaderModuleDescriptor
+ * @property {string} source
+ * @property {Map<string,string>} [defines]
+ */
+
+// TODO: Maybe add error as a return type when something unexpected happens
+// e.g when an include in the shader does not exist.
+/**
+ * @param {string} source
+ * @param {ReadonlyMap<string,string>} includes 
+ * @param {ReadonlyMap<string,string>} defines
+ * @returns {string}
+ */
+function preprocessShader(source, includes, defines) {
+  const version = "#version 300 es\n"
+  const mergedDefines = [...defines.entries()]
+    .map(([name, value]) => `#define ${name} ${value}`)
+    .join("\n")
+  const preprocessed = source.replace(/#include <(.*?)>/g, (_, name) => {
+    const include = includes.get(name)
+    if (!include) {
+      console.error(`Could not find the include "${name}"`)
+    }
+    return include || ""
+  })
+  return version + mergedDefines + "\n" + preprocessed
+}

package/src/core/webgl/bindgroup.js

@@ -0,0 +1,89 @@
+/** @import { WebGLBindGroupDescriptor, WebGLBindGroupEntry, WebGLBindGroupLayoutDescriptor, WebGLBindGroupLayoutEntry } from "./descriptors.js" */
+import { assert } from "../../utils/index.js"
+
+export class WebGLBindGroupLayout {
+  /**
+   * @readonly
+   * @type {string | undefined}
+   */
+  label
+
+  /**
+   * @readonly
+   * @type {readonly WebGLBindGroupLayoutEntry[]}
+   */
+  entries
+
+  /**
+   * @private
+   * @type {Map<number, WebGLBindGroupLayoutEntry>}
+   */
+  entryMap = new Map()
+
+  /**
+   * @param {WebGLBindGroupLayoutDescriptor} descriptor
+   */
+  constructor({ label, entries }) {
+    this.label = label
+    this.entries = [...entries]
+
+    for (const entry of entries) {
+      assert(!this.entryMap.has(entry.binding) ? {} : undefined, `Duplicate bind group layout binding ${entry.binding}`)
+      this.entryMap.set(entry.binding, entry)
+    }
+  }
+
+  /**
+   * @param {number} binding
+   */
+  getEntry(binding) {
+    return this.entryMap.get(binding)
+  }
+}
+
+export class WebGLBindGroup {
+  /**
+   * @readonly
+   * @type {string | undefined}
+   */
+  label
+
+  /**
+   * @readonly
+   * @type {WebGLBindGroupLayout}
+   */
+  layout
+
+  /**
+   * @readonly
+   * @type {readonly WebGLBindGroupEntry[]}
+   */
+  entries
+
+  /**
+   * @private
+   * @type {Map<number, WebGLBindGroupEntry>}
+   */
+  entryMap = new Map()
+
+  /**
+   * @param {WebGLBindGroupDescriptor} descriptor
+   */
+  constructor({ label, layout, entries }) {
+    this.label = label
+    this.layout = layout
+    this.entries = [...entries]
+
+    for (const entry of entries) {
+      assert(!this.entryMap.has(entry.binding) ? {} : undefined, `Duplicate bind group binding ${entry.binding}`)
+      this.entryMap.set(entry.binding, entry)
+    }
+  }
+
+  /**
+   * @param {number} binding
+   */
+  getEntry(binding) {
+    return this.entryMap.get(binding)
+  }
+}

package/src/core/webgl/descriptors.js

@@ -0,0 +1,104 @@
+import { BufferUsage, BufferType, TextureType, TextureFormat, CullFace, FrontFaceDirection, PrimitiveTopology } from "../../constants/index.js";
+import { Vector3 } from "../../math/index.js";
+import { CompareFunction } from "../constants.js";
+import { MeshVertexLayout } from "../layouts/index.js";
+import { BlendParams, GPUTexture } from "../resources/index.js";
+import { Shader } from "../shader.js";
+
+/**
+ * @typedef WebGLBindGroupLayoutDescriptor
+ * @property {string} [label]
+ * @property {WebGLBindGroupLayoutEntry[]} entries
+ */
+
+/**
+ * @typedef WebGLBindGroupLayoutEntry
+ * @property {number} binding
+ * @property {number} visibility
+ * @property {WebGLBufferBindingLayout} [buffer]
+ * @property {WebGLSamplerBindingLayout} [sampler]
+ * @property {WebGLTextureBindingLayout} [texture]
+ */
+
+/**
+ * @typedef WebGLBufferBindingLayout
+ * @property {"uniform"} [type]
+ * @property {boolean} [hasDynamicOffset]
+ * @property {number} [minBindingSize]
+ */
+
+/**
+ * @typedef WebGLSamplerBindingLayout
+ * @property {"filtering" | "non-filtering" | "comparison"} [type]
+ */
+
+/**
+ * @typedef WebGLTextureBindingLayout
+ * @property {"float" | "unfilterable-float" | "depth" | "sint" | "uint"} [sampleType]
+ * @property {"1d" | "2d" | "2d-array" | "cube" | "cube-array" | "3d"} [viewDimension]
+ * @property {boolean} [multisampled]
+ */
+
+/**
+ * @typedef WebGLBindGroupDescriptor
+ * @property {string} [label]
+ * @property {import("./bindgroup.js").WebGLBindGroupLayout} layout
+ * @property {WebGLBindGroupEntry[]} entries
+ */
+
+/**
+ * @typedef WebGLBindGroupEntry
+ * @property {number} binding
+ * @property {any} resource
+ */
+
+/**
+ * @typedef WebGLBufferDescriptor
+ * @property {number} size
+ * @property {BufferUsage} usage
+ * @property {BufferType} type
+ */
+
+/**
+ * @typedef WebGLTextureDescriptor
+ * @property {TextureType} type
+ * @property {TextureFormat} format
+ * @property {number} width
+ * @property {number} height
+ * @property {number} [depth = 1]
+ * @property {number} [mipmapCount = 1]
+ */
+
+/**
+ * @typedef WebGLWriteTextureDescriptor
+ * @property {GPUTexture} texture
+ * @property {ArrayBufferLike} data
+ * @property {number} [mipmapLevel]
+ * @property {Vector3} [offset]
+ * @property {Vector3} [size]
+ */
+
+/**
+ * @typedef WebGLRenderPipelineDescriptor
+ * @property {Shader} vertex
+ * @property {{ source: Shader, targets:RenderTargetDescriptor[]}} [fragment]
+ * @property {MeshVertexLayout} vertexLayout
+ * @property {PrimitiveTopology} topology
+ * @property {CullFace} [cullFace]
+ * @property {boolean} [depthWrite]
+ * @property {CompareFunction} [depthCompare]
+ * @property {FrontFaceDirection} [frontFace]
+ */
+
+/**
+ * @typedef RenderTargetDescriptor
+ * @property {TextureFormat} format
+ * @property {BlendDescriptor} [blend]
+ */
+
+/**
+ * @typedef BlendDescriptor
+ * @property {BlendParams} color
+ * @property {BlendParams} alpha
+ */
+export default {}

package/src/core/webgl/index.js

@@ -0,0 +1,5 @@
+export * from './descriptors.js'
+export * from './bindgroup.js'
+export * from './renderpipeline.js'
+export * from './renderpassencoder.js'
+export * from './webglrenderdevice.js'