[WIP] Example for extending materials

[pailhead]

I've copied over the instancing lambert example and tried to make it work on various materials. The focus of this example is not instancing by itself (its a very simplified example) but for extending materials.

I was unable to make it work with MeshToonMaterial though:

http://dusanbosnjak.com/test/webGL/three-materials-extended/

[WestLangley]

Sweet. Well-done, and informative.

[pailhead]

Thank you, ill clean it up a bit. Leave the giant comment? The most important thing i wanted to outline are the "discrete steps" meaning, vertex transformation is a different thing from normal transformations. What should this be called?

[mrdoob]

What does this example show that the one introduced in #14012 doesn't? 🤔

[pailhead]

How to write arbitrary extensions for arbitrary materials in 3rd party applications? Not sure how #14012 relates. 🤔 @WestLangley you're welcome to share what you liked about this?

[WestLangley]

@WestLangley you're welcome to share what you liked about this

I considered this to be an informative experiment that is beneficial to the other contributors who are trying to understand the issues involved in extending materials. These kinds of experiments are helpful when making design decisions. They are particularly helpful in identifying design limitations.

I have not considered this WIP as something to be added as an example. We should only include in the examples coding patterns we recommend users to follow. I think we are still trying to figure that out.

[pailhead]

Hmmm, as an example it's more at odds with:

https://threejs.org/examples/?q=modified#webgl_materials_modified

I think i disagree with you @WestLangley on the meaning of this as a pattern. I don't think that contributors should be using this as a pattern of contributing. IE. three should have no core features that rely on shader extensions.

It could be used for prototyping and testing:

• instead of modify core, npm run build and refresh, you can modify example and refresh (without the build)
• you can test the current structure of the shaders and decide if they need to be refactored(@mrdoob doesn't want to do any modifications to the current system though) but for example, instancing could first be prototyped with an extension, and then included in the core like most other stuff behind a preprocessor directive.
• in a 3rd party app, if you want to make a modification to the decision three contributors made, you can opt out and replace it with your own (for example how matrices are handled for instancing, if three only does one thing)

Good examples are your recent object space normal maps. Say you weren't sure about the convention. It wouldn't have to be a core feature immediately, it could be an extension example until some requirements are met - "is this a good place for it", "is this the right api", "are these the right assets" etc.

With instancing, it can get pretty complex if you consider various optimizations, are matrices baked, are they computed, should some of the current shader structure be refactored to better accommodate instancing or not. All of these considerations can slow down the progress of a feature. As is #10750 is still unavailable, and i believe it's because of some of these choices/considerations. Because it's not available for use, it's hard to tell if the current solution is good or not, so it's hard to asses these choices.

This can be mitigated by something like this https://www.npmjs.com/package/three-instanced-mesh, but the code in that module is not up to the best practices and standards, because it's monkey-patching three.js on the fly. With more of these extensions in "staging" one could have a clearer picture of bigger overview of the landscape. This could indicate areas that need refactoring in the current chunk system, or even in future systems. At least that's how i imagine this should work , could be totally wrong :)

tl:dr; if there is only to be one example of shader extensions now, or for a while, would it make sense to add instancing to this

https://threejs.org/examples/?q=modified#webgl_materials_modified

[WestLangley]

Sorry, @pailhead, I have tried and tried, but I have a very difficult time comprehending your posts. Consequently, I have nothing else to add because I do not understand what you are trying to say.

So sorry...

[pailhead]

Lol no worries. In short, do not look at this when developing threejs. Possibly combine with materials modified example (don’t compare to lambert instancing).