Jump to content

Any GLSL shader in Babylonjs?


lagauche
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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 

 

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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 

 

 

 

Link to comment
Share on other sites

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

 

Screenshot (48).png

Link to comment
Share on other sites

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 

 

 

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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