chorama 0.0.0

package/examples/other/rotatingCube.js

@@ -0,0 +1,93 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  LambertMaterial,
+  Quaternion,
+  DirectionalLight,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CuboidMeshBuilder,
+  MeshMaterialPlugin,
+  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 renderDevice = new WebGLRenderDevice(canvas, {
+  depth: true
+})
+const renderTarget = new CanvasTarget(canvas)
+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 box = new MeshMaterial3D(
+  new CuboidMeshBuilder().build(),
+  new LambertMaterial({
+    mainTexture: texture
+  })
+)
+camera.transform.position.z = 2
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 120
+}
+
+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()
+  box.transform.orientation.multiply(rotation)
+  renderer.render([box, 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/other/rotatingSphere.js

@@ -0,0 +1,96 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  LambertMaterial,
+  Quaternion,
+  DirectionalLight,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  UVSphereMeshBuilder,
+  AmbientLight,
+  LightPlugin,
+  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 LightPlugin(),
+    new MeshMaterialPlugin(),
+  ]
+})
+const camera = new Camera(renderTarget)
+
+const textureLoader = new TextureLoader()
+const texture = textureLoader.load({
+  paths: ["/images/uv.jpg"],
+  textureSettings:{
+    flipY:true
+  }
+})
+
+// lights
+const ambientLight = new AmbientLight()
+const directionalLight = new DirectionalLight()
+
+directionalLight.transform.orientation
+  .rotateX(-Math.PI / 4)
+  .rotateZ(-Math.PI / 4)
+ambientLight.intensity = 0.15
+
+camera.transform.position.z = 2
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 120
+  camera.projection.aspect = innerWidth / innerHeight
+}
+
+const sphere = new MeshMaterial3D(
+  new UVSphereMeshBuilder().build(),
+  new LambertMaterial({
+    mainTexture: texture,
+  })
+)
+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()
+  sphere.transform.orientation.multiply(rotation)
+  renderer.render([sphere, directionalLight, ambientLight, 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/rendertarget/basic_canvas.js

@@ -0,0 +1,130 @@
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  Quaternion,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CanvasTarget,
+  ViewRectangle,
+  TextureType,
+  SkyBox,
+  CuboidMeshBuilder,
+  MeshMaterialPlugin,
+  SkyboxPlugin,
+  CameraPlugin
+} from "chorama"
+import { GUI } from "dat.gui";
+import { addRenderGraphGuiAddon } from "@examples/rendergraph_gui";
+
+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 SkyboxPlugin(),
+    new MeshMaterialPlugin(),
+  ]
+})
+const camera = new Camera(renderTarget)
+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 BasicMaterial({
+  mainTexture: texture
+})
+
+//create objects
+const object = new MeshMaterial3D(new CuboidMeshBuilder().build(), material)
+const skyBox = new SkyBox({
+  day,
+})
+
+//set up the camera
+camera.target = renderTarget
+camera.transform.position.z = 1.5
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 180 * 120
+  camera.projection.aspect = innerWidth / innerHeight
+}
+
+document.body.append(canvas)
+updateView()
+addEventListener('resize',updateView)
+requestAnimationFrame(update)
+
+function update() {
+  object.transform.orientation.multiply(
+    Quaternion.fromEuler(Math.PI / 1000, Math.PI / 1000, 0)
+  )
+
+  renderer.render([skyBox, object, camera], renderDevice)
+  requestAnimationFrame(update)
+}
+
+function updateView() {
+  const fullWidth = innerWidth * devicePixelRatio
+  const fullHeight = innerWidth * devicePixelRatio
+
+  canvas.style.width = innerWidth + "px"
+  canvas.style.height = innerHeight + "px"
+  canvas.width = fullWidth
+  canvas.height = fullHeight
+  if (camera.projection instanceof PerspectiveProjection) {
+    camera.projection.aspect = innerWidth / innerHeight
+  }
+}
+
+// gui controls
+const settings = {
+  enableScissors: false
+}
+const controls = new GUI()
+const canvasopts = controls.addFolder("Canvas Render Target")
+canvasopts.add(renderTarget.viewport.offset, 'x', 0, 1).name("Viewport X")
+canvasopts.add(renderTarget.viewport.offset, 'y', 0, 1).name("Viewport Y")
+canvasopts.add(renderTarget.viewport.size, 'x', 0, 1).name("Viewport Width")
+canvasopts.add(renderTarget.viewport.size, 'y', 0, 1).name("Viewport Hieght")
+/**@type {GUI} */
+let scissorsFolder
+canvasopts.add(settings, "enableScissors").onChange((value) => {
+  if (value) {
+    renderTarget.scissor = new ViewRectangle()
+    scissorsFolder = canvasopts.addFolder('Scissors')
+    scissorsFolder.add(renderTarget.scissor.offset, 'x', 0, 1).name("Scissor X")
+    scissorsFolder.add(renderTarget.scissor.offset, 'y', 0, 1).name("Scissor Y")
+    scissorsFolder.add(renderTarget.scissor.size, 'x', 0, 1).name("Scissor Width")
+    scissorsFolder.add(renderTarget.scissor.size, 'y', 0, 1).name("Scissor Hieght")
+  } else {
+    canvasopts.removeFolder(scissorsFolder)
+    renderTarget.scissor = undefined
+  }
+})
+canvasopts.open()
+
+addRenderGraphGuiAddon({
+  gui: controls,
+  renderer,
+  position: { x: 24, y: 24 }
+})

