This article talks about procedural textures in WebGL and how Babylon.JS can help you using and creating them.

This feature is part of the Babylon.JS v2.0 release. Read more about it here : http://blogs.msdn.com/b/eternalcoding/archive/2015/02/18/what-s-new-in-babylon-js-v2-0.aspx

Feel free to contact me on twitter (@meulta) to ask me any question about this article.

What are Procedural Textures ?

clip_image002

In classic texturing, we use 2D images, often pictures that have been shaped specifically to match an object. Let’s imagine you are creating a medieval fantasy game, working on a dwarf pub, where there are multiple, big, “old school” wooden tables.

With classic 2D texturing, you have 3 choices:

  • Create a single texture and use it on all of the tables (but every table is going to look the same)
  • Create a collection of various wood textures and apply them randomly to each table
  • Create a separate texture for each table, insuring that they each look different

No choice seems to be a good one. Enter procedural textures.

Procedural texturing is a way to programmatically create a texture.

There are 2 types of procedural textures: code-only, and code that references some classic 2D images, sometimes called ‘refMaps’ or ‘sampler’ images.

One main advantage of procedural textures is that they are written using a fragment shader (using GLSL in the case of Babylon.js). That means that the code generating the texture is executed by the GPU and not the CPU (that is to say, NOT executed in JavaScript code). This has a huge performance impact in a positive way because in WebGL, JavaScript/CPU time is a critical resource: the more is done by the GPU, the better.

Procedural textures can be generated only once to create the texture which is put into cache or every 1, 2, 3, or 4, or more frames to be able to create an animated texture (like fire).

You can get more information about procedural textures here : http://en.wikipedia.org/wiki/Procedural_texture

 

How to use standard procedural textures in Babylon.JS ?

Like any other feature in Babylon.JS, the best way to test procedural textures (PT) is to use our playground (http://www.babylonjs-playground.com).

You can find a full sample using all standard procedural textures under the Custom menu :

clip_image003

Using a procedural texture is done the exact same way it is done for classic textures.

You first have to create a Material object, attached to the current scene :

var marbleMaterial = new BABYLON.StandardMaterial("marbleMat", scene);

Then you create the PT using one provided by default, or one you created yourself :

var marbleTexture = new BABYLON.MarbleProceduralTexture("marbleText", 512, scene);

Finally, you have to set the material associated to the mesh you want to apply the texture to :

square.material = marbleMaterial;

The result in this case is a random marble texture :

clip_image005

If you want to see the whole code and play with it, you can go there : http://www.babylonjs-playground.com/#1XPCZC#3

You will also see that some procedural textures have additionnal custom properties. For the marble PT, you can set the number of tiles you want to generate in height and width. Default is 3 but you can go far more than that :

marbleTexture.numberOfTilesHeight = 6;
marbleTexture.numberOfTilesWidth = 6;

clip_image007

There are a lot more standard PT available by default with Babylon.JS like Fire, Wood or Road.

clip_image009 clip_image011

 

How to create a custom procedural texture in Babylon.JS ?

As I told you earlier, a procedural texture is an image generated by the GPU using a pixel shader.

If you do not know what a Pixel Shader is I recommend you read this great article by my friend David Catuhe : http://blogs.msdn.com/b/eternalcoding/archive/2014/04/17/learning-shaders-create-your-own-shaders-with-babylon-js.aspx

Basically : it is a piece of code that will be called for each pixel the GPU need to render on a specific surface. The syntax is close to C and it always contains at least the main function. The role of this function is to define the color for the current pixel using the gl_FragColor variable.

Here is a really simple sample where we use the pixel position in the texture (vUV.x / vUV.y) to define the pixel color :

#ifdef GL_ES
    precision highp float;
#endif
varying vec2 vUV;
void main(void) {
    gl_FragColor = vec4(vUV.x,vUV.y,-vUV.x, 1.0);
}

This will result in a beautiful gradient :

clip_image013

The main difficulty when creating PTs is that in the pixel shader code, you only know the current pixel you need to choose a color for. You do not have access to the other pixel colors. So you need to use simple and complex algorithm to generate what you want such as the FBM one : http://en.wikipedia.org/wiki/Fractional_Brownian_motion.

You can find a lot of samples on https://www.shadertoy.com/

So now : How can you create a custom procedural texture that use this Pixel Shader ?

You have to 3 solutions :

  • Embed this pixel shader in the JavaScript code using the ShaderStore
  • Store the shader as a Dom Element in your HTML code
  • Use a file based custom PT

How to embed the pixel shader in the store ?

This can be done easily using the BABYLON.Effect.ShaderStore array :

BABYLON.Effect.ShadersStore["LinesPixelShader"] =
    "#ifdef GL_ESn" +
   "precision highp float;n" +
    "#endifnn" +
    "varying vec2 vUV; n" +
   "void main(void) {n" +
    " gl_FragColor = vec4(vUV.x,vUV.y,-vUV.x, 1.0);n" +
    "}n" +
  "";

Note that your shader name should be suffixed with PixelShader as the procedural texture shader is always a pixel shader. Babylon.JS will automatically understand it is a pixel shader.

To use this shader, you just have to create a CustomProceduralTexture and put the name of your shader in the store. Note that the name of the Shader does not contains the “PixelShader” part as when defined in the store.

var customProcText = new BABYLON.CustomProceduralTexture(
    "customtext", 
    "Lines", 
    1024, scene);

You can find and play with a full sample in the playground : http://www.babylonjs-playground.com/#1XPCZC#5.

What is a file based Procedural Texture and why to use it ?

Until now we only used code generated textures. All standards PTs are done this way so you do not have to get images or some other resources for it to work.

When you want to create a PT which is using one or more images and/or you want to package this PT to share it with the community, it is a good idea to create a file based one.

A file based PT is a folder containing at least two files :

  • config.json
  • custom.fragment.fx

The config.json file reference the files needed by the texture and the parameters if any. The fragment file contains the shader code.

To use it, specify the folder path instead of the Pixel Shader name :

var customProcText = new BABYLON.CustomProceduralTexture(
    "customtext", 
    "./textures/customProceduralTextures/land", 
    1024, scene);

Find the full code here : http://www.babylonjs-playground.com/#1XPCZC#4

In this sample we use to textures (dirt and grass) and mix them using an FBM algorithm to create a random ground.

clip_image015

Want to go further ?

Now that you know the basics, the next step is to read the whole procedural texture documentation on the Babylon.JS wiki : https://github.com/BabylonJS/Babylon.js/wiki/How-to-use-procedural-textures%3F

Then, play with it on the playground or on your own code. I would love to hear feedback from you !

And do not hesitate to share your creation on the forum : http://www.html5gamedevs.com/forum/16-babylonjs/.

A lot of people will be happy to use your textures !

Feel free to contact me on twitter (@meulta) to ask me any question about this article.