Jump to content

About CustomProceduralTexture and Sprite2D of Canvas2D


Recommended Posts

Hi all,

I want to create a Sprite2D and it's image can make some effect like grayscale.

So I consider using CustomProceduralTexture to implement it.

My pseudo code is like below (the shader is just basic one not grayscale):

let sampleTexture = new BABYLON.Texture("img/sample.png", scene, true, false, BABYLON.Texture.NEAREST_SAMPLINGMODE);
    = "precision highp float;\n"
    + "varying vec2 vUV;\n"
    + "uniform sampler2D sampleTexture;\n"
    + "void main(void) {\n"
    +     "gl_FragColor = texture2D(sampleTexture, vUV);\n"
    + "}\n";

let procedualTexture = new BABYLON.CustomProceduralTexture("custom", "Test", 1024, scene);
procedualTexture.setTexture("sampleTexture", sampleTexture);

let sprite2d = new BABYLON.Sprite2D(procedualTexture, { options... });

Is my idea workable? Or do I need using another ways to implement it?


Link to comment
Share on other sites

Hi all,

I try a case: creating a custom procedural texture and using the texture to apply two Sprite2Ds.

One Sprite2D attaches to ScreenSpaceCanvas2D, the other one attaches to WorldSpaceCanvas2D.

The result is the texture can display at ScreenSpaceCanvas2D but the other one cannot at WorldSpaceCanvas2D.

Here is my sample code at the playground: http://babylonjs-playground.com/#20MSFF#54

So, is there something limitations on showing custom procedural texture at WorldSpaceCanvas2D?



Link to comment
Share on other sites


i think you have a hard time trying and you 3hours away, from a breakthrough. once you did so, you will become a master. so i dont want to stop you, for now.

just a hint: you got no texture! 

the reason its working on spacecanvas is 


Note : when using ShaderStore or DOM Element shader for custom procedural textures : the config.json file is not needed anymore and you can just use setFloat or setVector3 (and so on), and setTexture on the CustomProceduralTexture will give values and Sampler2D to the shader code.

&You have to hack to get a Postprocess on a Mesh, that why its called Postprocess. 

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.

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