Transition Shader Example

[winnie1994]

Functional but has a ton of hardcoded values that can be cleaned up / exposed via lil-gui!

[dmarcos]

I love it. Thanks so much for taking the time to open a PR.

[dmarcos]

@winnie1994 have some bandwidth to finish it up for next week?

[winnie1994]

@winnie1994 have some bandwidth to finish it up for next week?

yeah thanks for your patience! Should be ready for review pending final assets : D

[vv4dvv]

@winnie1994 This is a very nice transition effect. I've used other Gaussian libraries before, such as Luma and Real3D, and I was particularly impressed by their LightRadius transition effect between Gaussian splats and point clouds.

If I may ask — would it be possible for our library to support a similar Gaussian-to-point-cloud transition with an aperture-style effect?There is some open-source code available —SplatMeshSwitchDisplayMode `could it be used as a reference?

[mcu13321]

@winnie1994 This is a very nice transition effect. I've used other Gaussian libraries before, such as Luma and Real3D, and I was particularly impressed by their LightRadius transition effect between Gaussian splats and point clouds.

If I may ask — would it be possible for our library to support a similar Gaussian-to-point-cloud transition with an aperture-style effect?There is some open-source code available —SplatMeshSwitchDisplayMode `could it be used as a reference?

I’ve noticed a similar point-cloud-to-Gaussian transition effect in an After Effects plugin (Gaussian Splatting) and wanted to experiment with achieving this in Spark as well.

Currently, it’s possible to approximate a point-cloud look by setting sparkRenderer.maxPixelRadius = 1.0. However, I haven’t found a way to dynamically adjust sparkRenderer.maxPixelRadius within the dyno rendering pipeline based on values like Gsplat.center.y. This makes it difficult to create a smooth Gaussian-to-point-cloud transition effect.

[asundqui]

Hi @vv4dvv and @mcu13321 Spark can definitely do what you're describing! The right way to do it is to use the Dyno system: https://sparkjs.dev/docs/dyno-overview/

Specifically, for what you're trying to achieve, I would take your SplatMesh in Spark and assign a worldModifier to edit the Gsplat based on center.y or anything you want. So for example:

const mySplats = new SplatMesh({ url: "splats.ply" });
mySplats.worldModifier = makeMyModifier();
mySplats.updateGenerator();

Next, you have to create makeMyModifier(), which should return a Dyno that takes a Gsplat as input and outputs a new modified Gsplat as output. Maybe the simplest example you can start with is here:

spark/examples/glsl/index.html

Line 80 in b454b36

butterfly.objectModifier = dyno.dynoBlock(

You can see how the time variable t is passed in and allows you animate it. And you can just write normal GLSL code to do whatever you want, so in your case you maybe you set ${output.gsplat}.scales = vec3(0.001); or something to make them tiny. Or you can create a new variable fadeAmount that you can modify from your Javascript... like maybe you vary it from 0..1. Then you can set ${output.gsplat}.scales = mix(vec3(0.001), ${output.gsplat}.scales, ${input.fadeAmount]); so you can smoothly transition from "normal scale" to "point size scale".

I hope that helps! It should be really easy to do what you want in Spark with very little code. It might be tricky the first time you do it to get everything right, but feel free to also join our Discord and ask for help there!

[mcu13321]

Thank you for your reply!

I found an example shared by @gradeeterna in the Discord community (https://spark-reveal.gradeeterna.com/), where they implemented an reveal effect. After studying their example and combining it with the approach you suggested, I was able to achieve the effect.

Really appreciate the help from both of you!

20250806-114012.mp4

[asundqui]

I found an example shared by @gradeeterna in the Discord community (https://spark-reveal.gradeeterna.com/), where they implemented an reveal effect. After studying their example and combining it with the approach you suggested, I was able to achieve the effect.

Amazing, I'm glad you were able to get it working so quickly!!

[dmarcos]

Thank you for your reply!

I found an example shared by @gradeeterna in the Discord community (https://spark-reveal.gradeeterna.com/), where they implemented an reveal effect. After studying their example and combining it with the approach you suggested, I was able to achieve the effect.

Really appreciate the help from both of you!

20250806-114012.mp4

Awesome. Would you like to contribute the effect to the example collection?

https://github.com/sparkjsdev/spark/blob/main/examples/splat-reveal-effects/index.html

[mcu13321]

Thank you for your reply!
I found an example shared by @gradeeterna in the Discord community (https://spark-reveal.gradeeterna.com/), where they implemented an reveal effect. After studying their example and combining it with the approach you suggested, I was able to achieve the effect.
Really appreciate the help from both of you!
20250806-114012.mp4

Awesome. Would you like to contribute the effect to the example collection?

https://github.com/sparkjsdev/spark/blob/main/examples/splat-reveal-effects/index.html

Yeah, sure!

However, this effect was made possible based on the shader code from @gradeeterna’s example (https://spark-reveal.gradeeterna.com/). I studied their code and made some modifications, so I think we should first get @gradeeterna’s consent before contributing it to the example collection.

[dmarcos]

@mcu13321 yeah. we’ll definitely credit in code, release notes. If you can open a PR to move things along

@gradeeterna what do you think?