@tomorrowevening/hermes 0.0.2 → 0.0.4

package/src/editor/sceneHierarchy/inspector/MultiView/InfiniteGridMaterial.ts

@@ -0,0 +1,127 @@
+import { Color, DoubleSide, GLSL3, ShaderMaterial } from 'three';
+
+type InfiniteGridProps = {
+  divisions?: number
+  scale?: number
+  color?: Color
+  distance?: number
+  subgridOpacity?: number
+  gridOpacity?: number
+}
+
+const vertex = `out vec3 worldPosition;
+uniform float uDistance;
+
+void main() {
+  // Scale the plane by the drawing distance
+  worldPosition = position.xzy * uDistance;
+  worldPosition.xz += cameraPosition.xz;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(worldPosition, 1.0);
+}`;
+
+const fragment = `out vec4 fragColor;
+in vec3 worldPosition;
+
+uniform float uDivisions;
+uniform float uScale;
+uniform vec3 uColor;
+uniform float uDistance;
+uniform float uSubgridOpacity;
+uniform float uGridOpacity;
+
+float getGrid(float gapSize) {
+  vec2 worldPositionByDivision = worldPosition.xz / gapSize;
+
+  // Inverted, 0 where line, >1 where there's no line
+  // We use the worldPosition (which in this case we use similarly to UVs) differential to control the anti-aliasing
+  // We need to do the -0.5)-0.5 trick because the result fades out from 0 to 1, and we want both
+  // worldPositionByDivision == 0.3 and worldPositionByDivision == 0.7 to result in the same fade, i.e. 0.3,
+  // otherwise only one side of the line will be anti-aliased
+  vec2 grid = abs(fract(worldPositionByDivision-0.5)-0.5) / fwidth(worldPositionByDivision) / 2.0;
+  float gridLine = min(grid.x, grid.y);
+
+  // Uninvert and clamp
+  return 1.0 - min(gridLine, 1.0);
+}
+
+void main() {
+  float cameraDistanceToGridPlane = distance(cameraPosition.y, worldPosition.y);
+  float cameraDistanceToFragmentOnGridPlane = distance(cameraPosition.xz, worldPosition.xz);
+
+  // The size of the grid and subgrid are powers of each other and they are determined based on camera distance.
+  // The current grid will become the next subgrid when it becomes too small, and its next power becomes the new grid.
+  float subGridPower = pow(uDivisions, floor(log(cameraDistanceToGridPlane) / log(uDivisions)));
+  float gridPower = subGridPower * uDivisions;
+
+  // If we want to fade both the grid and its subgrid, we need to displays 3 different opacities, with the next grid being the third
+  float nextGridPower = gridPower * uDivisions;
+
+  // 1 where grid, 0 where no grid
+  float subgrid = getGrid(subGridPower * uScale);
+  float grid = getGrid(gridPower * uScale);
+  float nextGrid = getGrid(nextGridPower * uScale);
+
+  // Where we are between the introduction of the current grid power and when we switch to the next grid power
+  float stepPercentage = (cameraDistanceToGridPlane - subGridPower)/(gridPower - subGridPower);
+
+  // The last x percentage of the current step over which we want to fade
+  float fadeRange = 0.3;
+
+  // We calculate the fade percentage from the step percentage and the fade range
+  float fadePercentage = max(stepPercentage - 1.0 + fadeRange, 0.0) / fadeRange;
+
+  // Set base opacity based on how close we are to the drawing distance, with a cubic falloff
+  float baseOpacity = subgrid * pow(1.0 - min(cameraDistanceToFragmentOnGridPlane / uDistance, 1.0), 3.0);
+
+  // Shade the subgrid
+  fragColor = vec4(uColor.rgb, (baseOpacity - fadePercentage) * uSubgridOpacity);
+
+  // Somewhat arbitrary additional fade coefficient to counter anti-aliasing popping when switching between grid powers
+  float fadeCoefficient = 0.5;
+
+  // Shade the grid
+  fragColor.a = mix(fragColor.a, baseOpacity * uGridOpacity - fadePercentage * (uGridOpacity - uSubgridOpacity) * fadeCoefficient, grid);
+
+  // Shade the next grid
+  fragColor.a = mix(fragColor.a, baseOpacity * uGridOpacity, nextGrid);
+
+  if (fragColor.a <= 0.0) discard;
+}`;
+
+export default class InfiniteGridMaterial extends ShaderMaterial {
+  constructor(props?: InfiniteGridProps) {
+    super({
+      extensions: {
+        derivatives: true,
+      },
+      glslVersion: GLSL3,
+      side: DoubleSide,
+      transparent: true,
+      uniforms: {
+        uScale: {
+          value: props?.scale !== undefined ? props?.scale : 0.1,
+        },
+        uDivisions: {
+          value: props?.divisions !== undefined ? props?.divisions : 10,
+        },
+        uColor: {
+          value: props?.color !== undefined ? props?.color : new Color(0xffffff),
+        },
+        uDistance: {
+          value: props?.distance !== undefined ? props?.distance : 10000,
+        },
+        uSubgridOpacity: {
+          value: props?.subgridOpacity !== undefined ? props?.subgridOpacity : 0.15,
+        },
+        uGridOpacity: {
+          value: props?.gridOpacity !== undefined ? props?.gridOpacity : 0.25,
+        },
+      },
+      vertexShader: vertex,
+      fragmentShader: fragment,
+      name: 'InfiniteGrid',
+      depthWrite: false,
+    });
+  }
+}

