Jump to content

ShaderMaterial on a StandardMaterial


Recommended Posts

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

Link to comment
Share on other sites

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



and change the vertex shader:



(You have to add wave in this one)

Link to comment
Share on other sites

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




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




Thanks in advance for your help

Link to comment
Share on other sites

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:


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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"+


"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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.  :)

Link to comment
Share on other sites

What I want to obtain is the following:


in this link,



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 :)

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...