chorama 0.0.0

package/examples/texture/arrays.js

@@ -0,0 +1,156 @@
+import { GUI } from 'dat.gui';
+import { addRenderGraphGuiAddon } from "@examples/rendergraph_gui"
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  PlaneMeshBuilder,
+  MeshMaterialPlugin,
+  Material,
+  TextureType,
+  Texture,
+  basicVertex,
+  Sampler,
+  CanvasTarget,
+  CameraPlugin
+} from 'chorama';
+
+// Material to view the texture array
+class TextureArrayMaterial extends Material {
+  /**
+   * @param {Texture} image
+   */
+  constructor(image){
+    super()
+    this.image = image
+    this.layer  = 0
+  }
+
+  /**
+   * @override
+   */
+  vertex(){
+    return basicVertex
+  }
+
+  /**
+   * @override
+   */
+  fragment(){
+    return `
+    precision mediump float;
+    precision mediump sampler2DArray;
+
+    in vec2 v_uv;
+
+    uniform MaterialBlock {
+      uint layer;
+    };
+    uniform sampler2DArray color_image;
+
+    out vec4 fragment_color;
+
+    void main(){
+      vec4 sample_color = texture(color_image, vec3(v_uv, layer));
+      fragment_color = vec4(sample_color.rgb, 1.0);
+    }
+    `
+  }
+
+  /**
+   * @override
+   */
+  getData(){
+    return new Uint32Array([this.layer]).buffer
+  }
+
+  /**
+   * @override
+   * @returns {[string, number, Texture | undefined, Sampler | undefined][]}
+   */
+  getTextures(){
+    return [
+      ['color_image',0,this.image, undefined]
+    ]
+  }
+}
+// performance monitor
+const stats = new Stats()
+stats.showPanel(1)
+document.body.append(stats.dom)
+stats.dom.removeAttribute('style')
+stats.dom.classList.add('performance-monitor')
+
+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 camera = new Camera(renderTarget)
+const textureLoader = new TextureLoader()
+const texture = textureLoader.load({
+  paths: [
+    "/images/skybox/miramar_right.png",
+    "/images/skybox/miramar_left.png",
+    "/images/skybox/miramar_top.png",
+    "/images/skybox/miramar_bottom.png",
+    "/images/skybox/miramar_back.png",
+    "/images/skybox/miramar_front.png",
+  ],
+  type:TextureType.Texture2DArray
+})
+
+const mesh = new PlaneMeshBuilder().build()
+const material = new TextureArrayMaterial(texture)
+
+const object1 = new MeshMaterial3D(mesh, material)
+
+camera.transform.position.z = 2
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 120
+}
+
+document.body.append(canvas)
+updateView()
+addEventListener("resize", updateView)
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  renderer.render([object1, camera], renderDevice)
+  stats.end()
+
+  requestAnimationFrame(update)
+}
+
+function updateView() {
+  canvas.style.width = innerWidth + "px"
+  canvas.style.height = innerHeight + "px"
+  canvas.width = innerWidth * devicePixelRatio
+  canvas.height = innerHeight * devicePixelRatio
+
+  if (camera.projection instanceof PerspectiveProjection) {
+    camera.projection.aspect = innerWidth / innerHeight
+  }
+}
+
+// gui controls
+const controls = new GUI()
+const optFolder = controls.addFolder('Settings')
+
+optFolder.add(material,'layer',0, 5, 1).name('Layer')
+optFolder.open()
+addRenderGraphGuiAddon({
+  gui: controls,
+  renderer
+})

package/examples/texture/textureWrap.js

