Merge pull request #135 from musehq/dev

v2.6.0

Author: alex-shortt

README.md

@@ -98,7 +98,7 @@ _the following are each a fundamental unit and their own folder at the top level
 
 **realities** define how the player experiences your world. They are comparable in function to a browser. They are implemented as a React container component and composed of an ordering of layers.
 
-**tools** offer the player affordances in your world. They are implemented as ideas using the Tool modifier, accessed by single keystrokes.
+**tools** offer the player affordances in your world. They are the 3D equivalent of a browser toolbar. They are implemented using a Layer for fundamental state a modifier for registry.
 
 **worlds** are sets of ideas. They are the actual content of your site. They are implemented as compositions of ideas.
 
@@ -113,7 +113,7 @@ _the following are each a fundamental unit and their own folder at the top level
 
 #### Standard Reality
 
-The Standard Reality defines the standard experiencing the 3D web. The layers provided are the Environment Layer, Physics Layer, Player Layer, and Network Layer. Additionally, it provides an infinite ground to walk on that can be disabled.
+The Standard Reality defines the standard experiencing the 3D web. The layers provided are, in order: Environment, Physics, Player, Toolbelt, Network, Visual. Additionally, it provides an infinite ground to walk on that can be disabled.
 
 ```tsx
 <StandardReality
@@ -188,6 +188,32 @@ type PlayerState = {
 };
 ```
 
+#### Toolbelt Layer
+
+_Provides a layer of UX to offer user interaction with the world._
+
+```tsx
+type ToolbeltProps = {
+  showOnSpawn?: boolean; // whether to show the toolbelt on spawn, default true
+};
+```
+
+```tsx
+const toolbelt = useToolbelt();
+
+type ToolbeltState = {
+  tools: Tool[];
+  activeTool?: Tool;
+  hide: () => void;
+  next: () => void;
+  prev: () => void;
+  show: () => void;
+  activeIndex: number | undefined;
+  setActiveIndex: (i: number) => void;
+  direction: Direction;
+};
+```
+
 #### Network Layer
 
 _Provides multiplayer out-of-the-box. Muse provides signalling servers and [STUN/TURN](https://www.twilio.com/docs/stun-turn/faq#faq-what-is-nat) servers for everyone :)._
@@ -223,6 +249,22 @@ type NetworkState = {
 };
 ```
 
+## Tools
+
+#### Camera Tool
+
+A tool that gives the user a camera to take pictures with. To add to your toolbelt simply add it into the World.
+
+```tsx
+<StandardReality>
+  <Camera />
+</StandardReality>
+```
+
+#### Walkie Talkie Tool
+
+A tool to configure your microphone settings. Automatically added if voice chat is enabled in the network layer.
+
 ## Ideas
 
 ### _types of ideas_
@@ -425,6 +467,24 @@ Makes its children react to onclick and on hover methods
 </Interactable>
 ```
 
+#### Tool
+
+Turns its children into a tool, automatically registers it with the Tool Layer.
+
+```tsx
+<Tool
+  name="My Tool" // name used for identification
+  pos={[0, 0]} // where the tool should be positioned in screen space, x:[-1, 1], y:[-1, 1]
+  face={true} // whether the tool should face the user, default true
+  pinY={false} // whether the tool should be pinned on the screen space y so user can look up and down
+  range={0} // how far from the cursor the tool will stay without moving left or ight, along the x screen space axis, measured in degrees
+  orderIndex={0} // the order in which the tool should be rendered relative to other orders, default 0, sorts low to high
+  onSwitch={(enabled: boolean) => {}} // callback for when active tool switches, passes whether the given tool is enabled
+>
+  <Stuff />
+</Tool>
+```
+
 #### Anchor
 
 Makes its children link out to when clicked. handles leaving vr session.
@@ -443,7 +503,7 @@ Makes its children link out to when clicked. handles leaving vr session.
 Turns its children into a billboard, always facing the camera.
 
 ```tsx
-<FacePlayer lockX={false} lockY={false} lockZ={false} />
+<FacePlayer enabled={true} lockX={false} lockY={false} lockZ={false} />
 ```
 
 #### Floating
@@ -470,17 +530,16 @@ Makes its children spin
 <Spinning xSpeed={0} ySpeed={1} zSpeed={0} />
 ```
 
-#### Tool
+#### Visual Effect
 
-Provides the UX for its children to become a tool, meaning it will show up in camera at all times.
+Adds a render pass to the Visual Layer's render pipeline. Use to add postprocessing.
 
 ```tsx
-<Tool
-  pos={[0, 0]} // position on screen from [-1, -1] to [1, 1]
-  face={true} // whether the tool should face the screen
-  distance={1} // how far away to place the item. It will scale as it moves away
-  pinY={false} // pin the tool on the y axis
-/>
+<VisualEffect
+  index={1} // the order in which the effects are applied, sorts low to high
+>
+  <unrealBloomPass args={[new Vector2(256, 256), 0.1, 0.01, 0.95]} />
+</VisualEffect>
 ```
 
 ---
@@ -535,6 +594,18 @@ A simple button
 </Button>
 ```
 
+#### Key
+
+A Keyboard Key that responds to the corresponding key press. Useful for tutorials.
+
+```tsx
+<Key
+  keyCode="a"
+  keyPress={["a, A"]} // optional, default is keyCode, but in case there are multiple keys to look for
+  onPressed={(evt) => console.log("Ive been pressed!")} // optional callback when key is pressed
+/>
+```
+
 #### Switch
 
 A boolean switch

examples/ideas/Bloom.tsx

@@ -0,0 +1,29 @@
+import { VisualEffect } from "spacesvr";
+import { UnrealBloomPass } from "three-stdlib";
+import { extend, ReactThreeFiber } from "@react-three/fiber";
+import { useState } from "react";
+import { Vector2 } from "three";
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace JSX {
+    interface IntrinsicElements {
+      unrealBloomPass: ReactThreeFiber.Node<
+        UnrealBloomPass,
+        typeof UnrealBloomPass
+      >;
+    }
+  }
+}
+
+extend({ UnrealBloomPass });
+
+export default function Bloom() {
+  const [res] = useState(() => new Vector2(256, 256));
+
+  return (
+    <VisualEffect index={1}>
+      <unrealBloomPass args={[res, 0.1, 0.01, 0.95]} />
+    </VisualEffect>
+  );
+}

