chorama 0.0.0

package/examples/rendertarget/multiple_views.js

@@ -0,0 +1,158 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  Quaternion,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CanvasTarget,
+  TextureType,
+  SkyBox,
+  CuboidMeshBuilder,
+  MeshMaterialPlugin,
+  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 renderDevice = new WebGLRenderDevice(canvas,{
+  depth:true
+})
+const renderer = new WebGLRenderer({
+  plugins:[
+    new CameraPlugin(),
+    new SkyboxPlugin(),
+    new MeshMaterialPlugin(),
+  ]
+})
+
+const renderTarget1 = new CanvasTarget(canvas)
+const renderTarget2 = new CanvasTarget(canvas)
+const renderTarget3 = new CanvasTarget(canvas)
+const renderTarget4 = new CanvasTarget(canvas)
+
+const camera1 = new Camera(renderTarget1)
+const camera2 = new Camera(renderTarget2)
+const camera3 = new Camera(renderTarget3)
+const camera4 = new Camera(renderTarget4)
+
+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 object = new MeshMaterial3D(new CuboidMeshBuilder().build(), new BasicMaterial({
+  mainTexture: texture
+}))
+const skyBox = new SkyBox({
+  day,
+  night:day
+})
+// set up render target viewports
+renderTarget1.viewport.offset.set(0, 0)
+renderTarget1.viewport.size.set(0.5, 0.5)
+renderTarget2.viewport.offset.set(0.5, 0)
+renderTarget2.viewport.size.set(0.5, 0.5)
+renderTarget3.viewport.offset.set(0, 0.5)
+renderTarget3.viewport.size.set(0.5, 0.5)
+renderTarget4.viewport.offset.set(0.5, 0.5)
+renderTarget4.viewport.size.set(0.5, 0.5)
+
+//set up the cameras
+camera1.transform.position.z = 5
+camera2.transform.position.z = 5
+camera3.transform.position.z = 5
+camera4.transform.position.z = 5
+
+if (
+  camera1.projection instanceof PerspectiveProjection &&
+  camera2.projection instanceof PerspectiveProjection &&
+  camera3.projection instanceof PerspectiveProjection &&
+  camera4.projection instanceof PerspectiveProjection
+) {
+  camera1.projection.fov = Math.PI / 180 * 60
+  camera2.projection.fov = Math.PI / 180 * 60
+  camera3.projection.fov = Math.PI / 180 * 60
+  camera4.projection.fov = Math.PI / 180 * 60
+}
+
+document.body.append(canvas)
+updateView()
+addEventListener('resize', updateView)
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  object.transform.orientation.multiply(
+    Quaternion.fromEuler(Math.PI / 1000, Math.PI / 1000, 0)
+  )
+
+  renderer.render([skyBox, object, camera1], renderDevice )
+  renderer.render([skyBox, object, camera2], renderDevice )
+  renderer.render([skyBox, object, camera3], renderDevice )
+  renderer.render([skyBox, object, camera4], renderDevice )
+
+  camera1.transform.orientation.multiply(
+    Quaternion.fromEuler(Math.PI / 1000, 0, 0)
+  )
+  camera2.transform.orientation.multiply(
+    Quaternion.fromEuler(0, Math.PI / 1000, 0)
+  )
+  camera3.transform.orientation.multiply(
+    Quaternion.fromEuler(0, 0, Math.PI / 1000)
+  )
+  camera4.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
+  const halfFullWidth = fullWidth / 2
+  const halfFullHeight = fullHeight / 2
+
+  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 &&
+    camera3.projection instanceof PerspectiveProjection &&
+    camera4.projection instanceof PerspectiveProjection
+  ) {
+    camera1.projection.aspect = halfFullWidth / halfFullHeight
+    camera2.projection.aspect = halfFullWidth / halfFullHeight
+    camera3.projection.aspect = halfFullWidth / halfFullHeight
+    camera4.projection.aspect = halfFullWidth / halfFullHeight
+  }
+}

package/examples/rendertarget/render_masks.js

