chorama 0.0.0

package/examples/mesh/cylinder.js

@@ -0,0 +1,139 @@
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CullFace,
+  WireframeBuilder,
+  OrbitCameraControls,
+  CylinderMeshBuilder,
+  MeshMaterialPlugin,
+  CanvasTarget,
+  CameraPlugin
+} from "chorama"
+import { GUI } from "dat.gui"
+import { addRenderGraphGuiAddon } from "@examples/rendergraph_gui"
+
+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 cameraControls = new OrbitCameraControls(camera, canvas)
+
+const textureLoader = new TextureLoader()
+const texture = textureLoader.load({
+  paths: ["/images/uv.jpg"],
+  textureSettings: {
+    flipY: true
+  }
+})
+const meshBuilder = new CylinderMeshBuilder()
+
+// create objects
+const object = new MeshMaterial3D(meshBuilder.build(), new BasicMaterial({
+  mainTexture: texture
+}))
+object.material.cullFace = CullFace.None
+
+//set up the camera
+camera.transform.position.z = 5
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 75
+  camera.projection.aspect = innerWidth / innerHeight
+}
+
+document.body.append(canvas)
+addEventListener("resize", updateView)
+updateView()
+requestAnimationFrame(update)
+
+function update() {
+  cameraControls.update()
+  renderer.render([object, camera], renderDevice)
+  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 settings = {
+  wireframe: false
+}
+const controls = new GUI()
+const buildOptionsFolder = controls.addFolder("Settings")
+buildOptionsFolder
+  .add(meshBuilder, 'radiusTop', 0, 2)
+  .name("Top Radius")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'radiusBottom', 0, 2)
+  .name("Bottom Radius")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'height', 0, 4)
+  .name("Height")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'arcStart', 0, Math.PI * 2)
+  .name("Arc Start")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'arcLength', 0, Math.PI * 2)
+  .name("Arc Length")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'radialSegments', 3, 100, 1)
+  .name("Radial Segments")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'heightSegments', 1, 100, 1)
+  .name("Height Segments")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(settings, 'wireframe')
+  .name("Wireframe")
+  .onChange(buildMesh)
+buildOptionsFolder.open()
+
+const facesFolder = buildOptionsFolder.addFolder("Open Ends")
+facesFolder
+  .add(meshBuilder.openEnds, 'top')
+  .name("Front")
+  .onChange(buildMesh)
+facesFolder
+  .add(meshBuilder.openEnds, 'bottom')
+  .name("Back")
+  .onChange(buildMesh)
+
+function buildMesh() {
+  const mesh = meshBuilder.build()
+  if (settings.wireframe) {
+    object.mesh = new WireframeBuilder(mesh).build()
+  } else {
+    object.mesh = mesh
+  }
+}
+addRenderGraphGuiAddon({
+  gui: controls,
+  renderer
+})

package/examples/mesh/geometries.js