package/examples/rendertarget/depth_texture.js

@@ -0,0 +1,130 @@
+import { GUI } from "dat.gui"
+import { addRenderGraphGuiAddon } from "@examples/rendergraph_gui"
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  Quaternion,
+  WebGLRenderer,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  TextureType,
+  Texture,
+  TextureFormat,
+  ImageRenderTarget,
+  CuboidMeshBuilder,
+  MeshMaterialPlugin,
+  PlaneMeshBuilder,
+  DepthMaterial,
+  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 canvasTarget = new CanvasTarget(canvas)
+const renderDevice = new WebGLRenderDevice(canvas,{
+  depth:true
+})
+const renderer = new WebGLRenderer({
+  plugins: [
+    new CameraPlugin(),
+    new MeshMaterialPlugin(),
+  ]
+})
+
+const depthTexture = new Texture({
+  type: TextureType.Texture2D,
+  format: TextureFormat.Depth24PlusStencil8
+})
+const renderTarget = new ImageRenderTarget({
+  width: 1024,
+  height: 1024,
+  depthTexture: depthTexture
+})
+
+const camera1 = new Camera(renderTarget)
+const camera2 = new Camera(canvasTarget)
+const mesh = new CuboidMeshBuilder().build()
+const quad = new PlaneMeshBuilder()
+const depthMaterial = new DepthMaterial({
+  depth: depthTexture
+})
+
+const object1 = new MeshMaterial3D(mesh, new BasicMaterial())
+const object2 = new MeshMaterial3D(quad.build(), depthMaterial)
+
+//set up the cameras
+camera1.far = 500
+camera1.transform.position.z = 5
+camera2.transform.position.z = 1
+
+if (
+  camera1.projection instanceof PerspectiveProjection &&
+  camera2.projection instanceof PerspectiveProjection
+) {
+  camera1.projection.fov = Math.PI / 180 * 60
+  camera2.projection.fov = Math.PI / 180 * 60
+}
+
+document.body.append(canvas)
+updateView()
+addEventListener('resize', updateView)
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  renderer.render([object1, camera1], renderDevice)
+  renderer.render([object2, camera2], renderDevice)
+
+  object1.transform.orientation.multiply(
+    Quaternion.fromEuler(Math.PI / 1000, Math.PI / 1000, 0)
+  )
+  stats.end()
+
+  requestAnimationFrame(update)
+}
+
+function updateView() {
+  const fullWidth = innerWidth * devicePixelRatio
+  const fullHeight = innerWidth * devicePixelRatio
+
+  canvas.style.width = innerWidth + "px"
+  canvas.style.height = innerHeight + "px"
+  canvas.width = fullWidth
+  canvas.height = fullHeight
+
+  if (
+    camera1.projection instanceof PerspectiveProjection &&
+    camera2.projection instanceof PerspectiveProjection
+  ) {
+    camera1.projection.aspect = fullWidth / fullHeight
+    camera2.projection.aspect = fullWidth / fullHeight
+  }
+}
+
+const controls = new GUI()
+const buildOptionsFolder = controls.addFolder("Settings")
+buildOptionsFolder
+  .add(camera1.transform.position, 'z', 1, 10)
+  .name("Position Z")
+buildOptionsFolder
+  .add(camera1, 'near', 0.1, 10)
+  .name("Camera Near")
+  .onChange((value)=>depthMaterial.near = value)
+buildOptionsFolder
+  .add(camera1, 'far', 10, 500)
+  .name("Camera Far")
+  .onChange((value)=>depthMaterial.far = value)
+buildOptionsFolder.open()
+addRenderGraphGuiAddon({
+  gui: controls,
+  renderer
+})