@@ -0,0 +1,118 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  TextureWrap,
+  BasicMaterial,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  Sampler,
+  PlaneMeshBuilder,
+  MeshMaterialPlugin,
+  CanvasTarget,
+  CameraPlugin
+} from 'chorama';
+
+// performance monitor
+const stats = new Stats()
+stats.showPanel(1)
+document.body.append(stats.dom)
+stats.dom.removeAttribute('style')
+stats.dom.classList.add('performance-monitor')
+
+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 camera = new Camera(renderTarget)
+const textureLoader = new TextureLoader()
+const texture = textureLoader.load({
+  paths: ["/images/uv.jpg"]
+})
+const sampler1 = new Sampler({
+  wrapS: TextureWrap.Clamp,
+  wrapT: TextureWrap.Clamp
+})
+const sampler2 = new Sampler({
+  wrapS: TextureWrap.Repeat,
+  wrapT: TextureWrap.Repeat
+})
+const sampler3 = new Sampler({
+  wrapS: TextureWrap.MirrorRepeat,
+  wrapT: TextureWrap.MirrorRepeat
+})
+
+const mesh = new PlaneMeshBuilder().build()
+const buffer = mesh.attributes.get('uv')
+
+if(buffer){
+  const uvs = new Float32Array(
+    buffer.buffer,
+    buffer.byteOffset,
+    buffer.byteLength / Float32Array.BYTES_PER_ELEMENT
+  )
+
+  for (let i in uvs) {
+    // SAFETY: It is a number
+    uvs[i] = /**@type {number}*/(uvs[i]) * 2
+  }
+}
+
+const material1 = new BasicMaterial({
+  mainTexture: texture,
+  mainSampler: sampler1
+})
+const material2 = new BasicMaterial({
+  mainTexture: texture,
+  mainSampler: sampler2
+})
+const material3 = new BasicMaterial({
+  mainTexture: texture,
+  mainSampler: sampler3
+})
+
+const object1 = new MeshMaterial3D(mesh, material1)
+const object2 = new MeshMaterial3D(mesh, material2)
+const object3 = new MeshMaterial3D(mesh, material3)
+
+object1.transform.position.x = -1.2
+object2.transform.position.x = 0
+object3.transform.position.x = 1.2
+
+camera.transform.position.z = 2
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 120
+}
+
+document.body.append(canvas)
+updateView()
+addEventListener("resize", updateView)
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  renderer.render([object1, object2, object3, camera],renderDevice)
+  stats.end()
+
+  requestAnimationFrame(update)
+}
+
+function updateView() {
+  canvas.style.width = innerWidth + "px"
+  canvas.style.height = innerHeight + "px"
+  canvas.width = innerWidth * devicePixelRatio
+  canvas.height = innerHeight * devicePixelRatio
+
+  if (camera.projection instanceof PerspectiveProjection) {
+    camera.projection.aspect = innerWidth / innerHeight
+  }
+}

package/examples/transform/propagation.js