@@ -0,0 +1,108 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  Quaternion,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  PlaneMeshBuilder,
+  Circle3DMeshBuilder,
+  CuboidMeshBuilder,
+  UVSphereMeshBuilder,
+  CylinderMeshBuilder,
+  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 renderDevice = new WebGLRenderDevice(canvas,{
+  depth:true
+})
+const renderTarget = new CanvasTarget(canvas)
+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"],
+  textureSettings:{
+    flipY:true
+  }
+})
+const material = new BasicMaterial({
+  mainTexture: texture
+})
+
+const meshes = [
+  new PlaneMeshBuilder().build(),
+  new Circle3DMeshBuilder().build(),
+  new CuboidMeshBuilder(). build(),
+  new UVSphereMeshBuilder().build(),
+  new CylinderMeshBuilder().build(),
+]
+
+//create objects
+const objects = meshes.map(mesh => new MeshMaterial3D(mesh, material))
+
+//transform objects to thier positions
+objects.forEach((object, i) => {
+  const stepX = 1.6
+  const stepY = 2
+  const startX = -1.6
+  const startY = 1.6
+  const number = 3
+
+  object.transform.position.x = startX + stepX * (i % number)
+  object.transform.position.y = startY - Math.floor(i / number) * stepY
+})
+
+//set up the camera
+camera.transform.position.z = 5
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 120
+  camera.projection.aspect = innerWidth / innerHeight
+}
+
+
+const rotation = Quaternion.fromEuler(Math.PI / 1000, Math.PI / 1000, 0)
+
+document.body.append(canvas)
+addEventListener("resize", updateView)
+updateView()
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  objects.forEach(object => object.transform.orientation.multiply(rotation))
+  renderer.render([...objects, 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/mesh/meshTopology.js

@@ -0,0 +1,103 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  PrimitiveTopology,
+  WebGLRenderer,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  PlaneMeshBuilder,
+  Mesh,
+  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)
+
+document.body.append(canvas)
+updateView()
+
+const meshBuilder = new PlaneMeshBuilder()
+const material = new BasicMaterial()
+/**@type {[Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh]} */
+const meshes = [
+  meshBuilder.build(),
+  meshBuilder.build(),
+  meshBuilder.build(),
+  meshBuilder.build(),
+  meshBuilder.build(),
+  meshBuilder.build(),
+  meshBuilder.build()
+]
+meshes[0].topology = PrimitiveTopology.Points
+meshes[1].topology = PrimitiveTopology.Lines
+meshes[2].topology = PrimitiveTopology.LineLoop
+meshes[3].topology = PrimitiveTopology.LineStrip
+meshes[4].topology = PrimitiveTopology.Triangles
+meshes[5].topology = PrimitiveTopology.TriangleStrip
+meshes[6].topology = PrimitiveTopology.TriangleFan
+
+//create objects
+const objects = meshes.map(object => new MeshMaterial3D(object, material))
+
+//transform objects to their positions
+objects.forEach((object, i) => {
+  const stepX = 1.6
+  const stepY = 2
+  const startX = -1.6
+  const startY = 1.6
+  const number = 3
+
+  object.transform.position.x = startX + stepX * (i % number)
+  object.transform.position.y = startY - Math.floor(i / number) * stepY
+})
+
+//set up the camera
+camera.transform.position.z = 5
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 120
+  camera.projection.aspect = innerWidth / innerHeight
+}
+
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  renderer.render([...objects, camera],renderDevice)
+  stats.end()
+  
+  requestAnimationFrame(update)
+}
+
+addEventListener("resize", updateView)
+
+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/mesh/plane.js

@@ -0,0 +1,117 @@
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CullFace,
+  PlaneMeshBuilder,
+  WireframeBuilder,
+  OrbitCameraControls,
+  MeshMaterialPlugin,
+  CanvasTarget,
+  CameraPlugin
+} from "chorama"
+import { GUI } from "dat.gui"
+import { addRenderGraphGuiAddon } from "@examples/rendergraph_gui"
+
+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 cameraControls = new OrbitCameraControls(camera, canvas)
+
+const textureLoader = new TextureLoader()
+const texture = textureLoader.load({
+  paths: ["/images/uv.jpg"],
+  textureSettings: {
+    flipY: true
+  }
+})
+const meshBuilder = new PlaneMeshBuilder()
+
+//create objects
+const object = new MeshMaterial3D(meshBuilder.build(), new BasicMaterial({
+  mainTexture: texture
+}))
+object.material.cullFace = CullFace.None
+
+//set up the camera
+camera.transform.position.z = 5
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 75
+  camera.projection.aspect = innerWidth / innerHeight
+}
+
+document.body.append(canvas)
+addEventListener("resize", updateView)
+updateView()
+requestAnimationFrame(update)
+
+function update() {
+  cameraControls.update()
+  renderer.render([object, camera], renderDevice)
+  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 settings = {
+  wireframe: false
+}
+const controls = new GUI()
+const buildOptionsFolder = controls.addFolder("Settings")
+buildOptionsFolder
+  .add(meshBuilder, 'width', 0, 4)
+  .name("Width")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'height', 0, 4)
+  .name("Height")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'widthSegments', 1, 100, 1)
+  .name("Segments Width")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'heightSegments', 1, 100, 1)
+  .name("Segments Height")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(settings, 'wireframe')
+  .name("Wireframe")
+  .onChange(buildMesh)
+buildOptionsFolder.open()
+
+function buildMesh() {
+  const mesh = meshBuilder.build()
+  if(settings.wireframe){
+    object.mesh = new WireframeBuilder(mesh).build()
+  } else {
+    object.mesh = mesh
+  }
+}
+addRenderGraphGuiAddon({
+  gui: controls,
+  renderer
+})

package/examples/mesh/skinning.js

