hmans · hmans · Oct 8, 2022 · Oct 8, 2022 · Oct 8, 2022 · Oct 8, 2022
diff --git a/.changeset/poor-tigers-leave.md b/.changeset/poor-tigers-leave.md
@@ -0,0 +1,16 @@
+---
+"render-composer": patch
+---
+
+**New:** `ScenePass`, a new render pass that renders a scene to the current render target. The scene is passed to this component as its children, and is expected to set up its own camera, lights, and so on.
+
+```jsx
+<ScenePass>
+  <PerspectiveCamera position={[0, 0, 20]} makeDefault />
+  <directionalLight position={[20, 40, 40]} />
+  <mesh>
+    <boxGeometry />
+    <meshStandardMaterial color="hotpink" />
+  </mesh>
+</ScenePass>
+```
diff --git a/apps/scene-ui-examples/.gitignore b/apps/scene-ui-examples/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/scene-ui-examples/index.html b/apps/scene-ui-examples/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>scene-ui-examples</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/apps/scene-ui-examples/package.json b/apps/scene-ui-examples/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "scene-ui-examples",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hmans/scene-ui": "workspace:^0.0.1",
+    "r3f-stage": "workspace:^0.3.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "render-composer": "workspace:^0.2.8"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^2.2.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.2.3"
+  }
+}
diff --git a/apps/scene-ui-examples/public/vite.svg b/apps/scene-ui-examples/public/vite.svg
diff --git a/apps/scene-ui-examples/src/App.tsx b/apps/scene-ui-examples/src/App.tsx
@@ -0,0 +1,16 @@
+import "r3f-stage/styles.css"
+import { Application } from "r3f-stage"
+import * as UI from "@hmans/scene-ui"
+import { Anchor } from "@hmans/scene-ui"
+
+export const App = () => {
+  return (
+    <Application>
+      <UI.Canvas width={6} height={4} debug>
+        <UI.Rect margin={0.25}>
+          <UI.Rect anchor={Anchor.BottomCenter} margin={[-1, 1.5, 0.25, 1.5]} />
+        </UI.Rect>
+      </UI.Canvas>
+    </Application>
+  )
+}
diff --git a/apps/scene-ui-examples/src/index.css b/apps/scene-ui-examples/src/index.css
diff --git a/apps/scene-ui-examples/src/main.tsx b/apps/scene-ui-examples/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { App } from "./App"
+import "./index.css"
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/apps/scene-ui-examples/src/vite-env.d.ts b/apps/scene-ui-examples/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/scene-ui-examples/tsconfig.json b/apps/scene-ui-examples/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/apps/scene-ui-examples/tsconfig.node.json b/apps/scene-ui-examples/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/apps/scene-ui-examples/vite.config.ts b/apps/scene-ui-examples/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+})
diff --git a/apps/spacerage/package.json b/apps/spacerage/package.json
@@ -20,6 +20,7 @@
     "@dimforge/rapier3d-compat": "^0.9.0",
     "@hmans/r3f-create-loader": "workspace:^0.0.3",
     "@hmans/r3f-shared-resource": "^0.1.0",
+    "@hmans/scene-ui": "workspace:^0.0.1",
     "@hmans/things": "^0.0.6",
     "@hmans/use-const": "^0.0.1",
     "@hmans/use-rerender": "^0.0.2",

diff --git a/apps/spacerage/src/scenes/gameplay/GameplayScene.tsx b/apps/spacerage/src/scenes/gameplay/GameplayScene.tsx
@@ -1,5 +1,6 @@
 import { Physics } from "@react-three/rapier"
 import { Suspense } from "react"
+import * as RC from "render-composer"
 import { bitmask, Layers } from "render-composer"
 import { Vec3 } from "shader-composer"
 import { Color } from "three"
@@ -10,7 +11,6 @@ import { Nebula } from "../menu/vfx/Nebula"
 import { Asteroids } from "./Asteroids"
 import { Bullets } from "./Bullets"
 import { FollowCamera } from "./FollowCamera"
-import { HUD } from "./HUD"
 import { Pickups } from "./Pickups"
 import { Player } from "./Player"
 import { PostProcessing } from "./PostProcessing"
@@ -89,7 +89,13 @@ const GameplayScene = () => {
         </Physics>
       </group>
 
-      <HUD />
+      {/* <ScenePass>
+        <HUD />
+      </ScenePass> */}
+
+      <RC.EffectPass>
+        <RC.SMAAEffect />
+      </RC.EffectPass>
     </Suspense>
   )
 }