@@ -0,0 +1,173 @@
+import { GUI } from "dat.gui"
+import { addRenderGraphGuiAddon } from "@examples/rendergraph_gui"
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  Color,
+  Quaternion,
+  WebGLRenderer,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CanvasTarget,
+  ViewRectangle,
+  CuboidMeshBuilder,
+  PlaneMeshBuilder,
+  UVSphereMeshBuilder,
+  MeshMaterialPlugin,
+  CameraPlugin
+} from "chorama"
+
+const settings = {
+  slider: 0.5
+}
+const canvas = document.createElement('canvas')
+const renderDevice = new WebGLRenderDevice(canvas,{
+  depth:true
+})
+const renderTarget1 = new CanvasTarget(canvas)
+const renderTarget2 = new CanvasTarget(canvas)
+const renderer = new WebGLRenderer({
+  plugins:[
+    new CameraPlugin(),
+    new MeshMaterialPlugin(),
+  ]
+})
+
+const camera1 = new Camera(renderTarget1)
+const camera2 = new Camera(renderTarget2)
+
+// render mask bits
+const LEFT_VIEW = 0
+const RIGHT_VIEW = 1
+
+// create objects
+const planeBuilder = new PlaneMeshBuilder()
+planeBuilder.width = 8
+planeBuilder.height = 8
+
+const plane = new MeshMaterial3D(planeBuilder.build(), new BasicMaterial({
+  color: new Color(0.75, 0.78, 0.82)
+}))
+const box = new MeshMaterial3D(new CuboidMeshBuilder().build(), new BasicMaterial({
+  color: new Color(0.9, 0.35, 0.2)
+}))
+const sphereBuilder = new UVSphereMeshBuilder()
+sphereBuilder.radius = 0.6
+const sphere = new MeshMaterial3D(sphereBuilder.build(), new BasicMaterial({
+  color: new Color(0.2, 0.55, 0.95)
+}))
+
+plane.transform.orientation.rotateX(-Math.PI / 2)
+plane.transform.position.y = -0.5
+
+box.transform.position.x = -1.6
+box.transform.position.y = 0.5
+
+sphere.transform.position.x = 1.6
+sphere.transform.position.y = 0.15
+
+box.renderMask.clear().on(LEFT_VIEW)
+
+sphere.renderMask.clear().on(RIGHT_VIEW)
+
+camera1.renderMask.clear().on(LEFT_VIEW)
+
+camera2.renderMask.clear().on(RIGHT_VIEW)
+
+const scene = [
+  plane,
+  box,
+  sphere
+]
+
+const rotation = Quaternion.fromEuler(Math.PI / 1000, Math.PI / 1000, 0)
+
+camera1.transform.position.x = -4
+camera1.transform.position.y = 3
+camera1.transform.position.z = 6
+camera1.transform.orientation.rotateY(-Math.PI / 6)
+camera1.transform.orientation.rotateX(-Math.PI / 8)
+
+camera2.transform.position.x = 4
+camera2.transform.position.y = 3
+camera2.transform.position.z = 6
+camera2.transform.orientation.rotateY(Math.PI / 6)
+camera2.transform.orientation.rotateX(-Math.PI / 8)
+
+renderTarget1.clearColor?.set(0.92, 0.95, 1.0, 1)
+renderTarget2.clearColor?.set(0.92, 0.95, 1.0, 1)
+
+renderTarget1.viewport.size.set(1, 1)
+renderTarget2.viewport.size.set(1, 1)
+
+// set up scissors
+renderTarget1.scissor = new ViewRectangle()
+renderTarget2.scissor = new ViewRectangle()
+
+// set up the cameras
+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()
+updateRenderTargets(settings.slider)
+addEventListener('resize', updateView)
+requestAnimationFrame(update)
+
+function update() {
+  box.transform.orientation.multiply(rotation)
+  sphere.transform.orientation.multiply(rotation)
+
+  renderer.render([...scene, camera1], renderDevice)
+  renderer.render([...scene, camera2], renderDevice)
+  requestAnimationFrame(update)
+}
+
+function updateView() {
+  const fullWidth = innerWidth * devicePixelRatio
+  const fullHeight = innerHeight * devicePixelRatio
+
+  canvas.style.width = innerWidth + "px"
+  canvas.style.height = innerHeight + "px"
+  canvas.width = fullWidth
+  canvas.height = fullHeight
+
+  if (camera1.projection instanceof PerspectiveProjection) {
+    camera1.projection.aspect = fullWidth / fullHeight
+  }
+  if (camera2.projection instanceof PerspectiveProjection) {
+    camera2.projection.aspect = fullWidth / fullHeight
+  }
+
+  updateRenderTargets(settings.slider)
+}
+
+// gui controls
+const controls = new GUI()
+const screenFolder = controls.addFolder("Settings")
+const slider = screenFolder.add(settings, 'slider', 0.2, 0.8).name("Split")
+slider.onChange(updateRenderTargets)
+screenFolder.open()
+
+/**
+ * @param {number} value
+ */
+function updateRenderTargets(value) {
+  if (renderTarget1.scissor && renderTarget2.scissor) {
+    renderTarget1.scissor.offset.set(0, 0)
+    renderTarget1.scissor.size.set(value, 1)
+    renderTarget2.scissor.offset.set(value, 0)
+    renderTarget2.scissor.size.set(1 - value, 1)
+  }
+}
+
+addRenderGraphGuiAddon({
+  gui: controls,
+  renderer
+})