@@ -0,0 +1,136 @@
+import Stats from "stats.js";
+import {
+  WebGLRenderer,
+  PerspectiveProjection,
+  GLTFLoader,
+  Camera,
+  Quaternion,
+  SkeletonHelper,
+  MeshMaterial3D,
+  WebGLRenderDevice,
+  Bone3D,
+  Object3D,
+  MeshMaterialPlugin,
+  SkeletonHelperPlugin,
+  BasicMaterial,
+  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')
+
+/**@type {Object3D[]} */
+const objects = []
+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(),
+    new SkeletonHelperPlugin()
+  ]
+})
+const camera = new Camera(renderTarget)
+
+const loader = new GLTFLoader()
+const material = new BasicMaterial()
+loader.asyncLoad({
+  paths: ["/models/gltf/pirate_girl/index.gltf"]
+}).then((model) => {
+  const entityMap = new Map()
+  const clone = model.clone(entityMap)
+
+  // NOTE: Maybe make this internal to the loader?
+  clone.traverseDFS((object) => {
+    if (object instanceof MeshMaterial3D) {
+      object.material = material
+      if(object.skin){
+        object.skin.bones = object.skin.bones.map((bone) => entityMap.get(bone))
+      }
+    }
+    return true
+  })
+  objects.push(clone)
+  clone.traverseDFS((item) => {
+    if (item instanceof MeshMaterial3D && item.skin) {
+      const root = item.skin.bones[0]
+      if (root instanceof Bone3D) {
+        const helper = new SkeletonHelper(root, item)
+
+        objects.push(helper)
+        return false
+      }
+    }
+    return true
+  })
+})
+
+camera.transform.position.z = 5
+camera.transform.position.y = 2
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 120
+  camera.projection.aspect = innerWidth / innerHeight
+}
+const rotation = Quaternion.fromEuler(0, Math.PI / 1000, 0)
+
+document.body.append(canvas)
+updateView()
+addEventListener("resize", updateView)
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  if (objects[0]) {
+    objects[0].traverseDFS((mesh)=>{
+      if(mesh instanceof MeshMaterial3D){
+        mesh.transform.orientation.multiply(rotation)
+      }
+      return true
+    })
+
+    objects[0].traverseDFS((bone)=>{
+      if(bone instanceof Bone3D){
+        if(
+          bone.name === 'metarig.001_thigh.L' ||
+          bone.name === 'metarig.001_shin.L'
+        ){
+          bone.transform.orientation.multiply(Quaternion.fromEuler(Math.PI / 120,0, 0))
+        }
+
+        if(
+          bone.name === 'metarig.001_thigh.R' ||
+          bone.name === 'metarig.001_shin.R'
+        ){
+          bone.transform.orientation.multiply(Quaternion.fromEuler(-Math.PI / 120,0, 0))
+        }
+      }
+      return true
+    })
+  }
+
+  if (objects.length > 0) {
+    renderer.render([...objects, 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/mesh/uvsphere.js

@@ -0,0 +1,113 @@
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CullFace,
+  WireframeBuilder,
+  OrbitCameraControls,
+  UVSphereMeshBuilder,
+  MeshMaterialPlugin,
+  CanvasTarget,
+  CameraPlugin
+} from "chorama"
+import { GUI } from "dat.gui"
+import { addRenderGraphGuiAddon } from "@examples/rendergraph_gui"
+
+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 cameraControls = new OrbitCameraControls(camera, canvas)
+
+const textureLoader = new TextureLoader()
+const texture = textureLoader.load({
+  paths: ["/images/uv.jpg"],
+  textureSettings: {
+    flipY: true
+  }
+})
+const meshBuilder = new UVSphereMeshBuilder()
+
+//create objects
+const object = new MeshMaterial3D(meshBuilder.build(), new BasicMaterial({
+  mainTexture: texture
+}))
+object.material.cullFace = CullFace.None
+
+//set up the camera
+camera.transform.position.z = 5
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 75
+  camera.projection.aspect = innerWidth / innerHeight
+}
+
+document.body.append(canvas)
+addEventListener("resize", updateView)
+updateView()
+requestAnimationFrame(update)
+
+function update() {
+  cameraControls.update()
+  renderer.render([object, camera], renderDevice )
+  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 settings = {
+  wireframe: false
+}
+const controls = new GUI()
+const buildOptionsFolder = controls.addFolder("Settings")
+buildOptionsFolder
+  .add(meshBuilder, 'radius', 0, 2)
+  .name("Radius")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'latitudeSegments', 3, 100, 1)
+  .name("Latitude Segments")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'longitudeSegments', 3, 100, 1)
+  .name("Longitude Segments")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(settings, 'wireframe')
+  .name("Wireframe")
+  .onChange(buildMesh)
+buildOptionsFolder.open()
+
+function buildMesh() {
+  const mesh = meshBuilder.build()
+  if(settings.wireframe){
+    object.mesh = new WireframeBuilder(mesh).build()
+  } else {
+    object.mesh = mesh
+  }
+}
+addRenderGraphGuiAddon({
+  gui: controls,
+  renderer
+})