@@ -0,0 +1,92 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  CuboidMeshBuilder,
+  Quaternion,
+  WebGLRenderer,
+  TextureLoader,
+  BasicMaterial,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  MeshMaterialPlugin,
+  LightPlugin,
+  CanvasTarget,
+  CameraPlugin
+} from 'chorama';
+
+// performance monitor
+const stats = new Stats()
+stats.showPanel(1)
+document.body.append(stats.dom)
+stats.dom.removeAttribute('style')
+stats.dom.classList.add('performance-monitor')
+
+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 LightPlugin(),
+    new MeshMaterialPlugin(),
+  ]
+})
+const camera = new Camera(renderTarget)
+
+const textureLoader = new TextureLoader()
+const texture = textureLoader.load({
+  paths: ["/images/uv.jpg"],
+  textureSettings:{
+    flipY:true
+  }
+})
+const meshBuilder = new CuboidMeshBuilder()
+meshBuilder.width = 0.5 
+meshBuilder.height = 0.5 
+meshBuilder.depth = 0.5
+
+const mesh = meshBuilder.build()
+const material = new BasicMaterial({
+  mainTexture: texture
+})
+const parent = new MeshMaterial3D(mesh, material)
+const child = new MeshMaterial3D(mesh, material)
+
+child.transform.position.x = 1
+camera.transform.position.z = 2
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 120
+  camera.projection.aspect = innerWidth / innerHeight
+}
+parent.add(child)
+
+const rotation = Quaternion.fromEuler(Math.PI / 1000, Math.PI / 1000, 0)
+
+document.body.append(canvas)
+updateView()
+addEventListener("resize", updateView)
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  parent.transform.orientation.multiply(rotation)
+
+  renderer.render([parent, camera],renderDevice)
+  stats.end()
+
+  requestAnimationFrame(update)
+}
+
+function updateView() {
+  canvas.style.width = innerWidth + "px"
+  canvas.style.height = innerHeight + "px"
+  canvas.width = innerWidth * devicePixelRatio
+  canvas.height = innerHeight * devicePixelRatio
+
+  if (camera.projection instanceof PerspectiveProjection) {
+    camera.projection.aspect = innerWidth / innerHeight
+  }
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "chorama",
+  "version": "0.0.0",
+  "description": "A rendering library",
+  "keywords": [
+    "rendering",
+    "3D",
+    "draw",
+    "game"
+  ],
+  "homepage": "https://github.com/waynemwashuma/chorama#readme",
+  "bugs": {
+    "url": "https://github.com/waynemwashuma/chorama/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/waynemwashuma/chorama.git"
+  },
+  "license": "MIT",
+  "author": "Wayne Mwashuma",
+  "type": "module",
+  "main": "index.js",
+  "directories": {
+    "example": "examples"
+  },
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "astro dev",
+    "test": "node test",
+    "tsc": "tsc -b tsconfig.json",
+    "build-website": "npm run build-src && astro build && node scripts/stage-chorama.mjs",
+    "build-src": "rollup --config rollup.config.js",
+    "build": "npm run build-website"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/dat.gui": "^0.7.13",
+    "@types/node": "^25.3.3",
+    "@types/stats.js": "^0.17.4",
+    "astro": "^5.18.0",
+    "remark-gfm": "^4.0.1",
+    "remark-github-blockquote-alert": "^2.0.1",
+    "rollup": "^4.52.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.12"
+  },
+  "dependencies": {
+    "dat.gui": "^0.7.9",
+    "hisabati": "^0.1.0",
+    "marangi": "^0.1.0",
+    "stats.js": "^0.17.0",
+    "vifaa": "file:../vifaa"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,66 @@
+import { readFileSync } from "fs"
+import { resolve } from "path"
+import { cwd } from "process"
+import nodeResolve from "@rollup/plugin-node-resolve"
+
+const pkg = JSON.parse(readFileSync(resolve(cwd(), "./package.json")).toString())
+
+const input = "src/index.js"
+const created = `2023-${new Date().getFullYear()}`
+const name = pkg.name.toUpperCase()
+  .replace("@", "")
+  .replaceAll("/", "_")
+  .replaceAll("-", "_")
+const banner = `/*
+ * @author ${pkg.author}
+ * @copyright  ${created} ${pkg.author}
+ * {@link ${pkg.repository.url}}
+ *
+ * @license ${pkg.license}
+ * @version ${pkg.version}
+ */`
+
+function glsl() {
+  return {
+    name: "glsl",
+    load(id) {
+      if (!id.endsWith(".glsl")) {
+        return null
+      }
+      return `export default ${JSON.stringify(readFileSync(id, "utf8"))}`
+    }
+  }
+}
+
+const plugins = [
+  glsl(),
+  nodeResolve()
+]
+export default [{
+
+  // UMD
+  input,
+  plugins,
+  output: {
+    file: "dist/index.umd.js",
+    format: "umd",
+    name,
+    esModule: false,
+    exports: "named",
+    sourcemap: true,
+    banner
+  }
+},
+{
+
+  // ESM
+  input,
+  plugins,
+  output: {
+    file: "dist/index.module.js",
+    format: "esm",
+    exports: "named",
+    sourcemap: true,
+    banner
+  },
+}]

package/scripts/stage-chorama.mjs

@@ -0,0 +1,29 @@
+import { cpSync, existsSync, mkdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const sourceModule = resolve('dist/index.module.js');
+const sourceMap = resolve('dist/index.module.js.map');
+const targetDir = resolve('dist/website/vendor/chorama');
+const targetModule = resolve(targetDir, 'index.module.js');
+const targetMap = resolve(targetDir, 'index.module.js.map');
+const sourceAddonsDir = resolve('examples/addons');
+const targetAddonsDir = resolve('dist/website/examples/addons');
+
+if (!existsSync(sourceModule)) {
+  console.error('Missing dist/index.module.js. Run "npm run build-src" first.');
+  process.exit(1);
+}
+
+mkdirSync(targetDir, { recursive: true });
+cpSync(sourceModule, targetModule);
+
+if (existsSync(sourceMap)) {
+  cpSync(sourceMap, targetMap);
+}
+
+if (existsSync(sourceAddonsDir)) {
+  mkdirSync(targetAddonsDir, { recursive: true });
+  cpSync(sourceAddonsDir, targetAddonsDir, { recursive: true });
+}
+
+console.log('Staged chorama module and example addons into dist/website/.');