package/examples/rendertarget/image_target.js

@@ -0,0 +1,140 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  Quaternion,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  TextureType,
+  SkyBox,
+  Texture,
+  TextureFormat,
+  ImageRenderTarget,
+  Color,
+  CuboidMeshBuilder,
+  MeshMaterialPlugin,
+  CanvasTarget,
+  SkyboxPlugin,
+  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 canvasTarget = new CanvasTarget(canvas)
+const renderDevice = new WebGLRenderDevice(canvas,{
+  depth:true
+})
+const renderer = new WebGLRenderer({
+  plugins:[
+    new CameraPlugin(),
+    new SkyboxPlugin(),
+    new MeshMaterialPlugin(),
+  ]
+})
+
+const renderTarget = new ImageRenderTarget({
+  width:1024,
+  height:1024,
+  color:[
+    new Texture({
+      type:TextureType.Texture2D,
+      format:TextureFormat.RGBA8Unorm
+    })
+  ],
+  internalDepthStencil:TextureFormat.Depth24PlusStencil8
+})
+
+const camera1 = new Camera(renderTarget)
+const camera2 = new Camera(canvasTarget)
+
+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 mesh = new CuboidMeshBuilder().build()
+const object1 = new MeshMaterial3D(mesh, new BasicMaterial({
+  mainTexture: texture
+}))
+const object2 = new MeshMaterial3D(mesh, new BasicMaterial({
+  mainTexture: renderTarget.color[0]
+}))
+const skyBox = new SkyBox({
+  day,
+  night:day
+})
+
+//set up the cameras
+renderTarget.clearColor = Color.CYAN.clone()
+camera1.target = renderTarget
+camera1.transform.position.z = 5
+camera2.transform.position.z = 5
+
+if (
+  camera1.projection instanceof PerspectiveProjection &&
+  camera2.projection instanceof PerspectiveProjection
+) {
+  camera1.projection.fov = Math.PI / 180 * 60
+  camera2.projection.fov = Math.PI / 180 * 60
+}
+
+document.body.append(canvas)
+updateView()
+addEventListener('resize', updateView)
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  renderer.render([object1, camera1], renderDevice)
+  renderer.render([skyBox, object2, camera2], renderDevice)
+
+  object1.transform.orientation.multiply(
+    Quaternion.fromEuler(Math.PI / 1000, Math.PI / 1000, 0)
+  )
+  object2.transform.orientation.multiply(
+    Quaternion.fromEuler(Math.PI / 1000, Math.PI / 1000, 0)
+  )
+  stats.end()
+
+  requestAnimationFrame(update)
+}
+
+function updateView() {
+  const fullWidth = innerWidth * devicePixelRatio
+  const fullHeight = innerWidth * devicePixelRatio
+
+  canvas.style.width = innerWidth + "px"
+  canvas.style.height = innerHeight + "px"
+  canvas.width = fullWidth
+  canvas.height = fullHeight
+
+  if (
+    camera1.projection instanceof PerspectiveProjection &&
+    camera2.projection instanceof PerspectiveProjection
+  ) {
+    camera1.projection.aspect = fullWidth / fullHeight
+    camera2.projection.aspect = fullWidth / fullHeight
+  }
+}