examples/worlds/Multiplayer/index.tsx

@@ -1,4 +1,4 @@
-import { StandardReality, Background, Model } from "spacesvr";
+import { StandardReality, Background, Model, Camera } from "spacesvr";
 import LightSwitch from "./ideas/LightSwitch";
 import PingPongMulti from "./ideas/PingPongMulti";
 import Title from "../../ideas/Title";
@@ -8,6 +8,7 @@ import Analytics from "../../ideas/Analytics";
 export default function Multiplayer() {
   return (
     <StandardReality
+      environmentProps={{ dev: process.env.NODE_ENV === "development" }}
       playerProps={{ pos: [5, 1, 0], rot: Math.PI }}
       networkProps={{ autoconnect: true, voice: true }}
     >
@@ -28,6 +29,7 @@ export default function Multiplayer() {
         <meshBasicMaterial color={"purple"} />
       </mesh>
       <Model src="https://d27rt3a60hh1lx.cloudfront.net/models/Camera-1652915410/camera_02_cleaned.glb.gz" />
+      <Camera />
     </StandardReality>
   );
 }

examples/worlds/Workshop.tsx

@@ -7,10 +7,12 @@ import {
   TextInput,
   Switch,
   LostWorld,
+  Camera,
 } from "spacesvr";
 import Title from "../ideas/Title";
 import Link from "../ideas/Link";
 import Analytics from "../ideas/Analytics";
+import Bloom from "../ideas/Bloom";
 
 export default function Workshop() {
   const [value, setValue] = useState("hello world");
@@ -40,7 +42,9 @@ export default function Workshop() {
   const [hovering, setHovering] = useState(false);
 
   return (
-    <StandardReality>
+    <StandardReality
+      environmentProps={{ dev: process.env.NODE_ENV === "development" }}
+    >
       <Image
         src="https://uploads.codesandbox.io/uploads/user/b3e56831-8b98s-4fee-b941-0e27f39883ab/I9vI-RoNmD7W.png"
         position={[-8, 2, 6.4]}
@@ -139,6 +143,8 @@ export default function Workshop() {
         rotation={[0, -Math.PI, 0]}
         muted
       />
+      <Camera />
+      <Bloom />
     </StandardReality>
   );
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.5.4",
+  "version": "2.6.0",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [

src/ideas/index.ts

@@ -4,22 +4,24 @@ export * from "./basis/VisualWorld";
 export * from "./environment/Background";
 export * from "./environment/Fog";
 export * from "./environment/InfinitePlane";
-export * from "./media/Image";
 export * from "./media/Audio";
 export * from "./media/HDRI";
+export * from "./media/Image";
 export * from "./media/Model";
 export * from "./media/Video";
-export * from "./mediated/LostFloor";
 export * from "./mediated/Frame";
+export * from "./mediated/LostFloor";
 export * from "./modifiers/Collidable";
 export * from "./modifiers/Interactable";
+export * from "./modifiers/Tool";
 export * from "./modifiers/Anchor";
 export * from "./modifiers/FacePlayer";
 export * from "./modifiers/Floating";
 export * from "./modifiers/LookAtPlayer";
 export * from "./modifiers/Spinning";
-export * from "./modifiers/Tool";
+export * from "./modifiers/VisualEffect";
 export * from "./ui/TextInput";
 export * from "./ui/Arrow";
 export * from "./ui/Button";
+export * from "./ui/Key";
 export * from "./ui/Switch";

src/ideas/mediated/Frame.tsx

@@ -127,7 +127,7 @@ export function Frame(props: FrameProps) {
   }, [innerFrameMaterial, width, height]);
 
   return (
-    <group name="frame">
+    <group name="spacesvr-frame">
       <mesh geometry={geometry} material={material} />
       {backFrameGeometry && innerFrameMaterial && (
         <mesh geometry={backFrameGeometry} material={innerFrameMaterial} />

src/ideas/modifiers/Collidable/index.tsx

@@ -91,7 +91,7 @@ export function Collidable(props: CollidableProps) {
   }, [collisionMeshes, hideCollisionMeshes]);
 
   return (
-    <group name="collidable" ref={group}>
+    <group name="spacesvr-collidable" ref={group}>
       {children}
       {enabled &&
         collisionGeos &&

src/ideas/modifiers/FacePlayer.tsx

@@ -1,30 +1,34 @@
-import { ReactNode, useRef } from "react";
-import { useFrame } from "@react-three/fiber";
-import { useLimiter } from "../../logic/limiter";
-import { Group } from "three";
+import { ReactNode, useRef, useState } from "react";
+import { useLimitedFrame } from "../../logic/limiter";
+import { Euler, Group } from "three";
 
 type FacePlayerProps = {
   children: ReactNode | ReactNode[];
+  enabled?: boolean;
   lockX?: boolean;
   lockY?: boolean;
   lockZ?: boolean;
 };
 
 export function FacePlayer(props: FacePlayerProps) {
-  const { children, lockX = false, lockY = false, lockZ = false } = props;
+  const {
+    children,
+    enabled = true,
+    lockX = false,
+    lockY = false,
+    lockZ = false,
+  } = props;
 
   const group = useRef<Group>(null);
-  const limiter = useLimiter(45);
+  const [prev] = useState(new Euler());
 
-  useFrame(({ clock, camera }) => {
-    if (!limiter.isReady(clock)) return;
+  useLimitedFrame(50, ({ camera }) => {
+    if (!group.current) return;
 
-    if (group.current) {
-      const prev = {
-        x: group.current.rotation.x,
-        y: group.current.rotation.y,
-        z: group.current.rotation.z,
-      };
+    if (!enabled) {
+      group.current.rotation.set(0, 0, 0);
+    } else {
+      prev.copy(group.current.rotation);
       group.current.lookAt(camera.position);
       if (lockX) group.current.rotation.x = prev.x;
       if (lockY) group.current.rotation.y = prev.y;

src/ideas/modifiers/Interactable/components/MobileDesktopInteractable.tsx

@@ -87,12 +87,14 @@ export default function MobileDesktopInteractable(props: InteractableProps) {
       }
     };
 
-    gl.domElement.addEventListener("mousedown", startPress);
-    gl.domElement.addEventListener("mouseup", endPress);
+    const startev = device.mobile ? "touchstart" : "mousedown";
+    const endev = device.mobile ? "touchend" : "mouseup";
+    gl.domElement.addEventListener(startev, startPress);
+    gl.domElement.addEventListener(endev, endPress);
 
     return () => {
-      gl.domElement.removeEventListener("mousedown", startPress);
-      gl.domElement.removeEventListener("mouseup", endPress);
+      gl.domElement.removeEventListener(startev, startPress);
+      gl.domElement.removeEventListener(endev, endPress);
     };
   }, [
     DETECT_HOVER,