Threlte example

[julien-blanchon]

Hello,

Have you considered adding a threlte example to the repo ?

I tried the naive approach by using Threejs API directly but it seems to hurt a lot the performance. I'm getting from 2-3 more passes on the rendering and this divide my framerate by almost 20 (from 300 fps to to 15). I'm not sure how to integrate the spark rendering with Threlte.

[dmarcos]

Can you share link / code to your 300fps and 15fps examples? In what device are you seeing those numbers? Not a trhelte expert but shouldn’t introduce extra passes. Should not be much different than any other three example. Thanks so much

[dmarcos]

@dylanhu7 Is that something you can help with?

[julien-blanchon]

Sorry @dmarcos, I don't have the snippet anymore. If I have time this week I maybe can make a repo for reproductibility

[dylanhu7]

@alex-mcneilly Perhaps you could help with this?

[tomatrow]

This works for me. I copied the Splat example in the Threlte docs:

<script lang="ts">
	import { T, useTask, type Props } from "@threlte/core"
	import { SplatMesh } from "@sparkjsdev/spark"

	let { args, ...restProps }: Props<typeof SplatMesh> = $props()

	let framesRendered = 0
	const { start, stop } = useTask(
		() => {
			framesRendered++
			if (framesRendered >= 10) {
				stop()
				framesRendered = 0
			}
		},
		{ autoStart: false }
	)
</script>

<T
	{...restProps}
	dispose={false}
	is={SplatMesh}
	args={[
		{
			...args?.[0],
			onLoad(mesh) {
				start()
				return args?.[0]?.onLoad?.(mesh)
			}
		}
	]}
></T>

It seems to trigger a render 10 frames after the splat is loaded