Merge pull request #148 from musehq/dev

v2.8.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.7.3",
+  "version": "2.8.0",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [
@@ -31,6 +31,7 @@
   "types": "main.d.ts",
   "scripts": {
     "build": "rimraf dist && mkdir dist && rollup -c && yarn copy && tsc && yarn pack-dist",
+    "compile": "rimraf dist && mkdir dist && rollup -c && yarn copy",
     "lint": "eslint . --ext .ts,.tsx",
     "process-gltf": "./scripts/process-gltf.sh",
     "eslint": "eslint --fix {src,examples/src}/**/*.{ts,tsx}",

src/ideas/index.ts

@@ -20,6 +20,8 @@ export * from "./modifiers/Floating";
 export * from "./modifiers/LookAtPlayer";
 export * from "./modifiers/Spinning";
 export * from "./modifiers/VisualEffect";
+export * from "./primitives/HitBox";
+export * from "./primitives/RoundedBox";
 export * from "./ui/Dialogue";
 export * from "./ui/TextInput";
 export * from "./ui/Arrow";

src/ideas/media/Model.tsx

@@ -1,6 +1,6 @@
 import { Suspense, useMemo } from "react";
 import { GroupProps } from "@react-three/fiber";
-import { useModel } from "../../logic";
+import { cache, useModel } from "../../logic";
 import { Box3, Vector3 } from "three";
 import { SkeletonUtils } from "three-stdlib";
 import { ErrorBoundary } from "react-error-boundary";
@@ -43,9 +43,8 @@ function FallbackModel(props: ModelProps) {
 
   return (
     <group name="spacesvr-fallback-model" {...rest}>
-      <mesh>
+      <mesh material={cache.mat_basic_black_wireframe}>
         <boxBufferGeometry args={[1, 1, 1]} />
-        <meshStandardMaterial color="black" wireframe />
       </mesh>
     </group>
   );

src/ideas/modifiers/Collidable/lib/SimplifyModifier.ts

@@ -3,7 +3,7 @@
 // also modified to reduce to match a tri count rather than remove X number of vertices
 
 import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
-import * as BufferGeometryUtils from "three-stdlib";
+import { mergeVertices } from "three-stdlib";
 
 const cb = new Vector3(),
   ab = new Vector3();
@@ -363,7 +363,7 @@ class SimplifyModifier {
       if (name !== "position") geometry.deleteAttribute(name);
     }
 
-    geometry = BufferGeometryUtils.mergeVertices(geometry);
+    geometry = mergeVertices(geometry);
 
     //
     // put data of original geometry in different data structures

src/ideas/primitives/HitBox.tsx

@@ -0,0 +1,33 @@
+import { ColorRepresentation } from "three";
+import { Interactable, InteractableProps } from "../modifiers/Interactable";
+import { MeshProps } from "@react-three/fiber";
+
+type HitBox = {
+  args: [number, number, number];
+  visible?: boolean;
+  color?: ColorRepresentation;
+} & Omit<InteractableProps, "children"> &
+  Omit<MeshProps, "args">;
+
+export function HitBox(props: HitBox) {
+  const {
+    args,
+    visible = false,
+    color = "red",
+    onClick,
+    onHover,
+    onUnHover,
+    ...rest
+  } = props;
+
+  return (
+    <Interactable onClick={onClick} onHover={onHover} onUnHover={onUnHover}>
+      <mesh visible={visible} name="spacesvr-hitbox" {...rest}>
+        <boxBufferGeometry args={args} />
+        {visible && (
+          <meshBasicMaterial color={color} transparent opacity={0.7} />
+        )}
+      </mesh>
+    </Interactable>
+  );
+}

src/ideas/primitives/RoundedBox.tsx

@@ -0,0 +1,109 @@
+import { cache } from "../../logic/cache";
+import { NamedArrayTuple } from "@react-three/drei/helpers/ts-utils";
+import { useMemo } from "react";
+import { RoundedBoxGeometry } from "three/examples/jsm/geometries/RoundedBoxGeometry";
+
+type RoundedBox = {
+  args?: NamedArrayTuple<
+    (width?: number, height?: number, depth?: number) => void
+  >;
+} & Omit<JSX.IntrinsicElements["mesh"], "args">;
+
+export function RoundedBox(props: RoundedBox) {
+  const {
+    args: [width = 1, height = 1, depth = 0.25] = [],
+    children,
+    ...rest
+  } = props;
+
+  const geo = useMemo(() => {
+    const tolerance = 0.25; // 25% tolerance
+
+    let closestBox = undefined;
+    let closestOffset = Infinity;
+    for (const box of CACHED_BOXES) {
+      const scale = box.width / width;
+      const heightDiff = Math.abs(box.height - height * scale);
+      const depthDiff = Math.abs(box.depth - depth * scale);
+      if (
+        heightDiff / box.height < tolerance &&
+        depthDiff / box.depth < tolerance &&
+        heightDiff + depthDiff < closestOffset
+      ) {
+        closestBox = box;
+        closestOffset = heightDiff + depthDiff;
+      }
+    }
+
+    if (closestBox) {
+      return (cache[closestBox.key] as RoundedBoxGeometry)
+        .clone()
+        .scale(
+          width / closestBox.width,
+          height / closestBox.height,
+          depth / closestBox.depth
+        );
+    }
+
+    const radius = Math.min(width, height, depth) / 2;
+    return new RoundedBoxGeometry(width, height, depth, 4, radius);
+  }, [width, height, depth]);
+
+  return (
+    <mesh name="spacesvr-rounded-box" {...rest} geometry={geo}>
+      {children}
+    </mesh>
+  );
+}
+
+type CachedBox = {
+  width: number;
+  height: number;
+  depth: number;
+  key: keyof typeof cache;
+};
+
+const CACHED_BOXES: CachedBox[] = [
+  {
+    width: 1,
+    height: 1,
+    depth: 0.25,
+    key: "geo_rounded_box_1x1x0_25",
+  },
+  {
+    width: 1,
+    height: 0.35,
+    depth: 0.125,
+    key: "geo_rounded_box_1x0_35x0_125",
+  },
+  {
+    width: 1,
+    height: 0.3,
+    depth: 0.1,
+    key: "geo_rounded_box_1x0_3x0_1",
+  },
+  {
+    width: 1,
+    height: 0.19,
+    depth: 0.23,
+    key: "geo_rounded_box_1x0_19x0_23",
+  },
+  {
+    width: 1,
+    height: 0.44,
+    depth: 0.23,
+    key: "geo_rounded_box_1x0_44x0_23",
+  },
+  {
+    width: 1,
+    height: 0.11,
+    depth: 0.06,
+    key: "geo_rounded_box_1x0_11x0_06",
+  },
+  {
+    width: 1,
+    height: 0.13,
+    depth: 0.04,
+    key: "geo_rounded_box_1x0_13x0_04",
+  },
+];

src/ideas/ui/Arrow.tsx

@@ -1,5 +1,7 @@
 import { GroupProps } from "@react-three/fiber";
 import { useImage } from "../../logic/assets";
+import { cache } from "../../logic";
+import { MeshStandardMaterial } from "three";
 
 type ArrowProps = { dark?: boolean } & GroupProps;
 
@@ -12,15 +14,20 @@ export function Arrow(props: ArrowProps) {
 
   const texture = useImage(dark ? IMAGE_SRC_DARK : IMAGE_SRC);
 
+  const arrowMat = cache.useResource(
+    `spacesvr_arrow_${dark ? "dark" : "light"}`,
+    () =>
+      new MeshStandardMaterial({
+        map: texture,
+        alphaTest: 0.5,
+        transparent: true,
+      })
+  );
+
   return (
     <group name="spacesvr-arrow" {...rest}>
-      <mesh scale={0.004}>
+      <mesh scale={0.004} material={arrowMat}>
         <planeBufferGeometry args={[98, 51]} />
-        <meshStandardMaterial
-          map={texture}
-          alphaTest={0.5}
-          transparent={true}
-        />
       </mesh>
     </group>
   );

src/ideas/ui/Button.tsx

@@ -1,10 +1,11 @@
-import { RoundedBox, Text } from "@react-three/drei";
+import { Text } from "@react-three/drei";
 import { animated, config, useSpring } from "@react-spring/three";
 import { GroupProps } from "@react-three/fiber";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Interactable } from "../modifiers/Interactable";
 import { Idea } from "../../logic/basis/idea";
 import { Color, Raycaster } from "three";
+import { RoundedBox } from "../primitives/RoundedBox";
+import { HitBox } from "../primitives/HitBox";
 
 type ButtonProps = {
   children?: string;
@@ -95,7 +96,6 @@ export function Button(props: ButtonProps) {
   const HEIGHT = dims[1] + PADDING;
   const DEPTH = fontSize * 1.1;
   const OUTLINE_WIDTH = outline ? fontSize * 0.075 : 0;
-  const RADIUS = Math.min(WIDTH, HEIGHT, DEPTH) * 0.5;
 
   return (
     <group name={`spacesvr-button-${children}`} {...rest}>
@@ -115,21 +115,14 @@ export function Button(props: ButtonProps) {
         >
           {children}
         </Text>
-        <Interactable
+        <HitBox
+          args={[WIDTH, HEIGHT, DEPTH]}
           onClick={onButtonClick}
           onHover={() => setHovered(true)}
           onUnHover={() => setHovered(false)}
           raycaster={raycaster}
-        >
-          <mesh visible={false} name="hitbox">
-            <boxBufferGeometry args={[WIDTH, HEIGHT, DEPTH]} />
-          </mesh>
-        </Interactable>
-        <RoundedBox
-          args={[WIDTH, HEIGHT, DEPTH]}
-          radius={RADIUS}
-          smoothness={6}
-        >
+        />
+        <RoundedBox args={[WIDTH, HEIGHT, DEPTH]}>
           {/* @ts-ignore */}
           <animated.meshStandardMaterial color={animColor} />
         </RoundedBox>

src/ideas/ui/Dialogue/ideas/Bubbles.tsx

@@ -39,7 +39,7 @@ export default function Bubbles(props: BubblesProps) {
     for (let i = 0; i < numStops; i++) {
       const perc = i / (numStops - 1);
       obj.position.set(perc * pos.x, perc * pos.y, perc * pos.z);
-      const sc = 0.01 + perc * 0.05;
+      const sc = 0.8 + perc * 4;
       const delay = 60 / 1000;
       const time = 400 / 1000;
       const delta = clock.elapsedTime - startTime.current;
@@ -55,8 +55,8 @@ export default function Bubbles(props: BubblesProps) {
     mesh.current.instanceMatrix.needsUpdate = true;
   });
 
-  const geo = useMemo(() => new SphereBufferGeometry(4, 32, 16), []);
-  const mat = useIdeaMaterial(undefined, 4);
+  const geo = useMemo(() => new SphereBufferGeometry(0.05, 32, 16), []);
+  const mat = useIdeaMaterial(undefined, 0.05);
 
   return (
     <>

src/ideas/ui/Dialogue/index.tsx

@@ -1,13 +1,14 @@
 import { GroupProps } from "@react-three/fiber";
 import { useRef, useState } from "react";
-import { DoubleSide, Group } from "three";
-import { RoundedBox } from "@react-three/drei";
+import { Group } from "three";
 import { animated, useSpring } from "@react-spring/three";
 import { useLimitedFrame } from "../../../logic/limiter";
 import { DialogueFSM } from "./logic/types";
 import Bubbles from "./ideas/Bubbles";
 import VisualInteraction from "./ideas/VisualInteraction";
 import { FacePlayer } from "../../modifiers/FacePlayer";
+import { cache } from "../../../logic/cache";
+import { RoundedBox } from "../../primitives/RoundedBox";
 export * from "./logic/types";
 
 type DialogueProps = {
@@ -49,7 +50,6 @@ export function Dialogue(props: DialogueProps) {
   const HEIGHT = 0.35;
   const DEPTH = 0.125;
   const POS_X = side === "right" ? WIDTH / 2 : -WIDTH / 2;
-  const RADIUS = Math.min(WIDTH, HEIGHT, DEPTH) * 0.5;
 
   return (
     <group name="dialogue" {...rest}>
@@ -60,11 +60,8 @@ export function Dialogue(props: DialogueProps) {
             <animated.group scale={scale} position-x={POS_X}>
               <RoundedBox
                 args={[WIDTH, HEIGHT, DEPTH]}
-                radius={RADIUS}
-                smoothness={6}
-              >
-                <meshStandardMaterial color="#aaa" side={DoubleSide} />
-              </RoundedBox>
+                material={cache.mat_standard_cream_double}
+              />
               <group name="interactions" position-z={DEPTH / 2 + 0.003}>
                 {dialogue.map((interaction) => (
                   <VisualInteraction

src/ideas/ui/Dialogue/logic/ideaMat.ts

@@ -11,8 +11,8 @@ export const useIdeaMaterial = (idea: Idea | undefined, radius: number) => {
 
   const { col } = useSpring({ col: hex });
 
-  const NOISE_AMPLITUDE = 0.82;
-  const NOISE_FREQ = 0.154;
+  const NOISE_AMPLITUDE = radius * 0.32;
+  const NOISE_FREQ = 0.554 / radius;
 
   const mat = useMemo(() => {
     const material = new MeshStandardMaterial({

src/ideas/ui/Key.tsx

@@ -1,7 +1,8 @@
 import { GroupProps } from "@react-three/fiber";
-import { RoundedBox, Text } from "@react-three/drei";
+import { Text } from "@react-three/drei";
 import { animated, config, useSpring } from "@react-spring/three";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { RoundedBox } from "../primitives/RoundedBox";
 
 type Props = {
   keyCode: string;
@@ -54,12 +55,7 @@ export function Key(props: Props) {
       <group position-z={-DEPTH}>
         <animated.group scale-z={scale}>
           <group position-z={DEPTH / 2}>
-            <RoundedBox
-              args={[1, 1, DEPTH]}
-              radius={DEPTH * 0.5}
-              position-z={-DEPTH / 2 - 0.01}
-              smoothness={10}
-            >
+            <RoundedBox args={[1, 1, DEPTH]} position-z={-DEPTH / 2 - 0.01}>
               {/* @ts-ignore */}
               <animated.meshStandardMaterial color={color} />
             </RoundedBox>