diff --git a/apps/spacerage/src/scenes/gameplay/HUD.tsx b/apps/spacerage/src/scenes/gameplay/HUD.tsx
@@ -1,15 +1,17 @@
-import { PerspectiveCamera, Text } from "@react-three/drei"
-import { Color } from "three"
-import { ScenePass } from "../../lib/ScenePass"
+import { OrbitControls, PerspectiveCamera } from "@react-three/drei"
+import { useThree } from "@react-three/fiber"
 
 export const HUD = () => {
+  const camera = useThree((state) => state.camera)
+
   return (
-    <ScenePass>
+    <>
       <PerspectiveCamera position={[0, 0, 20]} makeDefault />
+      <directionalLight position={[20, 40, 40]} />
+      <OrbitControls />
 
-      <Text color={new Color("hotpink")} fontSize={1} position={[-3, 7, 0]}>
-        723.389.150
-      </Text>
-    </ScenePass>
+      {/* {camera && (
+      )} */}
+    </>
   )
 }
diff --git a/packages/hmans-scene-ui/LICENSE.md b/packages/hmans-scene-ui/LICENSE.md
@@ -0,0 +1,20 @@
+Copyright (c) 2022 Hendrik Mans
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/hmans-scene-ui/README.md b/packages/hmans-scene-ui/README.md
@@ -0,0 +1,3 @@
+# Scene UI
+
+Experimental scene-space UI for Three.js.
diff --git a/packages/hmans-scene-ui/package.json b/packages/hmans-scene-ui/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@hmans/scene-ui",
+  "author": {
+    "name": "Hendrik Mans",
+    "email": "[email protected]",
+    "url": "https://hmans.co"
+  },
+  "description": "",
+  "version": "0.0.1",
+  "main": "dist/hmans-scene-ui.cjs.js",
+  "module": "dist/hmans-scene-ui.esm.js",
+  "files": [
+    "dist/**",
+    "LICENSE",
+    "README.md"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "build": "preconstruct build"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      [
+        "@babel/preset-typescript",
+        {
+          "isTSX": true,
+          "allExtensions": true
+        }
+      ]
+    ]
+  },
+  "peerDependencies": {
+    "@react-three/fiber": "^8.8.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.145.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@types/three": "^0.144.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.145.0"
+  },
+  "dependencies": {
+    "troika-three-text": "^0.46.4"
+  }
+}
diff --git a/packages/hmans-scene-ui/src/components/Button.tsx b/packages/hmans-scene-ui/src/components/Button.tsx
@@ -0,0 +1,28 @@
+import { GroupProps } from "@react-three/fiber"
+import React from "react"
+import { MouseCursor } from "./MouseCursor"
+import { Text } from "./Text"
+
+export const Button = ({
+  label,
+  ...props
+}: {
+  label: string
+} & GroupProps) => {
+  return (
+    <MouseCursor {...props}>
+      <mesh>
+        <planeGeometry args={[4, 1]} />
+        <meshBasicMaterial color="#444" />
+      </mesh>
+
+      <Text
+        maxWidth={8}
+        fontSize={0.5}
+        textAlign="center"
+        depthOffset={-1}
+        text="Click Me"
+      />
+    </MouseCursor>
+  )
+}
diff --git a/packages/hmans-scene-ui/src/components/Button3D.tsx b/packages/hmans-scene-ui/src/components/Button3D.tsx
@@ -0,0 +1,28 @@
+import { GroupProps } from "@react-three/fiber"
+import React from "react"
+import { MouseCursor } from "./MouseCursor"
+import { Text } from "./Text"
+
+export const Button3D = ({
+  label,
+  ...props
+}: {
+  label: string
+} & GroupProps) => {
+  return (
+    <MouseCursor position-z={0.25} {...props}>
+      <mesh>
+        <boxGeometry args={[4, 1, 0.5]} />
+        <meshBasicMaterial color="#444" />
+      </mesh>
+      <Text
+        maxWidth={8}
+        fontSize={0.5}
+        textAlign="center"
+        position-z={0.25}
+        depthOffset={-0.001}
+        text="Click Me"
+      />
+    </MouseCursor>
+  )
+}
diff --git a/packages/hmans-scene-ui/src/components/Canvas.tsx b/packages/hmans-scene-ui/src/components/Canvas.tsx
@@ -0,0 +1,29 @@
+import { GroupProps } from "@react-three/fiber"
+import React, { forwardRef } from "react"
+import { Group } from "three"
+import { RectContext } from "./Rect"
+
+export type CanvasProps = GroupProps & {
+  width: number
+  height: number
+  debug?: boolean
+}
+
+export const Canvas = forwardRef<Group, CanvasProps>(
+  ({ children, width, height, debug = false, ...props }, ref) => {
+    return (
+      <RectContext.Provider
+        value={{ width, height, debug, debugColorIndex: 0 }}
+      >
+        {debug && (
+          <mesh scale={[width, height, 1]}>
+            <planeGeometry />
+            <meshBasicMaterial color="white" wireframe />
+          </mesh>
+        )}
+
+        <group {...props}>{children}</group>
+      </RectContext.Provider>
+    )
+  }
+)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Scene UI

		Experimental scene-space UI for Three.js.