Custom material in Playground

Hello, I am running into some problems with specular in a custom material. However, to create a repro to demonstrate, I tried spinning up a playground but I am having trouble even just getting the simple material ported over to it.

Could I get a hand getting a custom shader working on the playground?
https://playground.babylonjs.com/#JJ9AIB#5

Thanks!

TypeScript decorators do not work in the playground for one. I tried porting over __decorator and am now getting some different errors. Not sure if this is progress or not:
https://playground.babylonjs.com/#JJ9AIB#7

Welcome aboard!

Do you really need to create a new material by extending PushMaterial? It’s certainly doable but you generally don’t need to do that. You can use ShaderMaterial, CustomMaterial or the NME to create custom materials to some extends.

If you really need to create a new material class, you can look at how it is done for some existing materials in the material library:

Yea, I tried the NME but prefer to have my shaders in code. I also played around with ShaderMaterial before landing on PushMaterial.

The playground example I linked is a direct lift of the simpleShader from the material library that you linked. Seems like lights are not affecting for some reason in the playground?

It seems you did not use the code of SimpleMaterial from 5.0 but from 4.2? It would be better to use the 5.0 code as it will be hard to help with 4.2.

So, I spent a good deal of time trying to wire up lights to the ShaderMaterial which was unsuccessful… It’d be nice if that was just an option. I’m going to need to stick with PushMaterial for now, which gives me the hooks I need and has plenty of reference material (pun intended :slight_smile: ) in the material library.

I did learn a good deal more crawling through the code, and actually figured out my issue that I was trying to repro in a playground to begin with :tada:

However, I am still not able to successfully render a custom material with TypeScript in the playgrounds… I did figure out how to wire things up in Plunker. For anybody else that is interested, here is a link that demos a modified SimpleShader (5.0) with custom specular support:
http://plnkr.co/plunk/gdj9lOLut3aUrL54

ShaderMaterial is really meant for raw shader code and is only a thin layer above such code. If you want to handle lights in your material, maybe you can try to create a node material in the NME?

It does not work for me and I get this error in the browser console:

Hmm, that’s odd. What browser are you using? I testing in Chrome 93, Safari 14, Firefox 78, and Chrome 93 on Android.

It is now working!

2 Likes