@tomorrowevening/hermes 0.0.37 → 0.0.39

package/src/editor/multiView/InfiniteGridMaterial.ts

@@ -1,127 +0,0 @@
-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/multiView/MultiView.scss

@@ -1,101 +0,0 @@
-$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;
-  z-index: 1;
-
-  canvas {
-    pointer-events: none;
-  }
-
-  .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);
-    pointer-events: visible;
-    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;
-      pointer-events: visible;
-      position: relative;
-    
-      .clickable {
-        display: inline-block;
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  .settings {
-    pointer-events: visible;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}