chorama 0.0.0

package/examples/material/cullface.js

@@ -0,0 +1,111 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  Quaternion,
+  CullFace,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  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 mesh = new PlaneMeshBuilder().build()
+
+/**@type {[BasicMaterial,BasicMaterial,BasicMaterial,BasicMaterial]} */
+const materials = [
+  new BasicMaterial({
+    mainTexture: texture
+  }),
+  new BasicMaterial({
+    mainTexture: texture
+  }),
+  new BasicMaterial({
+    mainTexture: texture
+  }),
+  new BasicMaterial({
+    mainTexture: texture
+  })
+]
+
+materials[0].cullFace = CullFace.None
+materials[1].cullFace = CullFace.Front
+materials[2].cullFace = CullFace.Back
+materials[3].cullFace = CullFace.FrontAndBack
+
+//create objects
+const objects = materials.map(material => new MeshMaterial3D(mesh, 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
+}
+
+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()
+  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/material/materials.js

@@ -0,0 +1,126 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  LambertMaterial,
+  PhongMaterial,
+  Quaternion,
+  DirectionalLight,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CuboidMeshBuilder,
+  UVSphereMeshBuilder,
+  MeshMaterialPlugin,
+  NormalMaterial,
+  AmbientLight,
+  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)
+
+// lights
+const ambientLight = new AmbientLight()
+const directionalLight = new DirectionalLight()
+
+directionalLight.transform.orientation
+  .rotateX(-Math.PI / 4)
+  .rotateZ(-Math.PI / 4)
+ambientLight.intensity = 0.15
+
+const textureLoader = new TextureLoader()
+const texture = textureLoader.load({
+  paths: ["/images/uv.jpg"],
+  textureSettings: {
+    flipY: true
+  }
+})
+const mesh1 = new CuboidMeshBuilder().build()
+const mesh2 = new UVSphereMeshBuilder().build()
+const materials = [
+  new BasicMaterial({
+    mainTexture: texture
+  }),
+  new NormalMaterial(),
+  new LambertMaterial({
+    mainTexture: texture
+  }),
+  new PhongMaterial({
+    mainTexture: texture,
+    specularShininess: 32,
+    specularStrength: 0.5
+  })
+]
+
+//create objects
+const objects = materials.map(material => new MeshMaterial3D(mesh1, material))
+  .concat(materials.map(material => new MeshMaterial3D(mesh2, 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 = materials.length
+
+  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)
+updateView()
+addEventListener("resize", updateView)
+requestAnimationFrame(update)
+
+function update() {
+
+  stats.begin()
+  objects.forEach(object => object.transform.orientation.multiply(rotation))
+  renderer.render([...objects, ambientLight, directionalLight, 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/material/standard/basic.js

@@ -0,0 +1,164 @@
+import { GUI } from "dat.gui"
+import { addRenderGraphGuiAddon } from "@examples/rendergraph_gui"
+import {
+  MeshMaterial3D,
+  DirectionalLight,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CuboidMeshBuilder,
+  MeshMaterialPlugin,
+  StandardMaterial,
+  UVSphereMeshBuilder,
+  OrbitCameraControls,
+  SkyBox,
+  TextureType,
+  LightPlugin,
+  AmbientLight,
+  CanvasTarget,
+  SkyboxPlugin,
+  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 LightPlugin(),
+    new SkyboxPlugin(),
+    new MeshMaterialPlugin(),
+    new CameraPlugin()
+  ]
+})
+const camera = new Camera(renderTarget)
+const cameraControls = new OrbitCameraControls(camera, canvas)
+
+// lights
+const ambientLight = new AmbientLight()
+const directionalLight = new DirectionalLight()
+
+directionalLight.transform.orientation
+  .rotateX(-Math.PI / 4)
+  .rotateZ(-Math.PI / 4)
+directionalLight.intensity = 10
+ambientLight.intensity = 0.3
+
+const textureLoader = new TextureLoader()
+const texture = textureLoader.load({
+  paths: ["/images/uv.jpg"],
+  textureSettings: {
+    flipY: true
+  }
+})
+const day = 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.TextureCubeMap,
+})
+
+const material = new StandardMaterial({
+  mainTexture: texture
+})
+const object1 = new MeshMaterial3D(new CuboidMeshBuilder().build(), material)
+const object2 = new MeshMaterial3D(new UVSphereMeshBuilder().build(), material)
+const skyBox = new SkyBox({
+  day
+})
+
+object1.transform.position.x = -1
+object2.transform.position.x = 1
+skyBox.transform.orientation.rotateY(Math.PI)
+
+//set up the camera
+cameraControls.distance = 2.5
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 75
+  camera.projection.aspect = innerWidth / innerHeight
+}
+
+document.body.append(canvas)
+updateView()
+addEventListener("resize", updateView)
+requestAnimationFrame(update)
+
+function update() {
+  object1.transform.orientation
+    .rotateX(Math.PI / 1000)
+    .rotateY(Math.PI / 1000)
+  object2.transform.orientation
+    .rotateX(Math.PI / 1000)
+    .rotateY(Math.PI / 1000)
+  renderer.render([object1, object2, skyBox, ambientLight, directionalLight, camera], renderDevice)
+  cameraControls.update()
+
+  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 = {
+  dummy: {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 0
+  }
+}
+const controls = new GUI()
+const buildOptionsFolder = controls.addFolder("Settings")
+
+buildOptionsFolder
+  .addColor(settings, 'dummy')
+  .name('Base Color')
+  .onChange((value) => {
+    material.color.set(
+      value.r / 255,
+      value.g / 255,
+      value.b / 255
+    )
+  })
+buildOptionsFolder
+  .add(material, 'metallic', 0, 1)
+  .name("Metallic")
+buildOptionsFolder
+  .add(material, 'roughness', 0, 1)
+  .name("Roughness")
+buildOptionsFolder
+  .add(material, 'emissiveIntensity', 0, 1)
+  .name("Emissive Intensity")
+buildOptionsFolder
+  .addColor(settings, 'dummy')
+  .name('Emissive Color')
+  .onChange((value) => {
+    material.emissiveColor.set(
+      value.r / 255,
+      value.g / 255,
+      value.b / 255
+    )
+  })
+buildOptionsFolder.open()
+addRenderGraphGuiAddon({
+  gui: controls,
+  renderer
+})

package/examples/mesh/circle.js

@@ -0,0 +1,117 @@
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CullFace,
+  WireframeBuilder,
+  OrbitCameraControls,
+  Circle3DMeshBuilder,
+  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 Circle3DMeshBuilder()
+
+//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, '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, 'segments', 1, 100, 1)
+  .name("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
+})

