wip

playground/vue/src/pages/advanced/webGPU/index.vue

@@ -24,6 +24,7 @@ const createWebGPURenderer = async (ctx: TresRendererSetupContext) => {
   }, {
     immediate: true,
   })
+
   return renderer
 }
 </script>

src/components/TresCanvas.vue

@@ -368,7 +368,7 @@ export interface TresCanvasProps extends /* @vue-ignore */ WebGLRendererProps {
    * Custom WebGL renderer instance
    * Allows using a pre-configured renderer instead of creating a new one
    */
-  renderer?: (ctx: TresRendererSetupContext) => Promise<TresRenderer>
+  renderer?: (ctx: TresRendererSetupContext) => Promise<TresRenderer> | TresRenderer
 
   /**
    * Custom camera instance to use as main camera

src/composables/useTresContextProvider/index.ts

@@ -55,7 +55,7 @@ export interface TresContext {
   camera: ComputedRef<Camera | undefined>
   cameras: DeepReadonly<Ref<Camera[]>>
   controls: Ref<TresControl | null>
-  renderer: ShallowRef<Renderer | null>
+  renderer: ShallowRef<Renderer>
   canvas: Ref<HTMLCanvasElement>
   raycaster: ShallowRef<Raycaster>
   perf: PerformanceState
@@ -86,7 +86,7 @@ export interface TresContext {
 
 export type TresRendererSetupContext = Pick<
   TresContext,
-  'sizes' | 'scene' | 'camera' | 'renderer' | 'canvas' | 'invalidate' | 'advance'
+  'sizes' | 'scene' | 'camera' | 'canvas' | 'invalidate' | 'advance'
 >
 
 export async function useTresContextProvider({
@@ -97,11 +97,10 @@ export async function useTresContextProvider({
   emit,
 }: {
   scene: TresScene
-  canvas: MaybeRef<HTMLCanvasElement>
+  canvas: Ref<HTMLCanvasElement>
   windowSize: MaybeRefOrGetter<boolean>
   rendererOptions: TresCanvasProps
   emit: EmitEventFn
-
 }): Promise<TresContext> {
   const localScene = shallowRef<TresScene>(scene)
   const sizes = useSizes(windowSize, canvas)
@@ -137,12 +136,29 @@ export async function useTresContextProvider({
     }
   }
 
+  // Renderer
+  const renderer = await createRenderer({
+    sizes,
+    scene: localScene,
+    camera,
+    canvas,
+    invalidate,
+    advance,
+  }, rendererOptions)
+
+  // Only setup the renderer with Canvas props if it is a WebGLRenderer
+  if (renderer instanceof WebGLRenderer) {
+    setupWebGLRenderer(renderer, rendererOptions, {
+
+    })
+  }
+
   const ctx: TresContext = {
     sizes,
     scene: localScene,
     camera,
     cameras: readonly(cameras),
-    renderer: shallowRef(null),
+    renderer: shallowRef(renderer),
     raycaster: shallowRef(new Raycaster()),
     canvas,
     controls: ref(null),
@@ -160,7 +176,6 @@ export async function useTresContextProvider({
     },
     render,
     advance,
-    extend,
     invalidate,
     registerCamera,
     setCameraActive,
@@ -170,20 +185,6 @@ export async function useTresContextProvider({
 
   provide('useTres', ctx)
 
-  // Renderer
-  const renderer = await createRenderer({
-    sizes,
-    scene: localScene,
-    camera,
-  }, rendererOptions)
-  // Only setup the renderer with Canvas props if it is a WebGLRenderer
-  if (renderer instanceof WebGLRenderer) {
-    setupWebGLRenderer(renderer, rendererOptions, {
-
-    })
-  }
-  ctx.renderer.value = renderer
-
   // Add context to scene local state
   ctx.scene.value.__tres = {
     root: ctx,

src/core/createRenderer.ts

@@ -1,11 +1,11 @@
 import { WebGLRenderer } from 'three'
-import type { TresContext } from '../composables'
+import type { TresRendererSetupContext } from '../composables'
 import type { TresRenderer } from '../types'
 import type { TresCanvasProps } from '../components/TresCanvas.vue'
 import { toValue } from 'vue'
 import { isObject } from '../utils/is'
 
-export async function createRenderer(ctx: TresContext, options: TresCanvasProps): Promise<TresRenderer> {
+export async function createRenderer(ctx: TresRendererSetupContext, options: TresCanvasProps): Promise<TresRenderer> {
   if (options.renderer) {
     const fnOrRenderer = options.renderer
     if (typeof fnOrRenderer === 'function') {
@@ -18,7 +18,6 @@ export async function createRenderer(ctx: TresContext, options: TresCanvasProps)
     ...(isObject(options) ? options : {}),
     canvas: toValue(ctx.canvas),
   }
-  const renderer = new WebGLRenderer(rendererConstructorArgs)
 
-  return renderer
+  return new WebGLRenderer(rendererConstructorArgs)
 }

src/core/setupRenderer.ts

@@ -70,7 +70,7 @@ const rendererPropertyHandlers: Record<string, PropertyHandler<ColorRepresentati
 }
 
 // Modified setup function to handle both types of properties
-export function setupWebGLRenderer(
+export function setupWebGLRenderer( // TODO object format?
   initialRenderer: WebGLRenderer,
   options: TresCanvasProps,
   ctx: TresPartialContext,