ShaderMaterial on a StandardMaterial

[darcome]

Hi everyone!

Is it possible to apply a shaderMaterial on a StandardMaterial?

 

I mean... I have a StandardMaterial with some properties like reflections and fresnel to whom I'd like to apply a wave shader effect...

 

How can I do it? As far as I've seen, to use a ShaderMaterial you must use a texture and I cannot give the fresnel effect or reflection to a texture

 

Thanks in advance for any help

[GameMonetize]

That's not easy task: you have to reuse the pixel shader of the StandardMaterial:

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Shaders/default.fragment.fx

 

and change the vertex shader:

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Shaders/default.vertex.fx

 

(You have to add wave in this one)

[darcome]

It seems pretty hard...

 

But I'll give it a try.

 

Can you give me some hints on how to proceed?

[GameMonetize]

The best idea could be to inherit from StandardMaterial and just change the isReady function to change which shaders are used:

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Materials/babylon.standardMaterial.js#L327

[darcome]

Hello Deltakosh!

 

I tried to do what you said, but unfortunately the shaders works only in the first step.

 

Then, even if I change the time variable, the effect doesn't work

 

What did I do wrong?

 

In the Shaders.js I copied the .fx files of the default shaders and simply I have changed the vertex shader to work like the one in the CYOS page.

 

The things I changed are surronded by \r\n lines, however they are around line 141 and line 179

 

Here is a link to the test page

 

http://origano.altervista.org/babylon/wave/testwave.html

 

And here a link to the zip, in case you want to download it

 

http://origano.altervista.org/babylon/wave/testwave.7z

 

Thanks in advance for your help

[GameMonetize]

unfortunately you cannot use ShaderMaterial with default.vertex.fx and default.frament.fx They are far too complex

 

Either you replace the original ones with your code and keep working with standardmaterial OR if you want to use ShaderMaterial, this article can help:

http://blogs.msdn.com/b/eternalcoding/archive/2014/04/17/learning-shaders-create-your-own-shaders-with-babylon-js.aspx

[darcome]

But It is exactly what I did.

 

I did inherit from StandardMaterial and I changed the isReady function telling the CreateEffect to use the default pixel shader and the default vertex shader

modified for the wave effect.

 

The problem is that the shader work only for the first frame. After that, the mesh doesn't "wave" anymore

[GameMonetize]

but do you provide the time value? The wave shader expects to receive a time value on every frame

[darcome]

yes, of course!

 

If you could give an eye to the zip, you would see it.

 

I don't understand what is wrong with it

 

Here is the render loop:

var time    = 0;engine.runRenderLoop (function (){	scene.clearColor = new BABYLON.Color4 (0,0,0,0.001);			if (materials.waveBodyWork._effect != undefined)	{		materials.waveBodyWork._effect.setFloat ("time", time);	}				time += 0.2;						scene.render ();});

and in the vertex shader I added these lines:

"uniform float time;\r\n"+

and

"vec3 v = position;\r\n"+"v.x += sin(2.0 * position.y + (time)) * 2.5;\r\n"+"gl_Position = viewProjection * finalWorld * vec4(v, 1.0);\r\n" +

the rest is the default shader

[darcome]

I found what was wrong...

 

in  the isReady function I had to add the "time" variable to the array of samplers of the createEffect function like this:

this._effect = scene.getEngine().createEffect(shaderName, attribs, ["time", "world", "view",

Now, only one question...

 

for future updates of the engine, how do I know if the isReady function of the StandardMaterial has changed, and thus I'll have to update my isReady function?

[darcome]

I was too fast to have found a solution...

 

If I use more than one material I get this error:

Error: WebGL: uniform1f: This uniform location doesn't correspond to the current program.

and I get it if I try to change the time variable with this command:

materials.waveBodyWork._effect.setFloat ("time", time);

Do you have any suggestion?

[Wingnut]

I suggest visiting a forum that talks about shader coding. 

 

Darcome, can I ask what you are trying to do?  (thx)  There might be other options.  For example, earthquaking a texture can be done by firing small random numbers at a texture's .offset, but you probably know that already. 

 

And the PostProcessRenderPipeline can do shaders that blur things, so maybe those blurs can travel across a texture and look like an explosion shockwave, and maybe that method won't get in the way of the default StandardMaterial monster-shader.

 

I am no shader coder, but maybe you can get the wanted effect without needing to keep a custom version of StandardMaterial.prototype.isReady inside your own project code... forever.  There may be "tricks" that can be used to give you the same effect.  If you can describe the USAGE of the effect, maybe others can think-up easier ways to do it.  *shrug*  Be well. 

[darcome]

What I want to obtain is the following:

 

in this link,

http://nissan-stagejuk3d.com/

 

if you launch the application and then try to change the color of the juke, there is a "wave" effect...

 

How can you obtain it with babylonjs?

 

I just asked this question in another thread, but no one answered me, so I did try on my own, with the wave shader effect, but with semi luck

 

Other than the wave effect, the effect itself propagates through the bodywork of the car, but that, i suppose, is another story...

However, thank you for the interest in this question, wingnut

[HugoMcPhee]

I made a wavey ocean effect based on the StandardMaterial by copying the StandardMaterial.js and editing in the vertex shader part of the Wave shader from CYOS.
The project is here , The duplicated StandardMaterial.js is called BABYLON.OceanMaterial.js (you can see BABYLON.OceanMaterial.js through right-clicking the game, and picking "Inspect Element" then going to the "Sources" tab in google chrome)

I copied the standard material because I needed lighting on the waves, bump mapping worked too which was nice.

Although it might make more sense to just make the shaderMaterial using the shaders from standardMaterial (like Delkatosh Suggested)
 

[GameMonetize]

Hum..I need to see it running to help you further. can you share it somewhere with a reference to babylon.max.js ?

[darcome]

Hello Deltakosh!

 

Here is the link fot the html:

 

http://origano.altervista.org/babylon/wave/testwave.html

 

And here is the link for the zip with the project:

 

http://origano.altervista.org/babylon/wave/testwave.7z

 

I don't know what you mean with babylon.max.js, but that is all I an give to you

[GameMonetize]

ok gotcha!

 

This is because you cannot set the effect value at that moment. You have to update standardmaterial object to store the time value and then send it to the effect only during the bind (where all others values are sent as well)

[darcome]

Great Deltakosh!

 

Without your help, I would not have been able to solve this problem!

 

However I solved it using the onBind event of the StandardMaterial

 

Thank you very much!

[Wingnut]

Boy, that is a NICE effect, huh?  Thanks for showing it.  I remember it from your other thread.

 

Now your shader experiments are off and running.  Good deal.  Seems like a big challenge.  Did you offer a ham roast and a 2-Liter Pepsi to the author of that demo and see if he/she would tell you how they did it?  You seem like a really nice person.  Maybe you could sweet-talk your way into some "insider info" 

 

Cool challenge.  Keep us posted.