model-viewer-effects without examples, for custom effects?

[adamwolf]

Hi folks!

I'm working on a custom effect. I've got it working hacked together (https://www.atomwolf.org/posts/rendering-outlines-with-a-post-processing-shader/) but I'd like to package it up nicely.

It depends on model-viewer, of course, but also model-viewer-effects for the effects composer and such. However, much of the download size of model-viewer-effects is example effects. For giggles, I commented out most of src/model-viewer-effects.ts, threw it into vite, and saved hundreds of kilobytes, IIRC. (Enough for me to care, I guess, but of course everyone has their own thresholds.)

I'm not really "in the JavaScript scene" so I don't know how this typically goes, and I'd really appreciate any thoughts.

• Does it make sense to have a trimmed model-viewer-effects that doesn't include examples? Is that silly?

• Is it something I should do alongside my custom effect, rather than here? (My first gut feeling is no, as it'd be just another way to be out of date, but that's just a thought.)

• Beside a module with just the custom effect, does it make sense for me to include an all-in-one bundle with model-viewer, model-viewer-effects (trimmed up, maybe), and the custom effect? Is that something that anyone who cares about would just make on their own? (I guess I'd have to look at licensing but I'm not too picky about which open source license I put the custom effect code under, if it makes things easier.) I don't really have a grasp on the different types of users of model-viewer and what they're comfortable with.

Thanks, folks!

[elalish]

Good question - I'm constantly trying to understand the various ways users consume this library and which sizes they care about. In general, I tend to assume most folks are using our npm bundle (or doing a similar bundling / tree-shaking process themselves). Which download size of model-viewer-effects are you referring to when you say you saved hundreds of kb? model-viewer-effects.min.js is only 245kb unzipped: https://bundlephobia.com/package/@google/model-viewer-effects@1.4.0

So, to answer your questions, I'll need to know a bit more about how you use and consume these libraries and where the binary size bottlenecks are. Are you interested in contributing your custom effect as an example here, or would you prefer it in your own repo?

[adamwolf]

Let me take a look at the bundle analysis again--this may be me misremembering or misinterpreting things, or maybe I wasn't looking at the minified bundle or something.

I don't mind contributing the effect here, but I have a feeling I'll be tweaking the shader behind it for a bit, and maybe outside of the repository would be better? (The current shader works "ok", but I know if someone tried and was diligent it could be much better.)

I think we could totally use a custom effect example, though, and maybe we come up with some silly effect that's simpler to explain and include in the docs?

• Would it be too confusing with color grading things if it had three attributes and filtered R/G/B? Rig up three sliders to the html component, and then pass them all the way through to the shader?
• What about a depth filter, that only rendered things up to some depth? We could rig up a slider to that, too.

Would you prefer the sample component use LitElement, or should it be completely vanilla?

[elalish]

I'm not going to be picky when someone's offering to contribute an example. As an actual user of the feature, I trust you to have a good sense of what would be most beneficial to a new user. I look forward to seeing whatever you come up with.

[adamwolf]

After I went back and looked at it--there's no need to provide a version without the built-in effects. I'm not sure what I was doing before, or if I just misread something. Once it's minified and compressed, the effects are very small compared to things like Three.js.

I whipped up an example custom effect and wrote some docs. I tried to keep a tone of "here's an example and some pointers, but you're going to need to figure out some of this on your own". I'd guess that super detailed docs here might imply a different level of support.

If you think we could edit it into something reasonable for the model-viewer-effects docs, that would be awesome.

If you have any other feedback, I'd love to hear it. Thanks for everything you've done for model-viewer over the years!

[elalish]

That's great, thanks. It would need be something a little more interesting than hello world to go on our example pages - we generally want to demonstrate something useful for a problem. However, I think your write-up is quite helpful - perhaps we should just link to your repo from our docs? Feel free to send a PR.