package/src/editor/sceneHierarchy/inspector/MultiView/MultiView.scss

@@ -0,0 +1,93 @@
+$padding: 2px;
+
+.multiview {
+  display: grid;
+  font-family: Roboto Mono, Source Code Pro, Menlo, Courier, monospace;
+  font-size: 10px;
+  grid-template-columns: repeat(2, 1fr);
+  position: absolute;
+  overflow: hidden;
+  left: 0;
+  top: 0;
+  right: 300px;
+  bottom: 0;
+
+  .dropdown {
+    background-color: #222;
+    display: inline-block;
+    font-size: 10px;
+    padding: $padding;
+    text-align: center;
+    width: 100px;
+
+    .dropdown-toggle {
+      cursor: pointer;
+    }
+  
+    .dropdown-menu {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+  
+      li {
+        background-color: #222;
+        cursor: pointer;
+        padding: $padding;
+        transition: 0.2s linear background-color;
+        &:hover {
+          background-color: #333;
+        }
+      }
+    }
+  }
+
+  .cameras {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    &.single {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .dropdown {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &.up {
+        bottom: 0;
+        top: initial;
+        .dropdown-menu {
+          top: initial;
+          bottom: 100%;
+        }
+      }
+    }
+
+    .CameraWindow {
+      border: 1px dotted #333;
+      position: relative;
+    
+      .clickable {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .settings {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}

package/src/editor/sceneHierarchy/inspector/MultiView/MultiView.tsx

@@ -0,0 +1,450 @@
+import { useEffect, useRef, useState } from 'react';
+import { AxesHelper, Camera, CameraHelper, MeshBasicMaterial, MeshNormalMaterial, OrthographicCamera, PerspectiveCamera, Scene, Vector2, Vector3, WebGLRenderer } from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import CameraWindow, { Dropdown } from './CameraWindow';
+import InfiniteGridHelper from './InfiniteGridHelper';
+import './MultiView.scss';
+
+type MultiViewMode = 'Single' | 'Side by Side' | 'Stacked' |'Quad';
+const ModeOptions: MultiViewMode[] = [
+  'Single',
+  'Side by Side',
+  'Stacked',
+  'Quad'
+];
+interface MultiViewProps {
+  scene: Scene;
+  renderer: WebGLRenderer;
+  cameras: Camera[];
+  mode?: MultiViewMode;
+}
+
+const cameras: Map<string, Camera> = new Map();
+const controls: Map<string, OrbitControls> = new Map();
+const helpers: Map<string, CameraHelper> = new Map();
+
+function createOrtho(name: string, position: Vector3) {
+  const camera = new OrthographicCamera(-100, 100, 100, -100, 50, 3000);
+  camera.name = name;
+  camera.position.copy(position);
+  camera.lookAt(0, 0, 0);
+  cameras.set(name, camera);
+  return camera;
+}
+
+// Cameras
+
+createOrtho('Top', new Vector3(0, 1000, 0));
+createOrtho('Bottom', new Vector3(0, -1000, 0));
+createOrtho('Left', new Vector3(-1000, 0, 0));
+createOrtho('Right', new Vector3(1000, 0, 0));
+createOrtho('Front', new Vector3(0, 0, 1000));
+createOrtho('Back', new Vector3(0, 0, -1000));
+createOrtho('Orthographic', new Vector3(1000, 1000, 1000));
+
+const debugCamera = new PerspectiveCamera(60, 1, 50, 3000);
+debugCamera.name = 'Debug';
+debugCamera.position.set(500, 500, 500);
+debugCamera.lookAt(0, 0, 0);
+cameras.set('Debug', debugCamera);
+
+type RenderMode = 'Default' | 'Normals' | 'Wireframe';
+let currentRenderMode: RenderMode = 'Default';
+const renderOptions: RenderMode[] = [
+  'Default',
+  'Normals',
+  'Wireframe',
+];
+const normalsMaterial = new MeshNormalMaterial();
+const wireframeMaterial = new MeshBasicMaterial({
+  opacity: 0.33,
+  transparent: true,
+  wireframe: true
+});
+
+const scene = new Scene();
+
+export default function MultiView(props: MultiViewProps) {
+  const [mode, setMode] = useState<MultiViewMode>(props.mode !== undefined ? props.mode : 'Quad');
+
+  const tlWindow = useRef<HTMLDivElement>(null);
+  const trWindow = useRef<HTMLDivElement>(null);
+  const blWindow = useRef<HTMLDivElement>(null);
+  const brWindow = useRef<HTMLDivElement>(null);
+
+  let tlCam = cameras.get('Debug')!;
+  let trCam = cameras.get('Orthographic')!;
+  let blCam = cameras.get('Front')!;
+  let brCam = cameras.get('Top')!;
+
+  const createControls = (camera: Camera, element: HTMLDivElement) => {
+    // Previous items
+    const prevControls = controls.get(camera.name);
+    if (prevControls !== undefined) prevControls.dispose();
+    controls.delete(camera.name);
+
+    const prevHelper = helpers.get(camera.name);
+    if (prevHelper !== undefined) {
+      scene.remove(prevHelper);
+      prevHelper.dispose();
+    }
+    helpers.delete(camera.name);
+
+    // New items
+    const control = new OrbitControls(camera, element);
+    switch (camera.name) {
+      case 'Top':
+      case 'Bottom':
+      case 'Left':
+      case 'Right':
+      case 'Front':
+      case 'Back':
+        control.enableRotate = false;
+        break;
+    }
+    controls.set(camera.name, control);
+    
+    if (camera instanceof PerspectiveCamera) {
+      const helper = new CameraHelper(camera);
+      helpers.set(camera.name, helper);
+      scene.add(helper);
+    }
+  };
+
+  const clearCamera = (camera: Camera) => {
+    const helper = helpers.get(camera.name);
+    if (helper !== undefined) {
+      scene.remove(helper);
+      helper.dispose();
+      helpers.delete(camera.name);
+    }
+    const control = controls.get(camera.name);
+    if (control !== undefined) {
+      control.dispose();
+      controls.delete(camera.name);
+    }
+  };
+
+  const killControls = () => {
+    controls.forEach((value: OrbitControls, key: string) => {
+      value.dispose();
+      const helper = helpers.get(key);
+      if (helper !== undefined) {
+        scene.remove(helper);
+        helper.dispose();
+      }
+      helpers.delete(key);
+      controls.delete(key);
+    });
+    controls.clear();
+    helpers.clear();
+  };
+
+  const assignControls = () => {
+    switch (mode) {
+      case 'Single':
+        createControls(tlCam, tlWindow.current!);
+        break;
+      case 'Side by Side':
+      case 'Stacked':
+        createControls(tlCam, tlWindow.current!);
+        createControls(trCam, trWindow.current!);
+        break;
+      case 'Quad':
+        createControls(tlCam, tlWindow.current!);
+        createControls(trCam, trWindow.current!);
+        createControls(blCam, blWindow.current!);
+        createControls(brCam, brWindow.current!);
+        break;
+    }
+  };
+
+  // Add scene + helpers
+  useEffect(() => {
+    scene.name = 'Debug Scene';
+    scene.add(props.scene);
+
+    const grid = new InfiniteGridHelper();
+    scene.add(grid);
+
+    const axisHelper = new AxesHelper(500);
+    axisHelper.name = 'axisHelper';
+    scene.add(axisHelper);
+  }, []);
+
+  // Resize handling + drawing
+  useEffect(() => {
+    const size = props.renderer.getSize(new Vector2());
+    let width = size.x;
+    let height = size.y;
+    let bw = Math.floor(width / 2);
+    let bh = Math.floor(height / 2);
+    let raf = -1;
+
+    const onResize = () => {
+      width = window.innerWidth - 300;
+      height = window.innerHeight;
+      bw = Math.floor(width / 2);
+      bh = Math.floor(height / 2);
+
+      let cw = width;
+      let ch = height;
+      switch (mode) {
+        case 'Side by Side':
+          cw = bw;
+          ch = height;
+          break;
+        case 'Stacked':
+          cw = width;
+          ch = bh;
+          break;
+        case 'Quad':
+          cw = bw;
+          ch = bh;
+          break;
+      }
+
+      cameras.forEach((camera) => {
+        if (camera instanceof OrthographicCamera) {
+          camera.left = cw / -2;
+          camera.right = cw / 2;
+          camera.top = ch / 2;
+          camera.bottom = ch / -2;
+          camera.updateProjectionMatrix();
+        } else if (camera instanceof PerspectiveCamera) {
+          camera.aspect = cw / ch;
+          camera.updateProjectionMatrix();
+          helpers.get(camera.name)?.update();
+        }
+      });
+    };
+
+    const drawSingle = () => {
+      props.renderer.setViewport(0, 0, width, height);
+      props.renderer.setScissor(0, 0, width, height);
+      props.renderer.render(scene, tlCam);
+    };
+
+    const drawDouble = () => {
+      if (mode === 'Side by Side') {
+        props.renderer.setViewport(0, 0, bw, height);
+        props.renderer.setScissor(0, 0, bw, height);
+        props.renderer.render(scene, tlCam);
+
+        props.renderer.setViewport(bw, 0, bw, height);
+        props.renderer.setScissor(bw, 0, bw, height);
+        props.renderer.render(scene, trCam);
+      } else {
+        const y = height - bh;
+        props.renderer.setViewport(0, y, width, bh);
+        props.renderer.setScissor(0, y, width, bh);
+        props.renderer.render(scene, tlCam);
+
+        props.renderer.setViewport(0, 0, width, bh);
+        props.renderer.setScissor(0, 0, width, bh);
+        props.renderer.render(scene, trCam);
+      }
+    };
+
+    const drawQuad = () => {
+      let x = 0;
+      let y = 0;
+      y = height - bh;
+
+      // TL
+      x = 0;
+      props.renderer.setViewport(x, y, bw, bh);
+      props.renderer.setScissor(x, y, bw, bh);
+      props.renderer.render(scene, tlCam);
+
+      // TR
+      x = bw;
+      props.renderer.setViewport(x, y, bw, bh);
+      props.renderer.setScissor(x, y, bw, bh);
+      props.renderer.render(scene, trCam);
+
+      y = 0;
+
+      // BL
+      x = 0;
+      props.renderer.setViewport(x, y, bw, bh);
+      props.renderer.setScissor(x, y, bw, bh);
+      props.renderer.render(scene, blCam);
+
+      // BR
+      x = bw;
+      props.renderer.setViewport(x, y, bw, bh);
+      props.renderer.setScissor(x, y, bw, bh);
+      props.renderer.render(scene, brCam);
+    };
+
+    const onUpdate = () => {
+      // Updates
+      controls.forEach((control: OrbitControls) => {
+        control.update();
+      });
+      props.scene['update']();
+
+      // Drawing
+      props.renderer.clear();
+      switch (mode) {
+        case 'Single':
+          drawSingle();
+          break;
+        case 'Side by Side':
+        case 'Stacked':
+          drawDouble();
+          break;
+        case 'Quad':
+          drawQuad();
+          break;
+      }
+
+      raf = requestAnimationFrame(onUpdate);
+    };
+
+    // Start rendering
+    assignControls();
+    window.addEventListener('resize', onResize);
+    onResize();
+    onUpdate();
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      cancelAnimationFrame(raf);
+      raf = -1;
+    };
+  }, [mode]);
+
+  const cameraOptions: string[] = [
+    'Top',
+    'Bottom',
+    'Left',
+    'Right',
+    'Front',
+    'Back',
+    'Orthographic',
+    'Debug',
+  ];
+  props.cameras.forEach((camera: Camera) => {
+    cameras.set(camera.name, camera);
+    cameraOptions.push(camera.name);
+  });
+
+  return (
+    <div className='multiview'>
+      <div className={`cameras ${mode === 'Single' || mode === 'Stacked' ? 'single' : ''}`}>
+        {mode === 'Single' && (
+          <>
+            <CameraWindow camera={tlCam} options={cameraOptions} ref={tlWindow} onSelect={(value: string) => {
+              controls.get(tlCam.name)?.dispose();
+              const camera = cameras.get(value);
+              if (camera !== undefined) {
+                clearCamera(tlCam);
+                tlCam = camera;
+                createControls(camera, tlWindow.current!);
+              }
+            }} />
+          </>
+        )}
+
+        {(mode === 'Side by Side' || mode === 'Stacked') && (
+          <>
+            <CameraWindow camera={tlCam} options={cameraOptions} ref={tlWindow} onSelect={(value: string) => {
+              controls.get(tlCam.name)?.dispose();
+              const camera = cameras.get(value);
+              if (camera !== undefined) {
+                clearCamera(tlCam);
+                tlCam = camera;
+                createControls(camera, tlWindow.current!);
+              }
+            }} />
+            <CameraWindow camera={trCam} options={cameraOptions} ref={trWindow} onSelect={(value: string) => {
+              controls.get(trCam.name)?.dispose();
+              const camera = cameras.get(value);
+              if (camera !== undefined) {
+                clearCamera(trCam);
+                trCam = camera;
+                createControls(camera, trWindow.current!);
+              }
+            }} />
+          </>
+        )}
+
+        {mode === 'Quad' && (
+          <>
+            <CameraWindow camera={tlCam} options={cameraOptions} ref={tlWindow} onSelect={(value: string) => {
+              controls.get(tlCam.name)?.dispose();
+              const camera = cameras.get(value);
+              if (camera !== undefined) {
+                clearCamera(tlCam);
+                tlCam = camera;
+                createControls(camera, tlWindow.current!);
+              }
+            }} />
+            <CameraWindow camera={trCam} options={cameraOptions} ref={trWindow} onSelect={(value: string) => {
+              controls.get(trCam.name)?.dispose();
+              const camera = cameras.get(value);
+              if (camera !== undefined) {
+                clearCamera(trCam);
+                trCam = camera;
+                createControls(camera, trWindow.current!);
+              }
+            }} />
+            <CameraWindow camera={blCam} options={cameraOptions} ref={blWindow} onSelect={(value: string) => {
+              controls.get(blCam.name)?.dispose();
+              const camera = cameras.get(value);
+              if (camera !== undefined) {
+                clearCamera(blCam);
+                blCam = camera;
+                createControls(camera, blWindow.current!);
+              }
+            }} />
+            <CameraWindow camera={brCam} options={cameraOptions} ref={brWindow} onSelect={(value: string) => {
+              controls.get(brCam.name)?.dispose();
+              const camera = cameras.get(value);
+              if (camera !== undefined) {
+                clearCamera(brCam);
+                brCam = camera;
+                createControls(camera, brWindow.current!);
+              }
+            }} />
+          </>
+        )}
+      </div>
+
+      <div className='settings'>
+        {/* Mode */}
+        <Dropdown
+          index={ModeOptions.indexOf(mode)}
+          options={ModeOptions}
+          onSelect={(value: string) => {
+            if (value === mode) return;
+            killControls();
+            setMode(value as MultiViewMode);
+          }}
+        />
+        {/* Render Mode */}
+        <Dropdown
+          index={0}
+          options={renderOptions}
+          onSelect={(value: string) => {
+            if (value === currentRenderMode) return;
+            currentRenderMode = value as RenderMode;
+            switch (currentRenderMode) {
+              case 'Default':
+                scene.overrideMaterial = null;
+                break;
+              case 'Normals':
+                scene.overrideMaterial = normalsMaterial;
+                break;
+              case 'Wireframe':
+                scene.overrideMaterial = wireframeMaterial;
+                break;
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+}