package/examples/mesh/cuboid.js

@@ -0,0 +1,151 @@
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CullFace,
+  WireframeBuilder,
+  OrbitCameraControls,
+  CuboidMeshBuilder,
+  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 CuboidMeshBuilder()
+
+//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("Plane Width")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'height', 0, 4)
+  .name("Plane Height")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(meshBuilder, 'depth', 0, 4)
+  .name("Depth")
+  .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(meshBuilder, 'depthSegments', 1, 100, 1)
+  .name("Segments Depth")
+  .onFinishChange(buildMesh)
+buildOptionsFolder
+  .add(settings, 'wireframe')
+  .name("Wireframe")
+  .onChange(buildMesh)
+buildOptionsFolder.open()
+
+const facesFolder = buildOptionsFolder.addFolder("Open Faces")
+facesFolder
+  .add(meshBuilder.openFaces, 'front')
+  .name("Front")
+  .onChange(buildMesh)
+facesFolder
+  .add(meshBuilder.openFaces, 'back')
+  .name("Back")
+  .onChange(buildMesh)
+facesFolder
+  .add(meshBuilder.openFaces, 'left')
+  .name("Left")
+  .onChange(buildMesh)
+facesFolder
+  .add(meshBuilder.openFaces, 'right')
+  .name("Right")
+  .onChange(buildMesh)
+facesFolder
+  .add(meshBuilder.openFaces, 'top')
+  .name("Top")
+  .onChange(buildMesh)
+facesFolder
+  .add(meshBuilder.openFaces, 'bottom')
+  .name("Bottom")
+  .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
+})