igitz

procedural textures question

Recommended Posts

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.

Share this post


Link to post
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.

Share this post


Link to post
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:

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

 

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.