fix theatre export, canvas

app/(pages)/(components)/wrapper/index.tsx

@@ -4,22 +4,24 @@ import cn from 'clsx'
 import type { LenisOptions } from 'lenis'
 import { usePathname } from 'next/navigation'
 import { useEffect } from 'react'
+import { Canvas } from '~/libs/webgl/components/canvas'
 import type { themeNames } from '~/styles/config.mjs'
 import { Footer } from '../footer'
 import { Lenis } from '../lenis'
-import { Navigation } from '../navigation'
 import s from './page-config.module.css'
 
 interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {
   theme?: (typeof themeNames)[number]
   lenis?: LenisOptions
+  webgl?: boolean | object
 }
 
 export function Wrapper({
   children,
   theme = 'dark',
   className,
   lenis,
+  webgl,
   ...props
 }: WrapperProps) {
   const pathname = usePathname()
@@ -31,7 +33,7 @@ export function Wrapper({
 
   return (
     <>
-      <Navigation />
+      {webgl && <Canvas root {...(typeof webgl === 'object' && webgl)} />}
       <main className={cn(s.main, className)} {...props}>
         {children}
         <script>

biome.json

@@ -48,7 +48,8 @@
         "useValidAnchor": "warn"
       },
       "style": {
-        "noNonNullAssertion": "off"
+        "noNonNullAssertion": "off",
+        "noUnusedTemplateLiteral": "off"
       }
     }
   },

libs/theatre/index.tsx

@@ -8,7 +8,6 @@ import {
   useContext,
   useEffect,
   useImperativeHandle,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -31,14 +30,16 @@ export function TheatreProjectProvider({
 
   useEffect(() => {
     if (project) {
-      console.log(`theatre project ${id} loaded`)
+      isLoadingRef.current = false
+      window.THEATRE_PROJECT_ID = project.address.projectId
+      console.log(`Theatre: project ${id} loaded`)
     }
   }, [project, id])
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (config) {
       if (!isLoadingRef.current) {
-        console.log(`theatre project ${id} loading...`)
+        console.log(`Theatre: project ${id} loading...`)
         isLoadingRef.current = true
         fetch(config)
           .then((response) => response.json())

libs/theatre/studio/index.tsx

@@ -1,21 +1,22 @@
-import '@theatre/core'
+'use client'
+
 import studio from '@theatre/studio'
 import { useEffect } from 'react'
 import s from './studio.module.css'
 
-let initialized = false
-
-export function Studio() {
-  useEffect(() => {
-    if (initialized) return
-
-    studio.initialize()
+function initializeStudio() {
+  // @ts-ignore
+  studio.initialize().then(() => {
+    studio.ui.restore()
+    console.log('Theatre: Studio initialized')
+  })
+}
 
-    initialized = true
-  }, [])
+initializeStudio()
 
+export function Studio() {
   useEffect(() => {
-    studio.ui.restore()
+    initializeStudio()
 
     return () => {
       studio.ui.hide()
@@ -27,9 +28,9 @@ export function Studio() {
       <button
         type="button"
         onClick={() => {
-          const project = studio.getStudioProject()
-          const id = project.address.projectId
-          const json = studio.createContentOfSaveFile(id)
+          const id = window.THEATRE_PROJECT_ID
+
+          const json = studio.createContentOfSaveFile(window.THEATRE_PROJECT_ID)
 
           const file = new File([JSON.stringify(json)], 'config.json', {
             type: 'application/json',

libs/webgl/components/canvas/webgl.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { OrthographicCamera } from '@react-three/drei'
 import { Canvas } from '@react-three/fiber'
 import { SheetProvider } from '~/libs/theatre'
@@ -10,13 +12,14 @@ import s from './webgl.module.css'
 
 type WebGLCanvasProps = React.HTMLAttributes<HTMLDivElement> & {
   render?: boolean
+  postprocessing?: boolean
 }
 
 export function WebGLCanvas({
   render = true,
-  postprocessing = true,
+  postprocessing = false,
   ...props
-}) {
+}: WebGLCanvasProps) {
   const { WebGLTunnel, DOMTunnel } = useCanvas()
 
   return (
@@ -50,7 +53,7 @@ export function WebGLCanvas({
           />
           <RAF render={render} />
           <FlowmapProvider>
-            <PostProcessing />
+            {postprocessing && <PostProcessing />}
             <WebGLTunnel.Out />
           </FlowmapProvider>
           <Preload />

libs/webgl/components/postprocessing/index.ts

@@ -4,6 +4,8 @@ import { useEffect, useMemo } from 'react'
 import { HalfFloatType } from 'three'
 
 export function PostProcessing() {
+  console.log('WebGL: PostProcessing enabled')
+
   const gl = useThree((state) => state.gl)
   const viewport = useThree((state) => state.viewport)
   const camera = useThree((state) => state.camera)

libs/webgl/components/preload/index.ts

@@ -16,10 +16,12 @@ export function Preload() {
     async () => {
       if (active) return
 
-      console.log('Preloading...')
+      console.log('WebGL: Preloading...')
+
+      console.time('WebGL: Preload took:')
 
       const invisible: THREE.Object3D[] = []
-      scene.traverse((object: any) => {
+      scene.traverse((object: THREE.Object3D) => {
         if (object.visible === false) {
           invisible.push(object)
           object.visible = true
@@ -28,16 +30,16 @@ export function Preload() {
       await gl.compileAsync(scene, camera)
       const cubeRenderTarget = new WebGLCubeRenderTarget(128)
       const cubeCamera = new CubeCamera(0.01, 100000, cubeRenderTarget)
-      cubeCamera.update(gl as any, scene as any)
+      cubeCamera.update(gl as THREE.WebGLRenderer, scene as THREE.Scene)
       cubeRenderTarget.dispose()
 
       for (const object of invisible) {
         object.visible = false
       }
 
-      console.timeEnd('Preload')
+      console.timeEnd('WebGL: Preload took:')
     },
-    500,
+    1000,
     [active, gl, camera, scene]
   )
 

tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "checkJs": true,
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,