solved procedural textures question

[igitz]

Hi,

I’m new in Babylon.js, and trying to use it to create geometry that has animated vertices and an animated procedural texture.

I’m animating the vertices in the vertex shader.

For the procedural texture, I tried to follow the instructions:
https://doc.babylonjs.com/how_to/how_to_use_procedural_textures
as well as checked the playground example.
https://www.babylonjs-playground.com/#24C4KC#17

the problem with the example is that i can’t really find a complete implementation with the shader/config.json files.

And i have a couple of basic questions as well.
When creating a custom procedural texture with an external folder with the config.json and custom.fragment.fx files, is that the only fragment shader that can be used in the scene?
Or can a BABYLON.ShaderMaterial be used additionally?

I'm having a hard time grasping the concept of a ’fragment shader’ procedural texture VS a fragment shader as the last step of the webgl pipeline.

Thanks.

[Pryme8]

a procedural shader is just a custom Shader with certain set properties to make it easy to initialize.  All you need to do is focus on  BABYLON.ShaderMaterial if you are looking to make a custom procedural texture.  With that you will need to learn glsl so I would mess with some shadertoy.com or Babylon CYOS till you get a grasp on how to make things happen/debug.

[igitz]

Thanks for the response,

I'm a bit confused then, since BABYLON.CustomProceduralTexture does not mention BABYLON.ShaderMaterial at all.

https://doc.babylonjs.com/how_to/how_to_use_procedural_textures

glsl i am more familiar with, i have used it a few times when coding with webgl, it is Babylon that is completely new to me.

[Sebavan]

The easiest is to follow one of the samples like wood:

1. Create a folder under like wood.

2. Create your procedural texture code in typescript in the new folder:

https://github.com/BabylonJS/Babylon.js/blob/master/proceduralTexturesLibrary/src/wood/babylon.woodProceduralTexture.ts

As you can see, it inherits from ProceduralTexture as they all have a common base which is drawing to a full screen quad. (your texture)

3. Add your custom fragment shader (the vertex being the same all the time to draw a full screen quad it is handle in the base class)

4. Reference your new files in config.json (basically descring the shader and ts dependencies)

https://github.com/BabylonJS/Babylon.js/blob/master/Tools/Gulp/config.json#L1365

5. Create your demo and test page in the test folder of the procedural lib:

https://github.com/BabylonJS/Babylon.js/blob/master/proceduralTexturesLibrary/test/addWoodPT.js

6. Reference it in the GUI of the test page: https://github.com/BabylonJS/Babylon.js/blob/master/proceduralTexturesLibrary/test/index.js

and you can build with gulp proceduralTexturesLibrary in the babylon/Tools/Gulp folder

and run/watch with gulp run under the same folder.

It sounds like a lot of steps but it is all tiny ones so no worry

 

[igitz]

thanks @Sebavan, it does sound like a lot of steps but i'll try to figure it out.

however, what is confusing still is, if i can achieve what i want with BABYLON.ShaderMaterial as @Pryme8 mentioned (which seems to be true from what i have tested, for example by creating an animated texture directly in my fragment shader and applying it using the uv coordinates i pass), then what is the need for CustomProceduralTexture?

[Pryme8]

I think it needs a json file and actual fx files. Instead of using shaderstore but Im not too sure honestly.

[Sebavan]

These are different tools.

Shader Material is helpfull to create a shader that you apply to different geometry like standard and pbr can be used for every mesh.

Procedural texture on the other hand is meant to help creating textures (it is always generating a quad ) filled with color. You can then use it as an input of the material via a texture channel.

Imagine you would like a psychedelic texture on a tshirt but still wants lighting shadows and other greatness from the standard mat. you can first create a psychedelic procedural texture and then use it as the diffuse channel of the standard material.

Hope that helps.

[Pryme8]

Ahhh ok, so a Procedural texture is making a hidden canvas element that is used like an image that is sampled by a shader vs just using glsl on the fragment to create procedural shading on a model.

 

[Sebavan]

Yep they are in fact rendertarget texture where a full screen quad is used so you provide a fragment only to fill in each texels color.

[igitz]

thanks, things are getting clearer now. the psychedelic t-shirt example is on point as well. what i'm still unsure of is, can these be combined?

meaning.. can the psychedelic procedural texture be the texture of a ShaderMaterial so that the shader material also affects let's say the t-shirts vertices in its vertex shader?

[Pryme8]

Simple awnser, yes.

[Sebavan]

yup you simply use it as any other samplers.

[igitz]

great, i will definitely test that, thanks for the clarification.

[igitz]

Update:

i'm using the file based Procedural Texture method that is described in the documentation and i have the files "config.json" and "pt00.fragment.fx".

the files are in the same folder (here i called that folder proceduralTextures) so my texture is:

var customProcText = new BABYLON.CustomProceduralTexture("custom", "./proceduralTextures/pt00", 1024, scene);

What i have seen, is that i get the following error:
GET http://localhost:8888/../../../../BabylonProjectFolder/proceduralTextures/pt00/config.json 404 (Not Found)
No config file found in ./proceduralTextures/pt00 trying to use ShadersStore or DOM element

i was not sure why the config.json is expected to be in that directory, so i created the directory to test it. you can see my folder structure in the screenshot.

using this new folder structure i got rid of the first error, but still get No config file found in ./proceduralTextures/pt00 trying to use ShadersStore or DOM element.

Now the weird part:

It seems like everything is working fine, i can use the texture and modify it in the .fx file, but the config.json is actually not doing anything. Having an empty config.json has the exact same result.

plus, i found the same "No config file found" error in this playground example http://www.babylonjs-playground.com/#1XPCZC#5 by https://meulta.com/en/2015/02/22/procedural-textures-in-webgl-with-babylon-js/.

ideas on what's going on...?

 

[dreinzy]

Sorry for the post necromancy, but did you ever figure this one out @igitz? I'm having the same issue.

[igitz]

hi @dreinzy, it's been a while so I would have to check my project files from then and see how far I got. Are you referring to the initial post or the last one (config..)?

[dreinzy]

I was getting the same 404 error from your last post. Wasn't sure how to structure the folder or where to put the json/fx files.

Have since got the effect I was looking for by manipulating uv values, so no worries. Thanks for responding.

[igitz]

ok no problem, i think I also got the results i wanted back then, but i'm not sure if i ever resolved the json error, or if i used any json file at all.