package/examples/rendertarget/split_screen.js

@@ -0,0 +1,123 @@
+import Stats from "stats.js";
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  Quaternion,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CanvasTarget,
+  TextureType,
+  SkyBox,
+  CuboidMeshBuilder,
+  MeshMaterialPlugin,
+  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 renderDevice = new WebGLRenderDevice(canvas,{
+  depth:true
+})
+const renderTarget1 = new CanvasTarget(canvas)
+const renderTarget2 = new CanvasTarget(canvas)
+const renderer = new WebGLRenderer({
+  plugins:[
+    new CameraPlugin(),
+    new SkyboxPlugin(),
+    new MeshMaterialPlugin(),
+  ]
+})
+
+const camera1 = new Camera(renderTarget1)
+const camera2 = new Camera(renderTarget2)
+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 render targets
+renderTarget1.viewport.offset.set(0, 0)
+renderTarget1.viewport.size.set(0.5, 1)
+renderTarget2.viewport.offset.set(0.5, 0)
+renderTarget2.viewport.size.set(0.5, 1)
+
+//set up the cameras
+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 * 90
+  camera2.projection.fov = Math.PI / 180 * 90
+}
+
+document.body.append(canvas)
+updateView()
+addEventListener('resize', updateView)
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  object.transform.orientation.multiply(
+    Quaternion.fromEuler(Math.PI / 1000, Math.PI / 1000, 0)
+  )
+
+  renderer.render([skyBox, object, camera1], renderDevice)
+  renderer.render([object, camera2], renderDevice)
+  stats.end()
+  
+  requestAnimationFrame(update)
+}
+
+function updateView() {
+  const fullWidth = innerWidth * devicePixelRatio
+  const fullHeight = innerWidth * devicePixelRatio
+  const halfFullWidth = fullWidth / 2
+
+  canvas.style.width = innerWidth + "px"
+  canvas.style.height = innerHeight + "px"
+  canvas.width = fullWidth
+  canvas.height = fullHeight
+
+  if (camera1.projection instanceof PerspectiveProjection) {
+    camera1.projection.aspect = halfFullWidth / fullHeight
+  }
+  if (camera2.projection instanceof PerspectiveProjection) {
+    camera2.projection.aspect = halfFullWidth / fullHeight
+  }
+}

package/examples/rendertarget/split_view.js

