Jump to content

procedural textures question


Recommended Posts


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:
as well as checked the playground example.

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.


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:


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)


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


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


Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites


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


Screen Shot 2017-12-06 at 4.29.04 PM.png

Link to comment
Share on other sites

  • 8 months later...
  • 3 weeks later...

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