Add r3f stress + Ticker.__ticks counter

packages/dataverse/src/Ticker.ts

@@ -42,6 +42,11 @@ export default class Ticker {
   private _scheduledForNextTick: Set<ICallback>
   private _timeAtCurrentTick: number
   private _ticking: boolean = false
+  /**
+   * Counts up for every tick executed.
+   * Internally, this is used to measure ticks per second.
+   */
+  public __ticks = 0
 
   constructor() {
     this._scheduledForThisOrNextTick = new Set()
@@ -127,6 +132,9 @@ export default class Ticker {
         )
       }
     }
+
+    this.__ticks++
+
     this._ticking = true
     this._timeAtCurrentTick = t
     for (const v of this._scheduledForNextTick) {

packages/playground/src/tests/r3f-stress-test/App.tsx

@@ -0,0 +1,136 @@
+import {editable as e, RefreshSnapshot, SheetProvider} from '@theatre/r3f'
+import {Stars} from '@react-three/drei'
+import {getProject, types} from '@theatre/core'
+import React, {Suspense, useState} from 'react'
+import {Canvas} from '@react-three/fiber'
+import {useGLTF, PerspectiveCamera} from '@react-three/drei'
+import sceneGLB from './scene.glb'
+
+import state from './SpaceStress.theatre-project-state.json'
+
+document.body.style.backgroundColor = '#171717'
+
+const EditableCamera = e(PerspectiveCamera, 'perspectiveCamera')
+
+function Model({url}: {url: string}) {
+  const {nodes} = useGLTF(url) as any
+
+  return (
+    <group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={7}>
+      <group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}>
+        <e.mesh
+          uniqueName="Example Namespace / Thingy"
+          receiveShadow
+          castShadow
+          geometry={nodes.planet001.geometry}
+          material={nodes.planet001.material}
+        />
+        <e.mesh
+          uniqueName="Example Namespace / Debris 2"
+          receiveShadow
+          castShadow
+          geometry={nodes.planet002.geometry}
+          material={nodes.planet002.material}
+        />
+        <e.mesh
+          uniqueName="Debris 1"
+          geometry={nodes.planet003.geometry}
+          material={nodes.planet003.material}
+        />
+      </group>
+    </group>
+  )
+}
+
+const textInterpolate = (left: string, right: string, progression: number) => {
+  if (!left || right.startsWith(left)) {
+    const length = Math.floor(
+      Math.max(0, (right.length - left.length) * progression),
+    )
+    return left + right.slice(left.length, left.length + length)
+  }
+  return left
+}
+
+const boxObjectConfig = {
+  test: types.string('Typing', {interpolate: textInterpolate}),
+  testLiteral: types.stringLiteral('a', {a: 'Option A', b: 'Option B'}),
+  bool: types.boolean(false),
+  favoriteFood: types.compound({
+    name: types.string('Pie'),
+    // if needing more compounds, consider adding weight with different units
+    price: types.compound({
+      currency: types.stringLiteral('USD', {USD: 'USD', EUR: 'EUR'}),
+      amount: types.number(10, {range: [0, 1000], label: '$'}),
+    }),
+  }),
+  x: types.number(200),
+  y: types.number(200),
+  color: types.rgba({r: 1, g: 0, b: 0, a: 1}),
+}
+
+function App() {
+  const bgs = ['#272730', '#b7c5d1']
+  const [bgIndex, setBgIndex] = useState(0)
+  const bg = bgs[bgIndex]
+  const project = getProject('SpaceStress', {state})
+  const sheet = project.sheet('Scene')
+  project.ready.then(() => sheet.sequence.play({iterationCount: Infinity}))
+
+  sheet.object('everything', boxObjectConfig)
+
+  return (
+    <div
+      onClick={() => {
+        // return setBgIndex((bgIndex) => (bgIndex + 1) % bgs.length)
+      }}
+      style={{
+        height: '100vh',
+      }}
+    >
+      <Canvas
+        dpr={[1.5, 2]}
+        linear
+        shadows
+        gl={{preserveDrawingBuffer: true}}
+        frameloop="demand"
+      >
+        <SheetProvider sheet={sheet}>
+          <fog attach="fog" args={[bg, 16, 30]} />
+          <color attach="background" args={[bg]} />
+          <ambientLight intensity={0.75} />
+          <EditableCamera
+            uniqueName="Camera"
+            makeDefault
+            position={[0, 0, 16]}
+            fov={75}
+          >
+            <e.pointLight
+              uniqueName="Light 1"
+              intensity={1}
+              position={[-10, -25, -10]}
+            />
+            <e.spotLight
+              uniqueName="Light 2"
+              castShadow
+              intensity={2.25}
+              angle={0.2}
+              penumbra={1}
+              position={[-25, 20, -15]}
+              shadow-mapSize={[1024, 1024]}
+              shadow-bias={-0.0001}
+            />
+            <e.directionalLight uniqueName="Light 3" />
+          </EditableCamera>
+          <Suspense fallback={null}>
+            <RefreshSnapshot />
+            <Model url={sceneGLB} />
+          </Suspense>
+          <Stars radius={500} depth={50} count={1000} factor={10} />
+        </SheetProvider>
+      </Canvas>
+    </div>
+  )
+}
+
+export default App

packages/playground/src/tests/r3f-stress-test/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import studio from '@theatre/studio'
+import extension from '@theatre/r3f/dist/extension'
+import {Ticker} from '@theatre/dataverse'
+
+studio.extend(extension)
+studio.initialize()
+
+ReactDOM.render(<App />, document.getElementById('root'))
+
+const raf = Ticker.raf
+
+setInterval(() => {
+  const id = Date.now().toString(36) + '-'
+  performance.mark(id)
+  setTimeout(() => {
+    performance.measure('---', id)
+  }, 2000)
+}, 2000)
+setInterval(() => {
+  const start = {
+    ticks: raf.__ticks,
+    now: Date.now(),
+  }
+  const id = start.now.toString(36) + 'fps'
+  performance.mark(id)
+  setTimeout(() => {
+    const ticksPerSec =
+      ((raf.__ticks - start.ticks) * 1000) / (Date.now() - start.now)
+    performance.measure(
+      `${ticksPerSec.toFixed(0)}t/1s - ${(ticksPerSec * 0.5).toFixed(
+        0,
+      )}t/500ms`,
+      id,
+    )
+  }, 2000)
+}, 500)

packages/playground/tsconfig.json

@@ -6,12 +6,13 @@
     "rootDir": ".",
     "types": ["jest", "node"],
     "emitDeclarationOnly": false,
-    "composite": true
+    "composite": true,
+    "resolveJsonModule": true
   },
   "references": [
     {"path": "../../theatre"},
     {"path": "../dataverse"},
     {"path": "../r3f"}
   ],
-  "include": ["./src/**/*", "./devEnv/**/*"]
+  "include": ["./src/**/*", "./src/**/*.json", "./devEnv/**/*"]
 }