solved Any GLSL shader in Babylonjs?

[lagauche]

Hey All,

Can I use any GLSL fragment or vertex shader (including 3d raymarching stuff) as a texture in Babylonjs including animated ones? I've done some google searches and I know you can use some, but what are the limitations?

For example could I put any animated texture from GLSL Sandbox http://glslsandbox.com/ onto a Babylon.js plane mesh? Do I need to put the uniform variables in the render loop for animation to work?

Super hoping the answer is yes, but any and all info will be helpful?

[lagauche]

Any idea why the official shader material guide playground isn't working?

http://www.babylonjs-playground.com/#NCY1Q#1

 

 

[Hersir]

I got error on your playground 

[Warning] [blocked] The page at https://www.babylonjs-playground.com/#NCY1Q#1 was not allowed to run insecure content from http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Babylonx.ShaderBuilder.js.

 

[MarianG]

Hi, I think ShaderBuilder is deprecated, but you can use https://doc.babylonjs.com/how_to/shader_material instead
And yes, you can use variables from shader in the renderer loop, like here :https://www.babylonjs-playground.com/#0CUISJ#0

[lagauche]

Thanks for the links!

[lagauche]

I'm having a few issues right now using shaders with images.

I have a javascript variable for my uniforms like this:

var tuniform = {
        iGlobalTime: { type: 'f', value: 0.1 },
        iChannel0: { type: 't', value: new BABYLON.Texture("/textures/cloudsPo2.jpg", scene) },
        iChannel1: { type: 't', value: new BABYLON.Texture("/textures/internalFlesh1024Po2.jpg", scene) },
}

Am I doing this wrong?

I converted it from Three.js where this, for example, works

iChannel0: { type: 't', value: new THREE.TextureLoader().load( 'textures/cloudsPo2.jpg') },

it would be very hard for me to convert this to a playground. Hopefully it's possible to see what I'm doing wrong without. I'm just wondering how to get that image loaded.

[MarianG]

var amigaMaterial = new BABYLON.ShaderMaterial("amiga", scene, {
        vertexElement: "vertexShaderCode",
        fragmentElement: "fragmentShaderCode",
    },
    {
        attributes: ["position", "uv"],
        uniforms: ["worldViewProjection"]
    });
    

and now you can set 

amigaMaterial.setFloat("iGlobalTime", 0.1);
amigaMaterial.setTexture("iChannel0",  new BABYLON.Texture("/textures/cloudsPo2.jpg", scene));
amigaMaterial.setTexture("iChannel1",  new BABYLON.Texture("/textures/internalFlesh1024Po2.jpg", scene));

 

[Sebavan]

This is also an interesting read if you intent to create your own materials: https://www.eternalcoding.com/?p=263

Else you have 2 approaches: ShaderMaterial or ShaderBuilder .

Main diff is ShaderMaterial will help with your own shader whereas ShaderBuilder will better help customizing the default behavior of BJS and is maintained by @NasimiAsl as an extension.

Following on @bulisor sample, you might also need to precise the uniform in the uniform list of the new ShaderMaterial line.

[MarianG]

I understood @Sebavan , but can you please explain me when it's require to precise the uniform in the uniform list and when it's optional, because I saw a lot of playgrounds without it. Thank you. 

On 24.11.2017 at 4:48 AM, lagauche said:

Any idea why the official shader material guide playground isn't working?

http://www.babylonjs-playground.com/#NCY1Q#1

 

 

As @lagauche said, ShaderBuilder  seems to not work.

 

[lagauche]

@bulisor thank you for that code! I am going to try it this afternoon!

[NasimiAsl]

shader Builder is work fine in any sample but you need add BABYLONX.shaderbuilder.js too

 also and it is complicated and optimized  

[NasimiAsl]

http://www.babylonjs-playground.com/#NCY1Q#3

uniform sample

http://www.babylonjs-playground.com/#NCY1Q#4

you can use default uniform for set general uniform like ( camera - time - ... )by this

http://www.babylonjs-playground.com/#NCY1Q#5

and you can manage you multi material by one shader too

http://www.babylonjs-playground.com/#NCY1Q#6

http://www.babylonjs-playground.com/#NCY1Q#8 vertex control

you can set 20 diffrent material in one and manage it by flagUp and flagDown

docs : http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html

* note sample damaged in github 

 

[Sebavan]

@bulisor The uniform list needs to be filled before the Effect is prepared (time when the shader is built and the associated uniform location are cached). This happens the first time we are using the material. (draw call requiring to use the shaderProgram)

Calling setFloat/setTexture/... on the material will push the uniform into the names list (the same one as the constructor).

So as long as the set method are called before drawing the next frame where the material is in use it is ok.

[MarianG]

Thank you guys, really helpful as usual.

[lagauche]

11 hours ago, NasimiAsl said:

@NasimiAsl

Do you have any examples where you use a longer or more complex fragment shader? The examples you linked are very cool but they're simple image textures. I'm wondering if you can use crazy stuff like this or any others from glslsandbox or shadertoy:

http://glslsandbox.com/e#43700.0 

http://glslsandbox.com/e#43801.0

http://glslsandbox.com/e#43701.0

Quote

http://www.babylonjs-playground.com/#NCY1Q#3

uniform sample

http://www.babylonjs-playground.com/#NCY1Q#4

you can use default uniform for set general uniform like ( camera - time - ... )by this

http://www.babylonjs-playground.com/#NCY1Q#5

and you can manage you multi material by one shader too

http://www.babylonjs-playground.com/#NCY1Q#6

http://www.babylonjs-playground.com/#NCY1Q#8 vertex control

you can set 20 diffrent material in one and manage it by flagUp and flagDown

docs : http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html

* note sample damaged in github 

 

 

 

[lagauche]

@bulisor

I'm trying out your code but I'm still getting an error in console that says Source map error: TypeError: NetworkError when attempting to fetch resource: Source Map URL: babylon.textureTools.js.map

What am I missing? Is this an extension I need to add that is not including with babylon max?

[lagauche]

Here is a playground with my code. I think I am getting close. I'm new to the playground so unfortunately this code is broken on it, but at least you can see what I'm doing : ) http://www.babylonjs-playground.com/#NCY1Q#14

edit: It's now working:

https://drive.google.com/open?id=1SwhYyYoxZcwDhwh_qiuoBlEMBXdeQWy0

I was unable to load the images in firefox using just drag and drop of my index.html (no local server). I needed a local server to load images! This is a bug or by design in babylon.js because it works fine with THREE.js

 

[NasimiAsl]

7 hours ago, lagauche said:

Do you have any examples where you use a longer or more complex fragment shader? The examples you linked are very cool but they're simple image textures. I'm wondering if you can use crazy stuff like this or any others from glslsandbox or shadertoy:

hi thanks to reply

i try more to make useful tools and samples  (just personal opinion) so in shaderBuilder (if you know math) you can make all shader Easier than glsl 

http://www.babylonjs-playground.com/#NCY1Q#16 - night sky 6 line 

but if you like see some complicated new technic you can try this samples

http://www.babylonjs-playground.com/#2LAQZC#25 - morph control fully in gpu side

http://www.babylonjs-playground.com/#2LAQZC#20 

 

 

[MarianG]

@NasimiAsl you're definitely the master of the shaders, and I bet you're an alien or something like that 

I'm happy to hear that @lagauche.

[NasimiAsl]

alien Duplicate it too fast but i am alone (in my country) i prefer "reddik"

i think i am so bad in documentation need fix myself