@@ -0,0 +1,137 @@
+import { GUI } from "dat.gui"
+import { addRenderGraphGuiAddon } from "@examples/rendergraph_gui"
+import {
+  MeshMaterial3D,
+  BasicMaterial,
+  Quaternion,
+  WebGLRenderer,
+  TextureLoader,
+  PerspectiveProjection,
+  Camera,
+  WebGLRenderDevice,
+  CanvasTarget,
+  TextureType,
+  SkyBox,
+  ViewRectangle,
+  CuboidMeshBuilder,
+  MeshMaterialPlugin,
+  SkyboxPlugin,
+  CameraPlugin
+} from "chorama"
+
+const settings = {
+  slider: 0
+}
+const canvas = document.createElement('canvas')
+const renderDevice = new WebGLRenderDevice(canvas,{
+  depth:true
+})
+const renderTarget1 = new CanvasTarget(canvas)
+const renderTarget2 = new CanvasTarget(canvas)
+const renderer = new WebGLRenderer({
+  plugins:[
+    new CameraPlugin(),
+    new SkyboxPlugin(),
+    new MeshMaterialPlugin(),
+  ]
+})
+
+const camera1 = new Camera(renderTarget1)
+const camera2 = new Camera(renderTarget2)
+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 scissors
+renderTarget1.scissor = new ViewRectangle()
+renderTarget2.scissor = new ViewRectangle()
+
+//set up the cameras
+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 * 90
+  camera2.projection.fov = Math.PI / 180 * 90
+}
+
+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, camera1], renderDevice)
+  renderer.render([object, camera2], 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 (camera1.projection instanceof PerspectiveProjection) {
+    camera1.projection.aspect = fullWidth / fullHeight
+  }
+  if (camera2.projection instanceof PerspectiveProjection) {
+    camera2.projection.aspect = fullWidth / fullHeight
+  }
+}
+
+// gui controls
+const controls = new GUI()
+const screenFolder = controls.addFolder("Settings")
+const slider = screenFolder.add(settings, 'slider', 0, 1).name("Slider")
+slider.onChange(updateRenderTargets)
+screenFolder.open()
+
+/**
+ * @param {number} value
+ */
+function updateRenderTargets(value) {
+  if (renderTarget1.scissor && renderTarget2.scissor) {
+    renderTarget1.scissor.size.set(value, 1)
+    renderTarget2.scissor.offset.set(value, 0)
+    renderTarget2.scissor.size.set(1 - value, 1)
+  }
+}
+addRenderGraphGuiAddon({
+  gui: controls,
+  renderer
+})

package/examples/skybox/skybox.js

@@ -0,0 +1,111 @@
+import Stats from "stats.js";
+import {
+  PerspectiveProjection,
+  Quaternion,
+  WebGLRenderer,
+  SkyBox,
+  TextureLoader,
+  TextureType,
+  Camera,
+  WebGLRenderDevice,
+  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 renderTarget = new CanvasTarget(canvas)
+const renderDevice = new WebGLRenderDevice(canvas,{
+  depth:true
+})
+const renderer = new WebGLRenderer({
+  plugins:[
+    new CameraPlugin(),
+    new MeshMaterialPlugin(),
+    new SkyboxPlugin()
+  ]
+})
+const camera = new Camera(renderTarget)
+const textureLoader = new TextureLoader()
+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 night = textureLoader.load({
+  paths: [
+    "/images/skybox/grimmnight_right.png",
+    "/images/skybox/grimmnight_left.png",
+    "/images/skybox/grimmnight_top.png",
+    "/images/skybox/grimmnight_bottom.png",
+    "/images/skybox/grimmnight_back.png",
+    "/images/skybox/grimmnight_front.png",
+  ],
+  type: TextureType.TextureCubeMap
+})
+const skyBox = new SkyBox({
+  day,
+  night,
+})
+camera.transform.position.z = 2
+if (camera.projection instanceof PerspectiveProjection) {
+  camera.projection.fov = Math.PI / 2
+  camera.projection.aspect = innerWidth / innerHeight
+}
+
+let number = 0, direction = 1
+const interval = 0.001
+const rotation = Quaternion.fromEuler(0, Math.PI / 1000, 0)
+
+document.body.append(canvas)
+updateView()
+addEventListener("resize", updateView)
+requestAnimationFrame(update)
+
+function update() {
+  stats.begin()
+  skyBox.lerp = number
+
+  const next = number + interval * direction
+  if (number > 1 || number < 0) {
+    direction *= -1
+    if (direction === -1) {
+      number = 1
+    } else {
+      number = 0
+    }
+  } else {
+    number = next
+  }
+
+  camera.transform.orientation.multiply(rotation)
+  renderer.render([skyBox, 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
+  }
+}